픽셀 ↔ REM
CSS용 픽셀과 REM 변환
픽셀 ↔ REM 사용 방법
CSS용 픽셀과 REM 변환 무료 온라인 도구, 회원가입 없음, 광고 없음. 지금 바로 무료로 사용하세요.
웹 개발자가 픽셀과 REM을 변환하는 이유는?
현대 CSS 모범 사례는 글꼴 크기와 간격에 절대 픽셀 대신 상대 단위(REM, EM)를 사용하도록 권장합니다. 이를 통해 브라우저 설정에서 더 큰 글꼴 크기를 설정한 사용자는 비례적으로 확대된 텍스트를 볼 수 있습니다. 웹 접근성의 기본 요건입니다.
- 글꼴 크기:
font-size: 16px대신font-size: 1rem을 사용하세요. 브라우저의 기본 글꼴 크기가 20px인 경우 모든 것이 비례적으로 확대됩니다. 시각 장애인을 위한 접근성 향상에 필수적입니다. - 간격과 패딩: REM의 마진과 패딩은 사용자 텍스트 설정에 맞게 조정됩니다.
padding: 1.5rem이padding: 24px보다 접근성이 좋습니다. - 디자인 시스템 구현: 피그마와 스케치는 픽셀 단위로 내보냅니다. CSS 작성 전에 REM으로 변환하여 처음부터 접근 가능한 디자인 시스템을 구축하세요.
- 미디어 쿼리: REM 기반 미디어 쿼리는 사용자 텍스트 크기 설정을 존중합니다.
@media (min-width: 48rem)은 기본 16px에서 768px에서 활성화되지만 더 큰 기본 글꼴을 가진 사용자에게는 다른 픽셀 값에서 활성화됩니다. - 컴포넌트 라이브러리: REM으로 재사용 가능한 컴포넌트를 구축하면 다양한 기본 글꼴 크기 컨텍스트에서 일관된 동작이 보장됩니다.
REM vs EM: REM(Root EM)은 항상 루트(html) 요소의 글꼴 크기에 상대적입니다. 문서 전체에서 일관되고 예측 가능합니다. EM은 현재 요소의 글꼴 크기에 상대적이며 중첩 요소에서 예기치 않게 누적될 수 있습니다. REM이 대부분의 용도에 선호됩니다.
브라우저의 기본 글꼴 크기는 얼마인가요?
모든 주요 브라우저(Chrome, Firefox, Safari, Edge)에서 기본값은 16px입니다. 사용자가 브라우저 설정에서 변경할 수 있으며, 이것이 REM을 사용하는 이유입니다. 기본값으로 1rem = 16px이지만 사용자 설정에 따라 18px, 20px 또는 12px가 될 수도 있습니다.
일부 개발자가 html { font-size: 62.5% }를 사용하는 이유는?
루트 글꼴 크기를 16px의 62.5% = 10px로 설정하면 계산이 더 쉬워집니다: 1.6rem = 16px, 2.4rem = 24px. 하지만 이는 사용자의 글꼴 설정을 무시하여 REM의 접근성 목적을 부분적으로 해칩니다. 더 나은 접근법은 CSS calc()를 사용하거나 16으로 나누는 것입니다.
PX 대신 REM을 사용해야 할 때는?
테두리(border: 1px는 항상 1px여야 함), 그림자, 설정과 관계없이 정확한 픽셀 크기가 중요한 요소에는 PX를 사용하세요. 글꼴 크기, 패딩, 마진, 텍스트와 함께 확대되어야 하는 모든 간격에는 REM을 사용하세요.
REM, EM, PX의 차이는 무엇인가요?
PX는 절대적입니다. 크기가 변경되지 않습니다. EM은 부모 요소의 글꼴 크기에 상대적입니다. 중첩에서 누적될 수 있습니다. REM은 루트 글꼴에 상대적입니다. 문서 전체에서 일관됩니다. 접근 가능한 디자인을 위해 글꼴 크기와 간격에는 PX보다 REM을 사용하세요.
전체 디자인을 픽셀에서 REM으로 변환하는 방법은?
각 픽셀 값을 기본 글꼴 크기(기본값: 16)로 나눕니다. 24px ÷ 16 = 1.5rem. Sass 함수(px-to-rem())나 PostCSS 플러그인은 코드베이스 전체에서 이 변환을 자동화할 수 있습니다. VS Code 확장 기능 중 입력 시 자동 변환해 주는 것도 있습니다.
REM vs EM vs PX vs VW/VH vs 백분율
PX는 절대적입니다. 정확하지만 적응적이지 않습니다. REM은 루트 글꼴과 함께 확대됩니다. 타이포그래피와 접근 가능한 간격에 최적입니다. EM은 부모 글꼴과 함께 확대됩니다. 컴포넌트 수준 간격에 유용합니다. VW/VH는 뷰포트 백분율로 유동적인 레이아웃에 좋습니다. 백분율은 부모 요소에 상대적이며 컬럼 너비에 필수적입니다. 현대 CSS는 이들을 조합합니다: 타이포그래피에는 REM, 전체 레이아웃에는 VW/VH, 컬럼 너비에는 백분율.