단위
웹 디자인에서 크기를 지정할 때 다양한 단위를 사용할 수 있습니다. 이러한 단위들은 크게 절대 길이 단위와 상대 길이 단위로 나눌 수 있습니다. 각 단위의 특성을 이해하고 적절히 사용하면 다양한 디바이스에서 일관된 레이아웃을 만들 수 있습니다.
- 절대 길이 단위 :
px(cm, mm, in, pc, pt ….) - 상대 길이 단위 :
%,vw,vh,em,rem(vmin, vmax)
1. 절대 길이 단위
절대 길이 단위는 고정된 크기를 나타냅니다. 가장 흔히 사용되는 절대 단위는 픽셀(px)입니다.
1.1 픽셀 (px)
픽셀은 "Picture Element"의 줄임말로, 디지털 화면에서 이미지를 표현하는 가장 작은 단위입니다. 픽셀은 고정된 값이기 때문에 직관적으로 이해하기 쉽고 사용하기 편리합니다.
px 단위만 사용하면 안 되나요?
다양한 디바이스가 생겨나며 픽셀 밀도도 다양해졌습니다.
절대단위의 값(px) 사용 시 디바이스별로 다른 위치, 크기로 보이는 문제가 발생하게 됩니다.
물리적 크기는 같으나 픽셀 밀도가 다른 경우
chrome://settings/?search=%ED%81%AC%EA%B8%B0
반응형 웹, 접근성, 사용자 경험을 생각한다면 다양한 상대단위의 개념을 이해하고 잘 사용할 수 있어야 합니다.
2. 상대 길이 단위
상대 길이 단위는 다른 요소나 뷰포트의 크기에 따라 상대적으로 크기가 변하는 단위입니다. 주요 상대 단위로는 %, vw, vh, em, rem 등이 있습니다.
2.1 퍼센트 (%)
퍼센트는 부모 요소의 크기 를 기준으로 하는 상대적인 단위입니다.
2.2 뷰포트 단위 (vw, vh)
vw(viewport width)와 vh(viewport height)는 뷰포트, 즉 브라우저 창의 크기를 기준으로 하는 단위입니다. 1vw는 뷰포트 너비의 1%, 1vh는 뷰포트 높이의 1%를 의미합니다.
2.3 em
부모 요소로부터 상속받은 요소의 글자 크기를 기준으로 하는 배수 단위입니다.
2.4 rem
'root em'의 줄임말로, 최상의 요소(<html>)의 글자 크기를 기준으로 하는 배수 단위입니다. 기본 폰트 사이즈는 16px입니다.
생각보다 웹사이트를 제작할 때 폰트 사이즈에 대한 유지보수사항이 자주 발생합니다. 디자이너, 클라이언트에 따라 선호하는 글자 크기가 다르기 때문입니다.
디자인 파일로 작업을 했다가, 글자를 전체적으로 크게 또는 작게 수정해달라는 요청사항이 많이 와요 이때 rem 단위를 사용하여 폰트 사이즈를 설정했다면,
기준 폰트 사이즈를 수정하면 일괄적으로 변경 처리할 수 있어 유지보수에 용이합니다.
em, rem 어떤 상황에서 어떤 걸 사용하죠?
개인적으로 폰트 사이즈는 rem으로 설정하고 폰트에 크기에 따라 조절이 되야 하는 값들은 em으로 설정합니다.