em과 rem의 차이점

em과 rem의 차이점

 

CSS에서는 다양한 단위를 사용하여 요소들의 크기와 위치를 정의합니다. 그 중에서도 em과 rem은 상대적인 단위로, 요소의 크기를 상위 요소에 대한 비율로 정의합니다. 이번 글에서는 em과 rem의 차이점에 대해 살펴보고, 어떤 경우에 어떤 단위를 사용하는 것이 적합한지 알아보겠습니다.

 

 

em

 

em은 현재 요소의 글꼴 크기에 대한 상대적인 크기를 정의하는 단위입니다. 이는 부모 요소의 글꼴 크기를 기준으로, 현재 요소의 크기를 설정하며, 부모 요소가 바뀌면 자식 요소의 크기도 변경됩니다.

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* 부모 요소의 글꼴 크기의 1.5배 */
}

 

 

위의 코드에서, .parent 요소의 글꼴 크기가 16px이고, .child 요소의 글꼴 크기가 1.5em으로 설정되어 있습니다. 따라서 .child 요소의 글꼴 크기는 24px(=16px x 1.5)가 됩니다.

하지만, em은 부모 요소의 글꼴 크기가 변경되면 자식 요소의 크기도 함께 변경되므로, 이를 원하지 않는 경우도 있습니다. 또한, 요소의 크기를 설정할 때, 부모 요소의 글꼴 크기가 변경될 가능성이 있으면 em 대신 다른 단위를 사용하는 것이 좋습니다.

 

 

rem

rem은 루트 요소(html)의 글꼴 크기를 기준으로, 현재 요소의 크기를 설정하는 상대적인 크기 단위입니다. 이는 em과는 달리, 부모 요소의 크기가 아니라 루트 요소의 크기를 기준으로 크기를 설정합니다. 따라서 부모 요소의 글꼴 크기가 변경되어도 자식 요소의 크기는 영향을 받지 않습니다.

html {
  font-size: 16px;
}

.parent {
  font-size: 1.5rem; /* 루트 요소(html)의 글꼴 크기의 1.5배 */
}

.child {
  font-size: 1.5rem; /* 루트 요소(html)의 글꼴 크기의 1.5배 */
}

 

위의 코드에서, 루트 요소(html)의 글꼴 크기가 16px이고, .parent 요소의 글꼴 크기와 .child 요소의 글꼴 크기가 모

두 요소 모두 1.5rem으로 설정되어 있습니다. 따라서 .parent와 .child 요소의 글꼴 크기는 모두 24px(=16px x 1.5 x 1.5)가 됩니다.

rem은 em과 달리 루트 요소의 글꼴 크기를 기준으로 하기 때문에, 루트 요소의 글꼴 크기가 변경되면 모든 요소의 크기가 영향을 받습니다. 하지만 이는 상대적인 크기 단위를 사용할 때의 일반적인 문제이며, 일반적으로 루트 요소의 글꼴 크기는 변경되지 않기 때문에 큰 문제가 되지 않습니다.

 

em과 rem의 사용

em과 rem은 각각의 특성에 따라 사용할 수 있는 경우가 있습니다. 예를 들어, 폰트 크기와 같이 상속이 필요한 요소에 대해서는 em을 사용하는 것이 적합합니다. 또한, 글꼴 크기가 동적으로 변경될 가능성이 있는 경우에도 em을 사용하는 것이 좋습니다.

반면, 그 외에 요소들에 대해서는 rem을 사용하는 것이 적합합니다. rem은 모든 요소의 크기를 루트 요소(html)의 글꼴 크기를 기준으로 정의하기 때문에, 글꼴 크기가 변경되어도 다른 요소의 크기는 영향을 받지 않습니다. 따라서 rem을 사용하여 요소의 크기를 정의하면, 요소의 크기가 변경될 가능성이 있는 경우에도 안정적인 크기 조절이 가능합니다.

 

 

 

마치며

em과 rem은 모두 상대적인 크기 단위로, 부모 요소의 크기를 기준으로 크기를 정의하는 것입니다. 그러나 em은 부모 요소의 크기에 영향을 받기 때문에 상속이 필요한 요소에 대해서는 적합하지만, 다른 요소에 대해서는 rem을 사용하는 것이 좋습니다. rem은 모든 요소의 크기를 루트 요소의 글꼴 크기를 기준으로 정의하기 때문에, 글꼴 크기가 변경되어도 안정적인 크기 조절이 가능합니다. 따라서, 요소의 크기를 정의할 때, em과 rem을 적절히 사용하여 요소의 크기를 유연하게 조절할 수 있도록 하면 좋습니다.

 

 

즐거운 코딩생활, 즐코딩

KINcoding