HTML 및 CSS 디자인에서 rem및는 em글꼴 크기, 간격 및 기타 치수를 정의하는 데 사용되는 상대 단위입니다. 그들 사이의 주요 차이점은 크기가 상대적으로 계산되는 것입니다.
타이포그래피와 타이포그래피의 세계에서 "em"은 현재 글꼴 크기의 배수를 참조하여 글꼴 크기의 상대적 측정값을 나타내는 데 사용되므로 "예를 들어" 배수로 간주될 수 있습니다. 예를 들어, "1em"은 현재 글꼴 크기의 1배를 의미하고, "2em"은 현재 글꼴 크기의 2배를 의미합니다. 이러한 상대적 특성으로 인해 "em" 단위는 유연한 타이포그래피 효과를 위해 상위 요소의 글꼴 크기에 따라 크기가 조정되므로 타이포그래피에서 매우 유용합니다.
-
rem(루트 엠) :
rem루트 요소(일반적으로 요소)의 글꼴 크기를 기준으로<html>계산 됩니다. 즉, 루트 요소에 글꼴 크기를 설정하면rem해당 단위를 사용하는 모든 요소는 이 루트 글꼴 크기를 참조하여 크기를 계산합니다.- 예를 들어 루트 요소의 글꼴 크기가
16px이고 요소가2rem<font-size>를 글꼴 크기로 사용하는 경우 이 요소의 글꼴 크기는32px루트 글꼴 크기의 2배 입니다. 요소).
-
em :
em상위 요소의 글꼴 크기를 기준으로 계산됩니다. 즉, 요소의 글꼴 크기는 해당 상위 요소의 글꼴 크기에 따라 조정됩니다.- 예를 들어, 단락의 글꼴 크기가 로 설정되고
1.5em해당 상위 요소의 글꼴 크기가 이면16px단락의 글꼴 크기는24px(상위 요소 글꼴 크기의 1.5배)가 됩니다.
주요 차이점:
rem루트 요소의 글꼴 크기에 상대적이며 상위 요소의 영향을 받지 않으므로 예측 및 제어가 더 쉽습니다.em이는 상위 요소의 글꼴 크기에 상대적이며 중첩 구조의 영향을 받습니다. 이로 인해 서로 다른 수준의 요소가 서로 다른 글꼴 크기를 갖게 될 수 있습니다.
사용할 단위의 선택은 설계의 필요와 상황에 따라 달라집니다. 일반적으로 rem특히 반응형 디자인의 경우 제어 및 유지 관리가 더 쉽고, em특정 상황에서는 상대적인 크기 조정에 사용할 수 있습니다.