[CSS] 길이 단위

작성 동기

스프린트 미션을 진행하는 도중, 여러 난관을 거쳤습니다.
웹 브라우저 화면이 줄어들 때 페이지 내의 요소들이 일정 비율을 유지한 채 줄어들어야 하는데 요소들이 브라우저 화면의 축소와 상관없이 그대로 고정되어 있거나 페이지 화면 조정 시 비율이 깨지는 현상이 발생했습니다.
문제의 원인은 px이였습니다.
크기 단위를 px로 지정하니 요소들이 유연하게 움직이지 못한 것 입니다.
이 간단한 문제를 오랜 시간 붙잡았다는 생각에 허탈감이 몰려오더군요.
기본적인 개념이 자리잡지 못했다는 생각이 들었습니다.
그래서 css 길이 단위를 공부하고자 이 글을 작성하게 됐습니다.

---

절대적 길이 단위

요소가 외부 요소들에 영향을 받지 않고 항상 동일한 크기로 고정됩니다. 화면 크기는 기기에 따라 상이하므로 반응형 웹을 만들고자 한다면 가급적 사용을 자제하는 것이 좋습니다. 일반적으로 웹 화면에서 사용하는 유일한 값은 px입니다.

상대적 길이 단위

요소가 외부 요소에 영향을 받습니다. 외부 요소라 함은 상위 요소의 글꼴 크기나 viewport의 크기를 의미합니다. 페이지 상에서 요소가 외부 요소에 따라 비례하여 조정되도록 할 수 있습니다. 그래서 반응형 웹에 유용한 단위입니다.

** viewport : 웹 브라우저 현재 창에서 문서를 볼 수 있는 부분

---

사용빈도가 높은 단위들

1) px 단위

px은 그림의 기본 요소입니다. 이미지를 확대해서 보면 작은 정사각형 단위로 되어있는데 각 정사각형을 픽셀이라 부릅니다. 이 정사각형을 화면에서 크기의 단위로 사용하는 것이죠. 1px은 픽셀 1개 크기를 의미합니다. 22인치 LCD 모니터의 경우 해상도가 1680 * 1050 인데 이것은 가로에1680개의 픽셀, 세로에 1050개의 픽셀을 가진다는 의미입니다.
px과 같은 절대 단위를 사용하여 특정한 값으로 요소의 크기를 고정시킬 수 있습니다.

2) % 단위

백분률 단위의 상대 단위로 요소에 지정된 사이즈에 상대적인 사이즈를 설정합니다.
폰트 사이즈에도 % 단위를 지정할 수 있습니다.

3) em 단위

지정된 요소의 폰트 크기를 기준으로 브라우저에 의해 픽셀값으로 변환됩니다. 1em은 요소에 지정된 사이즈와 같고 2em은 요소에 지정된 사이즈의 2배 입니다.
여기서 주의사항은 모든 상위 부모 요소의 폰트 크기를 상속받는 특성이 있다는 것입니다.
이처럼 em의 변동 상황을 관리하는 것이 무척 어려운 일이므로 가급적 꼭 필요한 경우에만 em이 사용된다고 하네요.
그렇다면 em 단위는 언제 사용하는 것이 적합할까요? em은 html 요소 말고도 다른 요소의 폰트 크기에 따라서 변하는 특성이 있으므로 디자인 요소가 지닌 특별한 상황에 따라 거기에 어울리는 변동성이 요구될 때 사용하면 좋습니다. 예를 들어, 사이트 이동 메뉴에 속해 있는 각 항목마다 주변에 padding, margin, line-height을 설정할 때 em을 사용하면 좋습니다.
메뉴의 폰트 크기가 변해도, 주변의 레이아웃에 영향을 주지 않고, 메뉴 항목 주변의 공간도 비례해서 크기를 조정할 수 있습니다.

4) rem(root em) 단위

html 요소의 폰트 크기를 기준으로 브라우저에 의해 픽셀값으로 변환됩니다. 1rem은 최상위 요소인 html 요소에 지정된 사이즈와 같고 1.5rem은 html 요소에 지정된 사이즈의 1.5배 입니다.

rem은 em이 사용되는 경우를 제외하고 브라우저에 설정된 폰트 크기에 따라 그 크기가 변해야 하는 곳에는 모두 사용합니다. 여기에는 높이, 너비, 패딩, 마진, 테두리 너비, 폰트 크기와 같이 기본적으로 레이아웃의 모든 부분이 해당합니다. 즉, 크기가 변해야 하는 부분은 rem 단위를 사용하는 것이 좋습니다.
또한 미디어 쿼리에도 rem 단위를 사용하는 것이 좋은데요, 해당 사이트를 참고하면 미디어 쿼리에 rem 사용이 왜 권장되는지에 대한 이해에 도움이 될 것 같습니다.
[CSS3강좌] 37강 CSS단위 - px, em, rem, vw, vh 등

5) vw,vh 단위

부모태그를 기준으로 정해지는 %단위의 문제를 개선하기 위해 vw와 vh가 나왔습니다. 이 단위들은 부모 태그가 아닌 웹 브라우저의 크기를 기준으로 하여 브라우저의 너비를 백분율로 환산해 크기를 결정합니다.
vw(viewport width)는 창사이즈 중 가로폭의 1%를,
vh(viewport height는 창사이즈 중 높이의 1%를 크기로 갖습니다.
100vw, 100vh가 전체 화면의 기준이 되며 현재 스크린 크기가
width: 1500px, height: 1000px 이라면, 1vw = 15px, 1vh = 10px이 됩니다.

이처럼 너비가 변경될때마다 브라우저가 알아서 1vw의 값을 다시 계산해주므로 따로 미디어쿼리를 써주지 않아도 브라우저 크기에 비례하여 크기를 조정할 수 있는 장점이 있습니다.

---

참고 자료

• MDN
• 오쌤의 니가스터디
• envato
• poiemaweb