1. 제목의 글자크기: <Hn> -Heading
문서내의 제목을 지정할 때 사용한다. n은 1에서 6까지의 번호로 이루어지는데 <H1>은 가장 큰 제목이고 <H6>은 가장 작은 제목을 나타낸다.
1.1. HTML 문서
|
<html> <head> <title>문서의 제목 넣기 </title> </head> <body> <h1 style="background: yellow"> 홈페이지 길라잡이 (H1태그 사용) </h1> <h2 align=center>홈페이지 길라잡이 (h2태그사용)</h2> <h3>홈페이지 길라잡이 (h3태그 사용) </h3> <h4>홈페이지 길라잡이 (h4태그 사용) </h4> <h5>홈페이지 길라잡이 (h5태그 사용) </h5> <h6>홈페이지 길라잡이 (h3태그 사용) </h6> </body> </html> |
1.2. 브라우저 화면
2. 글꼴크기 : <Font size=n>
문서내의 글자크기를 지정한다. n의 숫자는 1부터 7까지 사용한다. n=1일 때 가장 작을 글자가 되고 n=7일 때 가장 큰 글자가 된다.
2.1. HTML 문서
|
<html> <head> <title>글자크기 </title> </head> <body><basefont size=4> <font size=+2>글자크기=6</font><br> <font size=1>글자크기=1</font><br> <font size=2>글자크기=2</font><br> <font size=3>글자크기=3</font><br> <font size=4>글자크기=4</font><br> <font size=5>글자크기=5</font><br> <font size=6>글자크기=6</font><br> <font size=7>글자크기=7</font><br> </body> </html> |
2.2. 브라우저화면
3. 글꼴 색상 : <Font color="색상값">
글자의 색상을 나타낸다. 색상 값은 RRGGBB로 나타낸다.
R은 RED, G는 GREEN, B는 BLUE를 말한다. 각각 16진수로 표현된다.
F는 색상 값이 가장 큰 것이고 0은 색상 값이 가장 작은 것이다.
#000000 : 검정색 #FFFFFF : 흰색 #FF0000 : 빨간색
#00FF00 : 녹색 #0000FF : 파란색 #FFFF00: 노란색
3.1. HTML 문서
|
<html> <head> <title>글자색상 </title> </head> <body>
<font color="#ffoooo">여기는 빨간색</font><br> <font color="black">여기는 검정색</font><br> <font color="#0000ff">여기는 파란색</font><br> </body> </html> |
3.2. 브라우저 화면
4. 글꼴 지정하기 : <Font face="글꼴이름">
글자체를 지정한다. 다른 사람의 컴퓨터에 없는 글꼴을 사용할 때는 글자가 제대로 나타나지 않을 수 있으므로 주로 많이 사용하는 글꼴을 사용한다. 특수 체를 반드시 사용하고자 할 때는 이미지를 입력하는 방법도 있다.
4.1. HTML 문서
|
<html> <head> <title>글꼴 </title> </head> <body> <font face="궁서체"> 다음은 궁서체로 변환한 글입니다. </body> </html> |
4.2. 브라우저 화면
5. 글자모양 태그
|
태그 |
설명 |
|
<B></B> |
굵은 글꼴을 나타낸다. |
|
<I></I> |
이탤릭체를 나타낸다. |
|
<U></U> |
밑줄 표시가 있는 글꼴을 나타낸다. |
|
<Big></Big> |
큰 글꼴을 나타낸다. |
|
<Small></Small> |
작을 글꼴을 나타낸다. |
|
<Sub></Sub> |
아래첨자로 표시한다. |
|
<Sup></Sup> |
위 첨자로 표시한다. |
|
<TT></TT> |
타자기로 입력한 모양으로 나타낸다. |
|
<BLINK></BLINK> |
문자를 깜박거리게 한다.(Explorer) |
6. 입력한대로 보여주기 : <Pre></Pre> - Preformatting
6.1. HTML 문서
|
<html> <head> <title>입력한 대로 보여주기 </title> </head> <body> <pre> 이 태그를 사용하면 입력한대로 브라우저에 보여지죠. 한번 실습해보시죠... </pre> </body> </html> |
6.2. 브라우저 화면
7. 줄 바꿈 태그 : <Br> -Breaking
줄 바꿈을 할 때 사용된다. 시작 태그로만 사용한다.
8.단락태그:<P> -Paragraph
문단을 나눌 때 사용한다. 시작태그만 사용해도 된다.
9. 문서 분할 태그 : <DIV> -Division
문서를 분할 할 때 사용한다. 문서의 한 부분에 스타일을 적용할 때 사용한다.
9.1. HTML 문서
|
<html> <head> <title>DIV태그 </title> </head> <body> <div style="background: red" align=left>안동대학교 <div align=center>안동대학교 <div align=right>안동대학교 </body> </html> |
9.2. 브라우저 화면
10. 수평선 그리기 태그 : <HR> -Horizontal Rules
문서의 수평선을 그려준다.
10.1. 적용할 수 있는 속성
|
속성 |
설명 |
|
style="..." |
스타일 시트를 적용 <H1 style="background: red"> |
|
title="제목 입력" |
<H1 title="제목의 글자크기"> |
|
align="left, center, right" |
선을 정렬시키는 방법을 설정한다. |
|
color="색상 값, 색이름" |
선의 색을 지정한다. |
|
noshade |
수평선에 음영효과를 주지 않는다. |
|
size="n" |
픽셀 단위로 선의 두께를 지정한다. |
|
width="n" |
픽셀단위나 %단위로 선의 길이를 지정한다. |
10.2. HTML 문서(두께 설정)
|
<html> <head> <title>수평선 그리기 </title> </head> <body> 수평선은 HR SIZE=1입니다.<hr size=1> 수평선은 HR SIZE=5입니다.<hr size=5> 수평선은 HR SIZE=10입니다.<hr size=10> </body> </html> |
10.3. 브라우저 화면
10.4. HTML 문서(너비와 정렬 설정)
|
<html> <head> <title>수평선 그리기2</title> </head> <body> 아래 수평선은 HR WIDTH=30%이고 왼쪽 정렬입니다. <HR WIDTH=30% align=LEFT><BR>
아래 수평선은 HR WIDTH=30%이고 가운데 정렬입니다. <HR WIDTH=30% align=CENTER><BR>
아래 수평선은 HR WIDTH=30%이고 오른쪽 정렬입니다. <HR WIDTH=30% align=RIGHT><BR> </body> </html> |
10.5. 브라우저 화면
11. 인용문 태그 : <BLOCKQUOTE></BLOCKQUOTE>
인용문을 사용할 때 사용한다. 한 줄이 띄워지고 들여 쓰기가 된다.
11.1. HTML 문서
|
<html> <head> <title>인용문</title> </head> <body> 아래 문장은 인용문을 사용한 예제입니다. <blockquote> "저 산은 네게 우지마라 우지마라하고<br> 발 아래 젖은 계곡 첩첩 산중<br> 저 산은 네게 잊으라 잊어버리라 하고<br> 내 가슴을 쓸어 내리네<br> 아, 그러나 한줄기 바람처럼 살다 가고파...."<br> </blockquote> </body> </html> |
11.2. 브라우저 화면
12. 주소태그 : <ADDRESS></ADDRESS>
홈페이지 주소를 나타낼 때 사용한다.
13. 주석문 태그 : <!--주석내용-->
주석문 태그를 사용하면 그 주석 문은 브라우저에 나타나지 않는다.
14. 빈칸 문자:
HTML 사용 시 두칸 이상의 빈칸은 적용되지 않는다. 빈칸을 입력하기 위해서는 를 입력한다.
15. 실습 과제
자기소개서: 다양한 폰트와 문서형식에 맞게, 색상도 3가지 이상 사용.
15.1. HTML문서
|
<html> <head> <title>실습과제 2.14</title> </head> <body> 이름 : 김치국<br> 나이 : 20세<br> 학교 : 안동대학교<br> 특기 : 마라톤<br> <address> e-mail : zzang@pyunji.andong.ac.kr </address> 홈페이지 : http://anuis.andong.ac.kr/~zzang </body> </html> |
15.2. 브라우저 화면
