[CSS] Box Model

📌 참고 사이트

CSS 기본 박스 모델 입문 - CSS: Cascading Style Sheets | MDN (mozilla.org)

CSS 기본 박스 모델 입문 - CSS: Cascading Style Sheets | MDN

 

 

 

📋 CSS 기본 박스 모델

➡️ 문서의 레이아웃 계산 시 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다.

➡️ CSS로 박스의 크기, 위치, 속성(색깔, 배경, 테두리 모양 등) 등을 결정할 수 있다.

 

 

📍 박스 영역 구성

하나의 박스는 다음과 같이 네 부분으로 이루어진다.

 

출처: https://devyuminkim.github.io/assets/img/develop/2022-09-07-dev-css-box-model/box-model.png

 

1️⃣ 콘텐츠 영역 (content area)

➡️ 콘텐츠 경계가 감싼 영역으로 콘텐츠 박스 너비와 콘텐츠 박스 높이가 곧 콘텐츠 영역의 크기이다. 

➡️ 글, 이미지, 비디오 등 요소의 실제 내용을 포함한다.

➡️ box-sizing 속성의 값이 기본 값인 content-box이며 요소가 블록 레벨 요소(display 속성이 block)일 경우 콘텐츠 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성을 사용해 명시적으로 설정할 수 있다.

 

2️⃣ 패딩 영역 (padding area, 안쪽 여백 영역)

➡️ 안쪽 여백 경계가 감싼 영역으로 안쪽 여백 박스 너비와 안쪽 여백 박스 높이가 곧 패딩 영역의 크기이다.

➡️ 콘텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장한다. (padding을 설정하면 content 영역 바로 바깥 영역의 크기가 확장된다. padding 영역이 늘어난 만큼 content 영역이 줄어드는 것이 아니다. 또한, content 영역의 background color와 같은 색을 가지고 확장되게 된다.)

❕ padding을 적용하지 않고 요소의 width와 height를(content 영역의 크기를) 각각 100px로 했을 때 

컨텐츠 영역만 100px씩 영역을 차지하고 있음.

❕ padding을 상하좌우로 20px씩 적용하고 요소의 width와 height를(content 영역의 크기를) 각각 100px로 했을 때 

컨텐츠 영역 100px에 패딩 영역 20px가 추가됨.

 

➡️ click 같은 이벤트가 content 영역 뿐만 아니라 padding 영역에서 일어나는 경우에도 함수 실행이 가능하다.

➡️ 안쪽 여백의 두께는 padding-top, padding-right, padding-bottom, padding-left와 단축 속성인 padding이 결정한다.

 

3️⃣ 테두리 영역(border area)

➡️ 테두리 경계가 감싼 영역으로 테두리 박스 너비와 테두리 박스 높이가 테두리 영역의 크기이다.

➡️ 안쪽 여백 영역(패딩 영역)을 요소의 테두리까지 포함하는 크기로 확장한다. (border를 설정하면 padding 영역 바로 바깥 영역의 크기가 확장된다. border 영역이 늘어난 만큼 padding 영역이 줄어드는 것이 아니다.)

❕border와 padding을 상하좌우로 20px씩 적용하고 요소의 width와 height를(content 영역의 크기를) 각각 100px로 했을 때 

➡️ click 같은 이벤트가 content와 padding 영역에서뿐만 아니라 border 영역에서 일어나는 경우에도 함수 실행이 가능하다.

➡️ 테두리의 두께는 border-width와 단축 속성인 border가 결정한다.

box-sizing 속성의 값이 border-box라면 테두리 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성을 이용해 명시적으로 설정 가능하다.

➡️ 20px solid와 같이 border color를 따로 다르게 설정해 주지 않은 경우에는 기본 색깔로 검은색의 border가 생성됨.

 

4️⃣ 바깥 여백 영역 (margin area)

➡️ 바깥 여백 경계가 감싼 영역으로 바깥 여백 박스 너비와 바깥 여백 박스 높이가 영역의 크기이다.

➡️ 테두리 요소를 확장해 요소와 인근 요소 사이의 빈 공간까지 포함하도록 만든다.

(즉, content, padding, border는 하나의 요소 내부와 관련된 영역이라면 margin은 다른 요소로부터의 거리 등이 결정되는 영역이다. 따라서 margin 영역을 click하더라도 해당 요소에 이벤트가 수신되지 않는다.)

❕ 요소에 margin을 적용시키면 요소의 위치가 왼쪽 대각선 끝으로부터 멀어지는 것을 볼 수 있다.

margin을 적용시키지 않은 경우

margin: 100px를 적용시킨 경우

 

➡️ 바깥 여백 영역의 크기는 margin-top, margin-right, margin-bottom, margin-left와 단축 속성인 margin이 결정한다.

➡️ 여백 상쇄 (여러 개의 블록에서 마주하는 부분(위쪽과 아래쪽 바깥 여백)은 경우에 따라 가장 큰 여백의 크기를 가진 여백으로 상쇄되는 현상, float나 절대 위치(position: absolute)를 지정한 요소의 여백은 상쇄 X) 발생 경우 요소 간 바깥 여백이 공유되므로 여백 영역이 명확하게 결정되지 않는다.