CSS 기초 강좌 - 10강. 테두리(border)를 사용해보자.

border-width

1px

2px

3px

4px

5px

6px

7px

8px

9px

10px

20px

border-color 

skyblue

border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

* http://www.w3schools.com/css/css_border.asp

예제)

border-style:soild;

그런데 이렇게 쓰기는 너무 불편하시지 않나요?

border-width:1px;
border-color:#888;
border-style:solid

그래서 margin, padding 등과 같이 이렇게 쓸수도 있습니다.

border:1px solid #888

순서는 상관 없습니다.



그리고 개별적으로도 border을 설정하실수 있습니다.

예제)

개별적으로 너비 설정하기
border-top-width
border-right-width
border-bottom-width
border-left-width 

개별적으로 색 설정하기
border-top-color
border-right-color
border-bottom-color
border-left-color  

개별적으로 스타일 설정하기
border-top-style
border-right-style
border-bottom-style
border-left-style  

역시나 이렇게도 가능하죠.

통합으로 스타일 설정하기
border-top
border-right
border-bottom
border-left 

그런데 또 문제점이 생겼습니다. 아래와 같이 되면 어떻할까요?

border-top-width:1px;
border-right-width:2px; 
border-bottom-width:3px;
border-left-width:4px; 

그래서 이렇게 적을 수도 있습니다.

border-width:1px 2px 3px 4px;

즉, 

border-width:상 우 하 좌;
border-width:상 좌우 하;
border-width:상하 좌우;

그래서 모두 아래와 같이 적을 수 있습니다.

border-width:상 우 하 좌;
border-width:상 좌우 하;
border-width:상하 좌우;

border-color:상 우 하 좌;
border-color:상 좌우 하;
border-color:상하 좌우;

border-style:상 우 하 좌;
border-style:상 좌우 하;
border-style:상하 좌우;

border 정리

border:너비 스타일 색; /* 순서는 상관 없다. */

border-top /* 순서는 상관 없다. */

border-right /* 순서는 상관 없다. */

border-bottom /* 순서는 상관 없다. */

border-left /* 순서는 상관 없다. */

border-top-width

border-right-width

border-bottom-width

border-left-width 

border-top-color

border-right-color

border-bottom-color

border-left-color  

border-top-style

border-right-style

border-bottom-style

border-left-style  

border-width:상 우 하 좌;

border-width:상 좌우 하;

border-width:상하 좌우;

border-color:상 우 하 좌;

border-color:상 좌우 하;

border-color:상하 좌우;

border-style:상 우 하 좌;

border-style:상 좌우 하;

border-style:상하 좌우;