글자관련 태그의 기능과 사용법

글자관련태그의 기능과 사용법

문자의 크기나 색상, 글꼴, 기울이기, 밑줄 긋기 등은 글자 관련 태그를 이용해 표현하고
이 태그를 얼마나 적절하게 사용하는가에 따라 내용을 전달하는 효과가 달라진다.

<font>요소

• <font> 태그에 정의된 여러 속성을 이용해 텍스트의 크기, 색상, 글꼴 등을 제어할 수 있다.
  

  <font> ... </font>
  기능	글자를 제어한다.
  속성	size : 글자 크기(1~7, 기본값은 3)  color : 글자 색상(값은 색상 코드나 색상명을 사용)  face : 글꼴
  사용예	<font size=“5” color=“##ff0000” face=“궁서체”></font>

• 글자 크기 설정하기
  • <font size="4">문자 크기 4</font> : 문자 크기를 4로 설정한다.
  • <font size="+1"> .... </font> : 기본값이 3보다 1만큼 큰 크기이므로 4가 된다.
     
• 글자 색상 설정하기
  • 문자의 색상 조절은 <font> 태그의 color 속성을 이용한다.
  • 속성값으로 색상 코드와 표준 색상명을 사용할 수 있다.
    색상코드, 색상명 사용 방법(교재 참조)
    <font color=“#0000FF”>
    <font color=“red”>
     
• 글꼴 설정하기
  • face 속성을 이용해 설정한다.
    <font face="바탕체">바탕체</font> => 바탕체
    <font face="굴림체">굴림체</font>=> 굴림체
    <font face="돋움체"> 돋움체</font>=> 돋움체
  • 윈도우에서 윈도우 [제어판]에서 [글꼴]을 더블클릭하면 컴퓨터에 설치되어 있는 글꼴을 확인할 수 있다.
    이 글꼴을 모두 사용할 수 있으나,
    홈페이지를 방문한 사용자의 컴퓨터에 해당 글꼴이 없으면 기본 글꼴로 표시된다.
    그래서 일반적으로 특수한 글꼴은 이미지로 만들어 사용한다.

기타 글자 모양 꾸밈 태그들

태그	기능	예
<b>	글자를 굵게 한다.	굵게
<i>	이탤릭체를 만든다.	이탤릭
<u>	선택한 부분에 밑줄을 긋는다.	밑줄
<tt>	글씨의 폭이 일정하다.(고정폭)	고정폭 타자체
<sub>	아래첨자	아래첨자
<sup>	윗첨자	윗첨자
<strike>	글자를 가로 질러 취소선을 긋는다.	취소선
<dfn>	단어를 정의할 때 사용하며 이탤릭체로 표현된다.	단어 정의
<em>	글자를 강조하며 이탤릭체로 표현된다.	강조구문
<cite>	citation으로 인용했음을 나타낸다.	인용출처
<kbd>	고정폭 글자체로 코드용 문자 표현에 사용된다.	code sample
<address>	주소를 나타내며 이탤릭체로 표현된다.	[e-mail]
<strong>	글자를 강조하여 굵게 표현한다.	글자 작게
<big>	글자를 조금 크게 한다.	글자 크게
<small>	글자를 조금 작게 한다.	글자 작게
<abbr>	축약어, 한글자씩 읽는다. (ex : html, css)	html, css
<q>	inline요소의 인용문을 표시한다.
<blockquote>	block요소의 인용문을 표시한다.  하위에 블록요소를 포함해야 한다.
<pre>	미리 형식을 가지고 있는 내용을 나타낸다.	NATO,  KOTRA
<ins>	추가한 내용을 표시할 때 밑줄로 나타낸다.	추가된 내용
<del>	삭제된 내용을 표시할 때 취소선으로 나타낸다.	삭제된 내용

특수문자

특수문자	기호	설명
&	&	엠퍼센드
&lt;	<	작은
&gt;	>	큰
&nbsp;		공백
&copy;	ⓒ	저작권