CSS 박스 모델 정리

Flex·2022년 2월 19일

HTML/CSS/JS

CSS 모음

목록 보기

5/14

CSS 박스 모델에 대해 정리해보았다.
박스 모델은 브라우저 - 개발자도구 - Styles 가장 하단에서 살펴볼 수 있다.

📦 박스 모델

박스 모델 : CSS를 구성하는 기반이 되는 개념이다. 설계자 역할을 한다.

특정 웹사이트 분석시 복잡한 레이아웃으로 보일 수 있지만 사실은 사각형의 집합으로 이루어져있다.
부모자식 관계를 가진다.
--> 사각형이 겹겹이 층을 쌓아 구성되어있다.
이미지가 동그라미일 수는 있지만 브라우저가 크기를 계산할 때는 박스 기준으로 계산된다.

1) content : 콘텐츠가 표시되는 영역.
진짜 내용을 담고 있는 핵심 영역이다.
width, height 로 크기 지정이 가능하다.

2) padding : 콘텐츠와 테두리(border) 사이의 여백.

3) border : padding 과 margin 사이의 테두리.
디폴트값은 0으로, 존재는 하지만 눈에 보이지 않는다.

4) margin : 가장 바깥 쪽 레이어.
콘텐츠와 패딩, 테두리를 둘러싸면서 다른 요소 사이 공백 역할을 한다.

📦 콘텐츠 크기 속성

1. width

width : 요소의 너비를 설정한다. 기본값은 콘텐츠 영역의 너비이다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/width

2. height

height : 요소의 높이를 지정한다. 기본값은 콘텐츠 영역의 높이다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/height

width와 height의 공통점

초기값이 auto 이다.

상속되지 않는 속성이다.

Inline 요소에는 적용 불가능하며, Block 요소에만 적용 가능하다.

3. max-width & min-width

max-width : 요소의 최대 너비를 지정한다.

min-width : 요소의 최소 너비를 지정한다.

4. max-height & min-height

max-height : 요소의 최대 높이를 지정한다.

min-height : 요소의 최소 높이를 지정한다.

Q) max- 와 min-, 언제 쓰일까요? 🤔

A) 반응형 웹사이트를 만들 때 주로 사용됩니다.
상속되는 속성이 아니기 때문에 Block 요소의 크기가 더이상 늘거나 줄지 않게 지정할 수 있어요!

📦 margin (단축 속성)

margin : 요소의 네 방향 바깥 여백 영역을 설정한다.

margin-top, margin-right, margin-bottom, margin-left 의 단축 속성이다.

디폴트값은 상하좌우 모두 0 이다.
자식에게 상속되지 않는다.
절대길이와 상대길이 모두 사용 가능하다.
❗️여기서 % 는 viewport 에서가 아닌 부모 width 의 백분율이다.

값에 따른 방향

한 개의 값 = 모든 네 면의 여백
두 개의 값 = 상&하, 좌&우
세 개의 값 = 상, 좌&우, 하
네 개의 값 = 상, 우, 하, 좌 (시계방향)

순서로 지정한다.
padding / border 도 동일하다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/margin

📦 마진 상쇄 (margin collapsing)

마진 상쇄, 마진 겹침, 마진 중복, ... 등으로 불린다.
💢 실제 디자인 업무 시 ~~약간의 빡침~~을 요한다. 우선 알아두도록 하자.

👍🏻 그림으로 잘 정리된 내용의 Velog Link - kimaramy 님의 글

🦊 MDN Link

여러 블록(block) 요소들의 위/아래 margin 이 경우에 따라
가장 큰 크기를 가진 margin 으로 결합(상쇄) 되는 현상이다.
margin-top 과 margin-bottom 에만 일어난다.
버그(Bug) 는 아니며 CSS 명세에 공식적으로 적혀있는 정상적인 현상이다.
아래 3가지 경우에 일어난다.

1. 인접 형제

두 형제 요소의 위/아래 여백이 만나 상쇄된다.

2. 부모-자식요소 간

부모 블록에 border, padding, inline content 가 없어서 부모와 자식의 margin-top 이 만나는 경우
부모 블록에 border, padding, inline content 가 없고,
부모-자식을 분리할 height 값이 지정되지 않아 부모와 자식의 margin-bottom 이 만나는 경우

✅ 다행히도 부모와 자식 요소 사이를 나눌 수 있는 속성이 1px 이라도 존재한다면 발생하지 않는다.

Example

#parent {
  width: 100px;
  height: 100px;

  margin-top: 30px;

  background-color: cadetblue;
}

#child {
  width: 30px;
  height: 30px;

  margin-top: 40px;

  background-color: indianred;
}

--> 부모의 margin-top 이 자식의 것과 겹쳐 상쇄된 것을 확인할 수 있다.