css에는 수많은 단위들이 존재한다. 그중에서 주로 쓰는 단위들 위주로 다뤄볼까 한다.
절대 단위:px
px는 절대 단위로써 px를 지정해주는 순간 css단위는 지정해준 px값으로 고정된다.
그렇지만 px는 치명적인 단점이 존재하는데 바로 웹사이트의 크기를 줄여도 절대 단위인 px는 크기가 변하지 않는다. 이러한 점은 나중에 반응형 웹사이트를 만들때 큰 오점이 될 수 있다고 생각한다.
이러한 점을 보완하기 위해 상대 단위가 나온건지는 모르겠지만 이러한 점들을 보완하기 위해 상대 단위를 쓸 수 있다.
상대 단위:em, rem
em
em은 상위요소 (부모요소)의 font-size를 물려 받아 사용된다.
만약 부모 요소의 font-size가 10px이라면 자식 요소에 적혀있는 font-size:2em은 20px을 뜻하는 것이다. em과 text만 다르지 완전 똑같이 사용할 수 있는 단위가 있는데 바로 %이다. 만약 상위요소가 20px을 가지고 자식요소에 font-size가 2em이라면 우리는 이제 40px을 뜻하는 것을 안다 그리고 이것을 200%라고 지정해도 똑같이 40px을 뜻하는게 된다.
즉 자식요소 font-size에 100%을 쓰는건 1em이라고 쓰는 것과 마찬가지다. 그렇지만 내가 생각하기에 em을 위주로 쓰면 나중에 자식요소에서 font-size를 바꿀려면 항상 상위요소에 적혀있는 font-size를 확인해야 한다. 그런데 만약 font-size를 수없이 상속했다고 한다면 그때 최종적인 상위요소를 찾는 것은 매우 번거로운 일이라고 생각이 든다.
그리하여 나는 rem을 위주로 사용할 생각이다!!
rem
rem은 내가 위에서 말한 px와 em의 단점을 보완해줄 수 있다.
우선 rem은 em에 root를 붙힌 것을 뜻한다 여기서 root란 가장 상위요소인 브라우저를 뜻하고 브라우저에 가지고 있는 font-size는 보통 16px로 정해져 있다. 이렇게 브라우저에서 정해주는 font-size를 물려받는 것이 바로 rem이다. 만약 어떤 태그의 font-size가 2rem이면 16px을 뜻하는 것이다. 그렇다면 rem이 왜 그전에 말한 em이나 px의 단점을 보완한다고 생각하냐면 우선 상대적인 단위로써 반응형 웹사이트에 유용하다. 웹 브라우저가 크기가 줄어들면 rem을 사용했을 때 당연하게 font-size도 브라우저를 따라 줄어들 것이다. 여기서 한발자국 더 나아가 처음에 웹 브라우저의 html태그의 font-size를 62.5%로 설정을 한다면 원래 1rem=16px인 것을 벗어나 1rem=10px로 설정 할 수 있다 그러면 rem을 사용할 때 반응형웹사이트에 잘 반응 할 것이고 px만큼 명확하게 font-size를 잘 파악할 수 있기 때문이다.
