ToolAtlas기본 16px 루트를 가정해 rem과 px를 오갑니다. html을 62.5%로 둔 스킨은 루트를 10으로 바꿔 넣으세요. 미터법 단위 페이지가 아닙니다.
시안이 14px인데 스킨은 rem만 받고, 암산이 귀찮을 때입니다. 이 페이지는 루트와 부모 글자 크기를 넣어 CSS 길이를 바꿉니다. 부동산 평수나 화씨 변환이 아닙니다.
미터·인치는 단위 환산입니다. 그림자를 미리 보려면 박스 섀도입니다.
16px와 rem을 맞출 때
많은 브라우저 기본은 1rem = 16px입니다. 14를 16으로 나누면 0.875rem입니다. 사내 가이드가 “루트 16, 본문 1rem”이면 그대로 두면 됩니다.
개발 블로그에 흔한 html { font-size: 62.5%; }는 계산을 쉽게 하려고 루트를 10px처럼 만드는 트릭입니다. 이 탭의 루트 칸을 10으로 바꾸지 않으면 숫자가 두 배로 틀립니다. 사용자 확대는 시뮬레이션하지 않습니다. rem을 쓰는 이유는 그 확대에 글자가 따라가게 하려는 것이므로, 결과를 px로 다시 고정하면 접근성 이점이 사라집니다.
티스토리 스킨에서 틀리는 지점
북클럽 계열은 줄간격이 rem이고 본문은 em인 구간이 있습니다. em은 부모에 달립니다. 부모 칸을 16으로 두면 컴포넌트 트리를 해석하지 않습니다.
- 루트와 부모를 확인합니다. 기본을 16으로 두면 1rem은 16px입니다.
- 값을 넣고 px·rem·em을 복사합니다.
%는 부모 대비입니다. 뷰포트 단위 전략을 대신하지 않습니다.
사내 디자인 시안이 제플린·피그마 px로 내려오면, 프론트가 랜딩과 메일 서명 HTML에 rem으로 옮기는 일이 반복됩니다. 루트를 16으로 두고 14·18·24만 바꿔 보면 표가 빨리 납니다. 접근성 담당이 “사용자 글자 크기 200%”를 요구해도, 이 탭은 그 화면을 보여 주지 않습니다. 실제 크롬 설정에서 한 번 키워 보세요.
인쇄 pt 교정기가 아닙니다. 숫자는 탭에 남습니다.