CSS에서 px, em, rem 사용에 대한 자세한 설명

프론트엔드 엔지니어라면 누구나 이런 경험이 있을 거라 생각합니다. 대부분의 국내 디자이너는 px를 선호하는 반면 대부분의 외국 웹사이트는 em과 rem을 선호합니다. 그럼 이 세 가지의 차이점은 무엇이며, 각각의 장단점은 무엇인가요? 다음 글에서는 편집자가 CSS에서 px, em, rem의 차이점에 대해 자세히 설명할 것입니다. 필요한 친구들이 참고할 수 있습니다.

Preface

em과 rem은 디자인의 글꼴 크기에 따라 브라우저에서 픽셀 값으로 변환되는 유연하고 확장 가능한 단위입니다. 1em 또는 1rem 값을 사용하는 경우 브라우저에서 변환할 수 있습니다. 16px에서 160px 또는 기타 값. 브라우저는 1px 를 사용하므로 1px는 항상 정확히 1px로 나타납니다.

em과 rem의 유사점

em과 rem 단위를 사용하면 디자인이 더욱 유연해지며, 고정된 크기 대신 요소의 전체적인 확대 및 축소를 제어할 수 있습니다.

em과 rem의 차이점

차이는 브라우저에 따라 px 값으로 변환되는 사람에 따라

rem 단위가 픽셀 값으로 변환되는 방식

rem 단위를 사용할 때 픽셀로 변환되는 크기는 페이지 루트 요소의 글꼴 크기에 따라 달라집니다. html 요소의 글꼴 크기입니다. 루트 요소 글꼴 크기에 rem 값을 곱합니다.

예를 들어 루트 요소의 글꼴 크기는 16px이고 10rem은 160px, 즉 10 x 16 = 160과 같습니다.

em 단위를 픽셀 값으로 변환하는 방법

em 단위를 사용할 때 픽셀 값은 em 단위를 사용하는 요소의 글꼴 크기에 em 값을 곱한 값이 됩니다. 예를 들어, p의 글꼴 크기가 18px인 경우 10em은 180px, 즉 10 × 18 = 180과 동일합니다.

이해해야 할 핵심 사항:

em 단위가 상위 요소에 상대적인 글꼴 크기라는 일반적인 오해가 있습니다. 실제로 W3 표준에 따르면 em 단위를 사용하는 요소의 글꼴 크기에 상대적입니다. 상위 요소의 글꼴 크기는 em 값에 영향을 미칠 수 있지만 이는 순전히 상속 때문에 발생합니다. 왜 그리고 어떻게 작동하는지 살펴보겠습니다.

알아야 할 사항:

고정 값이 명시적으로 재정의되도록 설정되지 않는 한 루트 html 요소는 브라우저에 설정된 글꼴 크기를 상속합니다. 따라서 html 요소의 글꼴 크기는 rem 값에 의해 직접 결정되지만 글꼴 크기는 먼저 브라우저 설정에서 나올 수 있습니다. 따라서 브라우저의 글꼴 크기 설정은 rem 단위를 사용하는 모든 값과 em 단위를 통해 상속된 모든 값에 영향을 미칠 수 있습니다.

em 요약

위의 모든 내용은 다음과 같이 요약됩니다.

1. 픽셀 값으로 변환된 rem 단위는 html 요소의 글꼴 크기에 따라 결정됩니다. 이 글꼴 크기는 특정 단위가 명시적으로 재정의되지 않는 한 브라우저의 글꼴 크기 설정에 영향을 받습니다.

2. em 단위는 사용하는 글꼴 크기에 따라 픽셀 값으로 변환됩니다. 이 글꼴 크기는 특정 단위로 명시적으로 재정의되지 않는 한 상위 요소에서 상속된 글꼴 크기에 따라 결정됩니다.

rem 단위를 사용하는 이유:

Rem 단위는 가장 강력한 성능을 제공하며 단순히 상속이 아닌 일관된 크기를 제공하는 것만은 아닙니다. 대신 고정된 px 단위를 사용하는 대신 웹사이트 어디에서나 rem을 사용하여 사용자 선호도를 얻고 요소 크기에 영향을 줄 수 있는 방법을 제공합니다.
이러한 이유로 rem 단위를 사용하는 주된 목적은 사용자가 브라우저를 어떻게 설정하든 상관없이 레이아웃 크기를 올바른 크기로 조정하는 것입니다.

em 단위를 사용하는 이유

em 단위는 html 요소의 글꼴 크기가 아닌 font-size 값에 따라 달라집니다.

이를 위해 em 유닛의 주요 목적은 특정 디자인 요소의 범위 내에서 확장성을 허용하는 것이어야 합니다.

예를 들어 em 값을 사용하여 navigation 메뉴 항목의 패딩, margin, line-height 등을 설정할 수 있습니다. 0.9rem 글꼴 크기의 메뉴

이런 식으로 메뉴의 글꼴 크기를 변경하면 메뉴 항목 주위의 간격이 남은 공간에 비례하여 조정됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

CSS가 브라우저의 기본 스타일을 처리하는 방법

CSS는 화살표 프로세스를 사용하여 눈에 보이는 진행률 표시줄을 구현합니다

위 내용은 CSS에서 px, em, rem 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!