반응형
Study/html + css
-
초보자도 만들 수 있는 쉽게 채팅 말풍선 만들기Study/html + css 2024. 2. 7. 15:55
채팅 기능을 만들다가 채팅기능의 말풍선을 만들어야 하는데, 만드는 코드는 많은데, 쉽게 설명이 되어 있는게 없어서 쉽고 간단하게 만드는 방법을 글로 적어본다. 1.결과 2.설명 위에 채팅 UI중 말풍선 부분만 설명 예정임. 간단히 설명하자면 말풍선본체 + 말풍선 꼬리 위와 같이 div로 각각 본체에 꼬리를 만들어 붙이면 끝! (1) html 코드 안녕 오전 11:15 html 코드에서는 특별히 설명할게 없음. 나중에 채팅 기능을 구현할때 chatBody 부분과 chatTime 부분을 자바스크립트로 동적으로 구현할때 특정 id를 부여해 줘야 하지만 그건 추후에 컨텐츠를 만들어서 설명하고 말풍선 만드는 부분은 아래 css부분이 젤 중요! (2) css 코드 .chatDiv{ width: 100px; heig..