으아아아 으아아아
.logo 선택기에서 글꼴 크기를 변경하면 h1 요소가 더 커지는 것을 볼 수 있습니다. 그러나 동일한 작업을 수행하지만 이제 .logo h1 선택기에서는 크기가 다릅니다. 두 경우 모두 동일한 글꼴 크기를 사용하고 있습니다. 무슨 일이 일어났는지 모르겠어요.
1 rem은 루트 요소의 글꼴 크기와 같습니다. 예를 들어 루트 요소의 글꼴 크기가 16px로 설정된 경우 1rem은 16px과 같습니다.
rem 단위를 사용하면 절대 픽셀 값을 사용하는 대신 루트 요소를 기준으로 크기를 설정할 수 있으므로 반응형 디자인을 더 쉽게 만들 수 있습니다. 이는 사용자가 브라우저 설정에서 기본 글꼴 크기를 변경하더라도 웹 사이트가 여전히 비례적으로 올바르게 표시된다는 것을 의미합니다.
브라우저의 DevTools Inspector 도구를 사용하면 글꼴 크기가 누가/어디에 설정되어 있는지 정확하게 확인할 수 있습니다.
부모의 글꼴 크기가 1.3rem으로 설정되면 em 크기가 설정됩니다.
자식(h1)은 사용자가 설정한 글꼴 크기를 명시적으로 설정하지 않으므로 브라우저에서 설정한 글꼴 크기를 사용합니다. 이 예에서는 h1의 글꼴 크기를 1.5em으로 설정했습니다.
그래서 h1의 글꼴 크기는 1.5 * 1.3rem이 됩니다
두 번째 경우에는 h1의 기본 글꼴 크기를 1.3rem(1.5 * 1.3rem 미만)으로 구체적으로 설정하여 이를 재정의합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
1 rem은 루트 요소의 글꼴 크기와 같습니다. 예를 들어 루트 요소의 글꼴 크기가 16px로 설정된 경우 1rem은 16px과 같습니다.
rem 단위를 사용하면 절대 픽셀 값을 사용하는 대신 루트 요소를 기준으로 크기를 설정할 수 있으므로 반응형 디자인을 더 쉽게 만들 수 있습니다. 이는 사용자가 브라우저 설정에서 기본 글꼴 크기를 변경하더라도 웹 사이트가 여전히 비례적으로 올바르게 표시된다는 것을 의미합니다.
브라우저의 DevTools Inspector 도구를 사용하면 글꼴 크기가 누가/어디에 설정되어 있는지 정확하게 확인할 수 있습니다.
부모의 글꼴 크기가 1.3rem으로 설정되면 em 크기가 설정됩니다.
자식(h1)은 사용자가 설정한 글꼴 크기를 명시적으로 설정하지 않으므로 브라우저에서 설정한 글꼴 크기를 사용합니다. 이 예에서는 h1의 글꼴 크기를 1.5em으로 설정했습니다.
그래서 h1의 글꼴 크기는 1.5 * 1.3rem이 됩니다
두 번째 경우에는 h1의 기본 글꼴 크기를 1.3rem(1.5 * 1.3rem 미만)으로 구체적으로 설정하여 이를 재정의합니다.