CSS 단위 - 렘 대 em

CSS 관련 단위 – EMS 대 REMS
CSS를 사용할 때 단위는 매번 다루는 것입니다. 문제는 어떤 것을 언제, 무엇을 위해 사용해야 하는가입니다.

이 게시물에서는 절대 길이 단위(픽셀, cm 등)에 초점을 맞추지 않고 상대 단위에 초점을 맞춥니다. 상대 단위는 이름에서 암시하는 것과 같습니다. 중요한 것과 관련하여. 많은 상대 단위가 있지만 아마도 가장 많이 사용되는 단위는 각각 뷰포트 너비와 높이에 해당하는 VW와 VH, 그리고 오늘 여기서 이야기할(쓰기?) em과 rems일 것입니다.

스포일러 경고, EM은 부모(또는 요소)에 상대적이고 REM은 루트 요소에 상대적입니다.

Em 단위

그래서 em을 사용할 때, 우리가 타이포그래피에 대해 이야기하고 있다면 em은 부모의 글꼴 크기와 관련될 수 있지만 여백이나 너비와 같은 경우에는 요소의 글꼴 크기와 관련될 수 있다는 것을 알아야 합니다. .

예를 들어 보겠습니다.

<div class="second-box">
  <h1>First box</h1>
 </div>
 <div class="box">
   <h1>Second box</h1>
 </div>

.box {
    border: 3px solid orange;
    width: 50%;
    margin: 0 auto;
    font-size: 15px;
    margin-bottom: 2%;
}

h1 {
    text-align: center;
    font-size: 2em;
    /* margin-left: 2em; */

}

body {
    font-size: 10px;
}

상자 외부에 h1이 있고 상자 외부에 h1이 있는 상자를 만들었습니다. 둘 다 동일한 글꼴 크기(2em)를 갖지만 보시다시피 크기가 다릅니다. 왜 그런 겁니까? 본문의 글꼴 크기는 10픽셀, 상자의 글꼴 크기는 15픽셀로 정의했습니다. 따라서 2 em은 각 부모의 글꼴 크기에 상대적입니다. 따라서 상자 외부의 h1 글꼴 크기는 20px이고 상자 내부의 글꼴 크기는 30px입니다.

with 또는 margins에 대해 이야기하는 경우는 어떻습니까? 또 다른 예 :

여백이 다른 텍스트

.second-box {
    border: 3px solid orange;
    width: 50%;
    margin: 0 auto;
    font-size: 10px;
    margin-bottom: 2%;
}


h1 {
    text-align: left;
    font-size: 2em;
    margin-left: 2em;

}

더 명확하게 하기 위해(희망합니다) 각 텍스트를 하나의 상자에 넣었습니다. 나는 이전과 같은 글꼴 크기를 유지했고 둘 다 왼쪽으로 정렬했습니다. 그런 다음 h1에 2em의 여백을 남겼습니다. 이미지에서 볼 수 있듯이 두 번째 상자 텍스트는 첫 번째 상자보다 훨씬 더 큰 여백을 가지며 이는 여백이 요소의 글꼴 크기에 상대적이기 때문입니다. 그것이 당신에게 의미가 있기를 바랍니다. 저에게는 적어도 이 단원을 더 잘 이해하게 해주는 유형의 예입니다.

그럼 렘으로 갑시다.

렘 단위

h1 {
    text-align: left;
    font-size: 2rem;


}

렘 단위를 사용하는 텍스트

rem을 사용하면 항상 루트의 글꼴 크기와 관련되므로 더 간단합니다. 같은 예를 유지하면서 rem의 유일한 차이점은 본문 글꼴 크기를 지정하는 것이었고 각 상자에는 고유한 글꼴 크기가 있습니다. 그런 다음 h1의 글꼴 크기를 em에서 rem으로 변경했습니다. 여백과 글꼴 크기가 이제 rem이 루트에 상대적인 것처럼 두 상자에서 동일합니다. h1에 rem 글꼴 크기가 있고 루트의 글꼴 크기에 상대적인 경우 상자에 넣은 글꼴은 중요하지 않습니다.

언제 둘 중 하나를 사용해야 합니까?

그것은 모두 당신이 편안하고 더 잘 이해하는 것에 달려 있습니다. rem을 사용하면 모든 것이 루트 요소와 관련되어 있으므로 웹 사이트나 프로젝트를 쉽게 계획할 수 있습니다. em을 사용하면 특히 처음에는 다른 뷰포트를 추가할 때 원하는 방식으로 작동하도록 하기가 까다로울 수 있습니다. 그 외에도 두 가지 모두 시도하고 놀기에 좋은 옵션이라고 생각합니다.

이것은 CSS의 작은 주제에 대한 3개의 게시물 중 첫 번째 게시물이므로 관심이 있는 경우 팔로우하여 자세한 내용을 확인하세요.