프론트엔드/HTML, CSS

박스 모델

Ryuzy 2025. 4. 3. 21:56
728x90
반응형

1. 박스 모델

박스 모델(Box Model)은 HTML 요소가 웹 페이지에 표시될 때의 기본적인 크기와 여백 구조를 설명하는 개념으로, 웹 레이아웃을 구성할 때 매우 중요합니다. 하나의 요소는 콘텐츠 영역(content)을 중심으로, 그 바깥에 패딩(padding) → 테두리(border) → 마진(margin) 순으로 감싸져 있으며, 이들이 모두 합쳐져 요소의 실제 화면 상 크기를 결정합니다. 예를 들어, width: 100px인 요소에 padding: 10px, border: 1px solid, margin: 20px을 설정하면, 요소는 총 100px보다 더 넓은 공간을 차지하게 됩니다. 이 계산 방식을 제어하기 위해 box-sizing 속성을 사용하며, border-box를 설정하면 width 안에 padding과 border가 포함되어 예측 가능한 레이아웃을 만들 수 있습니다.

 

2. 패딩

padding은 CSS에서 요소의 콘텐츠(내용)와 테두리(border) 사이의 안쪽 여백을 설정하는 속성입니다. 즉, 텍스트나 이미지 같은 콘텐츠와 경계선 사이의 내부 공간을 확보하여, 내용이 테두리에 너무 바짝 붙지 않고 시각적으로 여유 있게 보이도록 만들어줍니다. padding은 네 방향(위, 오른쪽, 아래, 왼쪽)에 각각 지정할 수 있으며, 하나의 값만 주면 모든 방향에 동일하게 적용됩니다. 예를 들어 padding: 10px은 네 면 모두에 10픽셀 여백을 주고, padding: 10px 20px은 위아래 10px, 좌우 20px의 여백을 의미합니다. padding은 margin과는 다르게 요소의 배경색이나 배경 이미지가 함께 확장되며, 콘텐츠 내부의 여유 공간 확보에 필수적인 속성입니다.

 

1. 축약 표현

padding: 20px; 네 방향 모두 20px
padding: 10px 20px; 위·아래 10px, 좌·우 20px
padding: 10px 15px 20px; 위 10px, 좌·우 15px, 아래 20px
padding: 10px 20px 30px 40px; 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px

 

2. 방향에 따른 속성명

위쪽 padding-top 콘텐츠 위쪽 여백
오른쪽 padding-right 콘텐츠 오른쪽 여백
아래쪽 padding-bottom 콘텐츠 아래쪽 여백
왼쪽 padding-left 콘텐츠 왼쪽 여백

 

 

3. 테두리

border는 CSS에서 HTML 요소의 테두리를 설정하는 속성으로, 요소의 외곽을 감싸 시각적으로 구분하거나 강조할 때 사용됩니다. 테두리는 선의 두께(border-width), 종류(border-style), 색상(border-color)을 조합하여 정의하며, 예를 들어 border: 1px solid black;은 1픽셀 두께의 검은색 실선 테두리를 의미합니다. 네 방향(위, 오른쪽, 아래, 왼쪽)에 각각 따로 지정할 수도 있고, 축약형으로 한 줄에 설정할 수도 있습니다. 테두리는 padding과 margin 사이에 위치하며, 요소의 실제 크기 계산에 영향을 미치므로 레이아웃을 잡을 때 주의가 필요합니다. 특히 box-sizing: border-box를 설정하면 테두리와 패딩을 포함하여 지정한 width와 height 안에 맞춰지기 때문에 예측 가능한 크기 조절이 가능합니다.

 

1. 테두리 스타일

none 테두리 없음 (보이지 않음)
solid 실선 테두리 ─────
dashed 점선 테두리 (긴 대시) – – – –
dotted 점선 테두리 (점 모양) ······
double 이중 선 테두리 ═══
groove 입체감 있는 파인 테두리 (3D 파인 느낌)
ridge 입체감 있는 솟은 테두리 (3D 솟은 느낌)
inset 요소가 안쪽으로 들어간 느낌 (눌린 느낌)
outset 요소가 바깥으로 튀어나온 느낌 (돌출 느낌)

 

2. 방향에 따른 속성명

border-top 위쪽 테두리를 설정
border-right 오른쪽 테두리를 설정
border-bottom 아래쪽 테두리를 설정
border-left 왼쪽 테두리를 설정

각 속성에는 다음 세 가지 구성 요소를 한꺼번에 또는 따로 설정할 수 있습니다:

  • border-방향-width: 테두리 두께
  • border-방향-style: 테두리 종류
  • border-방향-color: 테두리 색상

3. 주의할 점

 

  • 테두리 두께를 조절하면서 요소에 강조 효과를 줄 수 있습니다.
  • border-style 없이 border-width나 border-color만 설정하면 테두리가 표시되지 않습니다.
    (→ border-style 꼭 지정 필요!)

 

 

 

4. 마진

margin은 CSS에서 요소의 바깥 여백(외부 간격)을 설정하는 속성으로, 요소와 요소 사이의 간격을 조절할 때 사용됩니다. 콘텐츠 영역을 기준으로 padding이 안쪽 여백이라면, margin은 요소 바깥쪽 공간을 확보하여 다른 요소들과 겹치지 않도록 하거나 일정한 간격을 줄 수 있습니다. margin은 margin-top, margin-right, margin-bottom, margin-left처럼 네 방향 각각 지정할 수 있고, 축약형으로도 설정할 수 있습니다. 특히 margin: auto는 요소를 가운데 정렬할 때 자주 사용되며, 블록 요소에 유용하게 쓰입니다. 또한 인접한 요소 사이의 세로 마진이 겹치는 마진 병합(margin collapse) 현상도 마진의 특징 중 하나입니다.

 

1. 축약 표현

margin: 20px; 네 방향 모두 20px
margin: 10px 20px; 위아래 10px, 좌우 20px
margin: 10px 15px 20px; 위 10px, 좌우 15px, 아래 20px
margin: 10px 15px 20px 25px; 위 10px, 오른쪽 15px, 아래 20px, 왼쪽 25px

 

2. 방향에 따른 속성명

margin-top 요소의 윗쪽 바깥 여백
margin-right 요소의 오른쪽 바깥 여백
margin-bottom 요소의 아랫쪽 바깥 여백
margin-left 요소의 왼쪽 바깥 여백

 

3. margin: auto

  • auto는 마진 값을 브라우저가 자동 계산해서 설정하라는 뜻입니다.
  • 가장 대표적인 사용: 가로 가운데 정렬
  • margin: auto는 반드시 요소의 width가 지정되어 있어야 효과가 나타납니다.
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>박스 모델 예제</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        background-color: #f0f0f0;
        padding: 40px;
        font-family: Arial, sans-serif;
      }

      .container {
        width: 600px;
        margin: 0 auto; /* auto로 가운데 정렬 */
      }

      .box {
        background-color: white;
        padding: 20px;
        margin: 30px 0;
      }

      .box1 {
        border: 2px dotted #4caf50; /* 실선 */
      }

      .box2 {
        border: 2px dashed #4caf50; /* 점선 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box box1">첫 번째 박스 (테두리: 실선 solid)</div>
      <div class="box box2">
        두 번째 박스 (테두리: 점선 dashed → 마진 겹침도 확인 가능!)
      </div>
    </div>
  </body>
</html>
728x90
반응형