px이 문제가 될까?
기초적인 CSS를 배울 때면 px를 보통 사용하곤 한다. 필자는 어릴적부터 photoshop을 자주 접한 영향 때문인지 픽셀이란 단어가 굉장히 친숙하다. 대부분의 사람들도 마찬가지라고 생각된다. 하지만, 요즘 CSS에서는 px 대신 다른 단위를 사용하는 추세라고 한다.
필자는 이전 프로젝트에서 px을 많이 사용했다. 그때는 이러한 부분까지 공부하지 못했을 뿐더러 이후 반응형 웹으로 수정하려고 했을 땐 개발 기간과 다른 부가적인 이슈로 아쉽게 포기했던터라 다음에 개발을 하게 된다면 px를 절대 사용하지 않기로 마음을 먹었기 때문에, 단위에 대해 확실히 공부를 해보고자 한다. (이러면서 배워가는 거지...)
웹 접근성
웹은 기본적으로 하드웨어, 소프트웨어, 언어, 장소, 능력에 제약없이 모든 사람들이 사용할 수 있도록 설계되었기 때문에, 웹 접근성은 기본적인 요소이다. 하지만, 픽셀 단위를 사용함으로써 웹 접근성이 손상되는 경우가 발생한다고 한다.
대부분의 브라우저에서 사용자는 기본 브라우저 글꼴 크기를 기본값 16px로 설정한다. 하지만, px로 크기를 고정하게 되는 순간 브라우저 설정을 덮어쓰게 되어 사용성에 제약이 발생하게 된다. (사용자별로 기본 글꼴 크기를 조절하는 것은 기본 기능)
즉, 웹 디자인에서는 px를 권장하지 않는다.
다양한 크기 단위
절대적인 단위 (px)
픽셀 (px)
화면을 표시하는 기준이 되는 가장 작은 정사각형 (ex) 10px = 정사각형 10개의 길이)
PPI (Pixel Per Inch)
모니터에서 1인치 정사각형 안에 px이 몇 개나 들어가는지를 나타내는 단위.
촘촘할수록 높은 해상도를 지원하여 세밀한 표현이 가능.
해상도 (Resolution)
화면에 가로로 몇 px, 세로로 몇 px을 보여주는지를 나타냄.
즉, 실제 크기가 아닌 모니터에 따라 보여주는 크기가 다름.
상대적인 단위 (%, em, rem, vw, vh)
퍼센트 (%)
부모 태그에 대해 상대적인 크기
크기 변경 시, 부모의 크기만 바꿔주면 됨.
em
글자 크기를 기준으로 상대적인 크기를 결정
인쇄에서 전통적으로 대문자 M의 크기를 의미.
1em = 부모 태그의 font-size 값. (ex) 부모 태그 font-size가 16px일 때, 2em=32px)
다소 재사용이 어렵고 유지보수가 힘들어지는 경향이 있어 em보다는 rem을 사용하도록 권고.
rem
글자 크기를 기준으로 상대적인 크기를 결정
1rem = 최상위 태그(태그)의 font-size 값. (ex) html font-size가 8px일 때, 2rem=16px) 대부분의 1rem은 16px이다.
화면의 계층 구조 내에서 다른 요소와 어우러지도록 원하는 글꼴 크기를 지정하면서도 크기를 변경하고 싶은 사용자 요구에 유연하게 반응 가능.
vh, vw
반응형 웹을 사용할 때 사용하는 단위.
화면 넓이를 기준으로 하는 백분율 단위. 너비가 변경될 때마다 브라우저가 알아서 다시 계산해주기 때문에, 미디어쿼리를 사용하지 않아도 됨.
1vh = 브라우저 너비의 1% / 1vw = 브라우저 높이의 1%
가장 적절한 사용 방식은
- 부모 요소의 사이즈에 따라 사이즈가 변경 => % / em
- 부모와 상관없이 브라우저 사이즈에 따라 반응 => vh, vw / rem
- 요소의 너비와 높이에 따라 사이즈가 변경 => % / vh, vw
- 폰트 사이즈에 따라 사이즈 변경 -> em, rem
참고자료
웹 디자이너가 PX대신 REM을 사용해야 하는 이유
[CSS] 반응형 웹을 만들때 어떤 단위를 쓰는게 좋을까?
