CSS3 테두리
CSS3 테두리(Border)
CSS3에서는 테두리의 모서리를 둥글게 만들거나, 테두리에 이미지를 사용할 수 있습니다.
CSS3에서 새롭게 추가된 border 속성은 다음과 같습니다.
1. border-radius
2. border-top-left-radius
3. border-top-right-radius
4. border-bottom-right-radius
5. border-bottom-left-radius
6. border-image
7. border-image-source
8. border-image-slice
9. border-image-width
10. border-image-outset
11. border-image-repeat
CSS2 테두리
border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리(border)의 스타일을 설정할 수 있게 해줍니다.
CSS2까지는 다음과 같은 border 속성만을 사용할 수 있었습니다.
1. border
2. border-style
3. border-width
4. border-color
5. border-top
6. border-right
7. border-bottom
8. border-left
CSS3 테두리(border) 속성 지원 버전
CSS3 테두리(border) 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다.
| 속성 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| border-radius | 9.0 |
5.0 4.0 -webkit- |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
| border-image | 11.0 |
16.0 4.0 -webkit- |
15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
border-radius 속성
CSS3에서는 모든 HTML 요소에 border-radius 속성을 설정하여 모서리를 둥글게 만들 수 있습니다.
예제
<style>
#p_01 { height: 150px; width: 200px; border-radius: 25px; }
#div_01 { height: 150px; width: 200px; border-radius: 25px; }
#p_02 {
background: url(/examples/images/img_background_good.png);
background-position: left top;
background-repeat: repeat;
border-radius: 25px;
}
</style>
border-radius 속성은 실제로 다음 네 가지 속성의 스타일을 한 줄에 설정한 것입니다.
따라서 다음 속성들을 각각 사용하면 모서리별로 따로 스타일을 설정할 수 있습니다.
1. border-top-left-radius
2. border-top-right-radius
3. border-bottom-right-radius
4. border-bottom-left-radius
다음 예제는 모서리별로 다른 크기의 둥근 모서리를 설정하는 예제입니다.
예제
<style>
#p_01 {
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 80px;
}
</style>
또한, border-radius 속성을 이용해도 모서리별로 다른 크기의 둥근 모서리를 설정할 수 있습니다.
예제
<style>
#p_01 { border-radius: 20px 40px 60px 80px; }
#p_02 { border-radius: 20px 40px 60px; }
#p_03 { border-radius: 20px 40px; }
#p_04 { border-radius: 20px; }
</style>
4개의 border-radius 속성값을 가질 때는 top-left, top-right, bottom-right, bottom-left 순으로 설정됩니다.
ex) border-radius: 20px 40px 60px 80px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 80px;
3개의 border-radius 속성값을 가질 때는 top-left, top-right와 bottom-left, bottom-right 순으로 설정됩니다.
ex) border-radius: 20px 40px 60px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 40px;
2개의 border-radius 속성값을 가질 때는 top-left와 bottom-right, top-right와 bottom-left 순으로 설정됩니다.
ex) border-radius: 20px 40px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 40px;
1개의 border-radius 속성값을 가질 때는 border-radius 속성값이 모두 같은 값으로 설정됩니다.
ex) border-radius: 20px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border-image 속성
CSS3에서는 요소를 둘러싸는 테두리(border)에 이미지를 사용할 수 있습니다.
border-image 속성은 다음과 같은 순서로 동작합니다.
1. 테두리(border)로 사용할 이미지를 결정합니다.
2. 이미지의 어느 부분을 자를 것인지 결정합니다.
3. 테두리 중간 부분의 이미지 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정합니다.
우선 테두리로 사용할 이미지를 결정합니다.
border-image 속성은 설정된 이미지를 바둑판처럼 9조각으로 나눕니다.
그 후에 top, right, bottom, left에 해당하는 영역의 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정하게 됩니다.
다음 예제는 round 속성값을 사용하여 테두리 중간 부분의 처리를 반복으로 설정한 예제입니다.
예제
<style>
#p_01 {
border: solid 20px transparent;
-webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
-moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
-o-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
border-image: url(/examples/images/img_css3_pattern.png) 34 round;
}
</style>
다음 예제는 stretch 속성값을 사용하여 테두리 중간 부분의 처리를 늘리는 것으로 설정한 예제입니다.
예제
<style>
#p_01 {
border: solid 20px transparent;
-webkit-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
-moz-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
-o-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
}
</style>
위의 예제에서 볼 수 있듯이 border-image 속성값으로 전달되는 인수의 기본 단위는 %입니다.
또한, 수직 테두리와 수평 테두리의 처리 방식을 다르게 설정할 수도 있습니다.
예제
<style>
#p_01 {
border: solid 20px transparent;
-webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
-moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
-o-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
}
</style>
border-image 속성은 실제로 다음 5가지 속성의 스타일을 한 줄에 설정한 것입니다.
1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-outset
5. border-image-repeat
CSS3 border 속성
| 속성 | 설명 |
|---|---|
| border-radius | 모든 border-radius 속성을 이용한 스타일을 한 줄에 설정할 수 있음. |
| border-top-left-radius | 테두리(border)의 top-left 부분 모서리의 스타일을 설정함. |
| border-top-right-radius | 테두리의 top-right 부분 모서리의 스타일을 설정함. |
| border-bottom-right-radius | 테두리의 bottom-right 부분 모서리의 스타일을 설정함. |
| border-bottom-left-radius | 테두리의 bottom-left 부분 모서리의 스타일을 설정함. |
| border-image | 모든 border-image 속성을 이용한 스타일 설정이 한 줄에 가능함. |
| border-image-source | 테두리로 사용할 이미지를 설정함. |
| border-image-slice | 테두리로 사용할 이미지를 자르는 방법을 설정함. |
| border-image-width | 테두리로 사용할 이미지의 너비를 설정함. |
| border-image-outset | 테두리 영역 너머로 테두리로 사용할 이미지가 얼마만큼 넘어갈지를 설정함. |
| border-image-repeat | 테두리로 사용할 이미지의 중간 부분의 처리를 반복으로 할지 늘릴지를 설정함. |
