CSS 말풍선 그리기

CSS 말풍선 꼬리 그리기

웹사이트 제작하시면서 설명글을 위해 HOVER 했을 경우, 말풍선이 뜨게 하는 UI 구현하기 위해서 만들었습니다. 요새는 검색하면 안나오는게 없는거 같네요. 저도 만들어주는 사이트에서 구현하였구요. 위에는 우선 완성 모습입니다. 가져다 쓰실분들은 쓰셔도 되구, 자기만의 스타일을 만들겠다 하시는분들은 제가 알려드리는 사이트에서 제작 하시면 손쉽게 만들 수 있을거 같네요. 저가 구현한 화면은 모바일에서는 물음표를 누르거나, 웹사이트에서 마우스를 오버 하시면 저렇게 말풍선이 뜨게 하였구요. 심플하게 구성하였어요. 심플한게 제일 이쁜거 같아요.

CSS 코딩

/* 말풍선 적절한 top 과 margin-left 로 위치조정 */
.bubble 
	{
	z-index:100;
	position: relative;
	height: auto;
	padding: 10px 10px 10px 10px;
	background: #FFFFFF;
	border-radius: 5px;
	border: #7F7F7F solid 1px;
	position: absolute;
	font-size: 16px;
	text-align: left;
	}
	
	.bubble:after 
	{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 0 16px 20px 17.5px;
	border-color: #FFFFFF transparent;
	display: block;
	width: 0;
	z-index: 1;
	top: -18.5px; 
	left: 49px; 
	}
	
	.bubble:before 
	{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 0 16px 20px 17.5px;
	border-color: #7F7F7F transparent;
	display: block;
	width: 0;
	z-index: 0;
	top: -20px;
	left: 49px;
	}

CSS 파일이나 JSP <style></style> 안에 위의 코딩을 넣으시고, 

<div class="bubble">말풍선에 쓸내용을 넣으시면 됩니다.^^ </div>

이렇게 사용하시면 되구요. 나만의 말풍선을 만들어보고 싶으신분들은 이사이트를 이용하시면 됩니다.

http://www.ilikepixels.co.uk/drop/bubbler/

간단하게 조정하시구요. 색깔이나 꼬리 위치등등을 설정하시구 우측상단에 CSS 버튼이 보이실꺼에요. 그 버튼을 누르면 소스가 자동으로 쫙~ 나옵니다. 이렇게 CSS나 JSP/PHP 말풍선을 만드는법 알아보았네요.