[HTML/CSS] 글자 크기 조절하기

<font> 태그 사용

<font size=1>글자크기 : 1</font></br>
<font size=2>글자크기 : 2</font></br>
<font size=3>글자크기 : 3(기본)</font></br>
<font size=+1>글자크기 : 3+1</font></br>
<font size=-1>글자크기 : 3-1</font></br>
<font size=4>글자크기 : 4</font></br>
<font size=5>글자크기 : 5</font></br>
<font size=6>글자크기 : 6</font></br>
<font size=7>글자크기 : 7</font></br>

 font size를 활용하는 방법으로 크기는 1 ~ 7까지 설정할 수 있습니다. 3으로 지정하시면 일반 텍스트 크기입니다. 그리고 +, -를 하시면 기본 사이즈인 3에서 증감할 수 있습니다.

 

인라인 방식

<p style="font-size:1">글자 크기 : 1</p>
<p style="font-size:10px">글자 크기 : 10px</p>
<p style="font-size:2em">글자 크기 : 2em</p>
<p style="font-size:200%">글자 크기 : 200%</p>

HTML 태그의 style 속성을 사용하는 방법으로 font-size를 명시하고 크기를 써주시면 됩니다. 

 

css 사용

p { font-size: 12px; }
div { font-size: 150%; }
.em { font-size: 2em; }
.rem { font-size: 2rem; }

 

자주 쓰는 크기 단위

• pt  : point, 일반 문서(워드 등)에서 많이 사용하는 단위
• px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐.
• em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함.
• %  : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐.