CSS/CSS
[CSS] font-size
ui-o
2025. 6. 13. 18:18
반응형
font-size
- font-size 속성 단위 : px, %, em, rem, pt
- %, em, rem : 부모 요소의 크기에 비레해서 나타남
| 단위 | 설명 | 예 |
| % | - 부모요소 크기 * (% / 100) | - 120% : 부모크기의 1.2배 - 90% : 부모크기의 0.9배 |
| em | - 부모요소 크기 * em | - 1em : 부모요소 크기 * 1 - 2em : 부모요소 크기 * 2 |
| rem | - 가장 상위 부모, html의상대적 크기를 가짐, 요소 중첩에 영향을 받지 않음 - html 기본 크기 * 글자 크기 |
- html {font-size:14px} 인경우 1.2rem : 14 * 1.2rem |
| pt | - 웹사이트를 종이로 인쇄할 경우 결과물의 글자 크기를 결정 - 1인치/72, 프린트할 컨텐츠에 사용 - 인쇄하는 상황에서 사용되는 글자 단위로, 일반적인 웹사이트에서는 잘 사용하지 않으 |
em 적용 예
<style>
html {
font-size: 16px;
}
div {
font-size: 2em;
}
</style>
</head>
// em 적용
<body> text 1 (16px) <div> text 2 (32px) <div>text 3 (64px)</div>
</div>
</body>
반응형