vw / vh
- 고정 단위인 px대신 유동 단위인 %, vh, vw를 사용하면 좀 더 유연한 코드를 만들 수 있다.
- IE9 부터 지원하는 속성
- viewport를 기준으로 하는 단위이다
1vw: 뷰포트 너비의 1%
ex) 500px 너비의 뷰포트일 때, 1vw = 5px
1vh: 뷰포트 높이의 1%
ex) 500px 높이의 뷰포트일 때, 1vh = 5px
calc()와 결합시 좋은 시너지를 낼 수 있다
ex) 헤더 높이가 50px이고 컨텐츠 영역 높이를 '헤더를 제외한 나머지 높이 전체'로 만들고 싶을때
height: calc(100vh - 50px); 를 지정해주면 된다
%
- 부모 요소를 기준으로 계산된다
em / rem
- 동적인 단위
- font에 사용
1em : 부모의 폰트 크기
ex) 부모의 폰트 크기가 16px일 때, 1em = 16px
scss 사용시 계산을 함수로 만들어서 필요할때마다 사용
$browser-font-size: 16;
@function em($pixels, $context: $browser-font-size) {
@return #{$pixels/$context}em;
}
.title {
font-size: em(32); // 32/16 = 2em;1rem: html의 폰트 크기(html요소에 지정된 폰트 크기)
기본 폰트 사이즈 100% = 16px
ex) html의 폰트 크기가 12px일 때, 1rem = 12px
em은 계산하기가 번거로워서 폰트 크기를 62.5%로 지정하고 rem을 사용하면 편하다
html { font-size: 62.5%; }
.image { width: 12rem; } //120px
.item { font-size: 1.6rem; } //16px
.copyright { margin-top: 5rem; } //50px
@media all and (max-width: 750px) {
html { font-size: 50%; } // 이제 문서 내 모든 rem 단위가 영향을 받는다.
}
:D