px과 em은 CSS length 단위로 element의 크기 속성(font-size, width, margin 등)을 설정할 때 쓰인다. px와 em에 대한 설명 및 사용법은 이 포스팅을 참고할 것.
예전에는 px를 많이 사용했는데 어느 샌가부터 em을 사용하는 코드를 많이 보았다. 그러면 둘 중 어느 단위를 사용하는 게 더 좋을까?
둘 중 어느 하나가 ‘무조건 좋다’ 라는 정답은 없지만, em을 사용하는 것이 웹 접근성(Accessibility)을 높일 수 있다고 한다.
예를 들어 눈이 좋지 않은 유저가 자신이 사용하는 브라우저의 글씨 크기를 기본 사이즈(16px)보다 크게 설정했다고 해보자. 이 경우 em은 변경된 폰트 사이즈에 맞게 폰트 사이즈가 변경되지만 px은 변경되지 않는다.
예제 – 브라우저 폰트 사이즈 변경 시 px와 em 폰트 사이즈
<span class="px"> px로 설정한 span 태그 입니다</span> </br> <span class="em"> px로 설정한 span 태그 입니다</span>
html {
font-size: 120%; /* 브라우저 폰트 사이즈 변경 */
}
span.px {
font-size: 24px;
}
span.em {
font-size: 1.5em;
}결과
브라우저의 폰트 사이즈가 기본값인 16px일 경우 두 클래스 모두 폰트 사이즈가 24px로 설정된다(16px X 1.5 = 24px). 브라우저의 폰트 사이즈를 120%로 변경했을 때, em으로 설정한 폰트 사이즈는 더 크게 변경되었지만 px로 설정한 폰트 사이즈는 그대로 24px다.
따라서 접근성을 고려할 때 em을 사용하는 것이 더 나은 선택이 될 수 있다.
참고 자료