[CSS] rem, em, %, px 비교

CSS에서 폰트나 영역의 사이즈를 나타내는 방식에는 4가지로 다양한 방식을 쓸 수 있다.

rem, em, %, px로 나뉘는데 각각을 알아보고자 한다.

 

px

제일 쉽게 접할 수 있는 px은 픽셀을 가리키는 것으로 화면의 해상도나 비율 등에 따라 변하지 않는 고정된 사이즈라고 생각하면 된다. (정적인 사이즈로 볼 수 있다)

 

%

이름에서 보면 쉽게 알 수 있을 요소로 보이는 것으로 디폴트 폰트 사이즈 변경에 따라 조절해서 보여지는 사이즈를 말한다. (동적인 사이즈로 볼 수 있다) (여기서 예를 하나 들어 font-size에서 100%로 하게 되면 디폴트 사이즈를 16px로 계산을 해서 16px로 나오게 된다. 이 부분은 그냥 외워서 기억해두어야 하는 부분으로 보인다)

 

em

em은 먼저 폰트를 강조하기 위해서 HTML에서 <em>과 같이 사용하는 것과는 다른 의미이다. em의 의미는 글자 M을 음성으로 발음한 것에서 온 것이라고 한다. 옛날 대문자 M의 폭을 기준으로 사이즈를 체크하는 것에서 온 것이라 해서 M의 발음의 em이 된것으로 안다. (1em = 대문자 M의 폭의 1배와 같은 의미) (그러나 요새 사용되는 의미에서 em은 %의 계산과 마찬가지로 16px을 의미한다고 한다.) 추가로 em도 동적인 사이즈로 계산되어 상위의 배율에 영향을 받고 화면의 배율에 따라서 달라진다.

 

rem

em과는 기본적으로 같은 동작을 하지만 다른 점은 더 상위의 비율에 영향을 안 받으면서 동작을 한다는 점이다. body css 같은 부분에 200%와 같은 느낌으로 배율이 적용이 되어 있는 경우에 em으로 하게 되면 상단의 배율도 같이 적용이 되지만 2rem 이런식으로 적용을 할 경우 상위 200프로는 무시하고 2rem 사이즈로 계산된다고 생각하면 된다.

 

추가로 위에서 말하는 비율은 브라우저의 줌 기능으로 배율 조절을 하는 것에는 다 동일하게 사이즈가 바뀐다. (아래 스크린샷의 글꼴 크기를 바꾸게 되는 경우 영향을 받음) 그래서 요새는 눈이 안좋거나 해서 사이즈를 조절한다고 해도 배율 조절을 사용하는 경우가 많기 때문에 실제로 웹디자이너들도 크게 상관을 쓸까 싶긴 하다. (필자는 웹쪽 작업을 하지 않았기 때문에 어떤 걸로 주로 사이즈를 잡는지는 모르겠다)