px, em, rem 차이를 알아보자

1. px 

• px은 고정적인 단위이지만, 전세계의 1cm가 동일하듯이 모든 1px이 같은 것은 아니다.
• 픽셀은 모니터 해상도에 따라 고정적인 크기로 설정된다.
• 모니터가 바뀌지 않는 한, 브라우저에서는 절대적인 고정값으로 한번 설정된 크기는 변하지 않으므로 반응형 웹 구현이 아닌 경우 사용하는 것이 좋다.

2. em 

• 가변적인 단위. 폰트 사이즈를 기준으로 계산된다.
• em 은 이 단위가 적용된 엘리먼트의 글자 크기에 비례한다.
• 상위 요소의 폰트 사이즈를 상속 받을 수 있다.
• px 보다는 반응형에 적합하지만, 상위 요소의 사이즈가 바뀌거나 뎁스가 깊어질수록 사이즈를 관리하기 어렵다.
• em 단위는 아래 예시처럼 계산된다.

html {
	font-size: 10px;
}

body {
	font-size: 15px;
}

div {
	font-size: 5px;
	width: 2em;  /*div 요소의 폰트 사이즈를 기준으로 계산되어 5px * 2 = 10px 크기로 결정된다.*/
}

html {
	font-size: 10px;
}

body {
	font-size: 15px;
}

div {
	width: 2em;  /*div 요소의 폰트 사이즈가 지정되어 있지 않은 경우 부모 요소의 폰트 사이즈를
    			   그대로 상속 받기 때문에 15px * 2 = 30px 크기로 결정된다.*/
}

3. rem 

• 가변적이면서도 em 보다 비교적 관리하기 좋은 단위. 폰트 사이즈를 기준으로 계산된다.
• 상위 요소가 아닌 최상위 엘리먼트(html태그)의 폰트 사이즈를 기준으로 가변한다.
• rem 단위는 아래 예시처럼 계산된다.

html {
	font-size: 10px;
}

body {
	font-size: 15px;
}

div {
	font-size: 5px;
	width: 2rem;  /*div 요소의 폰트 사이즈 지정 여부와 관계 없이(부모 요소의 폰트 사이즈와도 무관)
    			최상위 엘리먼트인 html 태그의 폰트 사이즈를 기준으로 계산된다.
    			따라서 width의 사이즈는 10px * 2 = 20px 이다. */
}

 

4. 정리 

결론적으로 css에서 세 가지 단위 중 하나만 꼭 사용해야 할 이유는 없다. 각각의 특징을 알고, 어떤 단위가 유리할 지 선택해서 사용하면 된다. 예를 들어 반응형을 나타내고 싶은 경우 rem을, 항상 동일한 크기로 나타내길 원한다면 px 단위를 사용하면 될 것이다. 덧붙여 멘토님께 말씀하시길 px 같은 경우 안드로이드, ios, 윈도우 등 OS에서 자체적으로 폰트 사이즈를 키우는 경우 px는 적용되지 않는 문제가 있다고 해서 OS 폰트 사이즈에 대응이 가능한 rem 단위를 추천하신다고 하셨고, 앞으로도 적극 rem을 사용해보려고 한다😊