웹사이트 스타일시트를 열면 rems, ems, 픽셀 또는 이들의 조합을 보게 될 것입니다. CSS 스타일에서 이들은 사용되는 주요 측정 단위입니다. 사이트를 처음부터 디자인하든 유지 관리해야 하는 이전에 디자인한 사이트를 "상속"한 경우, 이는 시각적 디자인의 타이포그래피, 간격 및 기타 크기 조정에 중요합니다.

측정 단위가 다른 단위보다 나은 이유는 무엇입니까? 정답은 없으며 상황에 따라 선호될 수 있습니다. 사용 사례와 가장 효과적인 것이 무엇인지 알면 스타일링에 가장 적합한 측정을 결정하는 데 도움이 됩니다.

픽셀

웹 초기부터 픽셀은 모든 스타일시트에서 볼 수 있는 옵션이었습니다. 그것들은 신뢰할 수 있고 정확하며 일관성이 일치할 수 없습니다. 픽셀은 모든 브라우저에서 지원되므로 작업하기 쉽습니다.

픽셀은 훌륭하지만 몇 가지 제한 사항이 있습니다. 설정된 측정값이기 때문에 사용자는 브라우저 설정에서 기본 브라우저 텍스트의 크기를 변경할 수 없습니다. em 및 rem과 같이 확장되지 않으므로 사용자의 접근성 관점에서 크기를 변경하기가 어렵습니다. 사용자가 브라우저 설정으로 이동하지 않고 확대할 수 있다고 주장할 수 있습니다. 옳고 그른 답은 없고, 참고만 하시면 됩니다.

그들은 무엇인가?

픽셀은 설정된 크기를 기반으로 하는 측정 단위입니다. 화면상의 치수를 측정하는 단위로 정밀한 설계가 필요한 경우에 사용합니다. 우리는 "픽셀 해상도"와 같은 것을 말하므로 이 측정에 익숙합니다.

예는 다음과 같습니다.

.main-header p {
font-size: 14px;
}

픽셀은 웹 디자인에서 사용되지만 장치에 구애받지 않는 웹 디자인 시대에는 화면 측정이 주요 초점이 아닙니다. 우리 콘텐츠를 수많은 장치에 가장 적합하게 만드는 방법에 관한 것이므로 이를 도울 수 있는 em과 rem이 있습니다.

Ems

이 측정 단위는 오랜 역사를 가지고 있습니다. 1996년으로 거슬러 올라가며 CSS의 초창기부터 존재해 왔습니다. 픽셀은 모범 사례로 간주되었으므로 초기에는 ems가 인기가 없었습니다. 그 이후로 특정 콘텐츠에서 글꼴 크기와 관련된 단위 역할을 하고 일관성을 유지하는 데 도움이 되는 것이 목적이기 때문에 인기를 얻었습니다.

그들은 무엇인가?

당신이 고전적인 타이포그래피에 관심이 많다면 아마도 "em"을 인식했을 것입니다. 왜냐하면 그것은 인쇄된 활자의 세계에서 유래한 측정 단위이기 때문입니다. 이것을 타이포그래피의 단위로 사용하면 이 측정값은 현재 지정된 포인트 크기와 같습니다. 예를 들어, 16포인트 서체에서 하나의 em은 16포인트입니다. 이 단위는 주어진 포인트 크기의 모든 서체에 대해 동일합니다.

여기서 인쇄에 대해 이야기하는 것이 아니라 ems가 웹 디자인에 어떻게 반영됩니까? 상대적 크기 조정은 다른 요소와 관련하여 요소의 크기 조정을 제어하는 ​​데 도움이 되기 때문에 ems의 큰 판매 포인트입니다. Em 값은 복합적이라는 사실 때문에 Ems는 웹사이트 요소에 대한 훌륭한 빌딩 블록으로 기능할 수 있습니다. 그러나 이 합성이 어떻게 작동하는지 실제로 이해하는 것이 중요합니다.

ems 이해하기

대부분의 경우 브라우저 기본값이 다른 것으로 설정되어 있지 않으면 em은 16픽셀입니다. 1.5em을 보면 24픽셀이 됩니다. 하지만 항상 그렇게 간단한 것은 아닙니다. 중첩이 관련되면 어떻게 됩니까? 편리하기도 하고 혼란스럽기도 합니다. em으로 작업할 때 일이 어떻게 작동하는지 아는 것은 어떤 미스터리를 푸는 데 확실히 도움이 될 것입니다. 아래 "중첩됨" 단락의 크기는 얼마입니까?

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

.one, .two {

font-size: 0.5em;

}

.three {

font-size: 2em;

}

여기에 3개의 div가 있으며 단락이 상당히 중첩되어 있습니다. DOM을 계단식으로 연결하면 몇 가지 탐정 작업을 수행해야 할 수 있습니다. 가장 일반적이기 때문에 16px의 em으로 작업한다고 가정해 보겠습니다.

.one 클래스는 1em에 0.5를 곱합니다. 이는 0.5em 또는 8px입니다. .two 클래스를 사용하면 .25em 또는 4px인 0.5를 다시 한 번 곱합니다. 상황이 매우 작아지고 있으므로 .three 클래스가 도움이 될 것입니다. 우리는 0.25em에 2를 곱할 것입니다. 결과는 0.5em 또는 8px입니다.

도움이 될 수 있는 한 가지는 HTML 요소의 크기를 설정하는 것입니다. 이와 같은 것은 브라우저에서 설정한 em에 의존하는 대신 설정된 em 크기를 지정합니다. 1em을 20px로 설정합시다. 이것이 위의 예와 함께 사용된 경우 중첩과 동일한 원칙이 적용됩니다. 하지만 픽셀 크기를 지정했으므로 브라우저 설정 옵션을 사용하여 텍스트 크기를 조정하는 기능에 영향을 미칩니다.

html {

font-size: 20px;

}

픽셀 외에 글꼴 크기도 백분율로 설정할 수 있습니다. 요점은 em이 다른 측정 단위와 함께 작동할 수 있다는 것입니다. 기준선을 설정하는 데 도움이 되도록 본문 글꼴을 백분율로 설정하는 것이 일반적이기 때문에 이 문제가 발생하게 될 것입니다. 글꼴 크기가 em 크기의 62.5%로 시작한다고 가정해 보겠습니다. em 크기가 16px이면 글꼴 크기는 10px입니다.

body {

font-size:62.5%;

}

이해가 되면 em은 프로젝트에 좋은 자산이 될 수 있습니다. 하위 요소의 텍스트 크기를 상위 요소로 조정하면 확실히 유용할 수 있습니다. 또한 em을 사용하면 단어 간격에서 볼 수 있는 것보다 텍스트 컨테이너에 더 큰 패딩을 쉽게 지정할 수 있으므로 시각적인 근접 규칙을 따릅니다. 관련 항목은 덜 복잡하게 시각적으로 그룹화되고 체계적인 레이아웃을 제공합니다.

ems의 또 다른 큰 특징은 접근성의 이점입니다. DOM의 루트에 상대적이기 때문에 ems는 사용자 기본 설정에 따라 전체 디자인의 크기를 조정하는 데 적합합니다. 브라우저 기본 설정에서 기본 글꼴 크기를 쉽게 변경할 수 있습니다. 그러면 계산이 ems 단위로 전체 웹사이트로 변경됩니다.

렘스

그들은 무엇인가?

Rems는 CSS 타임라인에 최근에 추가된 것입니다. 이 측정 단위는 CSS3와 함께 도입되었으며 픽셀 및 em과 관련된 일부 문제를 해결합니다. "em"과 비슷한 이름을 사용하면 "r"이 무엇을 의미하는지 궁금할 수 있습니다. "Root EM"이라는 용어에서 유래했습니다.

루트는 HTML 요소입니다. HTML 요소에 지정된 크기는 이 측정의 기초입니다. HTML 요소에 em 크기 조정을 사용했음을 알 수 있습니다. 두 가지 측정 유형을 결합하는 것이 좋습니다.

html {
font-size: 1em;
}

.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}

최신 브라우저는 rem을 지원하지만 rem을 커밋하기 전에 지원해야 하는 이전 브라우저가 무엇인지 BrowserStack으로 확인하십시오. 오래된 브라우저가 당신을 방해하게 두지 마십시오. IE9 이하에서는 항상 픽셀 대체를 지정할 수 있습니다. 최신 브라우저는 rem을 선호하기 때문에 픽셀을 무시합니다. 다음과 같이 보일 수 있습니다.

.my-text {

font-size: 24px;

font-size: 1.5rem;

}

렘 이해하기

ems의 중첩 요소에 대해 수행해야 했던 수학을 기억하십니까? rems에서는 그럴 필요가 없습니다. 모두 해당 루트 요소를 기반으로 합니다. 부모 요소에 대해 걱정할 필요가 없으며 항상 루트를 기반으로 합니다.

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

html {

font-size: 1em;

}

.one, .two {

font-size: 0.52em;

}

.three {

font-size: 2rem;

}

여기에 3개의 div가 있으며 단락은 em 예제에서 본 것처럼 상당히 중첩되어 있습니다. 다시 16px의 em 크기로 작업한다고 가정해 보겠습니다.

.one 및 .two 클래스에는 크기가 할당되어 있지만 중첩은 ems에서와 같이 rems에 영향을 받지 않기 때문에 여기서는 중요하지 않습니다. 정말 중요한 것은 .three의 스타일 지정이며, 이는 2em입니다. 단락은 1em의 HTML 요소를 기반으로 합니다. 이 측정값은 2배가 되어 2rems 또는 32픽셀이 됩니다.

모든 것을 균등하게 확장하고 싶으십니까? 루트 요소 크기를 조정하기만 하면 됩니다. 이는 브라우저 기본 크기를 조정할 때도 유용합니다. 당신은 ems가 그것을 허용하는 방법을 볼 수 있었고, rems도 마찬가지입니다.

rems의 예측할 수 없는 중첩 동작에 대해 걱정할 필요가 훨씬 적습니다. 루트 요소가 작동하는 위치와 이것이 rems를 사용할 때 스타일에 어떤 영향을 미치는지 이해하기 쉽습니다.

다른 측정값을 비교할 때 장단점이 있음을 알 수 있습니다. 측정 단위가 작동하는 방식과 브라우저 설정에서 작동하는 방식을 제대로 이해하면 상황이나 프로젝트에 가장 적합한 측정 단위를 선택하는 데 도움이 됩니다.