Properties

Properties

  • account_tree
  • bug_report

Box Sizing

이 섹션에서는 다양한 레이아웃 계산에 사용되는 여러 가지 크기 조정에 대한 기술적인 주제를 다룬다.

개요

다양한 레이아웃 계산에 사용되는 박스의 물리적인 크기 조정에 대한 기술적인 주제를 다룬다. CSS에서 물리적이라는 개념은 CSS3 이후 다양한 언어의 콘텐츠에 대한 기술적 대응의 결과이다. 보통 콘텐츠는 언어에 따라서 가로 쓰기와 세로 쓰기로 나누어진다. 가로 쓰기는 대표적으로 영어와 한글이 있고 세로 쓰기는 대표적으로 주로 아시아권의 언어인 한글, 중국어, 일본어, 몽골어 등이 있다. 물론 현대에는 가로 쓰기가 보편적으로 사용되기는 하지만 여전히 언어에 따라서 세로 쓰기로 만들어진 콘텐츠가 존재한다.

웹은 다양한 콘텐츠를 수용하는 평등의 원칙이 적용되며 이로 인해 CSS에서 다루는 콘텐츠를 담는 박스의 크기에 대한 개념도 변화가 필요했다. 여전히 물리적인 방향을 나타낸 크기 개념인 widthheight가 사용되고 콘텐츠의 흐름을 기준으로 하는 논리적인 크기 개념인 block-size, inline-size 개념이 등장했다.

관련 속성

  • box-sizing

    UA(User Agent)별 박스의 width, height을 계산하는 방식의 차이를 해결하기 위한 속성이다.
  • height

    요소의 물리적인 방향인 세로 크기를 설정한다.
  • max-height

    요소의 물리적인 방향인 최대 세로 크기를 설정한다.
  • max-width

    요소의 물리적인 방향인 최대 가로 크기를 설정한다.
  • min-height

    요소의 물리적인 방향인 최소 세로 크기를 설정한다.
  • min-width

    요소의 물리적인 방향인 최소 가로 크기를 설정한다.
  • width

    요소의 물리적인 방향인 가로 크기를 설정한다.

W3C Modules