[HTML.CSS] 폰트 단위: px, em, rem 차이

요즘 포트폴리오 웹 페이지를 만들고 있는데 생각보다 퍼블리싱 작업, 그러니까 화면을 그리는 작업이 쉽지 않다는 걸 느끼고 있다. 무엇보다도 모바일, 태블릿, 랩톱, 데스크톱 등 모든 디바이스에서 화면을 봐도 전혀 불편하지 않게끔 만드는 게 정말 어렵다. 모바일 버전과 데스크톱 버전을 각각 디자인해서 퍼블리싱을 해도, 아이폰에서 보여지는 게 다르고 갤럭시에서 보여지는 게 다르니, 매 작업을 할 때마다 옛날 폰들을 다 꺼내서 내가 갖고 있는 장비 모든 걸 다 동원해 화면을 확인하는 노가다를 하고 있다. 크로스브라우징과 반응형 웹 디자인에 대한 이해가 이렇게나 중요한 건 줄 몰랐지...... 개발자가 되겠다고 결심하고 지금까지 공부를 해 오면서 복잡한 코드를 능수능란하게 다룰 줄 아는 것만 내가 지향해야 할 바라고 생각했는데 생각보다 알아야 할 것들이 정말 많다. 

 

폰트의 단위가 px, em, rem이 있다는 건 알고 있었는데 정확히 언제 어디에서 무엇을 써야 하는지는 잘 몰랐다. 모바일 버전과 태블릿 버전, 데스크톱 버전으로 포트폴리오 페이지를 만들어보면서 이번 기회에 폰트 단위에 대해서는 확실하게 알게 됐다. 처음엔 아무것도 모르니 px로 하나하나 모든 걸 다 지정했는데 이러니 화면 width가 달라질 때마다 모든 글자들에 대해서 px을 하나하나 다 지정해주어야 하는 수고로움이 있었다. 이걸 해결해준 게 rem!!!!!!!! 

 

px

 

가장 기본적인 폰트의 단위이다. 절대적인 크기의 단위로서 고정된 값을 가진다. 디자이너들도 거의 px 단위로 작업하므로 가장 많이 쓰이는 폰트 단위.

 

em

 

부모 요소에서 설정된 크기를 기준으로 하는 상대적인 크기. 부모요소에서 font-size: 16px이 지정되어 있다면 자식 요소에서 font-size: 0.8em을 설정하면 16px의 0.8배 크기로 나타난다. 매번 달라지는 부모 요소를 기준으로 하기 때문에 사용하기가 매우 번거로운 단점이 있다. 

 

rem

 

최상위 요소인 html에서 지정된 크기를 기준으로 몇 배인지를 나타내는 상대적 크기. 나는 페이지를 뷰(vue)로 만들고 있는데, 최상단에 적용되는 main.css에서 html 부분에만 화면 너비에 따라 미디어쿼리를 써 주고 하위 컴포넌트에서 rem을 사용하면 화면 너비가 조절될 때마다 폰트 크기가 상대적으로 바뀌어서 매우 간편했다. 앞으로도 가장 많이 쓸 것 같은 폰트 단위!!!