III. 박스 모델 - 1. CSS와 박스 모델

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

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

 

블록 레벨 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다.

한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻이다.

따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다.

대표적인 태그로 <h1>, <div>, <p> 등이 있다.

 

인라인 레벨 요소는 한 줄을 차지하지 않는다.

콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다.

따라서 한 줄에 인라인 레벨 요소를 여러 개 표시할 수 있다.

인라인 레벨 요소를 만드는 태그로 <span>, <img>, <strong> 등이 있다.

 

박스 모델의 기본 구성

앞에서 배운 웹 문서의 블록 레벨 요소는 모두 박스 형태이다.

스타일 시트에서는 이렇게 박스 형태인 요소를 박스 모델 요소라고 한다.

 

박스 모델은..

콘텐츠 영역

패딩(padding) : 박스와 콘텐츠 영역 사이 여백

테두리(border) : 박스의 테두리

마진(margin) : 여러 박스 모델 사이의 여백

등의 요소로 구성된다.

 

width, height : 콘텐츠 영역의 크기를 지정

사용할 수 있는 값은 다음과 같다.

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

 

box-sizing : 박스 모델의 크기를 계산

방금 전에 width 와 height는 콘텐츠 영역의 크기를 지정한다고 했다. 하지만 padding, margin, border 값을 지정하게 되면 콘텐츠 영역의 크기를 지정하였을 때 이 박스가 실제로 차지하는 영역이 어느 정도인지를 계산하기가 귀찮아진다.

따라서 아예 width와 height가 박스 모델의 크기를 지정하도록 설정하면 더 편할 수도 있다.

이것을 가능토록 하는 것이 box-sizing 속성이다.

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

 

box-shadow : 박스 모델에 그림자 주기

기본형은 다음과 같다

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

속성값은 다음과 같다

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