[CSS] 항목 크기 조정

고유 크기 intrinsic size

• CSS 설정 전 본연의 크기

특정 크기 설정

extrinsic size: 외적인 크기
width, height 값을 지정

백분율 사용

백분율이 얼마인지 알고 있어야 한다.
다른 container 안에 있는 박스의 경우 자식 박스에 백분율 width를 지정하면, 부모 container width의 백분율이 된다.

백분율 margin 및 padding

margin와 padding을 백분율로 설정하면 이상한 동작이 나타날 수 있다.
백분율로 margin과 padding을 사용하는 경우, 값은 inline size에서 계산된다.
-> horizontal mode로 작업할 때의 width

min- max- 크기

항상 특정 높이 이상이 되도록 -> min-height
max-width: 이미지를 원래 width로 표시할 공간이 충분하지 않으면 image의 크기를 줄이면서, 해당 width보다 크게되지 않도록 하는 것

Viewport 단위

Viewport

• 사이트를 보는 데 사용하는 브라우저에서 page의 가시 영역
  width: vw 단위
  height: vh 단위

viewport에 상대적인 크기 지정 가능

1vh = viewport 높이의 1%
1vw = viewport 너비의 1%

box 크기 뿐만 아니라, 텍스트도 조정할 수 있다.

viewport 크기를 변경하면 viewport를 기준으로 크기가 조정되므로 크기도 변경된다.