단위에 관하여: px, em, rem, vh, vw

요즘 좀 한가한 감이 있어서, 과거에 궁금했던 것들을 차곡차곡 정리해보려고 한다. 이것도 뭐 생각나는대로 하는거라 두서는 없을 예정.

 

CSS가 스타일에 대한 문서다보니, 여러가지 단위가 나온다. 그 중 자주 쓰이는 것들이 좀 궁금해서 여러 블로그와 같이 일하는/일했던 퍼블리셔들한테 물어봐서 정리해 보았다. 폰트 크기가 가장 직관적이이서 폰트로 설명하고 있지만 아래 단위는 여백, 너비 등에 모두 적용되는 개념이다.

 

 

 

PX

픽셀은 기본적으로 디스플레이에서 가장 기본이 되는 단위다. 가장 익숙하고 많이 사용하는 단위며, 사용자 환경에 상관없이 고정된 값이다. 하지만 실제 퍼블리싱했을 때와 포토샵에서 설정한 값은 조금 달라보일 수 있다.

 

텍스트를 이미지에 맞춰 정렬해야 하는 경우 혹은 너비가 단순히 1px 단위로 표현할 수 있다면 px을 사용하는 것이 폰트를 더 깔끔하게 표현할 수 있다. 하지만 문제는 너무 다양한 디바이스 환경에 있다는 것이다. PC도 모바일도, 태블릿도 각각 너무 다양한 모니터 사이즈와 해상도를 갖고 있다. px의 취약점은 소수점을 사용할 수 없다는 것인데, 320, 360, 375와 414 px의 너비에 맞춰서 작업하려면 우린 소수점도 필요하다. 이럴 때 우린 "상대적인" 단위를 사용할 수 있다.

 

 

em

금속활자의 알파벳 'M'의 높이에서 따왔다고 한다. 그래서 발음은 [엠]인데, 계속 [이엠]으로 읽게 된다. em은 부모 속성의 폰트 크기를 기준으로 자신의 크기를 계산한다. 기준이 되는 폰트 크기에서 다양한 값을 통해 너비, 높이, 여백 등을 지정할 수 있다.

.parent{
	font-size: 20px;
}
.child{
	height: 1em;  
    /* parent의 20px * 1배수 = 20px */
}
.child-a{
	font-size: 1.2em;
    height: 1em;
    /* child-a 내에 폰트 사이즈가 1.2em으로 변경되었기 때문에 height는 20px*1.2*1 = 24px */
}

자신의 속성에 폰트 크기가 지정되어 있다면, 자신의 폰트 크기를 따라간다. 이 부분에서 어려움이 발생한다. 상속 요소가 너무 많아 복잡해지고, 그 와중에 중간에 개입되는 폰트 크기가 있다면 찾기 어려울 수 있기 때문이다. 이러면 유지보수가 너무 힘들겠지..

 

 

rem

em은 상속 관계가 복잡해지면 값을 계산하기 어렵다는 단점이 있었다. 그래서 기준값을 고정한 상대단위가 탄생하는데, 그것이 root em, rem이다. rem은 루트 요소의 폰트 크기를 기준으로 한다. 일반적으로 html이다. 만약 별도의 font-size를 지정하지 않은 경우에는 각 브라우저에서 기본적으로 설정된 값을 사용한다. 크롬은 16px.

html{
	font-size: 10px;
}
div{
	margin: 1.5em;
}
title{
	height: 2em;
    font-size: 1.6em;
}

 

 

 

vh, vw

vh는 viewport height, vw는 viewpoint width의 약어로, 각각 뷰포트의 높이와 너비를 100등분 한 단위다. viewport는 어플리케이션이 화면상 사용자에게 보여지는 영역이다. 화면에 보여지는 영역을 기준으로 하기때문에 화면 사이즈에 상관없이, 보여지는 영역을 일정하게 차지하도록 설정할 수 있다. 반응형 웹을 위한 작업에 요긴하게 사용되며, 영역별 가이드를 잡을 때도 사용한다.

 

 

 

 

---

어떤 단위를 써야 하는지는 프로젝트에 따라 다를 것이다. 진리의 사바사, 프바프. 매년 가트너에서 뽑는 올해의 기술에 IoT/IoE가 빠지지 않고 등장했던 것처럼, IT 기기들은 점점 다양해지고 연결될 것이다. 다양한 디바이스 환경과 브라우저에 어떻게 대응할 것인가를 고민해야 한다. 

 

또한, 접근성은 훨씬 더 중요해질 것이다. 접근성은 단순히 시각 장애가 있는 사람을 위한 것이 아니다. 한국 인구는 빠르게 고령화되면서 저시력자가 증가하고 있다. 이 사람들을 위한 대응도 중요해질 것이기 때문이다.

 

작년에 4050이 사용하는 앱을 리서치하면서 그동안 생각해보지 못했던 기능을 보았다. 바로 서비스 내에서 폰트 크기를 조절하는 기능이었다. 사실 크기를 조절해야 한다는 생각을 해 본 적도 없어서 나 혼자 놀라운 발견이었다. 

 

 

매일경제 / 한국경제 / BBC News

 

 

 

 

 

 

---

 

참고자료

- https://developer.mozilla.org/en-US/docs/Web/CSS/length

- CSS: em, px, pt, cm, in… - W3C: https://www.w3.org/Style/Examples/007/units.en.html

- CSS에서 rem 단위 사용하기: https://blog.jeongtae.com/rem-%EA%B3%A0%EC%B0%B0