CSS에서 요소의 크기를 설정하는 동안 두 가지 선택이 있습니다. 첫 번째는 절대 단위이고 다른 하나는 상대 단위입니다. 절대 단위는 고정되어 있으며 다른 것과 관련이 없습니다. 어떤 경우에도 항상 동일합니다. 여기에는 cm, mm, px 등이 포함됩니다. 반면에 상대 단위는 다른 것에 상대적입니다. 이는 상위 요소의 크기이거나 기본 HTML의 크기일 수 있습니다. 상대 단위에는 em, rem, vw, vh 등이 포함됩니다. 이는 확장 가능한 단위이며 반응형 디자인에 도움이 됩니다. 우리 중 많은 사람들이 상대적인 단위, 특히 ~에 그리고 렘 단위. 이 둘의 차이점을 분석해 보겠습니다. 기본적으로 rem과 em은 모두 확장 가능하고 상대적 크기 단위이지만, em을 사용하면 단위는 상위 요소의 글꼴 크기에 상대적인 반면 rem 단위는 HTML 문서의 루트 글꼴 크기에만 상대적입니다. rem의 r은 루트를 나타냅니다.

두 가지를 자세히 이해해 봅시다.

1. 유나이티드에서: em 단위를 사용하면 상위 요소의 글꼴 크기를 기준으로 요소의 글꼴 크기를 설정할 수 있습니다. 상위 요소의 크기가 변경되면 하위 요소의 크기도 자동으로 변경됩니다.

참고: 글꼴 크기 속성에 em 단위가 사용되는 경우 크기는 상위 글꼴 크기를 기준으로 합니다. 다른 속성에 사용되는 경우 해당 요소 자체의 글꼴 크기를 기준으로 합니다. 여기서는 첫 번째 선언만 상위 항목의 참조를 사용합니다.

• .child 요소의 글꼴 크기는 다음과 같습니다. 40px (2*20px).
• .child의 여백은 다음과 같습니다. 60px . 이는 요소의 글꼴 크기(1.5*40px)의 1.5배입니다.

예: 이 예에서는 CSS에서 em 단위를 사용하는 방법을 보여줍니다.

HTML

무료 IP 구성