출처
1. MDN - CSS values and units
2. Stackoverflow - CSS - What is best to use for this case (px, %, vw, wh or em)?
3. Stackoverflow - Should I use px or rem value units in my CSS?
4. 웹 디자이너가 PX대신 REM을 사용해야 하는 이유
5. Comprehensive Guide: When to Use Em vs Rem
1. CSS 단위들
CSS에서 길이에 사용되는 단위로는 현재까지 px, rem, vh 만 사용해봤다. 대강 무슨 의미인지 정도는 알고 있으나 면접 때 물어보면 딱히 어떻게 설명할 줄 몰라 공부한 내용을 적어본다.
언급한 단위 외에 더 궁금하면 위 MDN 링크로 들어가면 볼 수 있다.
2. 절대단위
길이가 고정되어 있는 값이다.
2-1. px
MDN에서 명시한 px의 정의에 살펴보면
1px = 1/96 * 1in
px은 절대단위인 것을 알 수 있다.
3. 상대단위
다른 요소의 너비에 비례하여 산정되는 단위이다.
마찬가지로 MDN에서 정의한 각 상대단위들의 정의를 보면 아래와 같다.
em : 부모 요소의 글꼴 사이즈
rem : 최상위 요소의 글꼴 사이즈
vh : 뷰포트 높이의 1%
vw : 뷰표트 너비의 1%
% : 부모 요소 대비 몇 % 너비/높이
3-1. rem, em
rem은 가장 최상위 요소인 html의 글꼴 크기를 기준으로 결정된다. 일반적으로는 16px 값이다.
1) 일반적으로 rem 단위를 권장하는 이유
- 각 장치마다 1px의 크기가 다르다.
기존 MDN의 정의대로 1px 절대요소는 96 dpi(dot per inch) 디스플레이를 기준으로 선정한 값이다.
다시 말하면, 96 dpi 에서는 하나의 점인 1px이 다른 dpi 값을 가진 디스플레이에선 크기가 달라진다.
- em 단위는 부모 요소에 영향을 받기 때문에, 부모 요소가 중첩될 경우 과도하게 커지거나 작아진다.
body { font-size:20px; }
div { font-size:0.5em; } <body> - 20px
<div> - 10px
<div> - 5px
<div> - 2.5px
<div> - 1.25px만약 위와 같이 서로 중첩된 div 태그에 각각 em 단위를 써주게 되면 가장 많이 중첩된 div 태그의 경우 고작 1.25px만 볼 수 있게 된다.
-
CSS3에서 rem 단위는 거의 대부분의 브라우저에서 html 요소의 글꼴 크기와 비례한다.
-
유저 선호도를 고려한 결과이다.
역사적으로 브라우저의 줌 기능은 font-size 어트리뷰트만 확대해줬다. 하지만 폰트 크기만 확대시키다 보니 다른 요소의 디자인까지 깨지게 만드는 문제가 있어 전체 페이지를 확대하도록 설정했다.
단위를 rem 기반으로 사용한 경우 글꼴 크기를 크게 한 사용자는 비례적으로 큰 웹 사이트를 볼 수 있다. 테두리, 간격, 여백 등등이 모두 유동적으로 확대된다.
또한 rem 기반으로 미디어 쿼리를 설정하면 사용자 화면에 맞는 웹 사이트를 보장할 수 있다.
- px은 사용자 설정값을 덮어쓴다.
시각 장애가 있는 사용자의 경우 브라우저 옵션에 기본 글꼴 사이즈를 조절할 수 있는 기능이 있다. 이 기능에서 글꼴 사이즈를 키우고 웹 서핑을 하게 된다.
만약 px로 적용했을 경우 사용자가 기본 글꼴을 24px로 설정했더라도 동일한 px의 컨텐츠를 봐야해서 불편할 수 있다.
2) rem의 단점
- 계산하기 복잡하여 실수가 발생할 수 있다.
대부분 값을 16px로 나누어서 생각해야 하므로 꽤 헷갈리는데 이럴 때는 html 요소의 글꼴 크기를 10px로 낮춰서 계산하기 쉽게 사용할 수도 있다.
- 다른 CSS 라이브러리와 혼용하기 힘들 때
이미 만들어진 라이브러리들을 불러와 사용 중일 때 만약 값들이 어떤 rem 값을 기준으로 했는지 모를 때는 그냥 시원하게 px 쓰자
3) 그럼 em은 언제 써야 하는가?
특정 요소에 비례해서 길이를 나타내야 할 때 유용하다.
예를 들어 위에 메뉴바처럼 글자 태그의 너비에 몇 % 비례해서 아래 하단 바를 생성할 경우 em 단위를 사용하면 유용하다.
아까 스택오버플로우에서도 em은 중첩도가 많아질 경우 극단적으로 크기가 바뀌는 부작용이 있으므로 뭐 당연한 얘기지만
중첩도가 적을 때 em 단위를 사용해야겠다. 다만 이 부분도 그냥 rem으로 해도 딱히 상관없을듯..
괜히 혼선을 주지말고 rem을 주로 쓰도록 하자
4. VS code 확장프로그램 추천
요게 아주 야물딱지다. px로 값을 적어놓으면 VS code에서 알아서 회색 폰트로 몇 rem인지 표시해준다.
