🤔 px대신 rem? em?

rem , em 이란?

• CSS 를 이용해 폰트나 마진, 패딩 등의 크기를 지정할 때 정확한 px 로 지정할 수도 있지만, 상대적인 값을 표현해주는 단위인 rem 이나 em 을 사용하기도 합니다.

• CSS에서 em과 rem은 상대적인 길이 단위입니다. 두 단위는 서로 비슷하지만 조금 다릅니다.

• em 단위는 부모 요소의 글꼴 크기를 기준으로 크기를 지정합니다. 예를 들어, 1em은 부모 요소의 글꼴 크기와 같은 크기가 됩니다. 따라서 부모 요소의 글꼴 크기에 따라 em 값이 달라질 수 있습니다.

• rem 단위는 루트 요소(root element)의 글꼴 크기를 기준으로 크기를 지정합니다. rem은 루트 요소의 글꼴 크기와 같은 크기가 됩니다. 따라서 브라우저의 글꼴 크기 설정에 따라 rem 값이 달라질 수 있습니다.

이 두 단위의 가장 큰 차이점은 상속의 영향입니다. em은 부모 요소의 글꼴 크기를 상속하므로, 중첩된 요소에서 em 값을 사용할 때 이를 고려해야 합니다. 반면에 rem은 루트 요소의 글꼴 크기를 기준으로 상대적인 크기를 지정하므로, 중첩된 요소에서 rem 값을 사용할 때는 이를 고려하지 않아도 됩니다.

😯 사용하는 이유?

• 반응형 웹 디자인은 CSS에서 em과 rem 단위를 사용하는 이유 중 하나입니다. 그러나 em과 rem은 단순히 반응형 웹에만 사용되는 것이 아니라, 웹 사이트 레이아웃과 UI 디자인에서 상대적인 크기를 정확하게 조정할 수 있는 유용한 도구입니다.

• 특히 em과 rem은 글꼴 크기를 조정할 때 매우 유용합니다. em과 rem은 상속을 이용하여 부모 요소의 글꼴 크기에 상대적인 값을 지정할 수 있기 때문에, 부모 요소의 글꼴 크기를 변경하면 자식 요소의 글꼴 크기도 함께 조정됩니다. 이를 통해 반응형 웹 디자인에서 요소의 크기를 쉽게 조정할 수 있습니다.

• 또한 rem은 브라우저의 글꼴 크기 설정을 적용받는데, 이는 웹 접근성과 관련이 있습니다. 브라우저의 글꼴 크기를 조정하면 모든 요소의 크기가 비례적으로 조정되기 때문에, 시각 장애인이나 노약자 등 웹 접근성에 민감한 사용자들도 편리하게 웹 사이트를 이용할 수 있습니다.

따라서, em과 rem은 반응형 웹 디자인뿐만 아니라 웹 사이트의 레이아웃 및 UI 디자인에서 유용하게 사용될 수 있는 단위입니다.

아래는 em과 rem을 사용하는 예제 코드입니다.

💻 예제

/* 부모 요소의 글꼴 크기가 16px일 때 */
.parent {
  font-size: 1.5em; /* 24px */
}

.child {
  font-size: 1.2em; /* 20px */
}

/* 루트 요소의 글꼴 크기가 16px일 때 */
html {
  font-size: 16px;
}

.parent {
  font-size: 1.5rem; /* 24px */
}

.child {
  font-size: 1.2rem; /* 19.2px */
}

위 코드에서 parent 클래스는 em을 사용하여 글꼴 크기를 지정하고 있으며, child 클래스는 parent 요소를 상속받아 em을 사용하여 글꼴 크기를 지정하고 있습니다. 반면에 rem을 사용한 코드에서는 모든 요소가 루트 요소의 글꼴 크기를 기준으로 크기를 지정하므로, 중첩된 요소에서도 크기를 일관되게 조정할 수 있습니다.