정확한 퍼블리싱은 정확한 단위 사용으로 부터 시작된다. CSS를 공부하다 보면 단순히 px외의 여러 단위를 사용하는 스타일을 보게될것이다. 단위들이 어떤것이 있고 어떤 특성이 있는지를 이해하면 퍼블리싱에 많은 도움이 된다.
CSS Unit 종류
CSS유닛에는 다음과 같은 유닛들이 있다.
- px
- pt
- %
- em
- rem
- vh, vw
대략적으로 설명을 해보자.
PX (픽셀)
- 디자인상 1픽셀을 기본단위로 사용
- 고정값
- 기존 웹에 사용
- 반응형웹에 부적합
PT (포인트)
- 인쇄용 화면용 단위
- 고정값
- 예: 영수증, 증명서등
- media print 쿼리를 이용
% (퍼센트)
- Parent element 기준 상대 크기
- 유동값
- Grid 잡기 & 미디어 개발에 유용
EM
- Parent element의 폰트 크기 비율
- 기본 16px = 1em
- Scalable
- 반응형웹에 적합
REM
- Root element의 폰트 크기 비율
- 기본 16px = 1rem
- Scalable
- 반응형웹에 적합
vh, vh (Viewport width (vw), Viewport height (vh))
- %와 비슷 but viewport 크기
- vw: 브라우저 화면 width + 스크롤바 크기
- vh: 브라우저 화면 height
정도로 요약할 수 있다.
EM vs REM
요즘은 반응형웹이 기본인 세상이기 때문에 예전과 달리 반응형 스타일을 적용하기위해서 em 혹은 rem을 사용하는 시대이다. 처음 퍼블리싱을 배울때는 두가지가 뭔지도 모르고 이걸 쓰면 전문가처럼 보여서 무작정 사용했지만 경험이 쌓이다보니 정확히 사용하는 방법을 익히게 되었다.
같으면서도 큰 차이가 있는 두가지 방법을 예제를 보면서 살펴보자.
html 태그가 있고 하위에 ul, li 태그를 썻다고 가정해본다.
1. EM 사용
em의 경우 바로 위 부모 element의 영향을 받는다. 즉 여러 depth가 있다면 전부 상대적 크기값을 계속 물려받는다.
2. REM 사용
rem을 사용하면 무조건 최상의 element, 즉 html 태그의 기본 font-size를 바라본다. 어떤 depth에 있는지는 중요하지 않고 무조건 html 태그값에 따라서 상대적인 결과값을 갖는다.
그러므로 다음과 같은 결론을 낼 수 있다.
공통점
- px 단위의 디자인을 계산하기가 어렵다. (계산기 필요)
- Scalable 하기때문에 반응형웹 구현시 유용
차이점
- EM
- Depth가 많아지면 수정되는 element가 생기면 자식 element도 다시 계산필요.
- 좀더 정교한 세팅이 가능 - REM
- Depth가 많아져서도 root 기준이라 계산이 쉽다.
- Root element값으로 한번에 해결
개인적으로는 사용기 편하기때문에 rem을 추천한다. rem은 html태그의 값만 바꿔주면 되므로 반응형웹의 breakpoint를 더 세분화할때 작업량을 크게 줄일 수 있다.
아래와 같이 사용하면 rem을 한번 선언하는것 만으로도 기기별로 조금씩 비율을 줄일 수 있게된다.
// Default
html {
font-size: 16px;
}
// iPhone X
@media only screen and (max-width: 375px) {
html {
font-size: 15px;
}
}
// Galaxy
@media only screen and (max-width: 360px) {
html {
font-size: 14px;
}
}
// iPhone SE
@media only screen and (max-width: 320px) {
html {
font-size: 12px;
}
}