반응형 웹을 위한 단위 정리 vh, vw, calc, em, rem

vw(viewport width)

- 브라우저의 크기에 맞게 반응

- width에 사용

- viewport값의 100분의 1(ex. 전체 width가 1000px 일경우 1vw는 10px가 됨)

- IE9부터 지원

 

vh(viewport height)

- 브라우저의 크기에 맞게 반응

- height에 사용

- viewport값의 100분의 1(ex. 전체 height가 1000px 일경우 1vh는 10px가 됨)

- IE9부터 지원

 

* vmin/vmax

- vh,vw 중 더 작은것을 찾아 적용/vh,vw 중 더 큰 것을 찾아 적용

- 실무에서 거의 사용x

 

calc

- css속성값을 계산식으로 지정

- +, -, *, / 연산자 사용가능

- 중첩 사용 가능

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

- vw, vh와 좋은 시너지를 발휘

// 헤더영역이 50px이고, 컨텐츠 영역을 헤더를 제외할 부분으로 하고 싶다면
height: cacl(100vh-50px);

* 위 요소를 사용할 때는 하위 브라우저에서도 반영이 되게 fallback(대체 스타일 시트)를 같이 써주면 좋다.
.org-box {
	height: 100%;
    height: 100vw;
}

em

- 폰트를 기준으로 비례되는 크기

- 1em은 부모의 폰트 크기로 계산 (ex. 부모폰트의 크기가 10px이면 1em은 10px가 됨)

- 계산이 번거로움

- IE3부터 지원

 

rem

- 폰트를 기준으로 비례되는 크기

- 1rem은 html 최상위 요소인 root element 폰트 크기와 비례됨

- IE9부터 지원

// html의 폰트사이즈를 62.5%로 지정해둘 경우
// 1rem = 10px가 됨(브라우저가 저장해주는 기본 폰트 사이즈는 16px 이므로)
html {
	font-size: 62.5%;
}