프로그래밍/css 기초

CSS 기초 공부(5) - 박스 모델

lamarcK 2025. 3. 10. 22:15

앞서 CSS가 디자인이라고 설명을 했다. 인테리어에 빗대어 색상은 가구나 방의 색상, 수치는 가구의 크기 등으로 비유했다. 박스 모델은 그 중에서 방의 크기나 가구 사이의 거리, 가구의 테두리, 방과 방 간의 거리 등을 디자인하는 방식이라고 할 수 있다.

 

박스 모델이란?

박스 모델을 이해하는 가장 간단한 방법은 박스모델의 이름의 기원을 아는 것이다. 웹 페이지의 모든 HTML 요소는 기본적으로 사각형 '박스' 형태를 띠기 때문이다.

이 '박스'는 콘텐츠, 패딩, 테두리, 마진이라는 네 가지 주요 영역으로 구성되며, 각 영역은 요소의 크기와 레이아웃에 영향을 미친다.

박스 모델의 개념에 들어가기 전에 직접 박스 모델의 형태를 보는 것이 이해가 더 쉬울 것이다. 우리들이 흔히 보는 웹 사이트는 모두 이런 박스 모델의 개념으로 구성되어 있기 때문이다.

 

웹페이지의 한 구석에서 마우스 오른쪽 클릭 - 검사를 누르면 개발자 도구를 사용할 수 있다.

 

그런 다음 적당한 <div>를 태그를 눌러보면 아래와 같이 '박스' 형태로 사이트의 레이아웃이 보일 것이다.

 

여기서 computed를 눌러보면 다음과 같이 웹페이지의 특정 부분이 박스 형태로 이루어져 있다는 것을 확인 할 수 있다.

박스 모델의 구성 요소

  • 콘텐츠(Content)
    • 실제 텍스트, 이미지, 비디오 등 요소의 내용이 표시되는 영역이다.
    • width와 height 속성을 사용하여 크기를 조절할 수 있다.
  • 패딩(Padding)
    • 콘텐츠와 테두리 사이의 간격이다.
    • padding 속성을 사용하여 안쪽 여백의 크기를 조절할 수 있다.
  • 테두리(Border)
    • 패딩 영역을 감싸는 선이다.
    • border 속성을 사용하여 테두리의 두께, 스타일, 색상을 설정할 수 있다.
  • 마진(Margin)
    • 테두리 바깥쪽의 간격이다.
    • margin 속성을 사용하여 바깥쪽 여백의 크기를 조절할 수 있다.

이 네 가지 구성 요소는 각각 요소의 크기와 위치를 정의하는 데 중요한 역할을 한다.

실제로 박스 모델을 적용하면 다음과 같은 방식으로 표현된다

<div class="box">
  <p>박스 모델 예시</p>
</div>

 

.box {
  width: 300px; /* 내용 영역의 너비 */
  height: 200px; /* 내용 영역의 높이 */
  padding: 20px; /* 내용과 테두리 사이의 여백 */
  border: 5px solid black; /* 테두리 두께, 스타일, 색상 */
  margin: 30px; /* 테두리 바깥쪽 여백 */
  background-color: lightblue; /* 배경 색상 */
  text-align: center; /* 텍스트 가운데 정렬 */
}

 

 

그러면 이런 방식으로 박스가 구현된다.

하지만 여백 부분은 1개의 박스모델만으로는 정확히 확인이 어렵다. 때문에 여러개의 박스가 있는 예시를 들어보자면 다음과 같다.

<body>
    <div class="outer-box">
        Outer Box
        <div class="inner-box">
          Inner Box 1
          <div class="inner-inner-box">Inner Inner Box</div>
        </div>
        <div class="inner-box">Inner Box 2</div>
      </div>
  </body>
.outer-box {
    width: 300px; /* 외부 박스의 너비 */
    height: 300px; /* 외부 박스의 높이 */
    border: 2px solid black; /* 외부 박스의 테두리 */
    padding: 20px; /* 외부 박스의 내부 여백 */
    background-color: lightgray; /* 외부 박스의 배경색 */
    position: relative; /* 내부 박스들의 기준 위치 설정 */
  }
  
  .inner-box {
    width: 150px; /* 내부 박스의 너비 */
    height: 100px; /* 내부 박스의 높이 */
    border: 2px dashed red; /* 내부 박스의 테두리 (dashed 스타일) */
    margin: 10px; /* 내부 박스의 외부 여백 */
    padding: 10px; /* 내부 박스의 내부 여백 */
    background-color: lightyellow; /* 내부 박스의 배경색 */
  }
  
  .inner-inner-box {
    width: 80px; /* 내부 내부 박스의 너비 */
    height: 50px; /* 내부 내부 박스의 높이 */
    border: 2px dotted blue; /* 내부 내부 박스의 테두리 (dotted 스타일) */
    background-color: lightcyan; /* 내부 내부 박스의 배경색 */
    position: absolute; /* 외부 박스를 기준으로 위치 설정 */
    bottom: 10px; /* 외부 박스 하단으로부터 10px 위로 위치 */
    right: 10px; /* 외부 박스 우측으로부터 10px 왼쪽으로 위치 */
  }

 

해당 예시는 Outer Box라는 가장 큰 박스 안에 Inner Box 2개, Inner Inner Box 1개가 들어있는 모양 새다.

좀 더 직관적인 이해를 위해서 outer-box의 padding과 inner-box의 margin을 없앤다면 어떨까?

그럴 경우 outer-box의 내부 여백(padding)이 0이 되어 inner-box가 outer-box의 왼쪽에 딱 붙어있는 것을 볼 수 있다.

단, Outer Box라는 글씨가 공간을 차지하고 있어서 inner Box가 그만큼 밀려나는 것이다.

만약에 Outer Box라는 글씨를 지우면 inner Box가 Outer Box에 딱 붙게 된다.

만약 이상태에서 inner-box의 margin을 각각 0px, 10px, 20px, 50px로 늘린다면 박스의 위치는 어떻게 변할까?

이처럼 inner-box의 외부 여백이 늘어나서 inner-box가 Outer Box와 멀어지다가 어느 순간 Outer Box를 뚫고 나오는 것을 볼 수 있다.

이것은 기본적으로 박스 모델의 시작 지점이 왼쪽 위 (Top-Left)이기 때문이다.

margin은 요소의 테두리 바깥쪽에 여백을 추가하는 속성인데 inner-box는 왼쪽 위 (Top-Left)를 기준으로 생성되기 때문에 왼쪽 위 (Top-Left)로부터 여백이 늘어나 멀어지다가 Outer Box를 뚫고 나온 것처럼 보이게 되는 것이다.

바로 이것이 테두리 바깥쪽 여백인 마진(Margin)이다.

그렇다면 반대로 Outer Box의 내부 여백인 패딩(Padding)을 늘리면 어떨까?

Outer Box 자체의 크기가 커지는 것을 볼 수 있다. 이는 박스 모델의 작동 방식때문인데

박스 모델은 요소의 크기를 내용(content), 패딩(padding), 테두리(border), 마진(margin)의 합으로 계산한다.

  • 총 너비: 내용 너비 + 왼쪽 패딩 + 오른쪽 패딩 + 왼쪽 테두리 + 오른쪽 테두리 + 왼쪽 마진 + 오른쪽 마진
  • 총 높이: 내용 높이 + 위쪽 패딩 + 아래쪽 패딩 + 위쪽 테두리 + 아래쪽 테두리 + 위쪽 마진 + 아래쪽 마진

때문에 padding의 값이 늘어난 만큼 크기가 커진 것이다.

이전에 inner-box의 margin을 늘렸을 때 inner-box가 outer-box를 뚫고 나오는 것처럼 보였던 현상도 같은 원리로 설명할 수 있다.

 

margin은 투명한 영역이지만 실제로 공간을 차지하며, inner-box의 margin이 증가하면 inner-box의 실제 크기가 커지게 된다.

이때, inner-box가 outer-box를 뚫고 나오는 것처럼 보이는 것은 margin 영역이 투명하기 때문에 발생하는 시각적인 착시 현상이다. 실제로는 margin을 포함한 inner-box의 크기가 outer-box의 크기를 초과하여 inner-box가 outer-box의 영역 바깥으로 밀려나오게 된 것이다.

'프로그래밍 > css 기초' 카테고리의 다른 글

CSS 기초 공부(7) - 가상 class  (0) 2025.03.10
CSS 기초 공부(6) - class란?  (0) 2025.03.10
CSS 기초 공부(4) - 수치를 표현하는 방법  (0) 2025.03.09
CSS 기초 공부(3) - 색상을 표현하는 방법(투명도)  (0) 2025.03.09
CSS 기초 공부(2) - 속성, 값  (0) 2025.03.09

'프로그래밍/css 기초'의 다른글

  • 현재글CSS 기초 공부(5) - 박스 모델

관련글

티스토리툴바