px, em, rem 의 차이

요약

웹 디자인의 사이즈 단위

상대 단위

절대 단위

px

• 어떤 환경이든 관계없이 px의 크기는 고정적이다.

• 브라우저에서는 전체적인 font size를 변경하는 기능이 존재한다. 하지만, 개발자가 특정 요소의 font size를 px로 설정해두면 브라우저에서 크기를 아무리 변경해도 적용되지 않는다.

em

div {
	font-size: 50px;
	width: 2em; //100px
}

• 현재 요소의 font size를 1em 단위로 사용한다.

• 만약 현재 요소에 font size가 정해지지 않았다면 상위 요소의 font size를 기준으로 적용된다.

• 상위 요소의 영향을 받는 단위이기 때문에 상위 요소의 크기에 따라 유동적인 변환이 필요한 경우에 사용한다.

• 하지만 요소 중첩이 많은 경우에는 크기 계산이 어려워질 수 있기 때문에 주의해서 사용해야 한다.

rem

html {
	font-size: 16px;
}

div {
	font-size: 8px;
	width: 2rem; // 32px
}

• root em이란 뜻으로 html 태그 요소의 font size를 1rem 단위로 사용한다.

• 기본적으로 html font size는 16px이며 개발 환경에서 크기를 변경하면 모든 rem의 크기가 변경된다.

• 최상위 요소에 영향을 받는 단위이기 때문에 브라우저의 전체 글꼴 크기를 변경할 때 함께 변경되길 원할 때 사용한다.

출처