CSS의 EM 유닛의 힘

키 테이크 아웃

CSS에서 EM 장치는 EM이 적용되는 요소에 대해 계산 된 글꼴 크기와 동일합니다. EM 유닛이 글꼴 크기가 정의되지 않은 자식 요소에 선언되면 부모 또는 다른 조상 요소로부터 글꼴 크기를 상속합니다. EM 단위는 구성 요소 수준 스타일링 또는 캡슐화 된 코드 섹션과 같은 모듈 식 CSS 기술과 잘 작동합니다. 그들은 구성 요소의 요소가 모두 서로에 비해 크기를 조정하고 쉽게 크기를 조정할 수 있도록하는 데 사용될 수 있습니다.

. CSS의 REM 장치는 계산 된 글꼴 크기에 관계없이 문서의 루트 요소의 기본 글꼴 크기 설정에서 항상 값을 상속합니다. 따라서 REMS를 사용할 수 있지만 해당 요소의 글꼴 크기를 사용하여 페이지의 모든 구성 요소를 제어해야합니다. EM 장치는 픽셀에 대해 몇 가지 장점을 제공합니다. 확장 가능하므로 사용자의 기본 브라우저 설정 또는 장치 설정에 따라 조정됩니다. 이를 통해 글꼴 크기를 늘려야 할 시각 장애가있는 사용자가 웹 사이트에 더 액세스 할 수 있습니다. EM 장치는 또한 부모 요소의 글꼴 크기를 기준으로 조정할 때보다 유연하고 반응이 좋은 설계를 가능하게합니다. CSS의 모든 복잡한 기능을 사용하면 기능이 얼마나 강력한 지 볼 때 항상 전환점이 있습니다. 그리고 믿거 나 말거나, EMS와의 개인적인 전환점은 주제에 대한 구멍을 뚫는 소개를 쓴 후에 오래되었습니다. 나는 그 시점까지 EMS를 상당히 잘 이해했지만 Simurai의 Sizing (Web) 구성 요소에 대한 Simurai의 게시물을 읽을 때 얼마나 강력한 지 알기 시작했습니다. 이 게시물에서 그의 코트 테일을 타게됩니다. 여기에는 EM 유닛에 대한 빠른 소개가 있으며 그가 설명하는 기술에 대한 라이브 데모가 있습니다. CSS의 EMS는 무엇입니까?

CSS에서 EM 장치는 EM이 적용되는 요소에 대해 계산 된 글꼴 크기와 동일합니다. 글꼴 크기가 정의되지 않은 하위 요소에 EM 장치가 선언되면 부모 나 다른 조상 요소에서 글꼴 크기를 상속받을 수 있으며 문서의 루트 요소로 돌아갈 수 있습니다. 다음 CSS를보십시오.

이 경우,이 요소 또는 자식 요소 (다른 글꼴 크기 정의가 없다고 가정)의 1EM은 20px와 같습니다. 그래서 우리가 줄을 추가하면 :

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>}</span>

이 테두리-라디우스 값 .5EM 10px (즉, 20*.5)로 계산합니다. 비슷하게:

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>border-radius: .5em;
</span><span>}</span>

2EM의 패딩 값은 40px (20*2)와 같습니다. 언급 한 바와 같이, 이러한 유형의 계산은 모든 아동 요소에도 적용됩니다. 해당 아동 요소 중 어느 것도 명시 적으로 정의 된 글꼴 크기 값을 갖지 않는 한 EM 값은 이에 따라 계산됩니다. CSS의 어느 곳에서나 글꼴 크기가 정의되지 않으면 EM 장치는 문서의 브라우저의 기본 글꼴 크기 (일반적으로 16px)와 같습니다. 나는 그것이 EMS의 작동 방식을 분명히해야한다고 생각합니다. 이제이 기술을 사용하여 원본 중간 기사에서 Simurai에서 논의한 것처럼 쉽게 재생 가능한 웹 구성 요소를 만드는 방법을 살펴 보겠습니다. 나는 이것을 실제로 볼 수있는 데모를 제공함으로써 그의 아이디어를 한 단계 더 발전시킬 것입니다. css Codepen에서 SitePoint (@SitePoint)에 의해 Resized 가능한 구성 요소를 위해 EMS를 사용하여 펜을 참조하십시오.이 어리석은 작은 모듈에는 네 가지 기본 요소가 있습니다. 이 기술을 설명하는 예일뿐입니다. 데모 페이지 상단의 범위 슬라이더를 이동하여 모듈의 크기를 변경하십시오. 전체 화면에서 테스트 할 수도 있습니다. 범위 슬라이더는 구성 요소의 루트 요소의 단일 값에 연결됩니다 : 글꼴 크기 값. 여기서이 단일 CSS 속성을 사용하여 구성 요소를 RESIZALE을 수용 할 수있는 목적이 반드시 사용자가이를 수행 할 수있는 것은 아닙니다. 주로 모듈을 유지 관리하는 개발자가 구성 요소의 모든 부분에서 다른 값을 다루지 않고 빠르게 조정할 수 있도록합니다. 이전 섹션에서 설명한 바와 같이, 글꼴 크기가 변경됨에 따라, 이것은 부모 요소에 설정된 모든 EM 값과 모든 하위 요소에 속하면 구성 요소의 모든 부분이 비례 적으로 유연하게 만듭니다. CSS를 검사하면 다음을 알 수 있습니다.

구성 요소 내부의 모든 것은 외부 테두리 (항상 2px로 유지하려는)와 이미지를 제외하고는 EMS와 크기를 조정하고, 원한다면 크기를 조정할 수있는 이미지를 제외하고는이 경우 크기가 정적 인 것에 만족합니다.
• . 오른쪽 상단 모서리에있는 눈물과 같은 것은 의사 요소이며, 마찬가지로 부모의베이스 글꼴 크기의 혜택을받습니다. CSS에는 부모의 글꼴 크기를 조정하는 두 개의 미디어 쿼리도 포함되어 있습니다. 다시 말하지만, 이것은 미디어 쿼리의 다양한 크기를 모두 변경할 필요가 없지만 글꼴 크기 만 변경할 필요가 없기 때문에이 기술의 유용성을 보여줍니다.

일부 노트, 결함 등 데모에서 레인지 슬라이더를 사용하여 볼 수 있듯이,이 유형의 유연한 크기 조정이 항상 사용하고 싶은 것은 아닙니다. 다소 제한 될 수 있습니다. EM 값 중 일부를 조정하여 원하는 방식을 얻을 수 있으며 데모의 상위 테두리의 경우 크기 조정 가능성이 모든 요소에 적용되기를 원하지 않을 수 있습니다. 당신은 당신이 떠나고 싶은 요소의 EM을 피함으로써 이것을 쉽게 극복 할 수 있습니다. Simurai의 원래 기사에 대한 논의에 설명 된 바와 같이, 루트 글꼴 크기를 설정하기 위해 PX 장치를 사용할 필요는 없습니다. 이를 위해 EMS를 사용할 수 있지만, 이는 부모와 같은 방식으로 상속 될 것이며, 글꼴 크기에 대한 문서의 기본값에서 나올 수 있음을 기억하십시오. rems and sass는 어떻습니까? CSS의 REM 장치는 계산 된 글꼴 크기에 관계없이 항상 문서의 루트 요소의 기본 글꼴 크기 설정에서 값을 상속합니다. HTML에서 루트 요소는 항상 HTML 요소입니다. 따라서 REMS를 사용할 수 있지만 해당 요소의 글꼴 크기를 사용하여 페이지의 모든 구성 요소를 제어해야합니다. 특정 프로젝트에서 작동 할 수 있지만이 기술은 전체 문서가 아닌 격리 된 구성 요소에 대한 방출 가능성을 초점을 맞출 때 가장 잘 작동한다고 생각합니다. Sass와 같은 사전 처리기를 사용하는 것은 그것이 사이드 포인트라고 생각합니다. 궁극적으로 컴파일 된 스타일 시트는 SASS 코드에서 사용하는 모든 장치를 사용하며 상속은 같은 방식으로 작동합니다.

결론 이미 언급했듯이 Simurai는이 기술을보다 널리 알려진 것으로 인정받을 자격이 있습니다. 물론, 그가 언급했듯이, 이것은 새로운 것이 아니며 기본 개념은 수년간 많은 숙련 된 개발자들이 사용했지만 웹 구성 요소 나 모듈의 맥락에서 그리 많지 않을 수도 있습니다. Simurai가 말했듯이, 이것은 CSS 프레임 워크 또는 구성 요소 라이브러리를 구축 할 때 사용하기에 좋은 방법이라고 생각합니다. 다른 것이 없다면이 기술이 EM 장치가 얼마나 강력한 지에 대한 요점을 실제로 집으로 몰아 넣는다고 생각합니다. 물론 EM은 유일하게 사용 가능한 CSS 장치가 아닙니다. CSS 크기 단위에 대한 개요를 확인하십시오. CSS의 EM 단위에 대한 질문 (FAQ)은 자주 묻는 질문 (FAQ) CSS의 EM과 Rem Units의 차이점은 무엇입니까?

EM과 REM은 CSS의 상대 단위이지만 값을 계산하는 방식이 다릅니다. EM은 가장 가까운 부모의 글꼴 크기 또는 현재 요소와 관련이 있습니다. 즉, 요소의 글꼴 크기를 1.2EM으로 설정하면 부모의 글꼴 크기의 1.2 배가됩니다. 반면에, REM은 루트 또는 HTML 요소와 관련이있다. 따라서 요소의 글꼴 크기를 1.2REM으로 설정하면 루트 요소의 글꼴 크기의 크기의 1.2 배입니다. 이렇게하면 REM이 EM보다 예측 가능하고 제어하기 쉽습니다.

CSS에서 픽셀을 EM 장치로 변환하려면 픽셀을 EM 장치로 변환하려면 문서의 기본 글꼴 크기를 알아야합니다. 대부분의 브라우저의 기본 기본 글꼴 크기는 16px입니다. 따라서 픽셀 값을 EM으로 변환하려면 픽셀 값을 기본 글꼴 크기로 나눕니다. 예를 들어, 18px를 EM으로 변환하려면 18/16 = 1.125EM을 수행합니다.

CSS의 픽셀 대신 EM 장치를 사용해야하는 이유는 무엇입니까?

EM 장치는 픽셀에 대한 몇 가지 이점을 제공합니다. 확장 가능하므로 사용자의 기본 브라우저 설정 또는 장치 설정에 따라 조정됩니다. 이를 통해 글꼴 크기를 늘려야 할 시각 장애가있는 사용자가 웹 사이트에 더 액세스 할 수 있습니다. EM 유닛은 부모 요소의 글꼴 크기를 기반으로 조정하므로보다 유연하고 반응이 좋은 설계를 허용합니다.

CSS의 글꼴 크기 이외의 속성에 EM 장치를 사용할 수 있습니까?

예, CSS의 모든 속성에 EM 장치를 사용할 수 있습니다. 여기에는 너비, 높이, 패딩, 마진 및 라인 높이와 같은 속성이 포함됩니다. 이러한 특성에 EM 장치를 사용하면 디자인의 비례 관계를 유지하는 데 도움이 될 수 있습니다.

CSS에서 EM 장치에 대한 기본 글꼴 크기를 설정하는 방법?

HTML 요소에 글꼴 크기 속성을 설정하여 EM 장치의 기본 글꼴 크기를 설정할 수 있습니다. 예를 들어, 기본 글꼴 크기가 18px가 되려면 다음과 같이 쓸 것입니다. html {font-size : 18px; }. CSS의 모든 EM 장치는이 기본 글꼴 크기와 관련이 있습니다.

CSS에서 EM 장치로 요소를 둥지하면 어떻게 되는가?

EM 장치로 요소를 둥지하면 자식 요소의 크기는 부모 요소의 크기와 관련이 있습니다. 이로 인해 하위 요소의 크기가 예상보다 커지거나 작아지는 복합 효과가 발생할 수 있습니다. 이를 피하기 위해 항상 루트 요소의 크기와 관련된 Rem Units를 사용할 수 있습니다.

CSS에서 EM 장치를 사용하는 데 단점이 있습니까?

EM 장치는 많은 장점을 제공하지만 픽셀과 같은 절대 장치보다 관리하기가 더 어려울 수 있습니다. EM 장치는 상대적이기 때문에 실제 크기는 컨텍스트에 따라 변경 될 수 있습니다. 이렇게하면 요소의 크기, 특히 중첩 요소가있는 복잡한 레이아웃에서 요소의 크기를 예측하기가 더 어려워 질 수 있습니다.

CSS의 EM 장치에서 설정된 요소의 크기를 어떻게 대체 할 수 있습니까?

보다 특정 선택기에서 크기를 설정하여 EM 장치의 요소의 크기를 과대 평가할 수 있습니다. CSS는 더 많은 특정 선택기가 덜 구체적인 것들을 무시하는 특이성 계층 구조를 따릅니다. 예를 들어, ID 선택기는 클래스 선택기를 무시하고 클래스 선택기는 유형 선택기를 무시합니다. CSS의 미디어 쿼리에서 EM 장치를 사용할 수 있습니까? 예, 미디어 쿼리에서 EM 장치를 사용할 수 있습니다. 실제로 미디어 쿼리에 EM 장치를 사용하면 디자인의 응답 성이 향상 될 수 있습니다. EM 장치는 상대적이므로 사용자의 기본 브라우저 설정 또는 장치 설정에 따라 조정됩니다. 이는 미디어 쿼리가 뷰포트 크기뿐만 아니라 사용자의 설정에 적응한다는 것을 의미합니다.

CSS에서 EM 장치를 갖춘 중첩 요소의 크기를 계산하려면 EM 장치로 중첩 요소의 크기를 계산하려면 부모 요소의 크기를 자식 요소의 크기로 곱합니다. 예를 들어, 상위 요소의 크기가 1.5em이고 자식 요소의 크기가 2EM 인 경우, 어린이 요소의 실제 크기는 1.5 * 2 = 3EM입니다. 자식 요소의 크기는 부모 요소의 크기와 관련이 있기 때문입니다.

위 내용은 CSS의 EM 유닛의 힘의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!