본 게시글은 인프런 강의 "CSS 기본부터 활용까지"를 보고 공부한 내용을 정리하고 있습니다.
[무료] CSS 기본부터 활용까지 - 인프런 | 강의
CSS는 HTML을 아름답게 꾸며주는 디자이너의 언어입니다. CSS는 디지털 컨텐츠를 생산하는 사람들에게는 붓 질과 같은 것이 아닐까 싶습니다. 이 수업에서는 디지털 붓 질을 하는 법을 알려드립니
www.inflearn.com
폰트 사이즈와 단위
글자의 크기를 정하는 단위는 px, em, rem을 주로 사용한다.
여기서 px와 em은 html의 초기부터 존재했고,
rem은 상대적으로 최근에 생겼다.
px은 웹 개발자가 정해준 폰트 사이즈로 지정되어 절대적인 크기를 유지하고,
em과 rem은 상대적인 크기이다.
px와 rem을 비교 하려 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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>
각각 16px과 1rem으로 설정 되어 있는데, 딱 보았을때는 같은 크기로 보인다.
브라우저 설정에서 폰트 사이즈를 변경해보자.
우측 상단에 점 세개 - 설정 - 좌측 三 - 모양 - 글꼴크기
두 폰트에 크기 차이가 났음을 알수 있다.
정리
rem은 사용자가 필요에 따라 글꼴 크기를 조정할수 있는 권리를 갖게 해준다.
일반적인 경우 px와 rem중 rem을 더 많이 사용한다.
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 기본부터 활용까지 - text : align (0) | 2022.07.29 |
|---|---|
| CSS 기본부터 활용까지 - 색상 color (0) | 2022.07.28 |
| CSS 기본부터 활용까지 - 캐스케이딩 실습 (0) | 2022.07.28 |
| CSS 기본부터 활용까지 - 캐스케이딩 소개 (0) | 2022.07.28 |
| CSS 기본부터 활용까지 - 상속 (0) | 2022.07.28 |