rem(root em) 단위는 CSS에서 글꼴 크기 및 레이아웃을 상대적으로 설정하기 위해 사용되는 단위입니다. rem은 "root em"의 줄임말로, 이는 문서의 루트 요소(<html>)의 글꼴 크기와 관련이 있습니다.
기본적으로, 1rem은 루트 요소의 글꼴 크기와 동일합니다. 예를 들어, 브라우저의 기본 설정에서 루트 요소의 기본 글꼴 크기는 16px입니다. 이 경우 1rem은 16px을 의미합니다. 따라서, font-size: 1rem;은 16px 크기의 글꼴을 설정하는 것입니다. 만약 루트 요소의 글꼴 크기가 변경되면, rem 단위로 설정된 요소들의 크기도 이에 따라 자동으로 조정됩니다.
예를 들어, 루트 요소의 글꼴 크기를 20px로 설정하면 1rem은 20px을 의미하게 됩니다. 이 방식은 전체 레이아웃을 쉽게 조정할 수 있도록 도와줍니다. 브라우저의 기본 글꼴 크기 설정을 따르는 경우가 많기 때문에, rem 단위를 사용하면 사용자의 접근성을 고려한 디자인이 가능해집니다.
루트 요소(root element)는 HTML 문서에서 최상위 요소를 의미하며, 모든 다른 요소들의 부모 요소 역할을 합니다. 웹 페이지에서 루트 요소는 <html> 태그로 정의됩니다. 따라서 <html> 요소 안에 모든 다른 HTML 요소가 포함됩니다.
웹 페이지의 구조를 설명할 때, <html> 요소는 문서의 루트 요소로, <head>와 <body> 요소는 그 자식 요소입니다. <head>는 메타데이터, 스타일, 스크립트 등을 포함하고, <body>는 실제 화면에 표시되는 콘텐츠를 포함합니다.
CSS에서 rem 단위를 사용할 때, 이 <html> 요소의 font-size 속성이 기준이 됩니다. 기본적으로 브라우저는 <html> 요소의 글꼴 크기를 16px로 설정하지만, CSS를 통해 이를 변경할 수 있습니다.
'Front > CSS' 카테고리의 다른 글
| [CSS] visibility : 요소를 숨기고 공간은 그대로 유지하기 (0) | 2024.07.20 |
|---|---|
| [CSS] table header 상단에 고정시키기 (0) | 2024.06.20 |
| [CSS] border-collapse (0) | 2024.06.19 |
| [CSS][Bootstrap] multiselect 위치 조정하기 (0) | 2024.05.11 |
| [CSS] flex-wrap 줄바꿈 상태에서 가운데 정렬하기 (0) | 2024.02.29 |