[기본 개념] 2 | CSS 박스 모델 - (2.1) 박스 모델, 테두리 스타일

[기본 개념] 2 | CSS 박스 모델 - (2.1) 박스 모델, 테두리 스타일

1> CSS와 박스 모델

2> 테두리 스타일 지정하기

3 여백을 조절하는 속성

4 웹 문서의 레이아웃 만들기

5 웹 요소의 위치 지정하기

1 CSS와 박스 모델

블록 레벨 요소와 인라인 레벨 요소

 

 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지 따라 나열 방법이 달라진다.

 

블록 레벨 요소  태그를 사용해 요소 삽입 시, 혼자 한 줄 차지 ex) <h1>, <div>, <p> 등

인라인 레벨 요소  태그를 사용해 요소 삽입 시, 콘텐츠 영역만큼만 차지 ex) <span>, <img>, <strong> 등

 

박스 모델의 기본 구성

 

 

콘텐츠 영역의 크기를 지정하는 width, height 속성

 

종류	설명
<크기>	너비나 높이의 값을 px나 em 단위로 지정
<백분율>	박스 모델을 포함하는 부모 요소를 기준으로 너비값이나 높이값을 백분율로 지정
auto	박스 모델의 너비값과 높이값이 콘텐츠 양에 따라 자동으로 결정 (기본값)

 

박스 모델의 크기를 계산하는 box-sizing 속성

 

종류	설명
border-box	테두리까지 포함해서 너빗값을 지정
content-box	콘텐츠 영역만 너빗값을 지정 (기본값)

 

박스 모델에 그림자 효과를 주는 box-shadow 속성

 

기본형

box-shadow : <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

 

종류	설명
<수평 거리>	그림자가 가로로 얼마나 떨어져 있는지 나타냄. 양수값 오른쪽, 음수값 왼쪽. (필수 속성)
<수직 거리>	그림자가 세로로 얼마나 떨어져 있는지 나타냄. 양수값 아래쪽, 음수값 위쪽. (필수 속성)
<흐림 정도>	생략하면 0을 기본값으로 진한 그림자 표시. 커질수록 부드러운 그림자를 표시. 음수값 X
<번짐 정도>	양수값은 모든 방향으로 그림자가 퍼져 박스보다 그림자가 더 크게 표시. 음수값은 모든 방향으로 축소되어 보임. 기본값은 0
<색상>	공백으로 구분하여 여러 개의 색상 지정할 수 있으며, 기본값은 검은색
inset	이 키워드를 표시하면 안쪽 그림자

2 테두리 스타일 지정하기

테두리 스타일을 지정하는 border-style 속성

 

top -> right -> bottom -> left 순

 

종류	설명	예시
none	테두리 X (기본값)
hidden	테두리를 감춘다. border-collapse : collapse일 경우 다른 테두리도 표시되지 않는다.
solid	테두리를 실선으로 표시
dotted	테두리를 점선으로 표시
dashed	테두리를 짧은 직선으로 표시
double	테두리를 이중선으로 표시, 두 선 사이의 간격이 border-width값이 된다.
groove	테두리를 창에 조각한 것처럼 표시, 홈에 파인듯 입체 느낌
inset	border-collapse : seperate일 경우 전체 박스 테두리가 창에 박혀있는 것처럼 표시 border-collapse : collapse일 경우 groove와 똑같이 표시
outset	border-collapse : seperate일 경우 전체 박스 테두리가 창에서 튀어나온 것처럼 표시 border-collapse : collapse일 경우 ridge와 똑같이 표시
ridge	테두리를 창에서 튀어나온 것처럼 표시

 

테두리 두께를 지정하는 border-width 속성

 

기본형

box-width : <크기> | thin | medium | thick

 

 속성값이 1개이면 4방향 모두 같은 값이 적용

 속성값이 2개이면 첫 번째 값이 top, bottom 값이 되고, 두 번째 값이 right, left 값이 적용

 속성값이 3개이면 top, right, bottom 값이 되고, left 속성값은 마주 보는 right 속성과 같은 값이 적용

 속성값이 4개이면 top, right, bottom, left 순으로 값이 적용

 

테두리 색상을 지정하는 border-color 속성

 

 border-color 속성은 4개 방향의 색상을 한 번에 정할 수 있고, border와 color 사이에 테두리 방향을 넣어주어 하나씩 지정할 수도 있다.

 

둥근 테두리를 만드는 border-radius 속성

 

기본형

box-radius : <크기> | <백분율>

 

종류	설명
<크기>	반지름 크기를 px, em의 단위로 수치로 표시
<백분율>	현재 요소의 크기를 기준으로 비율(%)로 지정

 

 4방향 모두 다르게 지정하고 싶으면 border와 radius 사이에 원하는 위치를 넣어 사용하면 된다.

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)