HTML CSS

html/css) 박스모델이란

조충희 2025. 6. 3. 10:24

css 박스 모델

html 요소를 네모난 상자들로 표현하는 모델
content < padding < border <margin..

 

예제)

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

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

 

전체 스타일 정의

      * {
        /* 초기화 */
        padding: 0;
        margin: 0;
        /* 요소 크기를 계산하는 기준 방식엔 여러가지가 있다 */
        /* 기본값: content-box */
        box-sizing: content-box;
      }

 

box 클래스에 대한 스타일 정의

      .box {
        width: 200px;
        height: 100px;
        background-color: blue;
      }
      .box {
        padding: 20px;
      }
      .box{
        border: 5px solid darkgreen;
      }
      .box{
        margin: 10px;
      }

 

결과

 

예제2)

  <body>
    <div class="box">div 태그 박스 모델</div>
    <div>div태그2</div>
    <div>
      <pre>
        요소 크기 계산해보기
        box-sizing: border-box 기준
       
        이 기준은 width 속성의 값이 200px 이라면
        콘텐츠 크기 + padding + border 크기를 포함해서 렌더링 된다
        </pre>
    </div>
  </body>

 

전체 스타일

      * {
        /* 초기화 */
        padding: 0;
        margin: 0;
        /* 요소 크기를 계산하는 기준 방식엔 여러가지가 있다 */
        /* 기본값: content-box */
        /* border-box 로 수정하면 */
        box-sizing: border-box;
      }

 

box 클래스 스타일

      .box {
        width: 200px;
        height: 100px;
        background-color: blue;
      }
      .box {
        padding: 20px;
      }
      .box{
        border: 5px solid darkgreen;
      }
      .box{
        margin: 10px;
      }

 

결과

 

예제3)

  <body>
    <div class="container">
      <h1>max-width 예제</h1>
      <p>이 컨테이너는 최대 너비 500px로 제한한다. 창 크기를 조절해보시오</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. In quia,
        recusandae nam sint nihil ea quos neque itaque blanditiis quod ut
        quisquam id dolorem numquam dolorum sapiente reprehenderit dignissimos
        autem! Molestias nihil vitae similique, quas quae quis officiis aliquam,
        obcaecati inventore quod ad rem laudantium? Velit ipsum, voluptas
        impedit aliquid iusto, non natus ut facere dolorum, architecto commodi
        similique. Voluptate.
      </div>
    </div>
  </body>

 

모든 컨텐츠, 모든 컨텐츠의 왼쪽과 오른쪽 스타일

      /* 컨텐츠 왼쪽, 컨텐츠 오른쪽 */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }

 

container 클래스 스타일

      .container{
        width: 100%;
        max-width: 500px;
        background-color: darkgreen;
        padding: 20px;
        /* 위아래 좌우 */
        margin: 20px auto;
      }

 

box 스타일

      .box{
        /* 최대 높이 지정 */
        max-height: 200px;
        padding: 10px;
        background-color: darkred;
        /* 내용이 넘치면 자동 스크롤 */
        overflow: scroll;
      }

 

결과