1. px vs rem
아래의 사진은 아래의 코드로 웹 페이지를 폰트 사이즈를 설정하고 웹 사이트의 폰트 사이즈를 변경했을 때 나타난 결과이다.
[해당 사진의 결론]
px는 폰트 사이즈가 고정되어 있지만 rem은 사용자의 설정에 따라서 폰트사이즈가 변경된다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#px{
font-size: 16px;
}
#rem{
font-size: 1rem;
}
</style>
</head>
<body>
<div id="px">px</div>
<div id="rem">rem</div>
</body>
</html>
[rem과 폰트 사이즈의 관계]
1. 글꼴 크기: 아주 작게
- 1 rem = 9px
- 2 rem = 18px
- 3 rem = 27px
2. 글꼴 크기: 작게
- 1 rem = 12px
- 2 rem = 24px
- 3 rem = 36px
3. 글꼴 크기: 중간
- 1 rem = 16px
- 2 rem = 32px
- 3 rem = 48px
4. 글꼴 크기: 크게
- 1 rem = 20px
- 2 rem = 40px
- 3 rem = 60px
5. 글꼴 크기: 아주 크게
- 1 rem = 24px
- 2 rem = 48px
- 3 rem = 72px
2. rem을 사용하는 이유
rem: 문서 시작 부분(root)에서 지정한 크기를 기준으로 한 후 비율값을 정한다. 즉, 웹 브라우저의 기본 폰트 사이즈에 따라 정해진다.
(대부분의 웹 브라우저 기본 폰트 사이즈는 16px 이다.)
- 웹 브라우저 마다 다른 폰트 사이즈에 대응할 수 있다.
- 저시력자 접근성에 대응가능
- 전체 스타일의 스케일을 손쉽게 대응가능하다.
'Web > CSS' 카테고리의 다른 글
| [CSS] text-align (0) | 2023.05.06 |
|---|---|
| [CSS] Color (0) | 2023.05.06 |
| [CSS] 구조 가상 클래스 (0) | 2023.05.03 |
| [CSS] 속성 선택자 (0) | 2023.05.03 |
| [CSS] 연결 선택자 (0) | 2023.05.03 |
