CSS 반응형 단위

 

웹 접근성이 좋은 사이트는 고정 단위 px대신 반응형 단위 em, rem, vw, vh 등을 사용한다.

px을 사용하게 되면 고정값으로 값이 할당 되기때문에 사이즈를 변경해도 반응일 없다.

 

em

폰트 사이즈에 현제 지정된 포인트 사이즈를 나타낸다.

브라우저는 기본적으로 html 폰트 사이즈 16px를 지정한다.

따라서 html의 폰트 사이즈를 설정하지 않았다면 16px == 1em이다.

이처럼 em은 상대적이다.

부모 요소의 사이즈에 따라 변경되어야 할 때 사용한다.

rem

rem은 부모의 사이즈에 따라 사이즈가 계산되는 것이 아니라 루트에 지정된 폰트 사이즈에 따라서 크기가 결정된다.

주로 폰트 사이즈를 지정할때 em보다는 rem을 사용한다.

vw,vh 

뷰포트 너비값과 높이값은 넓이, 높이의 100분의 1단위이다.

예를 들어 브라우저 높이 값이 100px일때 1vh는 1px이라는 뜻이다.