[CSS] 말풍선 꼬리 만드는 방법 예제 코드

CSS에서 말풍선 꼬리를 만들어보는 방법에 대한 예제 코드입니다~
speech-bubble 이라는 임의의 div 태그를 만든 다음에, 가상 요소 선택자 after를 추가하여 말풍선 꼬리를 만드는 예제를 보여드릴텐데요, 천천히 읽어보시면 쉽게 이해하실 수 있답니다.

말풍선 꼬리 만드는 방법

<style>
#speech-bubble {  
 position: relative; 
 background: pink;
 margin: 50px;
 width: 200px; 
 height: 50px;
 border-radius: 10px;
 text-align: center;
 line-height : 50px;
}

#speech-bubble::after { 
 content: ""; 
 position: absolute;
 top: 100%;
 left: 80%;
 border-top:10px solid pink; 
 border-left: 10px solid transparent; 
 border-right: 10px solid transparent; 
 border-bottom: 10px solid transparent; 
}
</style>
<div id="speech-bubble">안녕하세요</div>

말풍선 둥글게 만들기 (#speech-bubble)

• position: relative; => 포지션은 문서 흐름에 대한 상대 배치 (해당 예제에서는 크게 의미 없습니다)
• background: pink; => 배경은 분홍색
• margin: 50px; => 마진 임의 설정
• width: 200px; => 말풍선 가로 크기
• height: 50px; => 말풍선 세로 크기
• border-radius: 10px; => 말풍선 테두리를 10px만큼 둥글게 진행합니다.
• text-align: center; => 말풍선 글자 가운데로 정렬했습니다.
• line-height : 50px; => 말풍선 세로 정렬입니다.

말풍선 꼬리 만들기 (#speech-bubble::after)

• content: ""; => 가상 요소 선택자 내부 콘텐츠 불필요
• position: absolute; => 위치는 앱솔루트로 합니다. 조상 요소에 상대적인 배치를 위해 설정하였습니다.
• top: 100%; => 말풍선 꼬리는 말풍선 아래에 위치하도록 100% 했습니다.
• left: 80%; => 말풍선 세로 위치이며 값에 따라 좌우를 조절합니다.
• border-top:10px solid pink; => 보더 탑을 원하는 색상으로로 설정하며 나머지는 투명하게 합니다.
• border-left: 10px solid transparent;
• border-right: 10px solid transparent;
• border-bottom: 10px solid transparent;