[HTML/CSS] CSS - 박스 모델

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

블록 레벨 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 다 차지하는, 즉 너비가 100%임을 뜻함

주로 <hn>, <div>, <p> 태그 등을 이용

인라인 레벨 요소란 한 줄을 다 차지하는 것이 아닌 콘텐츠 영역만큼만 차지하고 나머지 공간은 다른 요소가 올 수 있음. 따라서 한 줄에 여러 개의 인라인 레벨 요소들이 올 수 있고 <span>, <img>, <strong> 태그 등이 있음

블록 레벨 요소

인라인 레벨 요소

✏️ 박스 모델의 기본 구성

종류	설명
패딩(padding)	콘텐츠부터 테두리까지의 여백
마진(margin)	여러 박스 사이의 여백
콘텐츠(content)	콘텐츠, 즉 표현하고자 하는 내용이 있는 구역
테두리(border)	박스의 테두리 부분

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

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

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

width속성과 height 속성은 박스 모델에서 콘텐츠 주변의 여백이나 테두리를 뺸 콘텐츠 영역의 크기를 가리키게 됨 하지만 실제 박스 모델이 차지하는 크기는 콘텐츠 이외에도 테두리, 패딩, 마진 등이 있음 만약, 콘텐츠 영역의 너비가 200px이고 패딩이 20px, 테두리 두께가 10px라면 실제 박스 모델의 너비는 260px 그래서 이런 것들을 고려해서 box-sizing의 값을 지정할 수 있음

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

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

 box-shadow : <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset
 
 // 이 속성을 이용하면 사진 주변에 그림자를 줄 수 있는데 그림자 위치나 색상 흐림, 번짐 정도를 지정할 수 있음

 

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