..

Search

47) CSS3 테두리

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

 

CSS 테두리(border) 수업 확인 =>


CSS3 테두리(border) 속성 지원 버전

CSS3 테두리(border) 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다.

속성 ie chrome firefox safari opera
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_01height: 150pxwidth: 200pxborder-radius: 25px; }

    #div_01height: 150pxwidth: 200pxborder-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. 테두리 중간 부분의 이미지 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정합니다.

 

우선 테두리로 사용할 이미지를 결정합니다.

 

pattern image

 

border-image 속성은 설정된 이미지를 바둑판처럼 9조각으로 나눕니다.

 

lined pattern image

 

그 후에 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>

코딩연습 ▶

 

border-image 속성을 설정하기 위해서는 반드시 border 속성이 먼저 설정되어 있어야 합니다.

 

다음 예제는 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 테두리로 사용할 이미지의 중간 부분의 처리를 반복으로 할지 늘릴지를 설정함.

연습문제