px값이 고정값이기 때문에 처음 작업할 때는 이 px값으로 요소들을 위치시키는 것들이 편할 수도 있지만, breakpoint를 잡기 시작하면서 상당히 귀찮아지는 것을 확인할 수 있다. (사실 페이지 하나 작업하다가 rem으로 작업할 껄~ 이라면서 뒤늦은 후회를 하면서 다시 한번 기억하기 위해서 작성하는 페이지이다.)
그럼 먼저, px,%,vw,vh,em,rem은 무엇인지 간단하게 살펴보자.
이들이 어떤이유에서 발전했는지를 먼저 살펴본다면 더 쉽게 자신의 작업환경에 따라 적용할 수 있다.
1. px, %, em, rem, vh, vw
1-1. px (pixel, 픽셀)
- CSS1(1996)
- Picture Element의 약어
- 고정된 크기
1-2. % (퍼센트)
- CSS1
- 반응형 레이아웃 초기 단계에서 부모 요소의 상대적인 비율을 표현하기 위해 등장
- 상대적인 단위 : 부모의 요소의 크기에 따라 변함
1-3. em
- CSS1
- "em square" 또는 "em unit"에서 유래.
- 텍스트 크기와 비례한 간격을 설정하기 위해 고안된 단위
- 타이포그래피에서 기원한 단위
- 글자 M 너비가 기준
- 상대적인 단위 : CSS에서는 부모 요소의 font-size에 비례
- 텍스트 중심 디자인에 유용
1-4. rem (root Em)
- CSS3(2011)
- em의 단점(중첩된 요소에서 크기가 예기치 않게 변함)을 해결하기 위해 도입
- :root의 font-size를 기준으로 계산 → 전연적으로 일관된 크기 유지 가능
1-5. vh, vw (viewport)
- CSS3
- 모바일 디바이스와 다양한 뷰포트 크기를 지원하기 위해 도입된 단위
- vw : viewport width > 1vw는 뷰포트 전체 너비의 1%
- vh : viewport height > 1vh는 뷰포트 전체 높이의 1%
- 전체 화면을 차지하는 배경, 섹션, 또는 뷰포트에 맞춘 요소 크기를 설정
2. 언제 어떻게 사용되면 좋을까?
2-1. px
- 디스플레이, 해상도에 상관없이 일정한 크기를 유지하기 때문에 콘텐츠 레이아웃의 일관성을 유지할 때
- margin, padding 및 기타 간격에 있어서 추천
- 일정하기 유지되어야 하는 디자인 요소 (예: 버튼, 아이콘 등)
2-2. %
- 부모 요소의 크기에 상대적으로 변해야 하는 요소들
- 반응형 이미지 - 아래와 같이 부모 컨테이너 너비에 따라 이미지 크기가 조정되어야 할 때
- 동적 높이 계산
- 플루이드 (Fluid) 레이아웃
2-3. em
- 특정 요소의 font-size에 비례하도록 값을 설정해야 할 때 유용
- 예: 아이콘이나 버튼 내부 패딩을 텍스트 크기에 비례하게 설정할 때
2-4. rem
- 반응형 font-size 사용시 추천
- 아래와 같이 CSS 변수와 함께 적용해서 사용하면
- 유지보수에도 좋고
- 반응형 작업시에도 매우 편리해지며
- 일관성이 유지되며
- 변수명때문에 font-size만 보더라도 명확히 알 수 있음
:root{
font-size: 10px;
--font-size-l : 4rem;
--font-size-m : 2.5rem;
--font-size-nr : 1.6rem;
/* rem 계산법 : 40px / 10(기준이 되는 font-size) = 4rem
:root의 font-size값을 10px로 할 경우 계산하기 편함 */
}
h1{
font-size: var(--font-size-l);
}
@media (max-width: 768px){
:root{
font-size: 8px;
/*하나씩 폰트 크기를 줄이지 않더라도 root값만을 변경하면 자동으로 변경됨*/
}
}
2-4. vw, vh
- 부모의 크기값과 상관없이 화면 크기 전체(뷰포트)를 기준으로 비례하는 요소 크기를 설정할 때
- 풀스크린 배너
3. 최종정리 (표)
| px (픽셀) | % (퍼센트) | em | rem (root em) | vw, vh (viewport) | |
| 등장 시기 | CSS1 | CSS1 | CSS1 | CSS3 | CSS3 |
| 고정 크기 | 상대 | 상대 | 상대 | 상대 | |
| 기준 | - | 부모를 기준으로 | 부모의 font-size를 기준으로 | :root의 font-size를 기준으로 | viewport를 기준 |
| 등장 배경 | - | 부모요소의 상대적 비율을 표현을 위해 | 텍스트 크기에 비례한 간격 설정을 위해 | em의 단점을 해결하기 위해 | 다양한 뷰포트 크기를 지원하기 위해 |
| 단점 | 반응형 디자인에 비유연적 | 부모 요소 크기 변화에 영향을 받음 | 중첩된 요소에서 부모의 font-size에 따라 의도하지 않은 크기 변화가 발생할 수 있음 | root 값을 변경하면 전체 레이아웃이 바뀔 수 있음 | 브라우저 크기에 따라 너무 작거나 큰 값이 설정될 수 있어 가독성에 영향을 줄 수 있음 |
| 언제 사용? | margin, padding과 같이 디바이스, 해상도에 상관없이 일관된 컨텐츠 레이아웃을 유지할 때 | 부모를 기준으로 변하는 요소를 만들 때 | 텍스트 크기에 비례하게 설정할 때 | font-size + CSS변수와 함께 사용 | 부모의 크기에 상관없이 뷰포트 기준으로 비례하는 요소를 설정할 때 |
