CSS3 - border-radius 속성 사용하기

CSS3의 border-radius는 CSS기초부분에서 많이 다루었는데 그만큼 웹페이지에서 많이 사용하는 속성입니다. 인터넷 익스프로러 8버전이하에서는 지원을 하지 않기 때문에 이미지 파일을 이용하여 여러가지 방법으로 둥근 모서리를 만들었죠. IE에서 이것만 지원해도 웹디자인은 쉬워질텐데 말이죠. 

1. 웹브라우저별 접두어(Prefix)

 
border-radius 속성은 IE8이하 버전을 제외하고는 거의 모든 웹브라우저에서 지원합니다. 우리나라에서는 IE의 사용자가 아주 많습니다. IE8 이하 버전의 사용자도 아직도 많은 수를 차지합니다. 그렇기 때문에 이미지를 이용하여 둥근 모서리의 박스를 만들어서 사용할 수 밖에 없습니다. 위 표를 보면 파이어폭스 3.6이나 안드로이드 브라우저 2.1에 접두어(Prefix)인 -moz-와 -webkit-이 붙어있는데 이 버전에서  border-radius를 사용하기 위해서는 이 접두어를 붙여야 효과가 나온다는 의미입니다.

border-radius 속성은 아주 많이 사용하기 때문에 대부분의 웹브라우저에서는 접두어 없이 사용이 가능하지만 다른 속성들, 예를 들면 gradient 같은 경우 아래 사진과 같이 웹브라우저의 모든 버전에 접두어를 사용해야 원하는 효과가 나옵니다.

 
이와같이 접두어를 사용해야하는 것은 이전글 에서 알아보았듯이 이 속성들은 W3C의 웹개발 발표단계에서 Working Draft 단계에 있기 때문입니다. 이는 아직 시험단계로 웹브라우저 제작자들이 각자의 웹브라우저에 적용을 하여 모든 웹브라우저 같은 결과를 나타낼때까지 시험을 거치게 됩니다. 그래서 통일된 효과가 나오면 W3C에서 Candidate Recommendation단계로 승인을 하여 접두어를 뗄 수가 있게 됩니다.  그러면 위 표도 깨끗해질 것입니다.  그때까지는 웹브라우저 제작자들은 CSS3의 각 속성을 적용시키고 실험을 하므로 업그레이드가 빈번하게 일어납니다. 작년같은 경우 파이어폭스가 무려 6단계의 업그레이드를 했습니다. 파이어폭스에서는 4주간의 간격을 두고 업그레이드하기로 했답니다. 

2.  border-radius 속성 사용하기

border-radius.zip

#header {
	background:#fff;
	border:1px solid #888;
	padding: 20px 20px;
	border-radius:15px;
}

첨부파일을 다운받아 압축을 풀고 CSS파일을 텍스트에디터에 열고 #header 에 위처럼 border-radius:15px;를 추가 한 다음 저장하고 웹브라우저에서 확인합니다. 모서리가 둥글게 나타납니다. 속성값인 15픽셀은 반지름을 의미합니다. 

모든 블럭요소의 성격을 가진 요소에  border-radius:15px;를 추가해 봅니다. #content, h2, #sidebar, blockquote, #footer에 추가하고 웹브라우저에서 보면 위처럼 나옵니다. 

#header {
	background:#fff;
	border:1px solid #888;
	padding: 20px 20px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
}

앞에서 알아본 것처럼 모든 버전에서 사용이 가능하게 하려면 위처럼 접두어가 붙은 속성과 값을 입력합니다. 접두어가 붙은 것을 상위에 놓고 없는 것은 아래에 배치합니다. 왜냐하면 접두어를 붙여야만 사용이 가능하다가도 나중에 수정을 하여 업그레이드되면 접두어가 없이 사용할 수 있는 것이 표준이므로 표준인 것이 표준이 아닌것보다 우선적용할 수 있기 때문입니다. CSS는 마지막에 선언된 것이 이전에 선언된 것보다 우선 적용하게 됩니다. CSS에서 C는 Cascading의 약자인데 이러한 우선적용원리를 의미합니다.

3. border-radius의 단축형

위에서 border-radius의 속성값으로 하나의 값을 입력했지만 사각형의 모서리는 4개이므로 4개의 값을 입력할 수가 있으며 서로 다른 값을 사용할 수도 있습니다.  

#header {
	background:#fff;
	border:1px solid #888;
	padding: 20px 20px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px 20px 30px 40px;
}

위처럼 사용하는 것은 단축형입니다. 4가지의 값을 다르게 하면 모서리의 둥근 정도가 다 다르게 나옵니다. 한곳만 수치를 입력하고 3곳을 0으로 하면 한곳만 둥글게 나오게 됩니다. 위 네가지 값의 순서는 다음과 같고 각 코너의 속성은 다르게 할 수도 있습니다. 

border-top-left-radius:10px;
border-top-right-radius:10px; 
border-bottom-right-radius:10px; 
border-bottom-left-radius:10px;

좌측상단에서 시작하여 시계방향입니다. 위처럼 한곳의 모서리만 설정할 수도 있습니다. 원하는 부분만 사용할 수 있는 것이죠. Safari 4 와 Safari iOS 3은 단축형을 사용하지 못합니다.

4. border-radius의 다양한 사용법

위처럼 html에는 <div id="circle"></div>를 추가하고 CSS에는 가로세로 100픽셀을 설정합니다. 배경색상과 테두릴 설정하고 border-radius를 50px/50px입력합니다. 이것은 앞에서 설정한 가로세로 100픽셀의 반이죠. 이처럼 설정하고 웹에서 보면 둥근 원이 나옵니다. 이것을 변형하여 50px/20px로 수정하면 어떤 모양이 나올까요.

세로를 50픽셀로 줄이고 50px/28px로 했더니 위처럼 나옵니다. 앞의 수치는 수평부분의 곡선이고 뒤의 수치는 수직부분의 곡선입니다.

슬래시를 없애고 수치를 입력하면 위처럼 나옵니다. 앞의 수치는 좌상과 우하의 수치가되고 뒤의수치는 우상과 좌하의 수치가 됩니다.

각 모서리에 대해서 별도로 설정하면 위처럼 나옵니다. 

이것을 rotate를 사용해서 회전하면 눈모양이 되겠죠.

테두리를 서로 다른 수치를 넣으면 위처럼 나옵니다. 로고를 만들어도 되겠네요.

border-style 속성을 이용하면 여러가지 다양한 이미지가 나오게 됩니다.