도구 가이드
CSS에는 크기를 나타내는 단위가 여럿 있습니다. px는 화면 픽셀에 고정된 절대 단위이고, rem은 문서의 기본 글자 크기를, em은 해당 요소의 글자 크기를 기준으로 하는 상대 단위입니다.
상대 단위를 쓰면 사용자가 브라우저 글자 크기를 키웠을 때 레이아웃이 함께 확대되어 접근성이 좋아집니다. 그래서 요즘 CSS는 px 대신 rem을 기본으로 쓰는 경우가 많습니다.
이 변환기는 기준 글자 크기를 지정하고 px·rem·em·pt·%를 상호 변환합니다. 대부분의 브라우저 기본값은 16px이므로 1rem은 16px입니다.
사용 방법
- 기준 글자 크기를 입력합니다. 기본값은 16px입니다.
- 변환할 값과 단위를 입력합니다.
- 다른 단위로 변환된 값을 확인합니다.
- 필요한 값을 복사해 스타일시트에 사용합니다.
이럴 때 유용해요
- 디자인 시안의 px 값을 rem으로 옮길 때
- 인쇄용 스타일에서 pt 단위로 변환할 때
- 중첩된 요소에서 em 값이 실제로 몇 px인지 확인할 때
- 반응형 타이포그래피 규칙을 정할 때
사용 팁
- rem은 문서 루트 기준이라 값이 예측 가능하지만, em은 부모 요소 기준이라 중첩될수록 배수로 커집니다.
- 1rem = 16px 가정은 사용자가 브라우저 설정을 바꾸면 달라집니다. 그것이 상대 단위를 쓰는 이유입니다.
- 테두리 두께처럼 늘어나면 안 되는 값은 px로 두는 편이 낫습니다.