이번 블로그 꾸미기는 게시글 댓글이나 방명록의 글을
메신저 말풍선처럼 대화하는 모습으로 꾸미기 입니다.
여기서 포인트는 블로그 주인장의 답글만 방향이 다르도록 하는거에요!
자 그럼 함께 바꿔봅시다
템플릿은 지난번에 이어 [ Odyssey ] 를 사용하겠습니다.
스킨 편집 > 'html 편집' 으로 들어가주세요.
그 다음은 CSS 탭을 클릭
댓글 태그의 CSS를 바꿔야 하니
댓글을 담당하는 태그와 그 태그의 class 명을 알아야해요!
이전 포스팅에서 알려드린 팁을 활용해서
새창으로 블로그를 하나 띄워주시고 F12 - 개발자모드 > 요소 선택 > 댓글 부분을 누르면
댓글의 CSS 클래스명을 알 수 있답니다 (づ￣ 3￣)づ
다른 템플릿을 사용중이신 분이라면
댓글의 클래스명을 이 방법으로 찾아주시면 되겠습니당
아참! 상대방의 답글과 나(주인장)의 답글이 준비되어 있어야
CSS 수정 후 확인 할 수 있습니다!
혹시나 이제 막 블로그를 시작하시는 분들이라 댓글과 답글이 없다면
일단 따라해보시고 추후 확인 및 수정하시면 될 것 같습니다 :)
댓글은 div '.area-reply' 에 ul 태그 '.list-reply' 의 자식으로 li 태그 '.item-reply' 를 가지고 있습니다.
1. 말풍선 모양 만들기
1-1. 둥글한 말풍선 몸체
말풍선 CSS는 쉽게 만들 수 있는 사이트를 참고했어요
댓글 내용의 클래스명은 '.area-reply .box-content .text' 입니다.
빨간 박스 부분을 추가해줄거에요.
이따 꼬리를 만들어줘야 하기때문에 position을 relative로 잡아주시구요.
둥글둥글하게 만들기 위해 border-radius 를 20px 정도로 줍니다.
저는 '1.4em' 으로 줬는데요.
폰트사이즈를 기준으로 한 상대단위(em)와 절대단위(px)의 차이에요
포스팅을 하는 시점과 블로그를 꾸몄던 시점이 달라서..
아마.. 반응형에도 맞추려고 그랬나 싶긴한데, 큰 차이 없으니 둘 중 아무거나 쓰셔도 됩니다!
background-color와 border 색상은 취향껏 바꾸시면 되는데요.
저는 바탕을 하얀색으로 뒀기 때문에 뒷 배경과 구분을 위해 border 에 옅은 회색을 줬어요.
바탕색을 뒷 배경과 다른 색으로 준다면 border에 색상은 안 주셔도 돼요~!
박스와 텍스트 사이 적당한 여백을 위해 padding은 1.0em 정도 줬구요.
box-shadow 는 옵션인데, 소소한 디테일로 주시면 좋습니다 ( ͡~ ͜ʖ ͡°)
순서대로 x축, y축, blur양, blur 크기, 색상이에요.
('#e7e7e794' 는 투명도가 들어간 hex 코드입니다)
자, 그럼 기본 댓글의 둥글둥글한 말풍선 몸체가 완성되었어요~!
1-2. 말풍선 꼬리
다음은 말풍선 꼬리를 만들어줍시다 ლ(╹◡╹ლ)
말풍선 꼬리는 방금 위에서 작업한 class 아래로 새로 작성해줄거에요.
위 내용을 전부 신규로 작성해주시면 됩니다!
몸체였던 '.area-reply .box-content .text' 에 가상요소인 ':after'를 붙인건데요.
뾰족한 말풍선 꼬리는 딱히 내용이 있는 태그도 아니고,
몸체에 함께 그리기엔 어려움이 있어요.
그래서 가상요소를 이용해 그려줄거랍니다!
한참 웹 디자인 기능사 자격증을 준비하면서,
float 속성을 정리시키기 위해 썼던 기억이 있는데.. 또 만나네 ㅎㅎ..
내용이 없는 가상요소기 때문에 content를 '' 공란으로 두고요.
position을 absolute로 둬서 아까 몸체(relative)를 기준으로 배치되게 할거에요.
left 는 0, top 은 중앙이 되도록 50%
border 에 두께를 주고 border-left, border-top 엔 0을 줘서 삼각형 모양이 되도록 해줍니다.
margin-top과 margin-left 로 위치를 더 조정해줬어요.
그러면 말풍선 꼬리까지 완성!
2. 블로그 주인 댓글 말풍선 방향 바꾸기
말풍선으로 만드니 어느정도 메신저의 느낌이 나죠?
하지만 메신저는 상대방과 본인이 쓴 글의 방향이 서로 반대잖아요.
그래서 답글에서는 마치 그게 하나의 대화방인 것처럼,
상대방과 주인장의 답글이 반대 방향이 되도록 만들어줄거에요.
맨 처음에 댓글의 class 구조를 봤을 때 댓글은 '.item-reply' class를 가지고 있었죠?
여기서 일반인과 관리자(주인장) 일 때 추가로 가지는 class 명이 다른데요.
주인은 '.rp_admin' 을, 일반 사용자는 '.rp_general' 을 가지고 있습니다.
2-1. 주인 말풍선 색상 변경
1번에서 썼던 class를 그대로 복붙하되, background 색상과 border 색상, 위치만 바꿔줄거에요.
위에서 했으니 설명하지 않아도 괜찮겠죠?
2-2. 주인과 상대방 말풍선 위치 정렬
다음은 답글에서 상대방은 왼쪽, 주인은 오른쪽 정렬이 되도록 해줄거에요.
그러기 위해선 신규 작성이 필요한데요.
주인은 '.rp_admin', 일반 사용자는 '.rp_general' 이었던 걸 이용할거에요.
기존에 있던 '.area-reply .list-reply-comment .item-reply' class 를 지워주시고
위 내용을 신규로 작성해주시면 됩니다 (๑•̀ㅂ•́)و✧
기왕이면 비슷한 class 들이 모여있을 수 있도록 기존에 있던 자리에 작성해주세요.
이때, 주의할 점! ⚠ '.item-reply.rp_general' 띄어쓰기 없이 붙여쓴다는 점!
그리고 바로 그 윗쪽에 있는 '.area-reply .list-reply-comment' class 에서 수정해줄 게 있어요.
바로 margin, border-top, border-bottom 을 주석처리 해주는 것입니다.
댓글 사이사이에 구분선이 생겨서 메신저 대화방 느낌이 안 나더라구요~
padding 도 상단 부분을 줄여서 붙어 있게 했어요(40px -> 20px)
추가로 주인의 댓글 정렬을 오른쪽으로 옮기면서
수정하는 점3개 버튼이 프로필에 묻히게 되는데요.
이 부분은 '.area-reply .list-reply-comment .box-modfy' 에서 right 속성을 주석처리 해주면 됩니다.
✨ 그래서 완성된 말풍선 댓글! ✨
이렇게 댓글도 꾸며봤는데요.
방명록도 같은 class를 가지기 때문에 함께 바뀌어 있을거에요~!
이미 꾸미고 나서 포스팅으로 남겨야겠다 싶어서 쓰는데다
꾸미고 시간이 흘러 포스팅을 작성해서.. 수정했던 CSS들을 모두 적었는지 모르겠네요.. (☍﹏⁰)
혹시나 그대로 따라했는데 다른 점이 있다거나
더 좋은 방법, 여기서 추가하면 좋은 것들이 있다면 댓글 남겨주세요~! :)
도움이 되셨나면 공감 하트도 꾹 눌러주시면 감사하겠습니다 (ﾉ´ з `)ノ—̳͟͞͞♡
감사합니다
'TIL > 블로그' 카테고리의 다른 글
| [웹][티스토리 블로그 꾸미기] 상단 헤더 꾸미기2 (2) | 2025.03.15 |
|---|---|
| [웹][티스토리 블로그 꾸미기] 상단 헤더 꾸미기 (7) | 2022.08.29 |