박스 모델이 뭐길래?

CSS를 배우면서 제일 헷갈렸던 게 margin과 padding이에요. “둘 다 여백 아냐? 뭐가 다른 거지?” 하고 한참 고민했죠.

웹페이지의 모든 요소는 박스(상자) 형태예요. 텍스트든, 이미지든, 버튼이든 전부 네모 상자라고 생각하면 됩니다. 이 박스는 4개의 영역으로 나뉘어요:

1. Content (내용): 실제 텍스트나 이미지
2. Padding (안쪽 여백): 내용과 테두리 사이 공간
3. Border (테두리): 박스의 경계선
4. Margin (바깥 여백): 다른 요소와의 거리

이걸 이해하면 CSS 레이아웃의 90%는 해결돼요!

Padding vs Margin 차이

Padding (안쪽 여백)

배경색이나 테두리 안쪽의 여백입니다.

.box {
  background-color: lightblue;
  padding: 20px;
}

<div class="box">텍스트</div>

실행 결과:

배경색이 padding 영역까지 채워집니다. 텍스트와 박스 가장자리 사이에 여유 공간이 생겨요.

Margin (바깥 여백)

요소와 요소 사이의 바깥쪽 거리입니다.

.box {
  background-color: lightblue;
  margin: 20px;
}

실행 결과:

배경색은 margin 영역에 적용되지 않아요. 다른 요소와 20px 떨어집니다.

간단히 기억하기:

• Padding = 박스 안쪽 여백 (배경색 포함)
• Margin = 박스 밖쪽 여백 (배경색 미포함)

여백 값 지정하는 4가지 방법

1. 한 개 값 (모든 방향 동일)

.box {
  padding: 20px; /* 상하좌우 모두 20px */
  margin: 10px; /* 상하좌우 모두 10px */
}

2. 두 개 값 (상하 / 좌우)

.box {
  padding: 20px 40px; /* 상하 20px, 좌우 40px */
  margin: 10px 5px; /* 상하 10px, 좌우 5px */
}

3. 세 개 값 (상 / 좌우 / 하)

.box {
  padding: 10px 20px 30px; /* 상 10px, 좌우 20px, 하 30px */
}

4. 네 개 값 (상 / 우 / 하 / 좌) - 시계방향

.box {
  padding: 10px 20px 30px 40px; /* 상 우 하 좌 (시계방향) */
}

외우는 법: 시계 12시부터 시계방향으로 돌아요! (TRouBLe = Top, Right, Bottom, Left)

개별 지정

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;

  margin-top: 5px;
  margin-bottom: 15px;
}

Border (테두리)

테두리는 3가지 속성을 지정해야 해요.

.box {
  border: 2px solid black;
  /* 두께 스타일 색상 */
}

테두리 스타일 종류

border: 2px solid black; /* 실선 */
border: 2px dashed blue; /* 점선 */
border: 2px dotted red; /* 점 */
border: 3px double green; /* 이중선 */

실행 결과:

개별 테두리

.box {
  border-top: 2px solid red;
  border-bottom: 1px dashed blue;
  border-left: none; /* 왼쪽 테두리 없음 */
}

둥근 모서리

.box {
  border-radius: 10px; /* 모든 모서리 둥글게 */
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 완전한 원 */
}

실행 결과:

Width와 Height

박스의 크기를 지정합니다.

.box {
  width: 300px; /* 가로 */
  height: 200px; /* 세로 */
}

주의: box-sizing 속성

기본적으로 width는 content 영역만 의미해요. padding과 border는 추가로 더해집니다.

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

실제 박스 크기 = 300px (content) + 40px (padding 좌우) + 10px (border 좌우) = 350px

이거 너무 불편하죠? 그래서 box-sizing 속성을 씁니다.

* {
  box-sizing: border-box;
}

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

이제 width에 padding과 border가 포함되어 정확히 300px이 됩니다!

거의 모든 프로젝트에서 이렇게 초기화해요:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Display 속성

요소가 화면에 표시되는 방식을 바꿉니다.

1. block (블록 요소)

• 한 줄 전체를 차지
• width, height 설정 가능
• 위아래로 쌓임

div {
  display: block; /* 기본값 */
}

기본 블록 요소: <div>, <p>, <h1>, <ul>, <section> 등

<div style="background: lightblue;">첫 번째 박스</div>
<div style="background: lightcoral;">두 번째 박스</div>

실행 결과:

위아래로 쌓입니다!

2. inline (인라인 요소)

• 콘텐츠 크기만큼만 차지
• width, height 설정 불가
• 옆으로 나란히 배치

span {
  display: inline; /* 기본값 */
}

기본 인라인 요소: <span>, <a>, <strong>, <img>, <button> 등

<span style="background: yellow;">텍스트1</span>
<span style="background: orange;">텍스트2</span>

실행 결과:

옆으로 붙어서 나옵니다!

3. inline-block (인라인 블록)

inline과 block의 장점을 합쳤어요.

• 옆으로 나란히 배치 (inline처럼)
• width, height 설정 가능 (block처럼)

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: lightgreen;
}

<div class="box">박스1</div>
<div class="box">박스2</div>
<div class="box">박스3</div>

실행 결과:

세 개 박스가 옆으로 붙어서 나옵니다!

4. none (숨기기)

.hidden {
  display: none; /* 완전히 사라짐 */
}

요소가 사라지고 공간도 차지하지 않아요. (vs visibility: hidden은 공간은 유지)

중앙 정렬하는 3가지 방법

1. 텍스트 중앙 정렬

.box {
  text-align: center; /* 텍스트만 중앙 정렬 */
}

2. 블록 요소 가로 중앙 정렬

.box {
  width: 300px;
  margin: 0 auto; /* 좌우 여백을 자동으로 균등 배분 */
}

width가 있어야 작동합니다!

3. 세로 중앙 정렬 (flexbox 사용)

.container {
  display: flex;
  justify-content: center; /* 가로 중앙 */
  align-items: center; /* 세로 중앙 */
  height: 300px;
}

Flexbox는 다음 글에서 자세히 다룰 거예요. 지금은 “이런 게 있구나” 정도만 알고 넘어가세요!

Margin Collapse (마진 병합)

위아래로 쌓인 두 요소의 margin이 합쳐지는 현상이에요.

.box1 {
  margin-bottom: 30px;
}

.box2 {
  margin-top: 20px;
}

<div class="box1">박스 1</div>
<div class="box2">박스 2</div>

두 박스 사이 거리는 50px (30+20)이 아니라 30px (둘 중 큰 값)입니다.

해결법:

• padding 사용
• border 사용
• flexbox 사용

실무에서 “어? 여백이 안 늘어나네?” 하면 마진 병합을 의심하세요!

실전 예제: 카드 UI 만들기

배운 내용을 종합해서 카드 UI를 만들어볼게요.

<div class="card">
  <img src="thumbnail.jpg" alt="썸네일" />
  <h3>카드 제목</h3>
  <p>
    카드 내용입니다. 박스 모델을 활용하면 이렇게 예쁜 카드를 만들 수 있어요.
  </p>
  <button>더 보기</button>
</div>

.card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card img {
  width: 100%;
  border-radius: 5px;
  margin-bottom: 15px;
}

.card h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.card p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.card button {
  display: block;
  width: 100%;
  padding: 10px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.card button:hover {
  background: #0056b3;
}

실행 결과:

이 코드만 이해하면 박스 모델은 마스터한 거예요!

개발자 도구로 박스 모델 확인하기

F12 누르고 Elements 탭에서 요소 선택하면 오른쪽에 박스 모델 다이어그램이 보여요. margin, border, padding, content 영역이 색깔별로 표시됩니다.

여기서 실시간으로 값 바꿔보면서 실험하면 엄청 빨리 배울 수 있어요!

다음 단계

박스 모델을 이해했으니 이제 Flexbox를 배울 차례예요. 옛날엔 레이아웃 잡는 게 정말 어려웠는데, Flexbox가 나온 뒤로 세상이 바뀌었습니다.

다음 글에서는 요소들을 옆으로 배치하고, 정렬하고, 순서 바꾸고, 반응형으로 만드는 법을 다룰 거예요. 진짜 실무에서 매일 쓰는 기술이에요!

실습 과제:

• 카드 UI를 3개 옆으로 배치해보기 (inline-block 사용)
• padding과 margin 값 바꿔보면서 차이 체감하기
• box-sizing 있을 때 없을 때 크기 비교해보기

박스 모델만 제대로 이해하면 CSS의 80%는 마스터한 거예요. 나머지는 응용일 뿐!

시리즈 네비게이션

• 이전글: CSS 독학 가이드 - CSS 기초와 선택자
• 현재글: CSS 독학 가이드 - 박스 모델과 레이아웃
• 다음글: CSS 독학 가이드 - Flexbox 완벽 가이드

← 블로그 목록으로