Ⅴ. 홈페이지 제작

1. HTML

7) 문자설정 태그             

① FONT 태그                 [색상코드표]

SIZE

글꼴 크기를 1에서 7의 비율로 지정해 줍니다. 크기 3이 디폴트로 보통 크기이다. 또한, +2와 같이 +, -를 사용하여 상대적 크기를 지정할 수도 있다.

COLOR

글꼴 색을 색상 명이나 헥사 코드로 지정한다.

FACE

글꼴 모양(글자체)를 지정한다.

 

(예 ex_6.html)

<html>
     <head><title> FONT 태그 </title></head>
     <body>
       <font size="5" color="blue" face="궁서">
        문자속성연습</font>
     </body>
</html>

실행결과

 

② 문자의 논리적 스타일                맨위로

<EM>

태그 사이의 단어나 문자들을 강조하는데 이탤릭체로 나타낸다.

<STRONG>

<EM> 보다 더욱 강조하는 것으로 굵은 글자체로 나타낸다.

<CODE>

폭이 고정된 영자 타자체-영자 신문체로 표시된다.

<SAMP>

예제 인용시 사용할 수 있다.

<KBD>

사용자 키보드에 의해서 입력되는 것을 표현하기 위해 사용된다.

<VAR>

변수를 표시하거나 실제 값과 치환을 표시할 때 사용한다.

<DFN>

어떤 것을 임의로 정의 할 경우에 사용된다.

<CITE>

짧은 인용 문구 등에 사용한다.

 

③ 문자의 물리적 스타일                 맨위로

<B>

지정한 단어 및 문자를 굵고 진하게 나타낸다.

<U>

지정한 단어 및 문자에 밑줄을 표현한다.

<I>

지정한 단어 및 문자를 기울게 보여준다.

<TT>

지정한 단어 및 문자를 타자로 친 것처럼 표현한다.

 

(예 ex_8.html)

<html>
     <head><title> 문자의 논리적 스타일 </title></head>
     <body>
       <b> A B C D E F G </b><br>
       <u> A B C D E F G </u><br>
       <i> A B C D E F G </i><br>
       <tt> A B C D E F G </tt><br>
     </body>
</html>

실행결과

 

④ 흐르는 글자 만들기                맨위로                       [색상코드표]

사용형식

<marquee>내용</marquee>

글자가 천천히 흐르는 효과를 낸다.

속성

behavior="alternate"

글자가 오른쪽, 왼쪽으로 왔다 갔다 한다.

direction="left"

글자가 왼쪽으로 서서히 이동한다.

direction="right"

글자가 오른쪽으로 서서히 이동한다.

direction="up"

글자가 위로 서서히 이동한다.

direction="down"

글자가 아래로 서서히 이동한다.

scrollamount="숫자"

글자가 이동하는 속도를 나타냄. 숫자가 크면 이동하는 속도가 빨라짐.(1부터)

bgcolor="색상명 또는 헥사코드"

글자가 이동하는 공간의 배경색을 나타냄.

 

(예 ex_15.html)

<html>
<head>
<title> 흐르는 글자 </title>
</head>
<body>
<marquee behavior="alternate"><h1>Welcome to My Homepage</h1></marquee><p>
<marquee direction="left"><h1>Welcome to My Homepage</h1></marquee><p>
<marquee direction="right"><h1>Welcome to My Homepage</h1></marquee><p>
<marquee direction="up" scrollamount="5" bgcolor="skyblue"><h1>Welcome to My Homepage</h1></marquee><p>
<marquee direction="down"><h1>Welcome to My Homepage</h1></marquee><p>
</body>
</html>

<실행결과>

 

⑤ 기타                    맨위로

<S>

문자 중간에 선이 통과하는 효과를 낸다.

<SUP>

윗 첨자를 나타낸다.

<SUB>

아래첨자를 나타낸다.

<BIG>

표준 문자보다 조금 큰 문자를 나타낸다.

<SMALL>

표준 문자보다 조금 작은 문자를 나타낸다.

<BLINKING>

문자를 깜박이게 한다.(Netscape에서 동작)

<SPACER>

빈 공간을 만든다.

&LT

< : 특수문자로 보다 작다를 표시한다.

&GT

> : 특수문자로 보다 크다를 표시한다.

&AMP

& : 특수문자로 &를 표시한다.

&QUOT

" : 특수문자로 "을 표시한다.

&NBSP

공백 문자를 표시한다.

 

(예 ex_9.html)

<html>
     <head><title> 문자스타일 </title></head>
     <body>
       <s> 문자 가운데 선</s><br>
       A<sup>위첨자2</sup><br>
       A<sub>아래첨자2</sub><br>
       <big>조금 큰 문자</big><br>
       <small>조금 작은 문자</small><br>
       <blink>깜박임</blink>
     </body>
</html>

실행결과