[CSS] px | % | em | rem 의 차이점은?

 

브라우저의 기본 폰트 사이즈를 변경하지 않았다면, p 태그의 폰트 사이즈는 16px이다. 따라서 텍스트 Large의 폰트 사이즈는 16px의 2배인 32px이 된다. 

 

em - 부모에 따라서 사이즈의 크기가 결정되는 단위
자식의 경우 부모에 계산된 픽셀의 em값을 반영해서 계산 
예를들어 Parent 8em 16px*8 =128px 
child의 경우 0.5em 이면 128px에 0.5em이 반영이  되어 계산이 된다. 

 

<div class="parent">font
	<div class="child"></div>
</div> 


//css

.parent{
	font-size="10px"
    }
    
.child{
	 font-size="2rem" // 부모요소인 parent font 사이즈가 10px이므로 2배인 20px이 된다. 
}

 

rem - 최상단 root에 따라서 사이즈의 크기가 결정되는 단위 

vw -브라우저의 넓이 따라서 사이즈가 크기가 결정되는 단위

vh -브라우저의 넓이 따라서 사이즈가 크기가 결정되는 단위