PX to REM 가이드
REM(root em)은 문서의 루트 글꼴 크기(보통 16px)에 상대적인 CSS 단위입니다. rem 값은 사용자의 브라우저 글꼴 설정에 따라 확장되므로, 고정 픽셀 값과 달리 rem으로 만든 디자인은 모든 기기에서 접근성과 비율을 유지합니다.
픽셀 값을 입력해 rem 환산값을 보거나, rem 값을 입력해 역변환하세요. 프로젝트에 맞게 기본 글꼴 크기를 조정할 수 있습니다(일부 디자인 시스템은 10px 또는 20px 루트 사용). 변환표는 일반적인 크기를 다루고, 시각적 비교는 동일한 루트 크기에서 두 단위가 똑같이 렌더링됨을 보여줍니다.
Pro Tips
- 여백, 패딩, 간격도 rem으로 변환하세요. 사용자가 글꼴 크기를 변경하면 텍스트와 함께 간격도 확장되어 리듬이 유지됩니다.
- 디자인 시스템에서 명시적으로 변경하지 않는 한 기본값을 16px로 유지하세요. 루트를 10px로 바꾸면 브라우저 글꼴 확대에 의존하는 사용자의 접근성이 깨집니다.
Frequently Asked Questions
Q: REM과 EM의 차이는 무엇인가요?
REM과 EM의 차이는 무엇인가요? rem은 항상 루트(html) 글꼴 크기에 상대적입니다. em은 부모 요소의 글꼴 크기에 상대적이라 중첩 요소에서 누적되지만, rem은 일관성을 유지합니다.
Q: 왜 PX 대신 REM을 사용하나요?
왜 PX 대신 REM을 사용하나요? REM은 사용자 접근성 설정에 따라 확장됩니다. 브라우저 글꼴 크기를 키운 사용자에게는 모든 텍스트가 크게 보입니다. PX는 고정되어 레이아웃이나 접근성을 깨뜨릴 수 있습니다. 현대 모범 사례는 타이포그래피와 간격에 rem을 쓰는 것입니다.
Q: 기본 루트 글꼴 크기는 얼마인가요?
기본 루트 글꼴 크기는 얼마인가요? 모든 주요 브라우저는 16px = 1rem이 기본입니다. 따라서 기본 루트에서 32px = 2rem, 8px = 0.5rem, 24px = 1.5rem입니다.
Q: 미디어 쿼리에 REM을 사용할 수 있나요?
미디어 쿼리에 REM을 사용할 수 있나요? 네. rem으로 작성한 미디어 쿼리는 뷰포트 너비뿐 아니라 사용자의 글꼴 설정에도 반응합니다. px 기반 중단점보다 섬세한 접근성 개선입니다.
Q: 모든 값을 수동으로 변환해야 하나요?
모든 값을 수동으로 변환해야 하나요? 아닙니다. 현대 빌드 도구(PostCSS, Tailwind)가 자동 변환을 처리합니다. 이 계산기는 일회성 변환과 수기 CSS 검토에 사용하세요.
한국 전통색·오방색
오방색은 한국 전통 색채 체계로, 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 가지 기본색이 방위와 계절을 상징합니다. 단청과 한복, 오방장두루마기에 사용되며, 현대 디자인에서도 전통미를 살리는 배색으로 활용됩니다.
청색 #3B5BA5동쪽과 봄을 상징하는 오방색의 파랑
적색 #C12127남쪽과 여름을 상징하는 강렬한 빨강
황색 #EAC102중앙과 대지를 상징하는 노랑
백색 #F5F5F5서쪽과 가을을 상징하는 순백
흑색 #17191C북쪽과 겨울을 상징하는 깊은 검정
쪽빛 #0067A3쪽풀로 물들인 전통 남색. 청바지의 원조
연두색 #81C147새싹의 연한 초록. 단청에 자주 쓰임
살구색 #F7CE68살구 열매를 닮은 부드러운 노란빛
자주색 #583B7E고귀함을 상징하는 전통 보라
단청색 #2E8B8B궁궐과 사찰 단청의 청록색
Q: 오방색이란 무엇인가요?
오방색이란 무엇인가요? 오방색은 한국 전통 색채 체계로 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 색이 방위와 계절을 상징합니다. 단청, 한복, 오방장두루마기에 사용됩니다.
Q: 단청에 쓰이는 색은 무엇인가요?
단청에 쓰이는 색은 무엇인가요? 단청은 궁궐과 사찰의 목조건축을 장식하는 채색 기법으로, 오방색을 기본으로 청록색(#2E8B8B)과 연두색(#81C147) 등을 조화롭게 사용합니다.