2011. 4. 16. 02:05ㆍIT/Tistory Tips
border 속성은 단어 뜻 그대로 테두리를 표시하는 것이다. HTML 문서의 모든 요소는 자기만의 일정한 영역을 가진다. 배경색이나 테두리가 없으면 시각적으로 표시되진 않지만, 사실은 자신의 영역을 차지하고 있다. border 스타일을 지정하면 사용자가 지정한 스타일로 이 영역의 가장자리를 표시한다.
예를 들면 위와 같은 것이다. 너비나 높이 속성이 지정되지 않았을 때 a와 span 요소는 글자가 입력된 부분만 영역으로 갖으므로 연달아서 표시된다. p 요소, div 요소는 문단과 특정 영역을 나타내므로 가로 전체를 기본 영역으로 가진다. table 요소 역시 td나 th에 입력된 내용만큼을 자신의 영역으로 가진다. border 스타일을 적용하면 해당 요소를 다른 요소와 시각적으로 구분할 수 있어서 내용에 집중하기 좋다.
border 속성은 크게 세 가지로 나뉜다. 테두리 두께를 정의하는 border-width, 테두리 모양을 정의하는 border-style, 테두리 색을 정의하는 border-color가 그것이다. 실제로 속성을 적용해보자.
<예제 1>
| HTML, CSS 코드 |
|---|
| <div style="border-width:6px; border-style:double; border-color:orange; width:60%; margin:0 auto; padding:10px; text-align:center"> Border Style Sample </div> |
| 결과 |
|
Border Style Sample
|
border-width:6px에서 테두리 두께가 6픽셀이라는 것, border-style:double에서 테두리 모양이 두 줄이라는 것, border-color:orange에서 테두리 색이 오렌지 색이라는 것을 알 수 있다. border-width는 테두리 두께로, 길이 단위를 사용하면 된다. border-color는 테두리 색이니 색 이름이나 HTML, RGB 색상 코드를 입력하면 된다. 그럼 border-style은 어떻게 지정해야 할까? border-style은 총 8 가지이며 각 스타일 적용 예는 아래 표에서 확인할 수 있다.
| <순서> | border: [테두리 두께] [테두리 모양] [테두리 색] | |
|---|---|---|
| <border-style 속성> | border-style: solid | Border Style - solid |
| border-style: double | Border Style - double | |
| border-style: dotted | Border Style - dotted | |
| border-style: dashed | Border Style - dashed | |
| border-style: groove | Border Style - groove | |
| border-style: ridge | Border Style - ridge | |
| border-style: inset | Border Style - inset | |
| border-style: outset | Border Style - outset | |
| <적용 예> | border: 3px dashed steelblue | |
border-style 중 위의 네 가지는 평면적이고 아래 네 가지는 음영을 이용해 약간 입체감이 있다. groove/ ridge, inset/ outset은 서로 반대되는 속성이며 둘씩 짝을 이룬다. 또한, border 속성은 font 속성과 같이 두께, 모양, 색을 border라는 하나의 속성으로 묶어서 표현할 수도 있다. 묶어서 표현할 땐 위 표의 맨 위 줄처럼 border: [테두리 두께] [테두리 모양] [테두리 색] 순서로 적용할 수 있다.
여기서 생각해봐야 할 것이 있다. 만약 상하좌우에 똑같은 두께를 사용하지 않고 왼쪽 테두리만 두껍게 한다면? 테두리를 위, 아래에만 표시하려면? 이런 기능을 위해 border 속성은 top, right, bottom, left로 각 테두리의 개별 속성을 정의할 수 있게 만들어졌다. 예를 들어 border-top-width: 3px이라고 스타일을 정의하면 해당 요소의 위쪽 테두리만 3픽셀이 표시된다. 실제로 상하좌우 중 한 군데만 스타일을 적용한 예를 아래 표에서 살펴볼 수 있다.
| 통합 스타일 속성 | 적용 예 |
|---|---|
| border-top | border-top:10px solid orange |
| border-right | border-right:10px solid crimson |
| border-bottom | border-bottom:10px dashed steelblue |
| border-left | border-left:18px solid teal |
| 개별 스타일 속성 | 적용 예 |
| border-top-width | border-top-style:solid; border-top-color:orange; border-top-width:10px |
| border-right-width | border-right-style:solid; border-right-color:orange; border-right-width:10px |
| border-bottom-width | border-bottom-style:solid; border-bottom-color:orange; border-bottom-width:10px |
| border-left-width | border-left-style:solid; border-left-color:orange; border-left-width:10px |
| border-top-style | border-top-width:10px; border-top-color:orange; border-top-style:dotted |
| border-right-style | border-right-width:10px; border-right-color:orange; border-right-style:dotted |
| border-bottom-style | border-bottom-width:10px; border-bottom-color:orange; border-bottom-style:dotted |
| border-left-style | border-left-width:10px; border-left-color:orange; border-left-style:dotted |
| border-top-color | border-top-width:10px; border-top-style:solid; border-top-color:red |
| border-right-color | border-right-width:10px; border-right-style:solid; border-right-color:red |
| border-bottom-color | border-bottom-width:10px; border-bottom-style:solid; border-bottom-color:red |
| border-left-color | border-left-width:10px; border-left-style:solid; border-left-color:red |
상하좌우 개별 속성을 지정할 수 있다니, Good! 그런데 만약 상하좌우에 각각 서로 다른 속성을 지정하면 스타일이 너무 길어진다. 예를 들어 왼쪽 테두리는 6픽셀, 나머지는 1픽셀로 지정하려면 border-left:6px solid #ccc; border-top:1px solid #ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc와 같이 스타일 정의 부분이 굉장히 길어진다. 이럴 때 간단하게 줄여서 사용하는 방법이 있다. 각 속성을 상/ 우/ 하/ 좌 순서로 따로 지정하는 방식, 좌우 속성이 같을 때 상/ 좌우/ 하처럼 좌우를 묶어서 지정하는 방식, 상하가 같은 속성, 좌우가 같은 속성을 지닐 때 상하/ 좌우를 묶어서 지정하는 방식이 그것이다. 상하좌우를 지정하는 이 방식은 border뿐 아니라 margin, padding 등 모든 스타일 속성에 적용되니 잘 기억해두는 것이 좋다. 상하좌우에 서로 다른 스타일을 적용할 때 보통 다른 두 속성은 고정되고 한 속성만 다르게 적용할 때가 있다. 예를 들자면 테두리 색과 모양은 모두 같은데 테두리 두께만 상하좌우가 다른 상황이다. 이럴 땐 테두리 색과 모양은 border 속성으로 지정하고 테두리 두께만 border-width 속성으로 상하좌우 값을 입력한다. 상세한 스타일 적용 예는 아래 표에서 확인할 수 있다.
| 상하좌우 지정 방식 | 적용 예 |
|---|---|
| border-width: 상 우 하 좌 | border:solid orange; border-width:10px 4px 10px 4px |
| border-width: 상 좌우 하 | border:solid orange; border-width:10px 4px 10px |
| border-width: 상하 좌우 | border:solid orange; border-width:10px 4px |
| border-style: 상 우 하 좌 | border:6px orange; border-style:double dotted double dotted |
| border-style: 상 좌우 하 | border:6px orange; border-style:double dotted double |
| border-style: 상하 좌우 | border:6px orange; border-style:double dotted |
| border-color: 상 우 하 좌 | border:8px solid; border-color:orange steelblue orange steelblue |
| border-color: 상 좌우 하 | border:8px solid; border-color:orange steelblue orange |
| border-color: 상하 좌우 | border:8px solid; border-color:orange steelblue |
위 표 내용을 실제로 적용할 땐 아래와 같은 형태가 된다. 아래에 지정된 스타일은 내 블로그 댓글에 댓글을 달았을 때 테두리 형태다.
border 속성은 대부분 태그에 적용할 수 있으므로 글에서 특정 요소를 강조하거나 다른 부분과 구분할 때 유용하게 사용할 수 있다. table 태그로 표 만들기에서 봤듯이 표 모양을 구성하는데도 border는 큰 역할을 한다. 또 블로그 스킨을 꾸미거나 모양을 바꿀 때도 border 속성을 활용할 수 있다. :hover를 사용하면 위의 마지막 예처럼 마우스 커서에 따라 스타일이 바뀌는 테두리를 적용할 수도 있다.