px / em / rem 차이

CSS의 단위로는 절대 단위와 상대 단위가 있다.

 

- px : 고정된 절대값의 단위

모니터에 따라 각각 고정적인 크기를 가지기 때문에

모니터가 바뀌지 않는 한 고정값으로 설정한 폰트 사이즈가 변하지 않아서 반응형 웹에 적합하지 않다.

 

- em, rem : 환경에 따라 변하는 단위

 

---

em과 rem의 차이 (둘 다 가변 단위이며 브라우저 환경에서 px로 변환된다.)

 

em

em은 상위 요소의 글꼴 크기를 상속받으며,

같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시된다.

같은 엘리먼트에 설정된 폰트 값이 없을 경우, 상위 요소의 폰트 사이즈가 기준이 된다.

font-size: 2em;

글자 크기를 상위 요소의 2배로 만든다는 뜻.

 

rem

em과 동일하게 글자 크기에 따라 비례되는 속성이다.

최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환된다.

HTML 태그에서만 지정된 font-size가 기준이 되며

별도의 크기를 지정하디 않는 경우에는 각 브라우저에 기본적으로 설정된 값을 상속 받는다.

---

rem은 기준이 되는 폰트 크기 하나로 고정되어 있는 반면,

em은 같은 엘리먼트 어디에서라도 그 기준이 바뀔 수 있기 때문에

복잡한 css를 가질 경우 변환될 크기를 예측하기 어렵다.

.blog {
	width: 3rem;
}

HTML태그의 기본 font-size는 16px이기 떄문에 

width는 16*5=80px로 출력된다.