최원종의 개발 블로그

CSS 박스 모델에 이해 - 11 본문

HTML_CSS/사전학습

CSS 박스 모델에 이해 - 11

chl6698 2026. 4. 17. 16:14

CSS 박스 모델은 HTML 요소를 네모난 상자로 구분하여 표현하는 모델

CSS박스 모델은 위 그림처럼 HTML 요소를 "상자"로 보는 방식

상자는 4개의 층으로 이루어져 있다

- **Content(내용)**: 상자 안의 실제 내용물(텍스트, 이미지 등).
- **Padding(패딩)**: 내용과 테두리 사이의 내부 공간.
- **Border(테두리)**: 패딩을 감싸는 경계선.
- **Margin(마진)**: 테두리 밖의 외부 공간.

 

박스 모델을 이해하면 웹페이지에서 요소의 크기와 간격을 정확히 조정할 수있다
이걸 모르면 버튼이 겹치거나 텍스트가 너무 붙어서 보기 불편한 문제가 생길 수 있다

 

실습 코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        /* 박스 크기를 계산하는 기준(기본값은 content-box) */
        box-sizing: border-box;
      }
      .box {
        width: 200px;
        height: 100px;
        background-color: lightblue;
      }

      /* 주요 속성 padding */
      .box {
        padding: 20px;
      }

      /* 주요 속성 border */
      .box {
        border: 10px solid black;
      }

      .box {
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">div 태그 1박 모델</div>
    <div>div 태그 2</div>
    <hr />
    <div>
      <pre>
        요소 크기 계산해 보기
        전체 너비 = width + 좌우 패딩 + 좌우 border
        전체 높에 = height + 상하 패딩 + 좌우 border
      </pre>
    </div>
  </body>
</html>

 

'HTML_CSS > 사전학습' 카테고리의 다른 글

CSS flexbox 사용해보기 - 13  (0) 2026.04.17
CSS position 관련 속성(Position, Z-Index) - 12  (0) 2026.04.17
CSS 선택자(속성 선택자) - 10  (0) 2026.04.17
CSS 선택자(가상 클래스 선택자) - 9  (0) 2026.04.16
CSS 선택자(결합 선택자) - 8  (1) 2026.04.16
'HTML_CSS/사전학습' Related Articles more