본문으로 바로가기

html 글자크기 입니다

category HTML 2018. 4. 22. 03:59

html 글자크기 입니다

html 코딩을 하게 되면 글자크기를 조절해야 하는데요. 어떤 부분에서는 크게 나와야 하고 어떤 부분은 작게 나와야 되는경우가 있습니다. html 글자크기 조정하는 방법은 간단합니다. 

크게 2가지를 이용할 수 있는데요 순수하게 html 방법과 css 스타일을 이용하는 방법입니다. 

html에서 font를 사용하면 되는데요 이 방법은 당연히 알고 있어야 하고 요즘 웹표준 코딩방식을 많이 사용하니 css 스타일로 하는 방법도 알아야 합니다. 

이번 시간은 html 글자크기 방법을 알아보겠습니다. 

html 글자크기 입니다



html을 준비했습니다. 기본 글자만 작성된건데요 기본크기가 얼마나 되지는 부터 확인해보겠습니다.

html 글자 사이즈



브라우저로 봤을때 결과 입니다. 음..뭐 크지도 작지도 않지만 인터넷에서 사용되는 크기보다 조금 크네요

html 글자 크기



이제 글자크기를 조절해보겠습니다.

font 를 이용하는건데요 

사용방법은

<font size="1"> 글자 </font>

이렇습니다.

다만 size 는 1~ 7까지만 적용됩니다.

font size 최대값인 7을 넣고 브라우저에서 확인해보겠습니다. 

html 폰트 크기



글자가 정말 크게 나오네요 기본 사이와 비교 됩니다. 

html 폰트 사이즈



이제 font size 를 1 3, 5 를 입력 후 결과를 보겠습니다

html 글자크기



첫번째 보는 것이 font 코드를 넣지 않는것 순서대로 1, 3, 5 입니다.

보시면 아시겠지만 font size 3 이  아무코딩도 하지 않은 기본 코딩 사이즈와 같네요

html 글자크기 입니다



이제 웹표준 방식으로 사용될 때 css 스타일로 적용하는 방법입니다. 

웹표준 방식은 아직 세부적으로 들어지는 않고 div 태그를 사용한다는 정도만 아시면 됩니다.

 <div > 글자 </div> 이렇게 사용되지요

폰트 사이즈 적용 방법입니다.


 <div style="font-size: 글자pt"> 글자 </div>

이 방법은 글자 pt로 코딩을 하기 때문에 크기 제한이 없습니다. 

font size : 7 로 제한된 크기보다 더 다양하고 크고 세밀하게 조정될수 있기 때문에 font코드 보다는 많이 사용됩니다.

32pt를 적용해보겠습니다.

<div style="font-size:32pt">글자 </div> 로 입력하시면 됩니다. 

html font size



결과를 보시면 폰트크기가 적용된것을 확인할 수 있습니다.

html 글자크기 입니다

이번 시간은 html 글자크기에 대해 알아보았습니다. 

반응형