박스 모델

웹 페이지에서 요소는 상자와도 같이 사각형의 공간을 차지하는데, 이때 이 사각형의 공간은 다음과 같은 속성들에 의해 구성되는 박스 모델이다.

  • width: 내용 영역의 너비
  • height: 내용 영역의 높이
  • padding: 내용 영역과 테두리 사이의 공간[안 여백]
  • border: 내용 영역과 안 여백을 감싸는 테두리
  • margin: 테두리와 요소의 가장자리 끝 사이의 공간[바깥 여백]

box-sizing

box-sizing 속성으로 웹 브라우저가 어떤 크기를 기준 삼아 요소를 렌더링할 지 지정해 준다.

div {
  width: 640px;
  height: 360px;
  padding: 20px 10px;
  border-width: 5px;
  margin: 30px 20px;
}
  • content-box
    • widthheight 속성은 내용 영역의 너비와 높이만을 반영하고, padding, border, margin의 수치를 반영하지 않는다.
    • 위 CSS 코드가 적용되는 요소의 box-sizing이 이 값일 때, 렌더링되는 크기는 가로 640 + (2 * 10) + (2 * 5) + (2 * 20) = 710px, 세로 360 + (2 * 20) + (2 * 5) + (2 * 30) = 470px이다.
    • 속성을 지정하지 않았을 때 웹 브라우저는 묵시적으로 이 값으로 작동한다.
  • padding-box
    • widthheight 속성이 안쪽 여백의 크기까지 포함하고, border, margin의 수치를 반영하지 않는다.
    • 위 CSS 코드가 적용되는 요소의 box-sizing이 이 값일 때, 렌더링되는 크기는 가로 640 + (2 * 5) + (2 * 20) = 690px, 세로 360 + (2 * 5) + (2 * 30) = 430px이고, 내용 영역의 크기는 가로 640 - (2 * 10) = 620px, 세로 360 - (2 * 20) = 320px이다.
  • border-box
    • widthheight 속성은 테두리까지 포함하고, margin의 수치를 반영하지 않는다.
    • 위 CSS 코드가 적용되는 요소의 box-sizing이 이 값일 때, 렌더링되는 크기는 가로 640 + (2 * 10) + (2 * 5) + (2 * 20) = 710px, 세로 360 + (2 * 20) + (2 * 5) + (2 * 30) = 470px이고, 내용 영역의 크기는 가로 640 - (2 * 5) - (2 * 10) = 610px, 세로 360 - (2 * 5) - (2 * 20) = 310px이다.
    • 전체 선택자(universal selector, *)나 최상위 요소에 box-sizing: border-box;를 적용시켜 요소의 크기를 다루는 트릭이 많이 사용된다.

results matching ""

    No results matching ""