테두리선 두께 지정

※테두리선(border)의 개념에 대해서는 본 게시판의 "상자(box) 개념의 이해" 강좌를 참조하십시오.   테두리선 두께를 개별적으로 지정하는 속성들은 아래와 같습니다.   border-top-width: 위쪽 테두리선 두께를 지정 border-right-width: 오른쪽 테두리선 두께를  지정 border-bottom-width: 아래쪽 테두리선 두께를 지정 border-left-width: 왼쪽 테두리선 두께를 지정   1. 속성값: 단위, 키워드   ⓐ단위: 단위는 본 게시판의 "스타일 시트의 단위" 강좌를 참조하십시오.   ⓑ키워드: 테두리선의 두께 지정을 특정 단어로 나타냅니다.  thin: 얇은 선(2px) medium: 중간 굵기의 선(기본값, 4px) thick: 굵은 선(6px)    2. 예제   ......................................................................................   <html> <head> <title>공짜맨의 초보태그 스타일 시트 강좌 예제^^</title>     <style type="text/css">  </style>   </head> <body> <div>border-top-width:7px, border-right-width:50px, border-bottom-width:20px, border-left-width:30px로 지정하였을 때의 결과입니다.</div> </body> </html>   ......................................................................................   `실행 결과-> <A href="http://totosoro37.cafe24.com/sslec/ss28.htm">http://totosoro37.cafe24.com/sslec/ss28.htm</A> (클릭)   ※예제 소스는 본 게시물이 복사 금지되어 있으므로 위 실행 결과 페이지에서 소스 보기를 해서 복사하십시오.   위에서 살펴본 테두리선 두께 속성들을 일괄적으로 지정해주려면 border-width 속성을 사용합니다. 속성값은 위의 경우와 같고, 각 속성값은 공백으로 구분해주며 속성값을 몇 개를 지정해주느냐에 따라서 속성값 지정에 차이가 생깁니다.    아래의 예를 보시죠.   ......................................................................................   {border-width:7px 50px 20px 30px} ->1 {border-width:7px 50px 20px} ->2 {border-width:7px 50px} ->3 {border-width:7px} ->4   ......................................................................................   `1번에서는 border-top-width 속성값은 7px, border-right-width 속성값은 50px, border-bottom-width 속성값은 20px, border-left-width 속성값은 30px로 각각 지정됩니다.   `2번에서는 border-top-width 속성값은 7px, border-right-width 속성값과 border-left-width 속성값은 50px로 동일하게 지정되고, border-bottom-width 속성값은 20px로 각각 지정됩니다.   `3번에서는 border-top-width 속성값과 border-bottom-width 속성값은 7px로 동일하게 지정되고, border-right-width 속성값과 border-left-width 속성값은 50px로 동일하게 각각 지정됩니다.   `4번에서는 border-top-width 속성값, border-right-width 속성값, border-bottom-width 속성값, border-left-width 속성값은 모두 7px로 동일하게 지정됩니다.   `강좌 불펌 금지