html 폰트 크기에 비례하는 rem 단위 "font-size 속성"
- 웹 언어 배우기/CSS
- 2019. 1. 15. 07:00
웹 표준이라는 말을 들어보셨나요? 이 용어는 W3C가 지정한 표준안을 지켜 웹사이트를 제작하는 것을 말합니다.
이렇게 작성하면 어떤 운영체제나 웹 브라우저 상에서도 비교적 같은 디자인과 기능을 구현하는 데에 목적이라고 할 수 있습니다.
반응형 웹을 만들 때 중요한 반응형 폰트 크기에 대해 알아보겠습니다.
px x em x rem 단위
px, em, rem은 상대 단위와 절대 단위로 나뉠 수 있습니다. px와 em은 오래전부터 있었지만, rem은 최근에 만들어진 단위입니다.
px : 크기가 고정된 단위
em, rem : 사용자가 브라우저 설정에 따라서 폰트의 크기가 달라지는 단위
<head>
<style>
#px{font-size:20px}
#rem{font-size:3rem}
</style>
</head>
<body>
<div id="px">px</div>
<div id="rem">rem</div>
</body>즉, 사용자가 브라우저의 폰트 크기를 키웠을 때 px는 바뀌지 않고 rem은 바뀝니다.
오늘날에는 일반적으로 rem을 주로 사용하는데 그 이유는 폰트 크기를 조정할 수 있는 사용자의 권리 때문입니다. 이는 웹 표준에 적혀있는 사항이기도 합니다.
rem 계산
rem 계산은 html 폰트 크기(브라우저 폰트 크기)에 비례해서 계산됩니다.
html 폰트 크기는 크롬 기준으로 설정에서 모양 밑에 있는 글꼴 크기를 바꿔주면 됩니다.
1rem 기준 px로 바꾸면
아주 작음 : 10.4px
작음 : 12px
중간 : 16px
크게 : 20px
아주 크게 : 24px
으로 만약 중간의 브라우저 폰트 크기로 했고 3rem으로 설정했다면
<head>
<style>
#rem{font-size:3rem}
</style>
</haed>
<body>
<div id="rem">rem</div>
</body>중간 크기인 16px * 3 = 72px로 계산하여 브라우저상에 나타나게 됩니다. 즉, 브라우저 폰트 크기 * rem 크기로 계산합니다.
이때 font-size 속성이 CSS에서 폰트 크기를 설정할 수 있는 속성입니다.
