HTML 10단계 - 폰트(Font)

안녕하세요

HTML 10단계 폰트(font) 시간이 돌아왔습니다.

저번 시간에는 테이블(table) 2탄을 알아봤는데요 혹시나 잊지는 않으셨겠죠?~

오늘도 화이팅하며, 부담없이 봐주시면 감사하겠습니다.

자 그럼 HTML 10단계 폰트(font)를 시작해볼께요~

 

저번 시간에 이어서 자주 사용하는 테이블(table) 속성을 몇가지 더 살펴보겠습니다.

 

▣ HTML 폰트(Font)

 

<font> 태그는 글자를 꾸미는데 있어 가장 기본이 되는 태그 입니다.

<font> 태그는 기본적으로 size(크기), color(색상), face(글꼴) 3가지 속성이 있습니다.

 

자 그럼 먼저 size의 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td><font size="5">글자 크기</font</td>

  <tr>

</table>

 

size 속성은 <font></font> 사이에 입력된 글자의 크기를 지정하는 속성입니다.

예문에 보시다싶이 "글자 크기"의 텍스트를 크기 5만큼의 크기로 지정됩니다.

 

자 그럼 다음은 color의 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td><font color="red">글자 색상</font</td>

  <tr>

</table>

 

color 속성은 <font></font> 사이에 입력된 글자의 색상을 지정하는 속성입니다.

예문에 보시다싶이 "글자 색상"의 텍스트를 색상이 빨간색으로 지정됩니다.

color 속성을 지정시에 red, blue 식의 표현을 작성해도 적용이 되지만 보편적으로는 hex 코드로 지정하는 방식이 일반적이오나 이번 본문에서는 참조만 하시고 hex 코드에 대한 자세한 사항은 따로 정리하여 포스팅 해드릴께요. 그러니 너무 걱정마세요~ㅎ

 

그럼 다음은 face의 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td><font face="돋움">글자 글꼴</font</td>

  <tr>

</table>

 

face 속성은 <font></font> 사이에 입력된 글자의 글꼴을 지정하는 속성입니다.

예문에 보시다싶이 "글자 글꼴"의 텍스트를 글꼴이 돋움으로 지정됩니다. 다만 지정하신 글꼴은 홈페이지에 방문하신 방문자의 컴퓨터에 face으로 설정하신 글꼴이 설치되어 있어야지만 face로 지정하신 글꼴로 제대로 출력이 됩니다. 그러므로 윈도우에 기본적으로 설치되어있는 기본글꼴로 지정해야 홈페이지 방문자의 브라우저상에서도 제대로 출력됩니다.

 

그럼 다음은 size, color, face 의 3가지 속성을 모두 사용한 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td><font size="5" color="red" face="돋움">3가지 속성을 모두 사용하였습니다.</font</td>

  <tr>

</table>

 

<font></font> 사이에 입력된 글자의 크기, 색상, 글꼴이 예문에 보시다싶이 출력된 것을 확인하실 수 있습니다.

1. 물리적(Physical) 태그

 

텍스트와 관련된 태그는 크게 2가지 물리적(Physical) 태그와 논리적(Logical) 태그로 구분됩니다.

보편적으로는 물리적 태그를 많이 사용하기에 물리적 태그에 대해서만 다뤄보도록 하겠습니다. 

물리적 태그는 태그 자체의 의미는 가지고 있지 않고 단순히 화면에 표시되는 형태로만 결정됩니다.

즉, 텍스트가 화면에 출력되는 형식을 지정하는 태그 입니다.

자 그럼 예문을 통해 물리적 태그를 알아보겠습니다. 

 

<i></i>의 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td><i>기울임 글꼴</i></td>

  <tr>

</table>

 

<i>태그의 경우 텍스트가 기울임 글꼴로 화면에 출력된것을 확인하실 수 있습니다.

 

<b></b>의 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td><b>굵은 글꼴</b></td>

  <tr>

</table>

 

<b>태그의 경우 텍스트가 굵은 글꼴로 화면에 출력된것을 확인하실 수 있습니다.

 

<tt></tt>의 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td><tt>타자기 글꼴</tt></td>

  <tr>

</table>

 

<tt>태그의 경우 텍스트가 타자기 글꼴로 화면에 출력된것을 확인하실 수 있습니다.

 

<u></u>의 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td><u>밑줄친 글꼴</u></td>

  <tr>

</table>

 

<u>태그의 경우 텍스트가 밑줄친 글꼴로 화면에 출력된것을 확인하실 수 있습니다.

 

<s></s>의 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td><s>취소선</s></td>

  <tr>

</table>

 

<s>태그의 경우 텍스트가 취소선으로 화면에 출력된것을 확인하실 수 있습니다.

 

<strike></strike>의 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td><strike>취소선</strike></td>

  <tr>

</table>

 

<strike>태그의 경우 텍스트가 취소선으로 화면에 출력된것을 확인하실 수 있습니다.

 

의 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td>_아래첨자</td>

  <tr>

</table>

 

<sub>태그의 경우 텍스트가 아래첨자로 화면에 출력된것을 확인하실 수 있습니다.

 

의 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td>^위첨자</td>

  <tr>

</table>

 

<sup>태그의 경우 텍스트가 위첨자로 화면에 출력된것을 확인하실 수 있습니다.

 

<big></big>의 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td><big>크게</big></td>

  <tr>

</table>

 

<big>태그의 경우 텍스트가 크게 화면에 출력된것을 확인하실 수 있습니다.

 

<small></small>의 예문 소스를 살펴보겠습니다.

<table>

  <tr>

    <td><small>작게</small></td>

  <tr>

</table>

 

<small>태그의 경우 텍스트가 작게 화면에 출력된것을 확인하실 수 있습니다.

 

2. 특수문자(Character Entities)

 

HTML 태그는 "<" 기호로 시작해서 ">" 기호로 끝납니다.

그러므로 "<"는 브라우저가 해석할때 HTML 태그로 입력하기 위해서 사용되는 기호로 인식되기 때문에 화면상에 "<"를 표현하기 위해서는 "&lt;"와 같은 character Entities를 사용해야 됩니다. 

자 그럼 자주 사용되는 기호를  character Entities 형태로 확인해보겠습니다.

 

화면에 " "(공백) 을 출력할때의 엔터티명은 "&nbsp;"로 사용됩니다. 

 

화면에 "<"을 출력할때의 엔터티명은 "&lt;"로 사용됩니다. 

 

화면에 ">"을 출력할때의 엔터티명은 "&gt;"로 사용됩니다. 

 

화면에 "&"을 출력할때의 엔터티명은 "&amp;"로 사용됩니다. 

 

화면에 """을 출력할때의 엔터티명은 "&quot;"로 사용됩니다. 

 

어떠신가요? 이해가 잘 되시나요?

항상 드리는 말씀이지만 반복해서 연습하셔야 된다는건 필수인거 아시죠?ㅎ

다음시간에는 테이블을 이용한 레이아웃(Layout)에 대해서 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사합니다.