티스토리 뷰

[개발]프로그래밍/css3

[css3] font-size - 글자 크기 조절

좋은 블로그 2021. 3. 22. 10:07
1. 개념
font-size - 글자 크기 조절
font-size는 글자 크기를 조절하는 속성

속성

설명

절대 크기

브라우저에서 지정한 크기
(xx-small , x-small , small , medium, large,x-large,xx-large)

상대 크기

부모 요소의 글자 크기 기준으로 더 크거나 작게 표시(larger,smaller)

크기

브라우저와 상관없이 글자 크기 직접 지정

em

해당 글꼴 대문자 M의 너비를 기준으로 크기 조절

ex

해당 글꼴의 소문자 x의 높이를 기준으로 크기 조절

px

모니터에 따라 상대적 크기

pt

일반 문서에서 많이 사용되는 단위

백분율

부모 요소의 글자 크기 기준으로 %를 계산해 표시
2. 태그
font-size
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
1
<div style =' font-size : 20px ;' >
20px의 글자 크기
</div>
2
<div style =' font-size : 3em ;' >
3em의 글자 크기
</div>
3
<div style =' font-size : larger ;' >
상대크기 : larger의 글자 크기
</div>
4
<div style =' font-size : x-large ;' >
절대크기 : x-large의 글자 크기
</div>
</body>
</html>
결과 화면
코드 설명
1
font-size : 20px
웹에서 많이 사용되는 단위가 px 단위 입니다.
이 px 단위는 폰트 크기가 고정되기 때문에 모바일 기기로 볼 때도 같은 크기로 화면에 표시가 됩니다.
즉, 작은 화면 안에서 작은 글씨로 표시가 됩니다.
2
font-size : 3em
em은 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 놓고 글자 크기를 조절합니다.
만약에 지정한 크기가 없다고 할 경우에는 body요소의 크기 16px가 1em으로 지정이 됩니다. 그래서 위에서과 같이 3*16px = 48px의 크기로 나오게 됩니다.
3
font-size : larger
상대 크기의 속성 값인 larger 과 smaller 중에서 larger를 써봤습니다.
부모 요소가 정해져 있지 않아서 그런지 개발자 도구 화면을 열어서 글자 크기를 확인해 보니 19.2px라고 나오네요
위에서 처럼 16px를 기준으로 해서 좀더 큰 19.2로 표시를 해준 것 같습니다.
4
font-size : x-large
여기서는 절대 크기의 속성 값 중 하나인 x-large를 써봤습니다.
마찬가지로 개발자 도구 화면을 열어서 글자 크기를 확인해 보니 24px로 나오네요
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] font-style - 글자 스타일 지정  (0) 2021.03.24
[css3] font-weight - 글자 굵기 지정  (0) 2021.03.23
[css3] font-family - 텍스트 글꼴 지정  (0) 2021.03.19
[css3] prefixfree.min.js - 브라우저 접두사 편하게 사용  (0) 2021.03.18
[css3] !important - 높은 우선 순위 스타일 적용  (0) 2021.03.17
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday