개발을 하면서 처음 접하는 단위는 보통
px일 것이다. 그러다 좀만 더 알게 되면em과rem이라는 것이 등장한다. 차이점을 알아보도록 하자.
px
px은 절대적인 단위이다.
해당 값에 해당하는 픽셀으로 크기를 고정시키는 것이다.
em
em은 상대적인 단위로 부모 요소에 대한 배수이다.
예를들어 아래의 코드를 살펴보자
<!DOCTYPE html> <html lang="ko"> <head> <style> .parent { font-size: 100px; } .children { font-size: 1.5em; } </style> </head> <body> <div class="parent"> <p>부모</p> <div class="children"> <p>자식</p> </div> </div> </body> </html>
parent 클래스의 p태그는 100px로 설정되었고, children 클래스의 p태그는 부모 요소의 1.5em 즉, 1.5배인 150px로 설정된 것을 볼 수 있다.
rem
rem은 루트 요소에 대한 상대적인 크기를 나타낸다. em은 중첩 될 수록 그 크기를 계산하기 까다롭지만, rem은 루트 요소인 html에 대해서만 배수로 계산하면 된다.
참고로 크롬 브라우저의 html 기본 px 값은 16px이다.
em과 rem을 사용하는 이유?
chrome 기준 설정 -> 모양 -> 글꼴 크기 설정이 있는데 웹사이트에서 글꼴을 px으로 설정하였으면 글꼴 크기를 변경하여도 바뀌지 않는 것을 볼 수있다. 하지만 em이나 rem으로 설정하였다면 글꼴 크기가 바뀌는 것을 볼 수있을 것이다.
즉 접근성을 향상시켜 줄 수 있다는 것인데.. 화면이 깨지는 경우가 발생하여 디자이너가 싫어한다고 한다. 또한 아래와같이 ctrl + (+/-)로 확대 축소를 조절하는게 더 일반적인데 이 경우엔 px로 설정해도 아무 문제없이 커지진다..
FE Developer