CSS Responsive Units

css의 요소

selecor / property / values

사이즈를 결정하는 유닛

절대적인 유닛 (Absolute) / 상대적인 유닛 (Relative)

절대적인 유닛 > Px

Px

• 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위
• 컨텐츠가 고정되고, 설정을 바꿔도 반응하지 못하기 때문에 %가 더 많이 사용되는 추세

상대적인 유닛 > em / rem / vw / vh / vim / vmax / %

• 기본적으로 브라우저에서 html에 할당되는 폰트 사이즈 16px

em (relative to parent element)

• 부모 요소에 상대적으로 크기가 결정됨
• 부모의 폰트 사이즈를 곱한 값으로 계산 됨

.parent {
  font-size: 8em;
}

.child {
  font-size: 0.5em;
}

16px*8 = 128px
128px*0.5 = 64px

rem (relative to root element)

• Root 요소 (HTML)에 상대적으로 크기가 결정됨

.parent {
  font-size: 8rem;
}

.child {
  font-size: 0.5rem;
}

16px*8 = 128px
16px*0.5 = 64px

vw, vh (Viewport Width / Viewport Height), vim, vmax

• 이름에서 유추할 수 있듯이 뷰포트를 기준으로 한 단위
• 뷰포트(viewport)란, 웹 페이지에서 사용자의 보이는 영역(visible area)
  따라서 이는 기기별로 달라지게 된다.
• 뷰포트는 '보여지는 영역'이라고 했으니, 결국 보여지는 영역에서 얼마만큼 차지할 것인지를 지정하는 단위

100vw = 뷰포트 너비의 100%
100vh = 뷰포트 높이의 100%
vin = 브라우저의 너비와 높이 중에 더 작은 값의~
vimax = 브라우저의 너비와 높이 중에 더 큰 값의~

%

• 부모 요소에 상대적으로 크기가 결정됨