이제는 이미지 없이 CSS3만으로도 둥근 모서리를 표현할 수 있습니다. 예전에는 HTML의 엘리먼트를 여러개 추가하고 이미지를 넣어야 하는 복잡한 과정을 거쳐야 했지만 이제는 그럴 필요가 없습니다.
5개의 대표 브라우저 모두가 둥근 모서리 효과를 지원합니다. 그러나 둥근 모서리는 최근에 제정된 기술이므로 모바일 브라우저는 속성 앞에 브라우저의 특성을 입력해야 지원하는 경우도 있습니다. 브라우저의 특성 입력 방법을 모르신다면 CSS3 가이드북 페이지에서 브라우저의 특성 링크를 클릭하세요.
둥근 모서리 효과를 표현하려면 border-radius란 속성을 입력합니다. 값이 커질수록 모서리가 더욱 둥글게 됩니다. 아까도 말했듯이 모바일 브라우저는 이 속성이 정식으로 지원하지 않을 수 있으므로 브라우저의 특성을 속성 앞에 입력해야 합니다. 위에 있는 예제의 속성과 같이 입력하면 됩니다.
타원형 둥근 모서리도 표현할 수 있습니다. border-radius의 값을 가로 길이의 반지름 / 세로 길이의 반지름으로 입력하면 됩니다. 이것 역시 가로 길이와 세로 길이의 반지름을 모두 같은 값이나 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래의 순 또는 왼쪽 위와 오른쪽 아래, 오른쪽 위와 왼쪽 아래의 순으로도 입력할 수 있습니다. 예를 들어 위에 있는 예제처럼 '40px 0 / 20px 0'이 입력되어 있다면 '40px 0 40px 0 / 20px 0 20px 0'으로 입력할 수도 있습니다.
5개의 대표 브라우저 모두가 둥근 모서리 효과를 지원합니다. 그러나 둥근 모서리는 최근에 제정된 기술이므로 모바일 브라우저는 속성 앞에 브라우저의 특성을 입력해야 지원하는 경우도 있습니다. 브라우저의 특성 입력 방법을 모르신다면 CSS3 가이드북 페이지에서 브라우저의 특성 링크를 클릭하세요.
.example-div {
width: 460px;
background-color: #696969;
color: #FFF;
font: 30px 'Myriad Pro';
text-align: center;
padding: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}background-color: #696969;
color: #FFF;
font: 30px 'Myriad Pro';
text-align: center;
padding: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
둥근 모서리 효과를 표현하려면 border-radius란 속성을 입력합니다. 값이 커질수록 모서리가 더욱 둥글게 됩니다. 아까도 말했듯이 모바일 브라우저는 이 속성이 정식으로 지원하지 않을 수 있으므로 브라우저의 특성을 속성 앞에 입력해야 합니다. 위에 있는 예제의 속성과 같이 입력하면 됩니다.
.example-div {
width: 460px;
background-color: #696969;
color: #FFFFFF;
font: 30px 'Myriad Pro';
text-align: center;
padding: 20px;
-webkit-border-radius: 40px 0 40px 0;
-moz-border-radius: 40px 0 40px 0;
border-radius: 40px 0 40px 0;
}background-color: #696969;
color: #FFFFFF;
font: 30px 'Myriad Pro';
text-align: center;
padding: 20px;
-webkit-border-radius: 40px 0 40px 0;
-moz-border-radius: 40px 0 40px 0;
border-radius: 40px 0 40px 0;
타원형 둥근 모서리도 표현할 수 있습니다. border-radius의 값을 가로 길이의 반지름 / 세로 길이의 반지름으로 입력하면 됩니다. 이것 역시 가로 길이와 세로 길이의 반지름을 모두 같은 값이나 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래의 순 또는 왼쪽 위와 오른쪽 아래, 오른쪽 위와 왼쪽 아래의 순으로도 입력할 수 있습니다. 예를 들어 위에 있는 예제처럼 '40px 0 / 20px 0'이 입력되어 있다면 '40px 0 40px 0 / 20px 0 20px 0'으로 입력할 수도 있습니다.
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
코멘트 0
