[CSS] 3. 박스 모델(4) - 테두리 스타일 1

 

 

 

○ 박스 모델의 방향(위치)

 

박스 모델을 기반으로 HTML 문서의 요소를 배치할 경우, 각각의 박스 모델의 여러 가지 속성 중 테두리와 관련된 스타일을 사용하게 됩니다. 단순히 '사각형을 그린다' 이외에도 다양하게 적용될 수 있는 부분이죠. 

 

우선 박스 모델에는 4개의 방향을 지칭하게 됩니다. 이는 마진, 패딩, 테두리 모두에 해당하게 되는 부분이므로 잘 기억해 두시는 것이 좋습니다. 용어 자체는 어렵지 않습니다. top(위) → right(오른쪽) → bottom(아래) → left(왼쪽)입니다. 이 속성을 이용해서 스타일을 일괄 지정하거나 개별적으로 지정이 가능한데, 위에서 위, 오른쪽, 아래, 왼쪽 순서를 정의해 두었습니다. 이는 top을 기점으로 시계방향으로 작성된 것인데요, 이 방향이 어떻게 사용되고 왜 중요한지는 차차 살펴보겠습니다. 

 

 

○ border-style : 테두리의 스타일 지정

 

border-style은 말 그대로 테두리의 속성 - 즉 흔히 얘기하는 점선, 실선 등의 테두리 모양을 지정하는 속성입니다. 일반적으로 별다른 지정 없이 표를 생성하게 되면 기본 값은 none이기 때문에 표의 테두리가 아예 나타나지 않게 됩니다. 각각의 속성 값들에 대해서는 아래 표를 보겠습니다. 

 

종류	설명
none	기본값. 테두리가 없습니다.
hidden	테두리를 숨깁니다. border-collapse: collapse일 경우, 다른 테두리도 함께 표시되지 않습니다.
solid	일반적인 실선으로 표시합니다.
dotted	테두리를 촘촘한 점선으로 표시합니다.
dashed	테두리를 짧은 직선, dotted와 비교하면 큰 점선 형태로 표시합니다.
double	테두리를 이중 선으로 표시합니다. 두 선 사이의 간격이 border-width 입니다.
groove	테두리를 창에 조각한 것처럼 입체적으로 표시합니다.
inset	border-collapse: collapse일 경우 groove와 똑같습니다. seperate일 경우 전체 박스 테두리가 창에 박혀있는 것처럼 표시합니다.
ridge	테두리를 창에서 튀어나온 것처럼 표시합니다.
outset	border-collapse: collapse일 경우 ridge와 똑같습니다. seperate일 경우 전체 박스 테두리가 창에서 튀어나온 것처럼 표시됩니다.

 

만약 한 박스에서 네 개의 모든 방향을 각각 다르게 테두리 스타일을 지정하고 싶다면 어떻게 해야 할까요? 이 경우 border-top-style / border-right-style / border-bottom-style / border-left-style 로 속성을 지정하면 됩니다.