-
초보자도 만들 수 있는 쉽게 채팅 말풍선 만들기Study/HTML + CSS 2024. 2. 7. 15:55반응형
채팅 기능을 만들다가 채팅기능의 말풍선을 만들어야 하는데,
만드는 코드는 많은데, 쉽게 설명이 되어 있는게 없어서 쉽고 간단하게 만드는 방법을 글로 적어본다.
1.결과
2.설명
위에 채팅 UI중 말풍선 부분만 설명 예정임.
간단히 설명하자면
말풍선본체 + 말풍선 꼬리
위와 같이 div로 각각 본체에 꼬리를 만들어 붙이면 끝!
(1) html 코드
<body> <div class="chatDiv"> <div class="chatBody">안녕</div> <div class="chatTail"></div> <div class="chatTime">오전 11:15</div> </div> </body>html 코드에서는 특별히 설명할게 없음.
나중에 채팅 기능을 구현할때 chatBody 부분과 chatTime 부분을 자바스크립트로 동적으로 구현할때 특정 id를 부여해 줘야 하지만 그건 추후에 컨텐츠를 만들어서 설명하고
말풍선 만드는 부분은 아래 css부분이 젤 중요!
(2) css 코드
.chatDiv{ width: 100px; height: 100px; } .chatBody{ height: 30px; background-color: #dadddf; border-radius: 3px; padding: 4px 4px 4px 4px; font-size:15px; } .chatTail{ position: relative; bottom: 36px; left: 100px; width: 1px; height: 1px; border-top: 0px solid transparent; border-left: 6px solid transparent; border-right: 8px solid transparent; border-bottom: 17px solid #dadddf; transform: rotate(81deg); } .chatTime{ font-size:10px; position: relative; bottom: 15px; }말풍선 만들때 제일 중요한 부분은 chatBody 와 chatTail 부분의 배경색을 맞춰주는게 중요함!
말풍선꼬리는 border속성 지정을 이용하여 4면중 3면은 투명으로 지정하고 border-bottom 만 색을 chatBody와 색을 통일하여 세모를 만들어 chatBody에 붙여주면 끝!
꼬리를 붙일때는 position 속성과 transform 속성을 이용하여 적절한 위치에 붙이면 됨!
쉽죠잉?!
반응형
