[HTML/CSS] 글자 크기 조절하기 (font-size)
- Web/HTML, CSS
- 2023. 1. 12.
가독성이 좋은 웹 문서를 만들기 위해서는 폰트 사이즈를 적절하게 설정해주어 보는 사람들로 하여금 정보를 빠르게 캐치할 수 있도록 해야 합니다. 이 font-size는 개발자가 적절하게 설정해 줄 수 있는데요. 이번 포스팅에서는 웹 문서의 텍스트 사이즈를 조절하는 방법에 대해 알아보도록 하겠습니다.
HTML 사용
<font> 태그 사용
See the Pen 글자크기 조절1 by wjdxo513 (@wjdxo513) on CodePen.
첫 번째로 소개해드릴 방법은 font size를 활용하는 방법으로 크기는 1 ~ 7까지 설정할 수 있습니다. 3으로 지정하시면 일반 텍스트 크기입니다. 그리고 +, -를 하시면 기본 사이즈인 3에서 증감할 수 있습니다.
인라인 방식
See the Pen 글자크기 조절2 by wjdxo513 (@wjdxo513) on CodePen.
HTML 태그의 style 속성을 사용하는 방법으로 font-size를 명시하고 크기를 써주시면 됩니다.
※ HTML 태그는 <body>, <h1>, <div>, <span>, <p>, <li> 등 텍스트를 쓸 수 있는 태그면 아무거나 됩니다.
CSS 사용
See the Pen 글자크기 조절3 by wjdxo513 (@wjdxo513) on CodePen.
위와 같이 CSS를 사용하셔도 됩니다.
자주 쓰는 크기 단위
- pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위
- px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐.
- em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함.
- % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐.
웹 문서에서 사용하는 크기 단위는 매우 많지만 자주 사용하는 4가지 크기 단위만 표로 정리해 둔 것입니다. 파란색으로 표시된 크기가 기본 값입니다.
'Web > HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] 글자 굵기 변경하기 (font-weight) (1) | 2023.01.14 |
|---|---|
| [HTML/CSS] 글자색 변경하기 (font-color) (1) | 2023.01.13 |
| [HTML/CSS] 글자 간격(자간), 줄 간격(행간) 조정하기 (3) | 2023.01.10 |
| [CSS] 가상 클래스 선택자에 대하여(+가상요소 선택자) (2) | 2023.01.09 |