[CSS] CSS 박스 모델을 구성하는 속성 다루기(border 영역)

박스모델은 모든 HTML 요소가 사각형의 박스로 둘러쌓여있다는 개념으로

박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 웹 페이지를 만드는 본질이다.

 

박스 모델은 크게 다음과 같이 4가지 요소로 구성되고 앞서 정리한 margin에 이어 border에 대해 정리해보고자 한다.

 

1. border 영역

border 영역은 margin 보다 안쪽에 있으며, 요소의 테두리(경계선)를 담당한다.

 

margin 영역과 동일하게 사용이 가능하지만 margin 속성과 달리 여러 속성값이 복합적으로 사용된다.

형식)
	border:<border-width> <border-style> <color>;

 

    - border-width 속성

border-width 속성은 테두리 굵기를 지정한다. 속성값으로는 단위를 포함한 크기를 사용한다.

형식)
	border-width:<크기>;
    
예시)
	border-width:2px;

 

 

    - border-style 속성

border-style 속성은 테두리 모양을 지정한다.

형식)
	border-style:<속성값>;

사용할 수 있는 속성값은 아래를 확인하면 된다.

속성값	설명
none	테두리를 그리지 않는다.
hidden	테두리를 화면에서 감춘다.
solid	테두리를 실선으로 그린다.
double	테두리를 이중 실선으로 그린다.
dotted	테두리를 점선으로 그린다.
dashed	테두리를 dotted보다 긴 점선으로 그린다.
groove	테두리가 파인것 처럼 그린다.
ridge	테두리가 튀어나온 것처럼 그린다.
inset	테두리를 요소가 파인 것처럼 그린다.
outset	테두리를 요소가 튀어나온 것처럼 그린다.

각 속성값을 적용하면 아래와 같다

 

border 속성은 세 가지 속성의 속성값을 값으로 사용하므로 아래와 같이 지정할 수 있다.