픽셀

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), lengt..