CSS 속성을 사용하여 요소의 크기를 설정할 때 두 가지 옵션이 표시될 수 있습니다. 하나는 절대 단위이고 다른 하나는 상대 단위입니다. 절대 단위는 동일하고 고정되어 있으며, cm, mm, px를 이용하여 크기를 설정할 수 있습니다. 반면에 상대 단위는 상위 요소나 다른 요소와 같은 다른 요소에 상대적입니다.
이 튜토리얼에서는 CSS의 em 단위와 rem 단위의 비교를 살펴보겠습니다.
em 단위를 사용하면 상위 요소의 글꼴 크기를 기준으로 요소의 크기를 변경할 수 있습니다. 즉, 상위 요소의 크기가 변경되면 하위 요소의 크기도 변경됩니다.
em 단위의 기능을 이해하기 위해 예를 살펴보겠습니다.
이 예에서는 하위 요소의 글꼴 크기를 35px로 변경하겠습니다. 하위 요소의 여백도 50px로 변경됩니다.
여기서 먼저 상위 요소를 생성한 다음 그 크기를 17.5픽셀로 설정하고 하위 요소의 글꼴 크기를 1em으로 설정했습니다. 즉, 하위 요소의 글꼴 크기는 상위 요소의 두 배이고 여백은 다음과 같습니다. 요소는 변경되지 않습니다. 코드의 출력을 살펴보겠습니다.
Note − 글꼴 크기 속성의 사용법은 다른 속성에 사용될 때 아버지(부모) 요소를 기준으로 합니다.
으아악 위 출력에는 상위 요소와 하위 요소가 있습니다. 출력에서 하위 요소는 상위 요소와 크기가 동일합니다.rem 단위는 요소의 루트, 즉 html 요소를 기준으로 한 글꼴 크기입니다. 이 글꼴 크기를 지정하지 않으면 상위 요소에 관계없이 루트 요소만 브라우저의 기본값이 사용됩니다.
하위 요소의 글꼴 크기를 50px로 유지한 다음 요소의 여백을 40px로 설정합니다. rem 단위의 크기는 em과 달리 모든 선언에 대해 상대적입니다.
다음 예에서는 먼저 루트 요소를 사용한 다음 상위 요소와 하위 요소를 생성한 다음 루트 요소의 글꼴 크기를 18px로 설정하고 상위 요소의 글꼴 크기를 15px로 설정했습니다. 그러면 하위 요소의 글꼴이 1.5rem으로 설정되었습니다. 이는 상위 요소가 아닌 루트 요소 크기의 두 배를 의미합니다. 출력을 보고 rem 단위가 수행하는 작업을 살펴보겠습니다.
으아악위 출력에서 하위 요소가 상위 요소의 이중이 아니라 루트 요소의 이중임을 알 수 있습니다.
em 단위는 가장 가까운 상위 글꼴 크기에 상대적이며 복합 효과로 이어질 수 있습니다. rem 단위는 HTML 루트 글꼴 크기에 상대적이지만 복합 효과로 이어지지 않습니다.
단위에는 em, vh, vw 및 rem이 포함됩니다. 상대 단위는 확장 가능 단위라고도 하며 웹 사이트의 응답성에 중요한 역할을 합니다. em 단위는 모두 확장 가능하고 상대적입니다. HTML 문서에 있는 상위 요소의 글꼴 크기와 rem 단위에 상대적인 것은 전체 문서의 글꼴 루트에 상대적입니다.
em 단위와 rem 단위의 차이점은 em 단위는 상위 요소를 기준으로 계산되는 반면, rem 단위는 루트 요소를 기준으로 계산된다는 것입니다. 두 단위는 모두 상대 단위이며 웹 사이트의 반응형 레이아웃을 만드는 데 도움이 됩니다. 이 단위는 특정 요소의 크기를 설정하는 데 도움이 됩니다.
위 내용은 CSS의 Em 및 Rem 단위?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
