px, rem, em

Note 2021. 1. 18. 09:05

폰트 사이즈 중 하나인 px(픽셀), 절대값으로 사용되는 단위

px로 폰트 사이즈를 설정하면 반응형 사이트에 적용할 경우, 너비에 맞게 폰트 크기도 같이 조절돼야 하는데 그대로 있어 텍스트 크기가 넘치는 경우가 발생한다.

따라서 반응형에 적용할 경우에는 px 대신에 em이나 rem을 사용하는 것이 좋을 것이다.

길이가 유연한 가변 폰트

데스크톱, 모바일 등 다양한 기기의 가로길이에 맞게 글자 크기가 변경된다.

html에서 지정된 폰트 크기에 비례하여 크기가 계산된다.

(젤 위에 기준에 맞춰 거기에 맞게 다 적용됨)

body { font-size: 10px }

1rem : 10px
2rem : 20px (10px * 2)

body(부모)에 정의된 폰트 크기 기준으로 영향을 받기 때문에 유동적이고 파악하기 힘들다.

<body>
  <div class="container">
      <div class="content">안녕
      </div>
  </div>
</body>

여기서 안녕의 폰트 크기는?

body {font-size: 10px }
.container { font-size: 20px }
.content { font-size: 1em }

rem과 달리 최상단 body가 기준이 아니고 content의 부모인 container가 기준이 되므로 폰트 크기는 20px이 된다.

html에서 폰트 사이즈를 지정하지 않으면 기본적으로 시스템 폰트 사이즈인 16px이 지정된다. 이에 맞게 나의 html 문서 폰트 기준까지 16px로 해버리면 아래처럼 계산이 어려워지기 때문에 추천하지 않는다.

{ font-size: 16px }

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem
20px = 1.25rem

그래서 추천 방법으로 폰트 사이즈를 10px이나 62.5%로 설정하면 편리하게 사용할 수 있다.

{ font-size: 10px } 또는 { font-size: 62.5% }

10px = 1rem
12px = 1.2rem
14px = 1.4rem
16px = 1.6rem
20px = 2rem

멋 진 하 루