[CSS] px, em vs rem 이해하기

 

 

---

CSS 길이 단위

• px
• em
• rem

 

px

• 웹에서 가장 일반적으로 사용되는 단위
• 이론적으로 화면의 1픽셀
• 렌더링된 값이 변하지 않는 고정된 단위

 

em

• px단위와 다르게 상위 요소의 글꼴 크기를 기준으로 하는 상대적인 단위
• 1em 단위는 현재 글꼴 크기의 높이와 같으며 기본값은 약 16px
• em 단위는 비례적으로 크기가 조정되므로 상위 요소의 글꼴 크기에 영향을 받는다.

 

rem

• “root em”의 줄임말
• rem 단위는 글꼴 크기에 비례한다는 점에서 em 단위와 비슷하지만 루트 요소(HTML 요소)만을 사용하여 글꼴 크기를 계산
• rem 단위는 글꼴 크기 조정 기능을 제공하지만 상위 글꼴 크기의 영향을 받지 않는다.

 

em, rem 적합한 사용 기준

• 보통 글꼴 크기 조정에 필요한 제어 수준과 예측 가능성에 따라 em 단위와 rem 단위 중 하나를 선택하여 사용한다.
• em 단위를 사용할 수 있지만, 특히 복잡한 레이아웃에서는 글꼴 크기가 계단식으로 변경되어 관리하기 어렵다.
• rem 단위는 항상 루트 요소의 글꼴 크기를 기준으로 하기 때문에 글꼴 크기 조정에 대해 보다 일관되고 예측 가능한 접근 방식을 제공한다.

글꼴 요구사항이 명시적이고 일관된 글꼴을 사용한다면,
rem 단위를 사용하는 것이 더 안정적인 선택

• 모든 속성에서 무분별하게 rem 단위를 사용하면 원치 않는 확대 동작이 발생하고 복잡성이 있다.
• 변동적인 크기의 경우 레이아웃 문제가 발생할 수 있다.

width, height 같은 콘텐츠보다 font를 중점으로 사용하여
레이아웃 문제를 조정하는 것을 추천

 

 

 

rem 전환 작업

rem 단위로 회사 전반의 CSS 관행을 변경하는 것은 특히 여러 팀에서 작업하는 경우 필요한 시간과 노력이 필요하다.

이런 경우 단위 변환 프로세스를 최대한 자동화를 고려해보자

 

수동 작업

1. px로 초기 개발

2. 텍스트 리사이저 접근성 검사기를 활용하여 글꼴 크기를 2배로 조정

3. 텍스트 이슈를 조치

 

자동화

 1. Linaria 도입

 

 

---

https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9B%B9%EC%97%90%EC%84%9C-%ED%85%8D%EC%8A%A4%ED%8A%B8-%ED%81%AC%EA%B8%B0-%EC%A1%B0%EC%A0%95%EC%97%90-%EB%8C%80%ED%95%B4-%EB%8B%A4%EC%8B%9C-%EC%83%9D%EA%B0%81%ED%95%98%EA%B8%B0-6ed827589fd9