[CSS] 텍스트 (font-size)
2021. 6. 22. 00:39
728x90
01 font-size
- 텍스트의 크기를 설정.
- font-size 속성값은 두 가지 방식으로 표현할 수 있음.
1. 절대적 크기- 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용.
- 절대적 크기로 설정된 텍스트는 모든 웹 브라우저에서 같은 크기로 표현.
2. 상대적 크기- 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변함.
- 사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수 있음.
<style>
html{
font-size: 100%;
</style>
02 절대적 크기 (px)
px- 픽셀(pixel) 단위로 크기를 잡음.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>폰트 사이즈</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
div{
font-size: 30px;
}
.size2{
font-size: 50px;
}
</style>
</head>
<body>
<p>
p 폰트 크기 - M - 100%
</p>
<div>
div 폰트크기 - M - 30px
<p class="size1">
p 폰트 크기 - M - 1.5em
</p>
<p class="size2">
p 폰트 크기 - M - 50px
</p>
<p class="size3">
p 폰트 크기 - M - 1.5rem
</p>
</div>
</body>
</html>
03 상대적 크기 (%, em, rem)
%- 기본 크기를 100%로 놓고 그에 대한 상대적인 크기를 설정.
em- 해당 선택자의
부모 요소의 글꼴 크기에 비례하여 설정. 
em
- 해당 선택자의
rem최상위 루트 요소의 글꼴 크기에 비례하여 설정.
rem
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>폰트 사이즈</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
html{
font-size: 100%;
}
div{
font-size: 30px;
}
.size1{
font-size: 1.5em;
}
.size2{
font-size: 50px;
}
.size3{
font-size: 1.5rem;
}
</style>
</head>
<body>
<p>
p 폰트 크기 - M - 100%
</p>
<div>
div 폰트크기 - M - 30px
<p class="size1">
p 폰트 크기 - M - 1.5em
</p>
<p class="size2">
p 폰트 크기 - M - 50px
</p>
<p class="size3">
p 폰트 크기 - M - 1.5rem
</p>
</div>
</body>
</html>
728x90
'CSS > Study' 카테고리의 다른 글
| [CSS] 텍스트 (word-spacing, letter-spacing) (1) | 2021.06.27 |
|---|---|
| [CSS] 텍스트 (text-align, text-decoration) (1) | 2021.06.27 |
| [CSS] 텍스트 (font-family, <link>, @font-face) (1) | 2021.06.22 |
| [CSS] 텍스트 (font-style, font-weight) (1) | 2021.06.22 |
| [CSS] 선택자 (전체 선택자 "*", 태그 선택자, 아이디 선택자"#", 클래스 선택자".", 그룹 선택자) (1) | 2021.06.22 |
