px, %, rem, em 변환과정

그동안 헷갈렸던 px, %, rem, em에 대해, 각 단위들이 어떻게 픽셀(px)로 변환되는지 살펴본다.

See the Pen px, %, em, rem by shinhyejin (@clara-shin) on CodePen.

 

 

 

# 단위변환 (단, x(%)는 px로 변환하려는 현재 값)

• font(%) = 부모의 font-size(px) * x(%)
• lengths(%) = 부모의 lengths(width or height)(px) * x(%) 
• font(em) = 부모의 font-size(px) * x(em)
• lengths(em) = 스타일을 지정한 해당요소의 font-size(px)^[각주:1] * x(em)
• rem = root(html)의 font-size(px) * x(rem)

font(em), lengths(em), rem은 font-size 기준으로 변환!

 

# 고찰

1. html(root)에 font-size를 픽셀단위로 주면 고정값이기 때문에 사용자가 브라우저에서 기본폰트사이즈를 크게 키우고 싶어도 그럴 수 없다.
2. rem 단위는 엣지버전과 익스플로러 11버전부터 지원되는 것을 확인하였다.^[각주:2]
3. root element에 폰트사이즈 10px 대신 퍼센트(%)단위를 사용하여 유연하게 사이즈를 변환할 수 있도록 하는 것도 방법이다. (user agent style 인 root의 font-size가 보통 16px이라고 가정(브라우저마다 다름)할 때, font-size:10px와 동일하게 %값으로 변환하다면, 16px:10px = 100%: x%, x=62.5%. 즉 fonc-size: 0.625)

# 함께보면 좋은 참고사이트

1. 종합 안내: Rem 그리고 Em, 언제 써야 할까, by Kezz Bracey21 Jul 2015

 

 

 

 

---

 

 

 

 

 

 

1. em 단위가 상위 요소의 폰트 크기와 직접 연관되어 있다는 말은 잘못된 오해이다. W3C 명세에 따르면, 실제 사용된 요소의 폰트 크기와 직접 연관된다. 상위 요소의 폰트 크기가 em 값에 영향을 줄 수는 있지만,그것은 상속 때문에 그런것이다. [본문으로]
2. 사이트 참고 https://caniuse.com/#search=rem [본문으로]