CSS3 - border-radius를 이용하여 말풍선 만들기

이번 글에서 만들게 될 말풍선입니다. 이전 글에서 알아본 border-radius를 이용하면 타원형을 만들 수 있습니다. 여기에 border-color, border-style, border-width를 별도로 사용하여 삼각형을 만들고 transform:rotate(deg); 를 사용하면 이 삼각형을 회전시킨 수 있습니다. CSS3의 transform은 나중에 별도로 자세히 알아보겠으나 아직 Working Draft 단계여서 속성값 앞에 웹브라우저별 접두어를 사용해야합니다.

1. 삼각형 만들기

speech-bubble.zip

html파일을 텍스트 에디터에 열고 <div class="triangles"></div>를 입력하고, CSS파일을 텍스트 에디터에 열고  triangles클래스 선택자에 대해서 위와같이 선언합니다. width와 height를 0으로 하면 모양이 전혀 안나올 것 같지만 border-width가 50픽셀로 설정되어 있어서 border만 나오게 됩니다. 여기에 border-style을 solid로 하고 border-color를 4가지 색상을 입력합니다. 순서는 상우하좌입니다. 웹에서 보면 우측 이미지처럼 나옵니다.

border-color: green transparent transparent transparent;

border-color에 하나의 색만 남기고 다른 색은 transparent를 입력하면 green 색상의 삼각형만 남게 됩니다. 

border-width: 30px 10px 0px 10px;

이번에는 border-width에 4가지 수치를 입력해봅니다. 이것의 순서도 상우하좌입니다. 상단의 수치가 좌우의 수치보다 많으니 폭이 좁은 삼각형이 될것입니다. 위의 크기로 좌측으로 향한 화살표를 만들려면 다음과 같이 설정하면 됩니다.

border-width: 10px 0px 10px 30px;
border-color:  transparent transparent transparent green;

삼각형이 향하는 방향에 따라서 transparent와 색상의 위치도 달라집니다. 

2. CSS generated content 

CSS에서 컨텐트를 만들 수 있는 방법이 있습니다. html 페이지에서 어떤 요소 다음이나 앞에 컨텐트를 넣으려면 다음과 같은 방법을 사용합니다. 특히 티스토리 블로그에서 다음뷰 버튼 바로 앞에 어떤 글을 넣고 싶을 때가 있죠. 다음뷰 버튼은 다음뷰 센터에서 플러그인으로 인해 오는 것이기 때문에 통제가 안되서 html에서 직접입력하기는 불가능합니다. 이럴때 이런 방법을 사용합니다.

.blogger-news-widget:before { content: "이 글이 도움이 되셨다면 추천 부탁드립니다~"; font: 30px/1.6 NanumBrushWeb;  }

.blogger-news-widget는 다음뷰 버튼의 클래스 선택자입니다. 위 코드의 의미는 위 선택자 앞에 content: 다음의 내용을 삽입하라는 것입니다. 폰트의 크기나 색상등을 설정할 수도 있습니다. 위와같이 하고 저장하면 다음 이미지처럼 나옵니다.

 
CSS generated content는 IE7버전 이하에서는 지원하지 않습니다. 

3. border-radius로 말풍선 만들기

우선 사진 옆의 글박스를 말풍선처럼 만들어봅니다.

blockquote:after {
	content:"";
	display: block;
	border-color:  transparent transparent transparent green;
	border-style: solid;
	border-width: 10px 0px 10px 30px;
	width: 0;
	height: 0;
	}

trianles를 지우고 blockquote:after 를 입력하고 content: " ";를 입력합니다. 이미지가 들어가는 것이기 때문에 공백을 의미하는 &nbsp;를 넣어야하는데 이 코드는 html에서만 사용되고 CSS에서는 공백의 유니코드 코드인 \00A0를 입력해야하지만 위처럼 아무것도 안 넣어도 잘 나옵니다. 쌍따옴표는 항상 들어갑니다. 그런다음 display:block;를 삽입하고 웹에서 보면 다음과 같이 모든 blockquote다음에 나옵니다.

이제 이 이미지를 사진이미지 근처에 이동하면 되죠. 이 이미지는 blockquote요소를 부모요소로하므로 상대위치와 절대위치 속성을 사용합니다.

    blockquote {
        position: relative;
	margin-right:220px;
	padding: 10px 15px 5px 15px;
	border-top: 1px solid #fff;
	background-color: #eee;
	border-radius:15px;
	word-wrap:break-word;
        }
    blockquote:after {
	content:"";
	display: block;
	position: absolute;
	top: 20px;
	right: -20px;
	border-color:  transparent transparent transparent green;
	border-style: solid;
	border-width: 10px 0px 10px 30px;
	width: 0;
	height: 0;
	}

blockquote에 대해서는 부모요소이므로 position:relative;를 설정하고 blockquote:after에 대해서 포지션을 position:absolute;로 설정합니다. 위치를 이동해야하므로 top에서 아래로 이동하는 것은 플러스값입니다. right에서 우측으로 이동하는 것은 마니너스 값입니다. 그런다음 이미지의 색상인 green을 글박스 색상인 #eee로 바꿔주면 됩니다.

4. 둥근 말풍선 만들기

첫번째 blockquote가 끝나기 바로 전에 div 태그 id="circle"로  위처럼 입력하고 p 태그 안에 글자를 입력합니다. 

#circle {
	width:100px;
	height:50px;
	position: absolute;
	top: -60px;
	right: -150px;
	background-color: #f7b2b2;
	border-radius:50px/28px;
	}
#circle p {
	padding: 13px 0px 0px 10px;
	}

이전 글의 내용에서 타원형을 만든 것에 위치를 수정하기 위해서 포지션을 절대위치로 설정합니다. 이 타원형의 색상은 분홍색입니다. 글자가 있는 p 태그도 위치를 수정하기 위해서 위처럼 padding을 사용합니다.

#circle:after {
	content: "";
	display: block;
	position: relative;
	bottom:0px;
	left:40px;
	border-color: #f7b2b2 transparent transparent transparent ;
	border-style: solid;
	border-width: 30px 10px 0px 10px;
	width: 0;
	height: 0;
	-webkit-transform:rotate(-30deg);
	-ms-transform:rotate(-30deg);
	-moz-transform:rotate(-30deg);
	-o-transform:rotate(-30deg);
	transform:rotate(-30deg);
	}

삼각형의 방향은 아래로 향하므로 border-width: 30px 10px 0px 10px;처럼 상단 border값이 큰 숫자입니다. 컬러도 상단에 지정되어야하죠. 포지션은 부모요소인 #circle이 absolute이므로 relative로 설정하고 위치를 지정합니다.

삼각형의 방향을 약간 각도를 줘야하므로 나중에 자세히 나오겠지만 아직 Working Draft상태인 transform:rotate(deg);를 사용합니다. 시계방향은 플러스값이고 반시계방향은 마이너스 값입니다. 웹브라우저마다 시험상태이므로 반드시 접두어(Prefix)를 삽입해야 브라우저 별로 인식을 합니다.

 

speech-bubble-final.zip