px, rem, em의 차이점

JJeong·2021년 3월 18일
0

좀좀따리 개발지식

목록 보기
18/39
post-thumbnail

픽셀은 모니터마다 고정 값으로 정해지기 때문에 CSS 에서는 absolute length 라고 분류된다. 그러나 필자는 웹에서 글자 크기의 경우는 픽셀(px)을 사용하는 것은 권장하지는 않는다. 왜냐하면 픽셀은 한 번 값을 설정하면 미디어쿼리나 자바스크립트를 사용하지 않는 이상 값을 변경하기 매우 어렵다. 즉 반응형 웹 작업에 그다지 효용적이지 못하다.

em 은 해당 단위가 적용되는 엘리먼트의 글자 크기에 비례한다. 퍼블리싱을 하다보면 디자인의 변경 또는 요구사항 등 기타 여러가지 이유로 인해 글자 크기나 기타 요소들이 바뀔 만한 상황이 비일비재한데, em 의 가장 큰 단점은 하필 자기 자신의 글자 크기를 참조하기 때문에 em 을 사용하는 다른 속성 역시 글자 크기에 영향을 받을 수 밖에 없다는 점이다.

rem 역시 em 과 마찬가지로 글자 크기에 따라 비례되는 속성인데, em 과의 차이점은 rem 은 오직 html 태그의 글자 크기만 참조한다. 다른 모든 태그의 글자 크기는 신경쓰지 않는다.

0개의 댓글