[생활코딩] box-sizing

은돌1113 2022. 1. 29. 17:50

728x90

어떤 element의 width, height를 사용하여 크기를 지정 할 때 해당 element에 padding, border와 같은 속성을

가지고 있을 경우 내가 지정한 사이즈가 예상과 다르게 적용되는 경우가 생깁니다.

어떤 element의 크기를 예측하기 쉽게 해주는 box-sizing을 알아 보겠습니다!

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        margin: 10px;
        width: 150px;
      }

      #small {
        border: 10px solid tomato;
      }

      #large {
        border: 30px solid tomato;
      }
    </style>
  </head>
  <body>
    <div id="small">Hello</div>
    <div id="large">Hello</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        margin: 10px;
        width: 150px;
        box-sizing: border-box;
      }

      #small {
        border: 10px solid tomato;
      }

      #large {
        border: 30px solid tomato;
      }
    </style>
  </head>
  <body>
    <div id="small">Hello</div>
    <div id="large">Hello</div>
  </body>
</html>

[ 결론 ]

box-sizing : border-box는 "box(태그)의 크기를 border에 맞춰서 지정한다"

728x90