CSS.06. Box Model

박스 모델이란? 

웹 문서에서 내용 배치 시

>> 각 요소를 박스 형태로 구성

각 박스 모델은 실제 내용이 들어가는 콘텐츠 영역과 테두리, 여백으로 구성

 

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

블록 레벨 요소

태그를 사용해 요소 삽입 시 혼자 한 줄을 차지하는 것 >> 해당 요소의 너비가 100%

블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없음

 

인라인 레벨 요소

태그를 사용해 요소 삽입 시 해당 콘텐츠만큼만 영역을 차지>>나머지 공간에 다른 요소 삽입 가능

한 줄에 여러 개의 인라인 레벨 요소 삽입 가능

 

박스 모델의 기본 구성

콘텐츠 영역

패딩: 박스와 콘텐츠 영역 사이의 여백

테두리: 박스의 테두리

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

 

width, height 속성

콘텐츠 영역의 크기 지정

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

box-sizing 속성

박스 모델의 크기 계산

웹 문서의 여러 요소 배치 시 실제 박스 모델이 차지하는 크기

>>콘텐츠 영역 외에도 여백 / 테두리 두께까지 계산 필요

 

box-sizing 속성값

border-box	테두리까지 포함해서 너빗값을 지정
content-box	콘텐츠 영역만 너빗값을 지정 : 기본

요소의 크기를 쉽게 계산하기 위해 border-box로 지정하는 것이 좋다

 

box-shadow 속성

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

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

 

box-shadow 속성값

<수평 거리>	그림자가 가로로 얼마나 떨어져 있는지 나타냄 양숫값 : 요소의 오른쪽 / 음숫값 : 요소의 왼쪽 필수 속성​
<수직 거리>	그림자가 세로로 얼마나 떨어져 있는지 나타냄 양숫값 : 요소의 아래쪽 / 음숫값 : 요소의 위쪽 필수 속성​
<흐림 정도>	생략 시 0을 기본값 → 진한 그림자 표시 커질수록 부드러운 그림자를 표시 (음수값 사용)
<번짐 정도>	양숫값 : 모든 방향으로 그림자가 퍼져서 박스보다 그림자가 크게 표시 음숫값 : 모든 방향으로 그림자 축소 기본값 : 0
<색상>	한 가지만 지정 OR 공백으로 구분하여 여러 개의 색상 지정 가능 기본값 : 검은색
inset	이 키워드를 함께 표시할 경우 테두리 안쪽 그림자로 그려짐