HTML CSS

CSS 박스 모델의 이해

jiyoon12 2025. 6. 16. 22:27

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

 

위 그림 처럼 HTML 요소를 "상자"로 보는 방식이에요. 이 상자는 네 개의 층으로 이루어져 있어요.

  • 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>박스 모델에 이해 1</title>
    <!-- 내부 스타일 시트 -->
     <style>
        * {
            padding: 0;
            margin: 0;
            /* 요소 크기를 계산하는 기준 방식이 여러가지 있다 */
            /* 기본값 - box-sizing: content-box */
            box-sizing: content-box;
        }

        .box {
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }

        .box {
            padding: 20px;
        }

        .box {
            border: 5px solid black;
        }

        .box {
            margin: 10px;
        }

     </style>
</head>
<body>
    <div class="box">div 태그 1 박스 모델</div>
    <div>div태그 2</div>
    <div>
        <pre>
            요소 크기 계산 해보기
            전체 너비 = width + 좌우 패딩 + 좌우 보더 + 좌우 마진
            전체 높이 = height + 상하 padding + 상하 border + 상하 margin

            - 박스 모델 크기를 계산하는 기준
            box-sizing : content-box 기준(기본값)
            width : 200px 값을 준다면 컨텐츠만 지정되는 기념이다.
            
        </pre>
    </div>
</body>
</html>

 

2. box-sizing 속성이란?

box-sizing 속성은 CSS에서 요소의 크기(width와 height)를 계산하는 방식을 결정합니다. 이 속성은 박스 모델의 동작 방식을 변경하여 요소의 전체 크기를 더 쉽게 예측하고 관리할 수 있도록 돕습니다. box-sizing에는 두 가지 주요 값이 있습니다. ( box-sizing: border-box; 속성을 사용하자 )

 

  • box-sizing 속성 이해하기 

  • box-sizing: content-box 는 콘텐츠를 width 를 콘텐츠 영역만 의미하고 추가적으로 패딩 + 보더 + 마진을 합산해서 전체 너비를 결정합니다.
  • box-sizing: border-box 는 width: 200px는 콘텐츠 + 패딩 + 보더를 포함 시켜서 계산을 하는 방식 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스 모델에 이해 1</title>
    <!-- 내부 스타일 시트 -->
     <style>
        * {
            padding: 0;
            margin: 0;
            /* 요소 크기를 계산하는 기준 방식이 여러가지 있다 */
            /* 기본값 - box-sizing: content-box */
            /* border-box 로 수정합니다! */
            box-sizing: border-box;
        }

        .box {
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }

        .box {
            padding: 20px;
        }

        .box {
            border: 5px solid black;
        }

        .box {
            margin: 10px;
        }

     </style>
</head>
<body>
    <div class="box">div 태그 1 박스 모델</div>
    <div>div태그 2</div>
    <div>
        <pre>
            요소 크기 계산 해보기
            box-sizing : border-box 기준

            이 기준은 width 속성에 값이 20px 이라면
            콘텐츠 크기 + padding + border 크기를 포함해서 렌더링 된다.
            
        </pre>
    </div>
</body>
</html>

 

 

  • 현대 웹 개발에서는 보통 모든 요소에 border-box를 기본값으로 설정하는 리셋 CSS를 사용합니다.
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*  * 선택자가 가상 요소를 포함하지 않기 때문 */
  • 가상 요소 선택자 ::before와 ::after 이들은 특정 요소의 콘텐츠 앞(::before) 또는 뒤(::after)에 가상의 콘텐츠를 삽입할 수 있게 해줍니다. 이 가상 요소는 실제 DOM에는 존재하지 않지만, 스타일링을 통해 시각적으로 렌더링됩니다.

3. max-width와 max-height는 HTML/CSS에서 요소의 최대 크기를 제한하는 프로퍼티입니다. 이를 통해 요소가 지정된 너비나 높이를 초과하지 않도록 제어할 수 있습니다. 반응형 디자인에서 특히 유용하며, 콘텐츠가 화면 크기에 따라 적절히 조정되도록 도와줍니다.

 

max-width

  • 요소의 최대 너비를 설정합니다.
  • 요소의 너비가 콘텐츠나 다른 스타일에 의해 커지더라도 max-width로 지정한 값을 넘지 않습니다.
  • 단위: px, %, em, rem, vw, vh 등 사용 가능.

max-height

  • 요소의 최대 높이를 설정합니다.
  • 요소의 높이가 콘텐츠에 의해 늘어나더라도 max-height로 지정한 값을 초과하지 않습니다.
  • 단위: px, %, em, rem, vh 등 사용 가능.

<특징>

1. 우선순위: width/height 값이 max-width/max-height보다 크더라도, max-width/max-height가 우선 적용됩니다.

2. 반응형 디자인: 화면 크기에 따라 유연하게 동작하며, 주로 %나 vw/vh 단위와 함께 사용됩니다.

3. 초과 시 동작: 콘텐츠가 최대 크기를 넘으면 overflow 속성에 따라 스크롤바가 생기거나 내용이 잘릴 수 있습니다.

 

  • max-width와 max-height 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>요소 최대 너비와 최대 높이 속성</title>
    <style>
        *, *::before, *::after {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .container {
            width: 100%;
            max-width: 500px;
            background-color: lightblue;
            padding: 20px;
            /* 위, 아래, 좌우 */
            margin: 20px auto;
        }
        .box {
            /* 최대 높이 지정 */
            max-height: 200px;
            padding: 10px;
            background-color: lightcoral;
            overflow: scroll;
            /* 내용이 넘치면 자동으로 스크롤 생성 */
        }
    </style>
</head>
<body>
   <div class="container">
        <h2>max-witdh 예제</h2>
        <p>이 컨테이너는 최대 너비 500로 제한 합니다. 창 크기를 조절해 보세요</p>
        </div>
            <div class="container">
                <div class="box">
                    <h2>max-height</h2>
                    <p>이 박스는 최대 높이 200px 입니다. 내용이 많아지면 자동으로 스크롤이 생깁니다</p>
                    <p>더 많은 텍스트를 추가해서 확인해 봅시다</p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                    Repudiandae eveniet laudantium deserunt nisi voluptates. 
                    Vitae quos repellendus eveniet voluptatum aspernatur illo necessitatibus, omnis deleniti quis repudiandae? 
                    Quis reprehenderit itaque esse.
                    Quidem unde deserunt consequatur aspernatur doloremque, libero dolor iste velit ipsam error. 
                    Dignissimos vel eaque tenetur voluptate tempora tempore earum id ex. 
                    Possimus delectus consectetur sint numquam doloremque! Quaerat, debitis.
                </div>
            </div>
        </div>
   </div> 
</body>
</html>