프론트엔드 개발자와 퍼블리셔라면 반드시 알아야 하는 CSS 단위

px

 가장 편리하게 기본적으로 사용할 수 있는 단위입니다. PX은 숫자 그대로의 절댓값 고정 크기입니다. 숫자의 크기에 맞게 웹에 보여줍니다. 반응형 웹을 개발한다면, 메인으로 사용하지 않는 것이 좋습니다.

 

rem(= root em)

 상대적인 크기 조절이 가능하기 때문에 반응형 웹사이트를 작업할 때 많이 사용 됩니다.

rem 단위는 html 요소의 크기의 몇 배인지로 크기를 정합니다.

 

예를 들어서 html 폰트 크기를 14px로 설정한다면, 여기서 사용하는 rem은 14px 단위로 계산이 일어납니다. 2rem은 28px이겠죠?

html {
	font-size: 14px;
}



div {
	font-size: 2rem; // 14 * 2 = 28px; 
}

html에서 사이즈를 지정하지 않으면 기본적으로 시스템 사이즈가 적용 됩니다. html의 기본 시스템 사이즈는 { font-size:16px;} 입나다. 이렇게 된다면,1rem은 16px이 됩니다. 

rem이 정말 편한 이유는 html 요소에 rem 크기의 기준이 되는 크기를 수정만 하면, 다른 하위의 모든 rem을 사용하는 크기들을 일률적으로 변경해 줄 수 있기 때문입니다.

 

em

 상대적인 크기 조절이 가능하기 때문에 반응형 웹사이트를 작업할 때 많이 사용 됩니다.

상위 요소의 크기의 몇 배로 할 건지 정하는 상대적인 단위입니다. 

만약 font-size: 1.5em;이라고 했다면, 상위 부모 요소의 크기에 1.5배 크기로 폰트 크기를 정하겠다는 의미가 됩니다.

 

vh, vw

상대적인 크기 조절이 가능하기 때문에 반응형 웹사이트를 작업할 때 많이 사용 됩니다.

블록 단위를 view port 크기에 따라서 상대적으로 조절해 줍니다.