CSS - em , rem , vw , vh , %

CSS 작업을 할 때, 원리를 파악하지 못 하고 복붙해서 사용해왔다.

 

그래서 앞으로 em과 rem, vw와 vh, % 에 대해 정리해보려고 한다.

 

em, rem

 -> 상대 단위로, 고정되지 않고 특정 기준에 따라 유동적으로 바뀌는 수치를 지정할 수 있다.

em 과 rem은 둘 다 font-size를 기준으로 변화하는 단위이다.

 

차이점으로 rem은 최상위 요소인 html의 font-size를 기준으로 변화한다.

em은 해당 단위가 사용되고 있는 요소의 font-size를 기준으로 변화한다.

 

따라서 css를 작성할 때

 

rem은

// 최상위 요소에 font-size를 지정하고,
html{
	font-size: 10px;
}

// 원하는 요소에 rem을 사용하자
.class{
	width: 10rem;
}

 

em은 

// 최상위 요소가 아닌, 단위가 사용되고 있는 요소를 기준으로 하고싶을 때
.class{
	font-size: 15px;
    width: 10em;
}

형태로 사용하자.

 

 

vw , vh , %

 -> 상대 단위의 일종으로, em과 rem이 font-size를 기준으로 잡았다면,

vw , vh 는 화면 전체 넓이를 기준으로 하고, % 는 부모의 범위를 기준으로 잡는다.

 

.class{
	font-size: 50vw; -> 화면 전체 넓이의 50프로
}

font-size 도 vw , vh로 설정할 수 있으므로, em과 혼합해서 사용할 수 있다.