font 태그 명령어 이해하기

font 태그는 <font>이사이의 폰트들이 적용받게 됨 </font>로 나타내며 글꼴의 크기, 색깔, 글자체등을 지정할때 font의 앞태그 <font>에 옵션을 추가하여 사용합니다.

<font color="    ">   </font>는 폰트의 색상, <font size="  ">   </font>는 폰트의 크기를 그리고 <font face="  ">  </font>는 폰트의 글꼴종류를 지정한 글꼴로 바꾸라는 소스명령어 입니다.

 

1. font color

font color는 직접 white, black, green, yellow, blue 등등의 이름을 쌍따옴표 부분에 입력하여 나타낼수 있습니다.

또한 직접 입력하지 않고 색상팔레트의 색상코드표를 참조하여 그 코드를 직접입력하여 지정할 수도 있습니다.

16진수의 색상팔레트 코드표를 참조하여 입력할 경우 그 형식은 #000000 과 같이 샵뒤에 6자리가 16진수 코드가 들어가게됨으로써 색상을 표현합니다.

아래는 네이버에 있는 색상코드를 추출해주는 색상팔레트 입니다.

 

 

색상팔레트 바로가기 클릭-> 네이버 색상팔레트

 

2. font face

폰트의 종류를 바꿔주는 태그입니다.

예를 들자면 <font face="궁서"> 궁서체로 바꾸어 지게 됩니다 </font> 이런 형식으로 사용하게 됩니다.

 

3. font size

가장 설명이 필요한 부분인데요. 왜냐하면 size개념이 다소 복잡합니다.

폰트의 기본 값은 3이며 0~7사이의 숫자로 크기를 변화시킬 수 있습니다.  

또한, px, pt등의 단위로 폰트 사이즈를 변경 가능합니다. px는 픽셀을 나타내며, pt는 출력되는 포인트의 값으로 한글 프로그램이나 인쇄 등에 사용되어집니다.

 

 

폰트 세부지정 옵션소스 사용예제표

 

 

 

 

 

폰트의 사이즈 비교표

 

 

 

자 이제 예제 소스태그를 보면 다음과 같습니다.

 

<p><font size="1">폰트 사이즈 1 입니다.</font> </p>
<p><font size="2">폰트 사이즈 2 입니다.</font> </p>
<p><font size="3">폰트 사이즈 3 입니다.</font> </p>
<p><font size="4">폰트 사이즈 4 입니다.</font> </p>
<p><font size="5">폰트 사이즈 5 입니다.</font> </p>
<p><font size="6">폰트 사이즈 6 입니다.</font> </p>
<p><font size="7">폰트 사이즈 7 입니다.</font> </p>

<p><font color="red">폰트 색상 레드</font> </p>
<p><font color="blue">폰트 색상 블루</font> </p>
<p><font color="purple">폰트 색상 보라</font> </p>

<p><font face="돋움체">폰트 돋움체 사용</font></p>
<p><font face="궁서체">폰트 궁서체 사용</font>
<br><br><br>
<hr>
<h2> 복합적인 사용 </h2>
<p><font size="6"; color="blue"; face="궁서체">
    폰트 사이즈6, 컬러는 블루, 폰트는 궁서체 사용</font> </p>

 

 

위의 예제 태그명령어를 htm문서의 body 태그 내에 붙여넣기하여 보면 출력물은 아래와 같습니다.

 

 

폰트 사이즈 1 입니다.

폰트 사이즈 2 입니다.

폰트 사이즈 3 입니다.

폰트 사이즈 4 입니다.

폰트 사이즈 5 입니다.

폰트 사이즈 6 입니다.

폰트 사이즈 7 입니다.

폰트 색상 레드

폰트 색상 블루

폰트 색상 보라

폰트 돋움체 사용

폰트 궁서체 사용

---

복합적인 사용

폰트 사이즈6, 컬러는 블루, 폰트는 궁서체 사용 

 

 

참고로 <hr>태그는 수평선을 그리는 태그이며 닫는 태그는 존재하지 않고 독립적으로 작용합니다. 너비, 높이, 색상 등을 변경하고자 할때는 전부 css를 통해서 작성하게 됩니다. 추후 다시 다루어 보겠습니다.

수고하셨습니다.