기본으로 돌아가기: Rem, Em 또는 Pixel을 사용해야 합니까?

Using Rem and Em units is better than using px.

px를 사용한다는 것은 모든 사용자에게 글꼴 크기를 하드코딩한다는 의미입니다. 사용자는 값을 변경할 수 없습니다. 이는 실제로 기본값에서 더 큰 글꼴 크기를 원하는 사용자에게 문제가 됩니다16px.

렘은 어떻게 작동합니까?

Rem과 Em은 많은 개발자가 접근성을 유지하기 위해 사용하는 상대적인 단위입니다.

Rem (root em) stands for "root element's font-size"

일반적으로 기본 루트 글꼴 크기는 16px 입니다. 따라서 글꼴 크기가 1rem인 경우 16px를 보고 있는 것입니다.

Rem은 루트 요소의 글꼴 크기를 의미하므로 다음과 같이 CSS를 사용하여 기본값을 재정의할 수도 있습니다.

:root {
  font-size: 20px;
}

이제 루트 글꼴 크기를 변경했기 때문에 1rem = 20px

16px 이외의 값을 사용하려면 어떻게 해야 합니까?

16px로 나누면 픽셀의 rem 값을 얻을 수 있습니다. 예를 들어, 20px의 글꼴 크기를 사용하려면 font-size: 1.25rem라고 씁니다. 20/16입니다.

근데 너무 귀찮다?!

예, rem을 사용하면 rem 값을 계산해야 하므로 개발 프로세스가 길어집니다. 그러나 이것은 사용자에게 약간의 자유를 제공하며 우리는 접근성을 건드리지 않습니다.

다음과 같이 글꼴 크기를 변경할 수 있습니다.

어떻게 작동합니까?

Em stands for "parent element's font-size"

css는 cascading and inheritable 이므로 em은 부모 요소에서 글꼴 크기 값을 상속합니다. 예를 들어 내부에 상위 div 및 p 태그가 있습니다.

<div>
  <p>hi</p>
</div>

<style>
  div {
    font-size: 0.5rem; // 8px
  }

  p {
    font-size: 1em; // ??px
  }
</style>

p는 부모 요소의 글꼴 크기를 상속하므로 1em = 8px 입니다. 즉, p는 font-size: 8px를 갖게 됩니다.

그런 혼란 스럽죠? 그렇기 때문에 글꼴 크기에 em을 사용하지 않는 것이 좋습니다.

Always use REM for font-size to be consistent.

em 단위는 어디에서 사용할 수 있습니까?

상속 가능하기 때문에 em 단위는 패딩 및 *마진에 도움이 됩니다. em을 사용하면 패딩과 여백 크기를 비례적으로 조정할 수 있습니다.

예를 들어 버튼을 만들고 있습니다. 버튼은 모바일 및 데스크톱 보기에서 서로 다른 글꼴 크기를 가질 수 있습니다. 이 코드펜에서 rem과 em의 차이점을 볼 수 있습니다.



보시다시피 em을 사용하면 패딩이 글꼴 크기의 배율에 비례하여 유지됩니다. 반면 rem은 모든 글꼴 크기에서 동일한 패딩 값을 갖습니다.

우리는 정말로 더 이상 px를 사용할 수 없습니까?

나에게 rem과 em의 사용은 글꼴 크기, 패딩 및 여백과 같은 중요한 요소에 매우 유용할 것입니다. 하지만 border-width를 줄 때 우리가 주는 값이 너무 작아 루트 글꼴 크기를 변경하면 거의 눈에 띄지 않기 때문에 여전히 px 값을 사용합니다.

요약

자. 항상 글꼴 크기에 rem을 사용하십시오. 필요한 경우 비례 패딩을 위해 em의 이점을 활용하십시오.

Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site 🚀