윈컴이의 컴퓨터 이야기

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

프로그래밍/웹 개발

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

윈컴이 2012.01.09 21:23


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:상하 좌우;


신고