[CSS] CSS단위 px / em / rem

보통 CSS 작업을 할때 px가 제일 친숙하고 다 px로 때려박고싶지만!

굉장히 다양하고 작업을 편리하게 만들 수 있는 다양한 단위들이 있기에

다른 단위들을 활용하는 법을 알아야 한다. ㅠ,ㅠ

(em이나 rem말고도 %, vh, vw, vmin, ch, ex등등 다양하지만 IE놈에서 지원되지 않는 것들도 있다고 한다.)

IE망할놈.. 더 공부할게 적어서 좋은건가..?

 

암튼 그렇다면 em과 rem에 대해서 정리해보자!

---

em/rem이 뭔데?

:기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미

 

em/rem을 왜 사용해야하는데?

px는 절대값으로 사용되는 단위이므로 만약 폰트사이즈 수정이 들어왔을 경우 px라면 일일이 찾아서 수정해야하지만 rem/em을 사용했다면 기준이 되는 폰트만 수정해주면 끝이다!

 

간혹 em/rem이 반응형에 최고인 상대적인 크기를 갖는 단위로 알고 있는 경우가 있는데

rem/em은 반응형에 알아서 움직이는 단위는 아니다!

반응형으로 기준이 되는 폰트를 변경해주면 일괄적으로 변경이 되겠지만 

rem/em도 px와 마찬가지로 절대값에 가깝기 때문에 넓이, 높이가 변한다고 사이즈가 줄어들지는 않는다

만약 반응형에 알아서 변하는 사이즈로 적용하고 싶다면 %, vh, vw를 공부해보자~!!

 

em/rem중에 뭐가 더 좋은데?

기준이 다르기 때문에 뭐가 더 좋다고는 말할 수 없으나 실무에서 더 많이 쓰이는 것은 rem이라고 한다!

왜인지 아래에서 각각의 특징을 알아보자!

---

em과 rem

em : 상위 요소 기준

em단위는 상위 요소 크기의 몇 배인지로 크기를 정한다.

font-size: 1.5em;

예를들어 1.5em은 상위 요소크기의 1.5배로 하겠다는 뜻!

 

 

rem : html 요소 기준

rem단위는 문서의 최상위 요소 즉, html 요소의 크기의 몇 배인지로 크기를 정한다.

(* 참고로 html요소크기의 기본값은 웹브라우저 설정에서 정한 글자 크기로 보통 16px)

body {font-size:10px}

1rem : 10px
2rem : 10*2 = 20px