글자(font) 태그 <font>태그는 글자를 꾸미는데 가장 기본이 되는 태그 size, color, face 3가지의 속성을 가집니다.
<FONT SIZE=n COLOR=영어,기호 FACE=글꼴체>내용</FONT> 글자를 크기(size), 색상(color), 글꼴(font)을 지정 글자속성
source <font size="5">텍스트 크기를 지정하는 size 속성</font> <font color="red">텍스트 색상을 지정하는 color 속성</font> <font face="돋움">돋움 글꼴로 지정된 font 속성</font> <font size="5" color="red" face="돋움">size, color, font 3가지 속성</font>
<H1~6>문서 제목</H1~6>
글자 크기를 1~6까지 지정
<FONT SIZE=n COLOR=영어,기호 FACE=글꼴체>내용</FONT>
글자를 크기(size), 색상(color), 글꼴(font)을 지정
여러가지 글자 표현
<BIG>메가뱅크 </BIG>
결과 내용을 기본 글꼴보다 한 단계 크게 표현합니다.
<SMALL>메가뱅크 </SMALL>
결과 내용을 기본 글꼴보다 한 단계 작게 표현합니다.
<ADDRESS>http://www.mega-bank.co.kr 1800-7142 </ADDRESS>
메일주소,연락처등을 기록 합니다.
<BLOCKQUOTE>인용문 </BLOCKQUOTE>
인용문 등을 사용 합니다.
<B>메가뱅크</B>
지정된 내용을 굵게 표현합니다.
<STRONG>메가뱅크</STRONG>
글자를 굵게 보여줍니다.
<I>기울림 체</I>
기울림(이태릭)체로 표현합니다.
<U>메가뱅크</U>
밑줄 표시 합니다.
<BLINK>메가뱅크</BLINK>
깜박이게 합니다.
<CITE>메가뱅크</CITE>
인용이나 참조로 표시할때 쓰입니다.
<CODE>메가뱅크</CODE>
컴퓨터프로그램 코드모양 변환 합니다.
<EM>글자를 강조 </EM>
강조, 이태릭(기울림)체를 표현합니다.
<KBD>메가뱅크</KBD>
키보드로 입력한 것과 같은모양이 출력됩니다.
<SAMP>메가뱅크</SAMP>
예제로 표시할때 쓰입니다.
<STRIKE>취소 선 </STRIKE>
취소 선을 보여줌(글자를 그어 보여줍니다.)
<SUB>메가뱅크</SUB>
아래 첨자로 보여줍니다.
<SUP>메가뱅크</SUP>
위 첨자로 보여줍니다.
<TT>메가뱅크</TT>
타자기로 친 것처럼 보여줍니다.
주석(Comment)
<!--주석 내용이 여기에 들어갑니다-->
주석은 화면상에 표시되지 않고 소스상에서만 확인할 수 있는데, HTML 문서를 작성할때 수정사항이나 태그의 설명 등을 보기 편하게 하기위해서 사용됩니다.
주석을 사용하는 이유는 소스가 아주 길고 복잡한 경우 HTML 문서를 수정할때 알아보기가 힘들기에 주석을 달아놓으면 쉽게 어떤 의도로 HTML 문서를 작성했는지 알 수 있고, 여러 사람이 하나의 HTML 문서를 공동으로 작업하는 경우에도 일관된 원칙에 따라서 주석을 달아 놓으면 업무 효율에 도움 됩니다.
제목의 글자 크기 지정(<Hn>,</Hn>)
<Hn>태그는 Heading의 약자어로 이 태그를 이용하여 제목이나 문단의 제목을 입력할 수 있습니다. <Hn> 태그는 일반적인 글자와는 달리 글자의 굵기가 굵으며, 글자 사이의 간격도 넓습니다. 그리고 뒤에 나오는 n(number)은 숫자를 입력하는 부분으로 1에서 6까지 지정할 수 있으며 숫자가 작을수록 큰 글자에 해당합니다. 또한 <Hn> 태그는 자동으로 줄바꿈 되기 때문에 너무 긴 문자열인 경우 브라우저 창의 크기에 따라 한 줄이 넘어가는 경우도 생깁니다.
글자 크기 지정(<FONT size="n">,</FONT>)
글자의 크기뿐만이 아니라 글꼴, 색상을 지정할 수 있습니다. 글자의 크기는 1부터 7까지 사용할 수 있으며 +와 -기호를 붙여 상대적인 크기도 지정할 수 있습니다. 이 태그는 숫자가 클수록 글자가 커집니다. 태그와는 반대입니다.
<html>
<head>
<title>글자 크기 연습</title>
</head>
<body>
본문에 나타나는 글자의 크기를 변경한 경우입니다.
<font size="7">글자 크기를 7로 한 경우</font>
<font size="6">글자 크기를 6로 한 경우</font>
<font size="5">글자 크기를 5로 한 경우</font>
<font size="4">글자 크기를 4로 한 경우</font>
<font size="3">글자 크기를 3로 한 경우</font>
<font size="2">글자 크기를 2로 한 경우</font>
<font size="1">글자 크기를 1로 한 경우</font>
<font size="+1">글자 크기를 +1로 한 경우</font>
<font size="-1">글자 크기를 -1로 한 경우</font>
<font size="+2">글자 크기를 +2로 한 경우</font>
<font size="-2">글자 크기를 -2로 한 경우</font>
</body>
</html>
<BASEFONT> 태그를 이용한 글자 크기와 글꼴 지정 (<BASEFONT size="n" face="글꼴 이름" >)
<BASEFONT>태그를 사용하여 글자의 크기와 글꼴를 변경할 수 있습니다. 그런데 <BASEFONT> 태그는 <BODY> 부분에서 사용할 수 있지만 일반적으로 <HEAD> 부분에서 설정한 후, 본문에서 <FONT> 태그를 이용하여 글자의 모양을 조정합니다. 글자의 크기는 절대값 1에서 7까지 사용할 수 있습니다. <BASEFONT> 태그는 문서의 전체적인 기본 글자의 크기를 지정할 때 많이 사용합니다. <BASEFONT face="글꼴 이름"> 태그를 이용하여 글꼴을 변경하면 전체 문서의 글꼴을 변경하는 것으로 <HEAD>와</HEAD> 태그 안에서 사용합니다.
글자의 색상 지정(<FONT color="색상값">내용</FONT>)
글자의 색상을 지정하는 방법은 크게 두가지로 나누어 볼 수 있습니다. HTML 문서 전체의 글자 색상을 변경할 경우 <BODY> 태그에서 속성을 부여하여 변경하는 방법과 본문 내용에서 일부분의 글자 색을 변경할 경우 <FONT color="색상값"> 태그를 이용하는 방법이 있습니다. 16진수로 색상값을 넣을경우 진수앞에 "#"넣어줍니다.
<html>
<head>
<title>글자 색상 </title>
</head>
<body>
본문에 나타나는 글자의 색상를 변경한 경우입니다.
<font color="black">글자 색 검정색</font>
<font color="yellow">글자 색 노랑색</font>
<font color="#0000ff">글자 색 파란색</font>
<font color="#ff0000">글자 색 빨간색</font>
<font color="#00ff00">글자 색 녹색</font>
<font color="pink">글자 색 분홍색</font>
<font color="#ee82ee">글자 색 보라색</font>
</body>
</html>
RGB 색상값
RGB란? Red, Green, Blue 약어로 Red, Green, Blue를 혼합하여 만들어지는 색을 의미합니다. 이 세가지 색은 256 등급의 색상을 가지고 있으며, 이 세가지 색을 혼합하여 나타낼 수 있는 색상은 256*256*256(16,777,216색)으로 모니터 상에 나타나는 모든 색을 표현할 수 있습니다. 색상을 표현할 때 숫자로 표시되는 값을 'RGB 색상값' 이라고 하며 이 값은 16진수로 나타냅니다. 1에서 0까지의 10개의 숫자와 A에서 F까지의 6개의 문자 조합으로 나타냅니다. 숫자가 작을수록 진한 색으로 표시됩니다. 예를 들면 #FFFFFF는 흰색이고, #000000은 검정색입니다. 색상표 참조 ☞ "여기" 클릭하세요.
글자의 모양 지정
글자의 모양을 지정하는 태그는 물리적 태그와 논리적 태그로 구분 없이 사용하고 있습니다.
<html>
<head>
<title>글자 모양 </title>
</head>
<body>
본문에 나타나는 글자의 속성을 변경한 경우입니다.
<b>글자를 굵게 표시</b>
<i>기울임꼴 이태릭체</i>
<u>밑줄</u>
<b><i>메가뱅크 입니다.</i></b>
</body>
</html>
글꼴 지정하기(<FONT face="글꼴 이름","돋음">메가뱅크</FONT>)
본문에서 사용할 글꼴을 지정합니다. 만약 두 개 이상의 글꼴을 사용할 경우 콤마(,)로 구분합니다. <BASEFONT face="글꼴 이름"> 태그를 이용하여 글꼴을 변경하면 전체 문서의 글꼴을 변경하는 것으로 <HEAD>와</HEAD> 태그 안에서 사용합니다.
<html>
<head>
<title>글꼴 바꾸기 </title>
<basefont face="돋음체">
</head>
<body>
전체 본문의 글꼴은 돋음체이며, 글꼴을 변경한 경우.
<font face="굴림체">글꼴을 굴림체로 변경</font>
<font face="바탕체">글꼴을 바탕체로 변경</font>
<font face="궁서체">글꼴을 궁서체로 변경</font>
</body>
</html>
글자 간격 조정
HTML 문서에서는 하나 이상의 공백을 인식하지 못하기 때문에 글자 간격을 조정하기 위해서 다음과 같은 방법을 이용해야 합니다. 먼저 공백에 해당하는 특수 문자인 를 이용합니다. 이 문자를 입력한 만큼 공백이 입력되는데, 반드시 소문자로 입력해야 합니다. 다른 방법은 <PRE> 태그를 이용하는데 이 태그는 Preformatted의 약어로 종료 태그와 함께 입력한 문자열을 그대로 표시 하고 사용합니다.
<html>
<head>
<title>글자 간격 조정 </title>
</head>
<body>
특수 문자를 이용해 글자의 간격을 조정합니다.
공백을 5개를 넣기 위해 공 백이라고 입력합니다.
배경색과 같은색의 글자와 배경색과 같은 가짜 그림 넣어 사용해서 여백을 만드는 방법도 있습니다.
</body>
</html>
특수문자 기능
HTML에서 "<" 태그는 웹브라우저가 해석할때 HTML 태그를 입력하기 위해서 사용하는 기호로 인식합니다. 그러므로 화면상에 "<"를 표현하기 위해서는 "<"와 같은 Character Entities를 사용해야 합니다.
ex) 5 < 7는 5보다 7이 크다. 화면 출력은 3 < 4는 5보다 7이 크다.
Character Entities는 3부분으로 나누어집니다.
&로 시작하여, 엔터티이름 혹은 #엔터티번호, 그리고 세미콜론(;)으로 끝납니다. 엔터티 이름을 사용해도 되고, 엔터티 번호를 사용해도 됩니다.
자주 사용되는 Character Entities
|
화면출력 |
설명 |
Entities name |
Entities No. |
|
|
non-breaking space 공백문자 (스페이스 바를 누른효과) |
|
  |
|
< |
less than |
< |
< |
|
> |
greater than |
> |
> |
|
& |
ampersand |
& |
& |
|
" |
quotation mark |
" |
" |
010-7249-0202
