높이와 너비

개념 이해하기

width와 height의 백분율은 containing block을 기준으로 합니다. 콘텐츠가 늘어나는 UI에는 고정 height보다 min-height를, 넓은 화면 제한에는 width:100%와 max-width를 함께 쓰는 방식이 안전합니다.

첫 상자는 width: 100%로 .stage 전체를 차지하려 하지만 max-width: 360px에 걸려 그 너비에서 멈춥니다. 두 번째 상자는 .second의 width: 55%가 덮어쓰고, .stage의 55%는 이 실습에서 언제나 360px보다 작아 상한에 닿지 않습니다. 두 상자 모두 글이 한 줄뿐이지만 min-height: 80px 덕분에 높이가 80px 아래로 줄지 않습니다.

너비와 달리 height의 퍼센트 값은 부모 높이가 명시적으로 정해져 있을 때만 계산됩니다. 일반 흐름에 놓인 요소의 부모 높이가 내용에 따라 늘어나는 auto라면 height: 50%는 auto처럼 동작하므로, 화면 높이를 기준으로 삼으려면 vh나 dvh 단위를 씁니다.