HTML 이론

Download Report

Transcript HTML 이론 

HTML 기초와 활용
1
목차
기본태그
고급태그
도큐먼트
테이블
페이지
폼
텍스트
프레임
폰트
리스트
링크
2
도큐먼트 시작!!!
3
Chapter 2
(1) HTML의 개념
- hypertext markup language의 약자
- 월드 와이드 웹에서 하이퍼텍스트 문서를 만들기 위한 기본언어
1) HTML의 특징
- HTML문서의 골격은 태그의 쌍으로 구성된다. <태그이름>문서의 내용</태그이름>
- 태그 중에는 <BR>, <IMG>처럼 종료 태그가 없는 경우도 있다.
- 태그는 대소문자를 구분하지 않는다.
(2) HTML의 기본 구조 및 태그
1) 태그구조 : HTML의 기본 구조를 이루는 태그
<HTML>
<HEAD>
문서정보
</HEAD>
<BODY>
실제로 표시되는 문서의 내용
</BODY>
</HTML>
<HTML> ~ </HTML>: HTML로 작성된 것을 표시, HTML의
시작을 의미.
<HEAD> ~ </HEAD> : 문서정보 기술, 문서 전체에 영향을
미치는 내용으로 화면에는 출력되지 않음.
<BODY> ~ </BODY> : 실질적인 웹 페이지 내용 삽입, 이
태그 안의 내용은 모두 화면에 출력 됨.
2) <HEAD>내 태그
<TITLE> : 홈페이지의 제목을 설정하는 것으로 브라우저의 제목 표시줄에 표시된다.
<LINK> : 현재의 홈페이지와 다른 홈페이지와의 관계를 설정할 때 사용한다.
<STYLE> : 웹 페이지에 서식을 적용시키는 태그로 서식을 설정하는 스타일 시트를 정의한다.
<SCRIPT> : Javascript나 Vbscript와 같은 스크립트 언어를 사용하고자 할 때 사용한다.
4
3) <BODY
> 옵션
① bgcolor : 배경색을 지정
② background : 배경그림을 지정. 배경그림이 지정되면 스타일을 지정하지 않는 한 배경색은
나타나지 않는다.
③ link : 하이퍼링크 된 문자나 그림 테두리의 색을 지정. 기본 색은 파란색
④ text : 기본 문자색을 지정한다. 기본 색은 검은색
⑤ vlink : 이미 본 페이지의 하이퍼링크 된 곳의 색을 지정. 기본 색은 보라색
⑥ alink : 마우스로 클릭동작을 행할 때의 색을 지정. 기본 색은 빨간색
⑦ topmargin : 전체 화면의 위쪽 여백을 설정
⑧ leftmargin : 전체 화면의 좌측 여백을 설정
⑨ onload : 문서가 다 로드 되었을 때 처리되는 스크립트를 지정
(3) 도큐먼트
1) <TITLE>
① 홈페이지의 제목을 설정하는 것으로 브라우저의 제목 표시줄에 표시된다.
② 브라우저의 즐겨 찾기에 추가 시 홈페이지의 제목으로 이름이 지정된다.
Source
실행화면
<HTML>
<HEAD>
<TITLE> 홍길동의 홈페이지</TITLE>
</HEAD>
<BODY>
Hello!
</BODY>
</HTML>
5
2) 코멘트(주석문)
① 홈페이지 소스가 복잡할 경우 설명이 필요한 부분에 주석을 삽입한다.
② 주석을 사용하면 홈페이지의 수정이 용이 하다.
③ <!-- 로 시작하여 -->로 끝난다.
④ 주석처리 된 것은 홈페이지에 나타나지 않는다.
⑤ Ms-익스플로러에서는 <COMMENT>~</comment>태그를 사용해도 된다.
Source
실행화면
<BODY>
<!--강좌 오픈 알림 메시지-->
홈페이지 강좌를 시작했습니다.
</BODY>
6
페이지 시작!!!
7
Chapter 3
(1) 페이지
- 실질적인 홈페이지의 내용이 삽입되는 부분이다.
- <BODY>태그에서 사용되는 속성들은 본문 전체에 영향을 미친다.
- <BODY>태그 옵션으로 배경이나 텍스트, 링크를 표시하는 부분의 색을 각각 지정할 수 있다.
1) 배경색 지정
<BODY BGCOLOR=”color”>~</BODY>
color=#RRGGBB 또는 colorname
①<BODY>태그를 이용하여 페이지의 배경색을 지정한다.
②색 지정에는 6자리 16진수 표기 앞에 #을 붙이거나 색 이름을 입력한다.
예) <body bgcolor=”#0000FF”> : 배경색이 파란색으로 지정된다.
※ 아래의 소스를 메모장에 입력하고 ‘파일이름.HTML’로 저장하여 익스플로러로 실행하여
보시기 바랍니다.
Source
실행화면
<HTML>
<HEAD>
<TITLE>홍길동의 홈페이지</TITLE>
</HEAD>
<BODY bgcolor="#0000FF">
<font color="white">
배경색을 파란색으로...</font>
</BODY>
</HTML>
8
2)<BODY>태그를 이용하여 페이지의 텍스트 색을 지정한다.
<BODY TEXT=”color”>~</BODY> : 표준 텍스트 색
<BODY LINK=”color”>~</BODY> : 링크 부분의 색
<BODY ALINK=”color”>~</BODY> : 링크를 클릭한 순간부터 데이터를 읽어오고 있는 도중의 색
<BODY VLINK=”color”>~</BODY> : 이미 읽어온 페이지 링크 부분의 색(Visited Link)
color=#RRGGBB 또는 colorname
① 텍스트나 링크를 표시하는 부분의 색을 지정하는 태그이다.
예) <body bgcolor="white" text="black" link="blue" vlink="gray" alink="red">
: 배경색은 흰색, 기본텍스트는 검정색, 링크된 텍스트는 파란색, 링크된 텍스트를 클릭했을 때의 색상은
빨강색, 방문한 링크 텍스트는 회색으로 지정
Source
실행화면
<html>
<head><title>홍길동의 홈페이지</title></head>
<body bgcolor="#ffffff" text="#000000"
link="#0000ff" vlink="#808080" alink="#ff00ff">
<p>표준 텍스트는 검정색으로<br>
<a href="link1.html">링크되어 있으며 방문하지
않은 페이지는 파란색으로</a><br>
<a href="link2.html">링크되어 있으며 이미 방문한
페이지는 회색으로</a>
</p>
</body>
</html>
9
3)<BODY>태그를 이용하여 페이지의 배경 이미지를 지정한다.
<BODY BACKGROUND =”이미지 파일명”>
<BODY BACKGROUND =”이미지 파일명” BGPROPERTIES=FIXED> : 배경패턴 고정
①읽어온 이미지는 연속적으로 타일 모양으로 표시된다.
②배경이미지로만 지정될 뿐 body내의 텍스트 입력이나 표 삽입등에는 전혀 영향을 주지 않는다.
③BGPROPERTIES=FIXED를 함께 써주면 화면을 위아래로 오른쪽으로 스크롤 해도 배경 이미지는
고정된 채 움직이지 않는다.
예) <body background="flower.jpg"> : 페이지에 배경이미지를 flower.jpg로 지정
Source
실행화면
<html>
<head>
<title>홍길동의 홈페이지</title>
</head>
<body background="flower.jpg"></body>
</html>
10
4) <BODY>태그를 이용하여 페이지 여백을 설정 한다.
<BODY LEFTMARGIN=”num”>~</BODY>
<BODY TOPMARGIN=”num”>~</BODY>
num=픽셀수
① 페이지 전체에 걸쳐 왼쪽 혹은 위의 여백 폭을 설정한다.
② 디폴트 마진은 무효가 되고, 0을 지정하면 왼쪽(위)끝에 정렬된다.
예) <BODY LEFTMARGIN=”60” TOPMARGIN=”10”></BODY>
Source
실행화면
<html>
<head><title>홍길동의 홈페이지</title></head>
<body leftmargin="60" topmargin="10">
<p>이 페이지 여백은 &nbsp; &nbsp; &nbsp;
&nbsp; 왼쪽 60픽셀, 위 10픽셀입니다.</p>
</body>
</html>
5) 가로선을 지정 한다.
<HR option>
option SIZE=”X”
선의 굵기(픽셀수)
WIDTH=”X"
선의 길이(픽셀수나 %)
ALIGN=”left"
정렬 방식(LEFT,RIGHT,CENTER)
NOSHADE
그림자 없음
11
①문서의 중간에 수평선을 그어 문단을 분리시킨다.
Source
실행화면
<html>
<head>
<title>홍길동의 홈페이지</title>
</head>
<body>
1. 속성 없이 사용할 때
<hr><p>
2. 수평선의 두께가 12일때
<hr size="12"><p>
3.그림자가 없을 때
<hr noshade><p>
4. 수평선 두께가 15이고 폭이 브라우저 화면의
50%, 왼쪽 정렬일 때
<hr size="15" width="50%" align=left><p>
5. 수평선 두께가 30이고, 폭이 100픽셀,
그림자가 없을 때
<hr size=30 width=100px noshade><p>
</body>
</html>
12
텍스트 시작!!!
13
Chapter 4
(1) 텍스트
1) <BR>
① 본문 중 텍스트의 줄 바꾸기를 한다.
② 이 태그는 시작 태그만 사용한다.
③ Source에서 줄을 바꾸(‘바꾸기’ 다음)어도 브라우저에는 영향을 주지 않는다.
Source
실행화면
<HTML>
<HEAD><TITLE><br>태그 사용하기</TITLE>
</HEAD>
<BODY>
여기서<br>줄 바꾸기
합니다.
</BODY>
</HTML>
2) <P>
① 문서의 단락을 나눌 때 사용한다.
② 텍스트의 줄이 바뀌면서 한 줄을 띄운다
Source
<HTML>
<HEAD>
<TITLE><p>태그 사용하기</TITLE>
</HEAD>
<BODY>
단락을 나눠보자.<p>단락이 나눠질 뿐 아니라
한 줄 띄어진다.
</BODY>
</HTML>
실행화면
14
3) 행 정렬
<P ALIGN=”option”>~</P>
option=left, center, right
① 단락(행)을 정렬할 때 사용한다.
② 왼쪽정렬, 중간정렬, 오른쪽정렬을 하며, 왼쪽정렬이 표준이다.
Source
실행화면
<HTML>
<HEAD>
<TITLE><p align>태그 사용하기</TITLE>
</HEAD>
<BODY>
<P ALIGN="left">좌로 정렬
<P ALIGN="center">중간 정렬
<P ALIGN="right">우로 정렬
</BODY>
</HTML>
<Hnum ALIGN=”option”>~</Hnum>
num=1~6, option=left, center, right
① 행 정렬 위치를 설정 할 때 사용한다.
② Num에 문자크기를, 옵션에 위치(좌,우,중간)를 입력한다
15
Source
실행화면
<HTML>
<HEAD>
<TITLE>
<Hnum align>태그 사용하기
</TITLE>
</HEAD>
<BODY>
<H4 ALIGN="left">문자크기 4, 좌로 정렬</H4>
<H5 ALIGN="center">
문자크기 5, 중간정렬</H5>
<H6 ALIGN="right">
문자크기 6, 우로 정렬</H6>
</BODY>
</HTML>
<DIV ALIGN=”option”>~</DIV>
option=left, center, right
① <DIV>는 특정한 부분을 하나의 그룹으로 정의하는 태그로 문서를 논리적으로 분할한다.
② 분할된 한 문단에 스타일을 적용할 수 있다. (ID, LANG, CLASS, CLEAR, NOWRAP)
③ <DIV ALIGN>은 정렬 위치를 설정할 때 사용하며, ALIGN 생략 시 left로 지정된다.
16
Source
실행화면
<HTML>
<HEAD>
<TITLE><div align>태그 사용하기</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="left">DIV태그를 이용한 행 정렬<br>
왼쪽 정렬</DIV>
<p>
<DIV ALIGN="center">DIV태그를 이용한 행
정렬<br>가운데 정렬</DIV>
</BODY>
</HTML>
<CENTER> ~ </CENTER>
① 문단을 가운데 정렬한다.
② 브라우저 폭에 맞춰 중심에 텍스트나 이미지가 표시된다.
③ 중간에 다른 태그를 넣을 수도 있다.
4) <PRE>
① 문서에 나타나 있는 그대로의(present 현재의) 형태로 문단을 보고자 할 때 사용한다.
17
Source
실행화면
<HTML>
<HEAD><TITLE><pre>태그 사용하기</TITLE>
</HEAD><BODY>
<PRE>
사랑
사랑
사 랑 사
랑
사
랑
사
랑
사
랑
사랑
</PRE>
</BODY></HTML>
5) <XMP>
① 문서에 나타나 있는 그대로의 형태로 보여줄 때 사용한다.
② <PRE>와 다른 점은 HTML 태그까지 보여준다는 것이다.
Source
<HTML>
<HEAD><TITLE><xmp>태그 사용하기</TITLE>
</HEAD>
<BODY>
<XMP>
<center>가운데 정렬</center>
<h2>글자크기 2로 지정</h2>
</XMP>
</BODY>
</HTML>
실행화면
18
6) <MARQUEE>
<MARQUEE option> ~ </MARQUEE>
Option은 아래와 같다.
1. 위치에 관한 것
ㆍALIGN=TOP,MIDDLE,BOTTOM(문자열의 위치)
ㆍHEIGHT=픽셀수나 %(문자열의 크기)
ㆍWIDTH=픽셀수나 %
ㆍHSPACE=픽셀수(문자열의 바깥 여백)
ㆍVSPACE=픽셀수
3. 횟수와 시간에 관한 것
ㆍLOOP=num, -1(무한루프), INFINITE
ㆍSCROLLDELAY=num : 다시 MARQUEE시킬
때까지의 초수 지정
ㆍSCROLLAMOUNT=num : 텍스트를 다시
MARQUEE시킬 때까지의 픽셀수 지정
2. 움직임에 관한 것
ㆍBEHAVIOR : 텍스트의 흘러가는 형식
- SCROLL : 텍스트가 흘러가다 사라진다.
- SLIDE : 텍스트가 흘러가다 마지막에 멈춘다.
- ALTERNATE : 텍스트가 양쪽 방향으로 왕복을
한다.
ㆍDIRECTION : 텍스트의 흘러갈 방향으로 LEFT,
RIGHT가 있다.
4. 색에 관한 것
ㆍBGCOLOR=#RRGGBB, colorname
① 홈페이지 내에서 텍스트가 어느 한 방향에서 반대 방향으로 흘러가는 동작을 연출한다.
② 익스플로러 전용 태그이다.
Source
<BODY>
<MARQUEE ALIGN=TOP BEHAVIOR=SCROLL DIRECTION=RIGHT SCROLLDELAY=10
SCROLLAMOUNT=10 LOOP=-1>IT POSCO에 오신걸 환영합니다.</MARQUEE>
</BODY>
19
폰트 시작!!!
20
Chapter 5
(1) 폰트
1) <Hnum>
①문서의 제목에 해당하는 문자열을 나타낼 때 주로 사용한다.
②Head의 약자로 H1 ~ H6까지 있다.
③H1이 가장 큰 글자이고, H6이 가장 작은 글자이다.
④볼드체가 되며, 태그의 앞뒤는 강제적으로 줄이 바뀌어 스페이스가 들어간다.
Source
실행화면
<HTML>
<HEAD><TITLE><Hn>태그 사용하기</TITLE>
</HEAD>
<BODY>
<H1>안녕하세요!</H1>
<H2>안녕하세요!</H2>
<H3>안녕하세요!</H3>
<H4>안녕하세요!</H4>
<H5>안녕하세요!</H5>
<H6>안녕하세요!</H6>
</BODY>
</HTML>
2) <Font>
<FONT SIZE=num>~</font>
<FONT COLOR=색상명 또는 #RRGGBB>~</font>
<FONT FACE=글꼴 이름>~</font>
<FONT SIZE=num COLOR=색상명 또는 #RRGGBB FACE=글꼴>~</font>
num=1~7
21
① size : 문서 내의 해당 문자열의 크기를 지정할 수 있다.
- Num 수치가 클수록 문자 크기가 커진다.
② Color : 글자의 색상을 나타낸다. 색상표에 따라 16진수나 색 이름을 입력한다.
- 표준 색상 이름 : red, green, gray, white등 예)<font color=”blue”>
- 16진수 : FF00FF, 000000, 808080등 예)<font color=”FF00FF”>
- RGB%값 : RGB(R:Red, G:Green, B:Blue)라는 함수를 사용하여 백분율 값으로 지정.
예)<font color=RGB(100%, 10%, 20%)>
- 0~255까지의 RGB 정수값 : RGB라는 함수를 사용하여 0~255값으로 지정.
예)<font color=RGB(155,127,0)>
③ Face : 글자의 글꼴을 지정한다.
- arial, lucida, sans, 궁서, 돋움, 굴림 등
④ size, color, face를 각각 지정할 수도 있고, 하나의 태그에 함께 사용할 수도 있다
Source
<HTML><HEAD>
<TITLE><font>태그 사용하기</TITLE></HEAD>
<BODY>
<font size=2>글자 크기 2입니다.</font><p>
<font color=#FF0000>글자색 빨강
입니다.</font><p>
<font face=arial>font face is arial.</font><p>
<font size=3 color=green>크기, 색상
지정</font><p>
<font color=RGB(255,0,0) face=굴림>색상, 글꼴
지정</font><p>
<font size= 4 color=RGB(50%,50%,50%)
face=궁서>크기, 색상, 글꼴 지정</font><p>
</BODY>
</HTML>
실행화면
22
3) <BaseFont> 12,
<BASEFONT SIZE=num COLOR=색상명 또는 #RRGGBB FACE=글꼴 이름>
<FONT SIZE=±num COLOR=색상명 또는 #RRGGBB FACE=글꼴 이름>
num=1~7
① 문서 내의 기본 글자의 크기, 색깔, 글꼴 등을 지정해 줌으로써 같은 태그를 반복하는 번거로움을
피할 수 있다.
② Font size에 ±값을 적용하면 Base font를 기준으로 하여 상대값이 적용되며, font size에 ±없이
값을 입력하면 절대값이 적용된다.
③ Basefont를 지정하고 태그를 종료하지 않으면 지정부분부터 끝까지 basefont가 적용되며 구간을
정하여 지정하고자 한다면 </basefont>로 종료하면 된다.
④ <font>에서와 마찬가지로 size, color, face를 각각 지정할 수도 있고, 하나의 태그에 함께
사용할 수도 있다.
Source
<HTML>
<HEAD>
<TITLE><basefont>태그 사용하기</TITLE>
</HEAD><BODY>
<basefont size=4 color=red face=궁서>기본폰트,
색상, 글꼴 지정<p>
기본폰트 적용되나?<p>
<font size=-1 color=gray face=돋움>상대값
적용</font><p>
<font size=3 color=green face=굴림>절대값
적용</font><p>
기본폰트 여기도 적용되나?<p>
</BODY></HTML>
실행화면
23
4) 이탤릭 스타일 태그
① <I> : Italic을 의미하며 문자를 이탤릭체로 표시한다.
② <EM> : emphasize의 의미로 문서 내의 강조할 부분을 이탤릭체로 보여준다.
③ <CITE> : 책이나 문서에서의 인용문을 나타낼 때 사용한다.
④ <ADDRESS> : 문서를 제작한 회사나 제작사에 대한 정보를 나타낼 때 사용하는 것으로 전화번호,
팩스번호, E-mail주소 등을 나타낸다.
⑤ <VAR> : 컴퓨터 프로그램의 변수 이름을 문서의 중간에 삽입할 때 사용한다.
⑥ <DFN> : Definition을 의미하며, 문자를 정의할 때 사용한다
Source
실행화면
<HTML><HEAD><TITLE> 이탤릭 스타일</TITLE>
</HEAD><BODY>
<i>이탤릭체를 사용할 때 가장 편리하게 쓸 수
있다</i><p>
<em>Emphasize(강조)의 의미가 있다.</em><p>
<cite>인용된 경우에 사용한다.</cite><p>
<address>E-mail주소, 전화, 팩스번호등을 나타낼 때
쓴다.</address></p>
<var>프로그램 변수등에 사용한다.</var><p>
<dfn>문자를 정의할 떄 사용한다.</dfn><p>
</BODY></HTML>
5) 강조 스타일 태그
① <B> : 특별히 강조하고 싶은 부분을 진하게 Bold체로 나타낸다.
② <BIG> : 주위의 글자보다 조금 크게 나타낸다.
③ <SMALL> : 주위의 글자보다 조금 작게 나타낸다.
④ <BLINK> : 글자가 깜박인다.
⑤ <S> : 주로 잘못된 글자를 지우지 않고 가운데 줄을 긋는 효과를 주어 표시한다.
⑥ <STRIKE> : <S>와 같은 효과로 글자 중간에 줄을 긋는 효과를 준다.
⑦ <U> : Underline으로 글자 아래에 밑줄을 긋는다.
⑧ <STRONG> : <B>와 같은 효과로 특별히 강조하고 싶은 부분을 진하게 나타낸다
24
Source
실행화면
<HTML><HEAD><TITLE>강조 스타일</TITLE>
</HEAD><BODY>
<b>문자를 진하게 강조</b><p>
<big>주위 문자보다 조금 크게</big><p>
<small>주위 문자보다 조금 작게</small><p>
<blink>문자가 깜박인다.(네스케이프에서만
보인다)</blink><p>
<s>문자 가운데 줄긋기</s><p>
<strike>문자 가운데 줄긋기</strike><p>
<u>글자 아래에 밑줄을 긋는다.</u><p>
<strong>문자를 진하게 표시</strong>
</BODY></HTML>
6) 첨자 스타일 태그
① <SUP> : 복잡한 수식이나 원소기호를 나타낼 때 사용하는 것으로 위 첨자를 나타낸다.
② <SUB> : 복잡한 수식이나 원소기로를 나타낼 때 사용하는 것으로 아래 첨자를 나타낸다.
Source
<HTML>
<HEAD>
<TITLE>첨자 스타일</TITLE>
</HEAD>
<BODY>
물은 H<sub>2</sub>O 이다<p>
방정식 X<sup>2</sup> + Y<sup>2</sup> =
Z<sup>2</sup>의 값은?
</BODY>
</HTML>
실행화면
25
7) 그 외 스타일 태그
① <TT> : TeleType체로 구식 타자기형의 글꼴을 보여준다.
② <KBD> : 홈페이지 내에서 특정 키 입력을 설명하고자 할 때 사용한다.
③ <KEB> 태그가 적용되면 글꼴 크기가 2포인트 커진다.
④ <CODE> : 문서 중간에 컴퓨터 프로그램 소스를 삽입할 때 사용한다.
Source
실행화면
<HTML><HEAD>
<TITLE>그 외 스타일</TITLE>
</HEAD><BODY>
<tt>타자체의 글자</tt><p>
<kbd>그만하려면 Q나 X를 누르세요</kbd><p>
프로그램 코드를 표시한다.<br><code>비주얼 베이직
코드 private a, b as integer</code><p>
</BODY></HTML>
8)특수 문자
&키워드, &아스키코드
① 태그 표기에 사용되는 기호(<,>,&등)나 키보드에서는 입력할 수 없는 문자를 특수폰트라고 부른다.
② 특수 폰트를 표시하고 싶을 때는 Name Entity라고 불리는 서식을 사용한다.
③ 키워드에는 특정폰트를 표시하는 문자, 아스키코드에는 문자의 아스키코드를 입력.
&quot;
Quotation mark(“)
&nbsp;
NoneBreak Space(공백)
&amp;
Ampersand(&)
&copy;
Copyright(ⓒ)
&lt;
Less Than(<)
&reg;
Registered trademark(ⓡ)
&gt;
Greater Than(>)
26
Source
실행화면
<HTML><HEAD><TITLE>특수폰트</TITLE>
</HEAD><BODY>
Quotation mark(") : &quot;<p>
Ampersand(&) : &amp;<p>
Less Than<<) : &lt;<p>
Greater Than(>) : &gt;<p>
NoneBreak Space(공백) : &nbsp;<p>
Copyright(ⓒ) : &copy;<p>
Registered trademark(®) : &reg;<p>
</BODY></HTML>
27
리스트 시작!!!
28
Chapter 6
(1) 리스트
1) <UL>
① Unordered List로 비순서형 목록을 설정한다.
② <UL>태그를 사용하고 그 사이의 문장 맨 앞에 <LI>를 열거한다.
③ 위 아래에 스페이스가 들어가고 각 항목에 마크가 붙여진다.
④ 각 항목은 자동적으로 줄 바뀜이 된다.
Source
실행화면
<HTML>
<HEAD><TITLE><UL>태그 사용하기</TITLE>
</HEAD><BODY>
<UL>
<LI>빨간 장미
<LI>노란 장미
<LI>흰 장미
</UL>
</BODY></HTML>
⑤ 리스트의 마크를 변경할 수 있다.
<UL TYPE=”OPTION”><LI>~</UL> 또는 <UL><LI TYPE=”OPTION”>~</UL>
OPTION=disk(검은색 동그라미), circle(흰색 동그라미), square(검색은 사각형)
29
Source
실행화면
<UL type="circle">
<LI>html 강좌
<LI>javascript 강좌
<LI>css 강좌
</UL>
<UL>
<LI type="circle">속이 빈 원형
<LI type="disk">속이 검은 원형
<LI type="square">속이 검은 사각형
</UL>
2) <OL> 11,
①Ordered List로 순서형 목록을 설정한다.
②순서형 목록이라는 것을 제외하고는 <UL>과 같다.
Source
실행화면
<BODY>
<OL>
<LI>windows 98 따라하기
<LI>linux 따라하기
<LI>unix 따라하기
</OL>
</BODY>
③목록의 번호 형식을 변경 할 수 있다.
<OL TYPE=”option”><LI>~</OL> 또는 <OL><LI TYPE=” option”>~</OL>
option =1(계산용 숫자, 표준), a(영문 소문자), A(영문 대문자),
i(소문자 로마자), I(대문자 로마자)
30
Source
실행화면
<OL type=i>
<LI>windows 98 따라하기
<LI>linux 따라하기
<LI>unix 따라하기
</OL>
<OL>
<LI type=a>windows 98 따라하기
<LI type=I>linux 따라하기
<LI type=A>unix 따라하기
</OL>
④ 목록의 번호 순서를 변경할 수 있다.
<OL start=”시작번호”> ~ </OL> <LI value=”시작번호”> ~ </LI>
Source
실행화면
<OL start=4>
<LI>항목 A</LI>
<LI>항목 B</LI>
<LI value=1>항목 C</LI>
<LI>항목 D</LI>
<LI>항목 F</LI>
</OL>
31
⑤ 목록의 번호 형식과 시작번호를 함께 변경할 수 있다.
<OL start=”시작번호”><LI type=option> ~ </OL>
<OL start=”시작번호” type=option><LI> ~ </OL>
Source
실행화면
<OL start=4>
<LI type=A>빨간 장미
<LI type=A>노란 장미
<LI type=A>흰장미
</OL>
<OL start=4 type=A>
<LI>빨간 장미
<LI>노란 장미
<LI>흰장미
</OL>
3) <DIR>와 <MENU>
<DIR> : 디렉토리 리스트
- 디렉토리형 목록을 설정한다.
- 목록 내 항목을 추가할 때는 <LI>를 사용한다.
<MENU> : 메뉴 리스트
- 메뉴형 목록을 설정한다.
- 목록 내 항목을 추가할 때는 <LI>를 사용한다
32
Source
실행화면
<DIR>매체의 속성
<LI>상징적 속성
<LI>내용적 속성
</DIR>
<MENU>매체의 연구
<LI>매체 비교 연구
<LI>매체 소성 연구
</MENU>
4) <DL> : 정의형 리스트 13,
- Definition List로 설명(정의)형 목록을 설정한다.
- <DL>로 정의된 목록은 <DT>와 <DD>로 나누어 진다
① <DT> : 정의되는 말
- 반드시 <DL>안에서 사용되며 목록에 대한 제목이나 설명을 기재한다.
② <DD> : 정의된 말의 의미
- 자동적으로 줄을 바꾸어 주며, 설명목록 안에서 항목을 추가할 때 사용한다.
Source
실행화면
<DL>
<DT>HTML이란
<DD>HyperText Markup Language의 약자
<DT>VRML이란
<DD>Virtual Reality Markup Language의 약자
</DL>
33
5) <LI>
- 모든 목록들에 세부 항목을 지정할 때 사용한다.
① Type : 각 항목 앞에 붙이는 기호나 숫자 스타일
② Value : 순서형 목록에서 처음 시작하는 번호를 지정하며 끊어진 항목을 다시 시작할 때 유용하다.
6) <BLOCKQUOTE>
① 외부 문서의 일부를 인용할 때 사용하며 인용된 부분은 들여쓰기가 된다.
② 많은 양의 텍스트인 경우 더 적절하며 페이지의 좌, 우측으로 여백을 설정하여 준다.
Source
실행화면
디지털 컨버전스 (Digital convergence)
<blockquote>
디지털 기술을 매개로 컴퓨터, 가전, 통신 등의
여러가지 기기와 기반 기술이 서로 유기적으로
융합되는 현상을 말한다.
디지털 컨버전스는 PC, AV 가전, 휴대폰 등 단말 기기
뿐만 아니라 디지털 정보가 생성, 유통, 재가공,
재생되는 컨텐츠, 네트워크, 서비스 등 다양한
과정에서 일어나고 있다.
</blockquote>
34
링크 시작!!!
35
Chapter 7
(1) 링크
- 문서 연결은 홈페이지의 큰 특징인 하이퍼링크 기능을 수행하는 것이다.
- HTML문서뿐만 아니라 다른 웹 소스(이미지, 비디오 클립, 사운드, 프로그램)를 연결 할 수 있다.
- HTML문서가 아닌 경우는 지정한 파일을 다운로드할 수 있도록 안내 메시지가 나타난다.
1) <A>
- Anchor로 홈페이지 내에 링크를 설정한다.
- href와 같이 사용하여 하이퍼링크를 설정한다.
① 다른 문서로 링크
<A href=”URL”>~</A>
- 문자열이나 그림을 다른 HTML문서나 웹 사이트로 링크 시킨다.
- URL은 상대경로나 절대경로로 지정 할 수 있다.
- 문서가 아닌 웹 소스(이미지, 비디오 클립, 사운드, 프로그램)를 연결 할 수 있다.
※ 상대경로와 절대경로
▷ 상대경로 : 현재 파일이 있는 위치에서부터 상대적인 위치를 지정하는 것이다.
예를 들면 c:/test/a.htm파일이 있고 c:/e-test/z.htm이 있을 때 a.htm에서 z.htm을 가리키려면
../e-test/z.htm와 같이 쓸 수 있다.
▷ 절대경로 : 현재 위치가 어디에 있든 상관없이 전체 경로를 지정하는 것이다.
위의 예를 절대 경로로 표시하면 file:///c:/e-test/z.htm과 같이 쓸 수 있다.
36
Source
실행화면
<HTML><HEAD> 11,
<TITLE><A> : 문서연결</TITLE></HEAD>
<BODY>
<a href="html_ex1.htm">같은 웹사이트 내 다른 문서로
이동</a><p>
<a href="http://www.e-test.co.kr/">다른 웹 사이트로의
이동</a><p>
<a href="http://www.e-test.co.kr/"><img
src="it_posco.jpg" border=0></a><p>
<a href="mr.postman.mp3">음악파일</a>
</BODY></HTML>
② NAME : 현재 HTML문서의 특정 위치로 링크 9, 14, 15, 10,
<A href=”#키워드”>~</A>
<A name=”키워드”>~</A>
(링크 거는 지점 지정)
(링크 되는 지점 지정)
- 같은 문서내 특정 위치로 이동한다.
- 하나의 문서가 길어 스크롤 해서 보기 힘들 때 사용하면 유용하다. 책갈피를 꽂아 두는 것과 같다.
- 링크할 곳(name)에서 같은 키워드를 하나 이상 사용해서는 안 된다.
※ 소스를 다운 로드 받아 확인시 브라우저 창을 작게 줄여 세로 스크롤이 생기도록 하여
확인하도록 하세요!
37
Source
<a name=top><a href="#list1">출제 형식 및 문제 접근 방법</a>/<a href="#list2">검색문제 예제
</a></a>
<p><a name="#list1">1. 출제형식 및 문제 접근방법</a></p>
--- 중 략 --6) 6단계 : 정답을 확인하고 문제의 요구에 맞게 저장한다.<a href=#top>▲ TOP</a>
<p><a name="#list2">2. 검색문제 예제</a><br>
왜구의 토벌이 한창 진행되던 우왕 말기에 고려와 명나라 사이에 영토 분쟁이 일어났다.
--- 중 략 --- 시기가 장마철이라 활이 휘고 군사가 병이 들기 쉬워 불가하다.<a href=#top>▲ TOP</a>
③ 다른 HTML 문서의 특정 위치로 링크
<A href=”URL#키워드”>~</A> (링크 거는 지점 지정)
<A name=”키워드”>~</A>
(링크 되는 지정 지정)
- 다른 HTML문서로 이동해서 이동한 문서내의 특정 위치로 이동하도록 지정한다.
※ 아래의 예는 예제 2의 특정 위치로 이동하도록 설정 한 것입니다.
Source
<HTML>
<HEAD><TITLE><Name> : 다른 문서의 특정 위치 링크</TITLE></HEAD>
<BODY>
<a href="7-2ex.htm#list1">예제 2의 출제 형식 및 문제 접근 방법</a><p>
<a href="7-2ex.htm#list2">예제 2의 검색문제 예제</a>
</BODY>
</HTML>
38
④ TARGET
<A href=”URL” target=”창 이름”>~</A>
-링크된 소스가 보여지게 될 곳을 정의한다.
- 프레임이 있는 HTML문서에서 사용한다. 프레임이 없는 HTML문서에서도 새로운 창을 열기 위해
‘_blank’를 사용하기도 한다.
- 속성 값은 프레임 이름, _blank, _self, _parent, _top등이 있다.
(이 부분에 대한 자세한 내용은 프레임 단원에서 소개할 것임)
Source
<HTML>
<HEAD><TITLE>target : 새로운 창에서 열기</TITLE></HEAD>
<BODY>
<a href="7-2ex.htm" target=”_blank">예제 2를 새창으로 열기</a><p>
<a href="7-2ex.htm#list2" target=”_blank">새창으로 열어 예제 2의 검색문제 부분으로 이동</a>
</BODY>
</HTML>
⑤ 전자 메일 링크
<A href=”mailto:전자 메일 주소”>~</A>
- 문자열에 링크 연결시 ‘mailto:’와 전자 메일 주소를 입력하면 전자 메일을 보낼 수 있다.
- 링크된 부분을 클릭하면 기본적으로 설정되어 있는 메일 클라이언트 프로그램
(대부분은 아웃룩 익스프레스가 지정)이 실행된다.
- 메일 클라이언트 프로그램의 받는 사람(수신처) 입력란에 자동적으로 지정된 전자 메일 주소가 입력된다.
39
Source
실행화면
<HTML>
<HEAD>
<TITLE>mailto : 전자 메일 링크</TITLE>
</HEAD>
<BODY>
<a href="mailto:[email protected]">IT P
OSCO 문의처</a><p>
IT POSCO 문의처 <a href="mailto:pd0a3956@
posco.co.kr">[email protected]</a>
</BODY>
</HTML>
40
테이블 시작!!!
41
Chapter 8
(1) 테이블 이용
- 홈페이지 내에서 테이블은 다양한 용도로 사용된다.
- 내용을 표 안에 잘 정돈하여 넣어줄 수 있다.
- 홈페이지의 화면 디자인을 표 형식으로 하여 고정시킬 수 있다.
- 용량이 큰 이미지를 작은 이미지로 잘라 만든 다음 표에 넣어 큰 이미지를 표시할 수 있다.
1) 테이블의 기본형식
<TABLE border=”외곽선 굵기(픽셀)”>~</TABLE>
<TR>~</TR>
<TH>~</TH>
<TD>~</TD>
←
←
←
←
표 전체
가로 1열
제목용 셀
데이터용 셀
- 종료 태그를 반드시 사용하여야 한다.
- 제목용 셀(TH) 안의 문자는 굵은 글씨로, 가운데 정렬되어 나타난다.
Source
실행화면
<table border="2">
<tr>
<tH>이름</tH><tH>나이</tH><tH>성별</tH>
</tr>
<tr>
<td>홍길동</td><td>35</td><td>남</td>
</tr>
<tr>
<td>김영희</td><td>26</td><td>여</td>
</tr>
</table>
42
2) <CAPTION> : 표 제목
<CAPTION>~</CAPTION>
<CAPTION align=”표시 위치”>~</CAPTION>
표시 위치 : top, bottom,
(left, right)
- 테이블에 대한 설명이나 제목 등을 기재할 때 사용된다.
- <TABLE>태그 내에서만 사용된다.
- align 속성을 이용하여 위치를 지정하지 않으면 표의 위쪽 가운데에 나타난다.
Source
실행화면
<table border="2">
<caption align="left">출석부</caption>
<tr>
<tH>이름</tH><tH>나이</tH><tH>성별</tH>
</tr>
<tr>
<td>홍길동</td><td>35</td><td>남</td>
</tr>
<tr>
<td>김영희</td><td>26</td><td>여</td>
</tr>
</table>
43
3) 표의 크기와 여백 지정
<TABLE width=“폭” height=”높이”>~</TABLE>
<TABLE cellspacing=”셀 안의 간격” cellpadding=”셀 사이의 간격”>~</TABLE>
- width : 표 전체의 너비를 지정하며 입력은 픽셀 단위 또는 전체 브라우저 화면에 대한 비율 퍼센트로
표시한다.
- height : 표 전체의 높이값을 입력하며 입력은 픽셀 단위로 한다.
- cellspacing : 한 셀의 경계와 인접 셀 사이의 간격을 설정한다.
- cellpadding : 셀 경계와 셀 안에 있는 내용 사이의 간격을 설정한다.
Source
실행화면
<table border="2" width="100%" height="100">
<tr>
--- 중략 --</tr>
</table>
<p>
<table border="8" cellspacing="4" cellpadding="10">
<tr>
--- 중략 --</tr>
</table>
44
4) 표 외곽선 색과 형식 지정
<TABLE bordercolor=”16진수/색이름”>~</TABLE>
<TABLE frame=”외곽선 형식”>~</TABLE>
※ 외곽선 형식
- void : 없다(기본), above : 위, below : 아래, lhs : 좌, rhs : 우, hside : 위아래, vside : 좌우, box :
상하좌우, border : 상하좌우만 보인다.
- bordercolor : 표 외곽선의 색상을 지정한다.
- frame : 표 외곽선의 형태를 지정한다. Border속성이 1이상이 되어야 한다.
Source
실행화면
<table border="8" bordercolor="#0000ff">
<tr>
--- 중략 --</tr>
</table>
<p>
<table border="6" frame="hsides">
<tr>
--- 중략 --</tr>
</table>
5) 셀 구분선의 형식 지정
<TABLE rules=”셀 구분선 형식”>~</TABLE>
※ 셀 구분선 형식
- none : 없다, rows : 가로열 경계선, cols : 세로열 경계선, group : THEAD, TBODY, TFOOT,
COLGROUP, COL의 경계선, all : 모든 경계선
45
- 표 내의 셀들 사이의 경계선을 설정한다.
Source
실행화면
<table border="6" rules="cols">
<tr>
<tH>이름</tH>
<tH>나이</tH>
<tH>성별</tH>
</tr>
--- 중략 --</table>
6) 표의 배경색과 배경 그림 지정
<TABLE bgcolor=”색”>~</TABLE>
<TR bgcolor=”색”>~</TR>
<TH bgcolor=”색”>~</TH>
<TD bgcolor=”색”>~</TD>
<TABLE background=”이미지 URL”>~</TABLE>
<TR background=”이미지 URL”>~</TR>
<TH background=”이미지 URL”>~</TH>
<TD background=”이미지 URL”>~</TD>
←
←
←
←
←
←
←
←
표 전체 배경색
가로 한 열 배경색
표 제목 셀 배경색
데이터용 셀 배경색
표 전체 이미지
가로 한 열 이미지
제목 셀 이미지
데이터용 셀 이미지
- bgcolor : 표의 배경색을 설정한다.
- background : 표의 배경이미지로 사용할 이미지 파일을 지정한다.
46
Source
실행화면
<table bgcolor="#996688" border="2>
<tr>
--- 중략 --</tr>
</table>
<p>
<table background="orangecheck.gif" border="2"
cellpadding="10">
<tr>
--- 중략 --</tr>
</table>
7) 텍스트와 표의 배열과 표와의 간격 지정
<TABLE align=”위치”>~</TABLE>
<TABLE vspace=”세로 간격” hspace=”가로 간격”>~</TABLE>
- align : 표의 위치를 설정하며, 위치는 left, right, center로 지정할 수 있다.
- vspace : 표 아래위 간격을 지정한다.
- hspace : 표 좌우 간격을 지정한다.
- vspace, hspace는 네스케이프에서만 지원되는 속성이다.
- 표를 왼쪽이나 오른쪽으로 정렬한 경우에 텍스트가 표 옆에 나타나지 않게 하려면
<br clear=”left 또는 right”>를 사용한다.
47
Source
실행화면
<table border="2" align="left" vspace="10"
hspace="30">
<tr>
--- 중략 --</tr>
</table>
<p>오른쪽 표에서 알 수 있듯이 홍길동씨는 현재 35 세의
남성입니다. 최근의 취미는 낚시라고 하며, 회사 동료들과
매주 바다를 찾는다고 합니다.
8) 셀 병합
<TH
<TH
<TD
<TD
rowspan=”세로 방향으로 합칠 셀의 개수”>~</TH>
colspan=”가로 방향으로 합칠 셀의 개수”>~</TH>
rowspan=”세로 방향으로 합칠 셀의 개수”>~</TD>
colspan=”가로 방향으로 합칠 셀의 개수”>~</TD>
- rowspan은 현재 셀에서 아래 방향으로, colspan은 현재 셀에서 오른쪽 방향으로 2개 이상의 셀을
하나의 셀로 만든다.
Source
<table border="2">
<tr><tH colspan="2">회원</tH>
<tH>지역</tH></tr>
<tr><td>홍길동</td>
<td>남자</td>
<td rowspan="3">서울</td></tr>
<tr><td>김영희</td><td>여자</td></tr>
<tr><td>박철수</td><td>남자</td></tr>
</table>
실행화면
48
9) 셀 크기 지정
<TH width=”셀 너비” height=”셀 높이”>~</TH>
<TD width=”셀 너비” height=”셀 높이”>~</TD>
- 셀의 크기를 특정한 너비오 높이로 설정할 때 사용한다.
10) 셀 안의 텍스트 위치 지정
<TR align=”가로 위치” valign=”세로 위치”>~</TR>
<TH align=”가로 위치” valign=”세로 위치”>~</TH>
<TD align=”가로 위치” valign=”세로 위치”>~</TD>
<THEAD align=”가로 위치” valign=”세로 위치”>~</THEAD>
<TBODY align=”가로 위치” valign=”세로 위치”>~</TBODY>
<TFOOT align=”가로 위치” valign=”세로 위치”>~</TFOOT>
<COL align=”가로 위치” valign=”세로 위치”>~</COL>
<COLGROUP align=”가로 위치” valign=”세로 위치”>~</COLGROUP>
- align : 셀 안에서 가로 위치를 지정한다.
- valign : 셀 안에서 세로 위치를 지정한다.
가로 위치
세로 위치
left
왼쪽 정렬(TD의 기본값)
Top
위
Right
오른쪽 정렬
Middle
가운데
Center
가운데 정렬
Bottom
아래
Justify
양끝 정렬
baseline
가로 열에서 첫 번째 행이 기준선
char
특수 문자 위치(소수점 등)
49
11) 셀 안에서 줄 바꾸기 금지
<TH nowrap>~</TH>
<TD nowrap>~</TD>
- 셀의 width속성이 지정되지 않으면 웹 브라우저의 너비에 따라 자동적으로 설정되기 때문에
텍스트가 긴 경우에 자동적으로 줄 바꾸기가 된다. 이 자동적으로 줄이 바뀌는 기능을 해제하는 것이다.
Source
실행화면
<p>일반적인 경우
<table border="2">
<tr><tH>이름</tH><tH>주소</tH></tr>
<tr><td>홍길동</td><td>서울시 강남구 대치 4동 892
포스코센타</td></tr>
</table>
<p> 줄바꾸기를 금지시킨 경우
<table border="2">
<tr><tH>이름</tH><tH>주소</tH></tr>
<tr><td nowrap>홍길동</td><td nowrap>서울시 강남구 대치
4동 892 포스코센타</td> </tr></table>
12) 가로 방향 셀 그룹화
<THEAD>~</THEAD>
<TFOOT>~</TFOOT >
<TBODY>~</TBODY >
← 표의 머리말 부분
← 표의 꼬리말 부분
← 표의 본문 부분
50
-표의 가로 방향을 머리말, 본문, 꼬리말 세 부분으로 나누어 그룹화 하는 경우에 이용한다.
- 태그 적용 범위 전체에 대한 속성이나 스타일 시트를 지정할 수 있다.
- 머리말과 꼬리말을 고정시킨 상태에서 본문 부분을 스크롤하거나, 인쇄할 때 각 페이지에 머리말과
꼬리말을 인쇄할 수 있다.
① <THEAD>
- 머리말에 해당하는 내용을 기재한다.
- 반드시 <TFOOT>앞에 사용하여야 하며 한번만 사용 가능하다.
- 종료 태그는 생략할 수 있다.
② <TFOOT>
- 꼬리말에 해당하는 내용을 기재한다.
- <TBODY>뒤에 사용하며 <TFOOT>는 한 번만 사용하여야 한다.
- 종료 태그는 생략 할 수 있다.
③ <TBODY>
- 본문에 해당하는 내용을 기재한다.
- <TFOOT>와 반드시 함께 사용하며 <TBODY>는 여러 번 사용하여도 된다.
- 종료 태그는 생략할 수 있다.
13) 세로 방향 셀 그룹화
<COLGROUP span=”세로열의 개수”>~</COLGROUP>
<COLGROUP span=”세로열의 개수” width=”셀 너비”>~</COLGROUP>
- 표의 세로 방향을 그룹화 할 경우에 사용한다.
- 여러 개의 세로 열에 대해 한꺼번에 너비와 정렬 등, 속성이나 스타일을 지정할 수 있다.
- 세로열 개수는 그룹화할 세로열의 개수로 생략하면 1이다.
- 너비는 픽셀, %, *을 사용한다.
- <COLGROUP>은 시작 태그만 사용한다.
- 표에 <CAPTION>이 있는 경우에는 바로 다음에 삽입해야 하며, <THEAD>가 있는 경우에는
그 앞에 삽입해야 한다.
51
14) 열에 대한 속성
<COL span=”세로열의 개수”>
<COL span=”세로열의 개수” width=”셀 너비”>
- 표의 세로 방향 셀을 그룹화하지 않으면서 셀 너비나 정렬 방식 등의 속성이나 스타일 시트를 한꺼번에
지정 할 수 있다.
- 시작 태그만 사용하며, 일반적으로 <COLGROUP>태그 하에서 사용한다.
- <COLGROUP>의 속성을 그대로 사용한다.
- <CAPTION>이 있는 경우에는 바로 다음에 삽입해야 하며, <THEAD>가 있는 경우에는 그 앞에
삽입해야 한다.
Source
실행화면
<table border="2">
<col width="120">
<col span="2" align="right">
<col align="center">
<tr><th>이름</th><th>나이</th><th>성별</th> </tr>
<tr><td>홍길동</td><td>35</td><td>남자</td>
</tr>
<tr><td>김영희</td><td>29</td><td>여자</td>
</tr>
</table>
52
폼 시작!!!
Chapter53
9
(1) <FORM>
- 폼은 서버와 사용자 간의 상호작용을 할 수 있는 대화형 HTML 문서를 만들 수 있다.
- 폼은 클라이언트 쪽에서 버튼, 텍스트 박스, 라디오 버튼 등의 입력 양식을 가지고 사용자의 입력을
받아 서버쪽으로 연결시키는 역할을 한다.
- 그러나 폼 자체가 서버쪽으로 데이터를 전송하는 것이 아니라 그에 알맞은 양식을 만들어 준다.
1) <FORM>
<FORM action=”URL” method=”HTTP 방법” enctype=”MIME형식” target=프레임 이름>~</FORM>
-홈페이지 내 양식 폼을 설정한다.
-<FORM>자체로는 큰 의미가 없지만 양식 관련 태그들은 모두 <FORM>태그 안에서 사용해야 한다.
① Name : 여러 개의 폼을 사용할 경우 이를 구분할 수 있는 폼의 이름이다.
② Action : 폼의 데이터가 보내어졌을 때 웹 서버상의 CGI프로그램을 지정한다. 폼에 입력된 데이터를
전달받아 웹 서버에서 준비된 동작을 하고 결과를 만들어줄 URL을 지정한다.
③ Target : 폼의 데이터가 서버에 전송되고 action에서 정의되어 있는 CGI의 결과가 다시 사용자의
클라이언트로 돌아올 때 사용될 프레임의 이름을 지정한다.
④ Method : 폼의 데이터를 전달하는 방식으로 get과 post가 있다. Get은 환경 변수의 형태로 전송하고
post는 프로그램 표준 입력 방식으로 전송한다.
⑤ Enctype : 양식을 서버에 전송할 때 사용되는 MIME(Multipurpose Internet Mail Extention)형식을
설정한다. 기본값은 ‘application/x-www-form-urlencoded’이다.
⑥ Accept : 서버에 쉼표로 구분된 다양한 MIME형식의 데이터를 올려보낼 때 서버가 올바른 동작을
할 수 있게끔 지정할 때 사용한다.
2) 한 줄로 입력할 수 있는 글상자
<INPUT type=”text” name=”이름” value=”기본문자” size=”너비” maxlength=”최대문자 수”>
- 한 줄을 입력할 수 있는 글상자를 삽입한다.
① 이름 : 입력 필드 이름
② 기본문자 : 글상자에 미리 입력되어 있는 문자
③ 너비 : 입력 필드의 너비(문자수)
④ 최대 문자 수 : 글상자에 입력할 수 있는 최대 문자 수
54
Source
실행화면
<BODY>
<form action="/cgi-bin/formmail.cgi" method="post">
<p>이름 : <input type="text" name="user_name"
size="20"></p>
</form>
</BODY>
3) 여러 줄을 입력할 수 있는 글상자
<TEXTAREA name=”이름” rows=”행 수” cols=”너비”>~</TEXTAREA>
<TEXTAREA wrap=”줄 바꾸기 방법”>~</TEXTAREA>
- 여러 줄을 입력할 수 있는 글상자를 삽입한다.
① Readonly : 읽을 수만 있고 입력하지는 못하게 설정한다.
② Rows : 텍스트 입력란의 행수를 지정한다.
③ Cols : 텍스트 입력란이 한 행 문자수를 지정한다.
④ Wrap : cols를 지정했을 때 지정한 cols의 크기를 넘어선 입력에 대해 처리하는 방식을 지정한다.
- off : 줄 바꿈 없음, soft : 줄 바꿈 나타남, hard : 줄 바꿈 송신
- soft는 화면상에서만 줄 바꿈 되고 송신되는 데이터는 줄 바꿈 되지 않지만, hard는 실제로 송신되는
데이터도 줄 바꿈이 된다.
55
.
Source
실행화면
<BODY>
<form action="/cgi-bin/formmail.cgi" method="post">
<p><font size="2">readonly가 지정되지 않은 경우</font>
<textarea name="sample" rows="3"
cols="25"></textarea></p>
<p><font size="2">readonly를 지정했을 때</font>
<textarea name="sample" rows="3" cols="25"
readonly>글 입력이 안되죠?!</textarea></p>
</form>
</BODY>
4) 암호 글 상자
<INPUT type=”password” name=”이름” value=”기본문자” size=”너비” maxlength=”최대 문자 수”>
- 암호 입력에 사용되는 한 줄 글상자를 만들 때 사용한다.
- 암호 글상자로 설정되면 입력되는 모든 문자는 ‘*’로 나타난다.
① value : 글상자에 미리 입력되어 있는 문자
② size : 입력 필드의 너비
③ maxlength : 글상자에 입력할 수 있는 최대 문자 수
56
Source
실행화면
<BODY>
<form action="/cgi-bin/formmail.cgi" method="post">
<p><font size="2">비밀번호1 : </font>
<input type="password" name="pswd1" size="10"></p>
<p><font size="2">비밀번호2 : </font>
<input type="password" name="pswd2" size="10"
value="itposco"></p>
</form>
</BODY>
5) 숨겨진 필드 작성
<INPUT type=”hidden” name=”이름” value=”송신문자”>
-화면에 나타나지 않는 필드를 만들 때 사용
- 일반적으로 사용자에게 보일 필요가 없는 특정한 CGI 프로그램으로 송신하고 싶은 경우 사용하며
value속성에서 지정한 내용이 고정값으로 송신된다.
Source
<form action="/cgi-bin/formmail.cgi" method="post">
<input type="hidden" name="recitpient" value="[email protected]">
<input type="hidden" name="subject" value="사용자등록">
<p><font size="2">비밀번호1 : </font>
<input type="password" name="pswd1" size="10"></p>
<p><font size="2">비밀번호2 : </font>
<input type="password" name="pswd2" size="10" value="itposco"></p>
</form>
※ hidden 값으로 지정한 것은 화면에 보이지 않으므로 4)암호글상자와 똑같이 화면에 출력된다.
57
6) 전송, 내용 최소 버튼
<INPUT type=”submit” name=”이름” value=”송신문자”>
<INPUT type=”reset” value=”송신문자”>
- 양식에 사용되는 단추는 일반적으로 전송 버튼과 취소 버튼을 같이 사용한다.
- submit은 양식에 입력된 내용을 송신하는 기능을 담당하며, reset은 양식 전체의 입력 필드를
초기화한다.
- value속성에서 지정한 값은 버튼의 레이블을 지정하며, 레이블을 지정하지 않을 경우 웹 브라우저의
기본 레이블로 나타난다.
- name속성에서 지정한 이름은 각각 다른 기능을 하는 여러 개의 송신 버튼을 배치할 경우, 수신자
측에서 어떤 송신 버튼이 눌러졌는지를 가려낼 때 사용된다.
Source
실행화면
<BODY>
<form action="/cgi-bin/formmail.cgi" method="post">
<p><font size="2">기본적인 버튼<br>
<input type="submit">
<input type="reset">
<p><font size="2">레이블 지정한 버튼</font><br>
<input type="submit" value="전송">
<input type="reset" value="취소">
</p></form>
</BODY>
58
7) 이미지로 된 전송 버튼과 스크립트에서 사용하는 버튼
<INPUT type=”image” src=”URL” name=”이름” alt=”대체용 설명” align=”정렬방법”>
<INPUT type=”button” name=”이름” value=”레이블”>
- image : 이미지를 이용하여 버튼을 만드는 것이며, 정렬 방법은 ‘top, middle, bottom, left, right’등이
있다.
- button : 양식에 사용되지 앟는 일반 단추를 만들 때 사용하며, 일반적으로 자바 스크립트와 같은
이벤트 핸들러와 연결시킨다.
Source
실행화면
<form action="/cgi-bin/formmail.cgi"
method="post"><input type="image" src="button1.jpg"
name="submit" alt="전송">
<input type="button" name="prev" value="돌아가기"
onClick="javascript:history.back();">
</form>
8) <BUTTON>
<BUTTON type=”버튼 형식” name=”이름” value=”레이블”>~</BUTTON>
- 단추만을 전문적으로 만들기 위한 태그로 버튼 형식은 submit, reset, button으로 구분된다.
- <BUTTON>~</BUTTON>사이의 내용을 버튼 레이블로 나타낼 수 있다.
59
Source
실행화면
<form action="/cgi-bin/formmail.cgi"
method="post"><p>
<button type="submit"><font
size="3"><b>전송</b></font></button>&nbsp;
<button type="reset"><font
size="3"><b>취소</b></font></button>&nbsp;
<button type="button"><font
size="3"><b>일반단추</b></font></button><p>
<button type="submit"><img
src="button1.jpg"><p>전송</button>
</form>
9) 라디오버튼과 체크박스
<INPUT type=”radio” name=”이름” value=”전송문자” checked>
<INPUT type=”checkbox” name=”이름” value=”전송문자” checked>
- radio : 라디오 버튼은 여러 개의 선택 항목 중에서 단일 항목만 선택할 수 있는 형식
- checkbox : 여러 개의 선택 항목에서 하나 이상의 항목을 선택할 수 있는 형식
- 한 항목에 포함된 라디오 버튼은 모두 같은 이름을 가지고 있어야 하며, 어떤 항목이 선택되었는지
구별하기 위해 value속성을 반드시 지정해야 한다.
- 미리 선택된 상태로 지정할 경우 사용되며, checked가 되면 값이 ‘true’로 설정된다.
60
Source
실행화면
<form action="/cgi-bin/formmail.cgi" method="post">
<p>당신이 좋아하는 과일은 무엇입니까?</p>
<input type="radio" name="fruit"
value="사과">사과&nbsp;
<input type="radio" name="fruit"
value="포도">포도&nbsp;
<input type="radio" name="fruit"
value="바나나">바나나&nbsp;
<input type="radio" name="fruit"
value="오렌지">오렌지&nbsp;
<p>당신이 좋아하는 색상은 무엇입니까?</p>
<input type="checkbox" name="color" value="노랑"
checked>노랑&nbsp;
<input type="checkbox" name="color"
value="파랑">파랑&nbsp;
<input type="checkbox" name="color"
value="빨강">빨강&nbsp;
<input type="checkbox" name="color"
value="녹색">녹색&nbsp;
10) 펼침 메뉴 및 펼침 메뉴 항목 그룹 지정
<SELECT size=”항목 수” name=”이름”>~</SELECT>
<OPTION value=”송신문자”>~</OPTION>
<OPTION selected>~</OPTION>
- 드롭다운 형태의 선택형 메뉴를 만든다.
- 메뉴 전체를 <SELECT>~</SELECT>로 둘러싸고, 선택항목은 <OPTION>~</OPTON>태그로
지정한다.
61
<OPTGROUP label=”그룹 이름”>~</OPTGROUP>
<OPTION label=”생략된 이름”>~</OPTION>
- <SELECT>로 설정한 펼침 메뉴의 선택 항목을 그룹으로 만든다.
Source
<form action="/cgi-bin/formmail.cgi"
method="post">
<p>당신의 이상형은?</p>
<SELECT name="type">
<option> 김희선 </option>
<option> 이영애 </option>
<option> 한채영 </option>
</SELECT>
<p>가장 많이 이용하는 브라우저는?</p>
<SELECT name="browser">
<optgroup label="인터넷 익스플로러">
<option label="6.x">인터넷 익스플로러 6.x</option>
<option label="5.x">인터넷 익스플로러 5.x</option>
</optgroup>
<optgroup label="넷스케이프 네비케이터">
<option label="6.x">넷스케이프 네비케이터
6.x</option>
<option label="5.x">넷스케이프 네비케이터
5.x</option>
</optgroup>
</SELECT>
</form>
실행화면
62
11) 목록 상자
<SELECT size=”항목 수” name=”이름” multiple>
<OPTION value=”송신문자”>~</OPTION>
<OPTION selected>~>/OPTION>
- 펼침 메뉴 작성법과 유사하며 드롭다운 형태가 아닌 목록 상자 형태로 작성된다.
- 항목 수는 목록 상자에 선택 항목을 나타낼 행수이며, multiple은 ctrl, shift키를 이용하여
여러 개의 항목을 선택할 수 있도록 지정한다.
- <option>에서 지정한 항목 수가 size속성에서 지정한 항목 수보다 많으면 목록 상자에 자동으로
스크롤 바가 생성된다.
Source
실행화면
<form action="/cgi-bin/formmail.cgi" method="post">
<p>당신의 이상형은?</p>
<SELECT size="3" name="type" multiple>
<option> 김희선 </option>
<option> 이영애 </option>
<option> 한채영 </option>
<option> 이미연 </option>
</SELECT>
</form>
12) 파일 선택 상자
<INPUT type=”file” name=”이름” value=”파일 이름” accept=”MIME형식”>
- 파일을 선택할 수 있는 상자를 만들 때 사용한다.
- accept 속성에서 수신 프로그램이 받아 들일 수 있는 파일의 종류를 MIME형식으로 지정하며, 여러
종류를 수신 할 수 있는 경우는 [,]로 구분하여 지정할 수 있다.
- 이 기능을 이용할 경우 <FORM>의 enctype속성에는 [multipart/form-data]를 사용하고 method
63
속성에는 ‘post’를 지정해야 한다
Source
실행화면
<form action="/cgi-bin/formmail.cgi"
enctype="multipart/form-data" method="post">
<p>파일을 선택하세요!</p>
<input type="file" name="imagefile"
accept="image/jpeg,image/gif">
<p><input type="submit" value="전송"></p>
</SELECT>
</form>
13) 양식 필드의 레이블 및 그룹화
<LABEL for=”참조ID”>~</LABEL>
- 양식 중 value 속성에 의해 레이블을 붙일 수 없는 경우에 사용한다.
- <LABEL>사이에 레이블이 될 텍스트만 배치하고 입력 및 선택 항목으로 지정한 ID와 똑같이
for속성에서 지정한다. 이때 레이블과 입력 및 선택 항목이 반드시 1:1이 되어야 한다.
<FIELDSET>~</FIELDSET>
<LEGEND align=”정렬 방법”>~</LEGEND>
- 양식의 일부분을 그룹으로 지정한다.
- <LEGEND>는 그룹의 제목을 지정한다.
- 정렬방법은 top, bottom, left, right로 제목의 위치를 지정한다.
64
Source
실행화면
<form action="/cgi-bin/formmail.cgi"
method="post">
<label for="nm">이름 : </label>
<input type="text" name="name"
id="nm"><br>
<label for="em">메일 : </label>
<input type="text" name="email" id="em">
<fieldset>
<legend>개인정보</legend>
이름 : <input type="text" name="uname">
주소 : <input type="text" name="uaddrs"
size="20"><br>
전화 : <input type="text" name="uphone">
</form>
65
프레임 시작!!!
66
Chapter 11
(1) 프레임
- 하나의 창을 가로, 세로로 구분해서 그 안에 각각 다른 HTML문서를 나타낼 수 있다.
- 프레임을 지정한 틀은 고정되고 각 프레임에 각기 다른 HTML문서를 불러들일 수 있으므로 특정
부분에 반복적으로 새로운 내용의 페이지가 필요할 때 유용하다.
1) 프레임 전체 구성
<FRAMESET rows=”분할 높이”>~</FRAMESET>
<FRAMESET cols=”분할 너비”>~</FRAMESET>
<FRAME src=”URL” name=”프레임 이름”>
- 분할 높이(너비) : 가로(세로) 분할했을 때의 각 높이를 ,(쉼표)로 구분해서 지정(픽셀,%.*)
- FRAMESET : 창을 어떻게 구분할지 지정하는 태그이며 이 태그안에는 BODY태그를 사용할 수 없다.
- FRAME : 분할된 각 프레임에 나타낼 내용을 지정하는 태그이다.
67
※ 프레임 구성에 따른 프레임 셋 소스 예제
68
Source
실행화면
<frameset rows="70, *">
<frame src="title.htm" name="title">
<frameset cols="150, *">
<frame src="menu.htm" name="menu">
<frame src="content.htm" name="contents">
</frameset>
<noframes>
<body>
<p>이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가
필요합니다.</p>
</body>
</noframes>
</frameset>
2) 프레임 세부 항목 지정
<FRAME scrolling=”auto, yes, no” noresize>
<FRAME marginwidth=”픽셀” marginheight=” 픽셀”>
<FRAME frameborder=”0,1” border=”픽셀” bordercolor=”#color” >
- scrolling : 스크롤 생성을 제어하는 것으로 auto, yes, no가 있다. auto는 필요에 따라 스크롤이
자동으로 생성되는 것이며, yes는 항상 스크롤이 나타나며, no는 항상 스크롤 바가 나타나지 않는 것이다.
- marginwidth[marginheight] : 프레임 안의 좌우[상하] 여백을 지정하는 것이다.
- noresize : 프레임 구분선을 고정하여 프레임의 크기를 변경할 수 없도록 하는 것이다. 일반적으로
프레임 구분선은 마우스로 드랙하면 움직이게 되어 프레임의 크기를 변경시킬 수 있다.
- frameborder : 프레임 구분선의 표시를 지정하는 것으로 1은 표시, 0은 구분선이 나타나지 않는다.
- border : 프레임의 구분선의 두께를 설정한다. 0으로 지정하면 프레임의 구분선이 나타나지 않는다.
- bordercolor : 프레임의 구분선의 색상을 지정한다.
- frameborder, border, bodercolor속성은 <FRAMESET>태그 속성에도 적용되어 프레임 셋 내의 모든
프레임을 제어한다. 또한 프레임 셋에서는 framespacing 속성으로 프레임들 간의 간격을 설정한다. 69
Source
실행화면
<frameset rows="70,*" frameborder="0" framespacing="0">
<frame src="title.htm" scrolling="no" norsize>
<frameset cols="150,*">
<frame src="menu.htm" scrolling="yes">
<frame src="content.htm" marginwidth="20"
marginheight="60">
</frameset>
<noframes>
<body>
<p>이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가
필요합니다.</p>
</body>
</noframes>
</frameset>
3) <NOFRAMES>
- 프레임을 지원하지 않는 브라우저가 있을 시 프레임대신 대체되는 내용을 지정한다.
- <NOFRAMES>~</NOFRAMES>형태로 정의되며, 이 태그안에 <body>를 삽입하여 내용을 입력한다.
프레임이 지원되는 브라우저에서는 <body>의 내용이 보이지 않지만 프레임을 지원하지 않는
브라우저에서는 프레임대신 <body>의 내용이 나타난다.
4) 하이퍼링크의 대상 프레임 지정하기
<A href=”URL” target=”프레임 명”>~</A>
- 프레임에서 하이퍼링크는 링크된 문서가 나타날 프레임을 지정해 주어야 한다.
미지정시 하이퍼링크된 프레임에 나타나게 된다.
- <FRAME name=”프레임명”>에서 지정한 프레임명은 하이퍼링크할 때 target의 속성이 되어 해당
프레임에 하이퍼링크된 문서가 나타나게 된다.
70
- 시스템에서 사용하는 4가지 예약어
_top
프레임을 해제하고 링크될 문서를 창 전체로 불러온다.
_parent
링크될 문서를 링크 전 원래의 프레임인 부모 프레임에 나타낸다. 부모 프레임이
없는 경우는 [_self]와 같다.
_self
링크될 문서를 원래 위치와 같은 프레임으로 불러온다.
_blank
이름이 없는 새로운 창을 열고 링크될 문서를 그 창으로 불러온다.
Source
실행화면
※ menu 소스
<body bgcolor="#FAFFF8"
text="black" link="blue" vlink="purple"
alink="red">
<a href="document.htm"
target="contents">문서 1</A>
</body>
※ 프레임셋 소스
<frame src="title.htm" name="title">
<frameset cols="150,*">
<frame src="menu1.htm"
name="menu">
<frame src="content.htm"
name="contents">
</frameset>
71
5) <IFRAME>
<IFRAME src=”URL” name=”프레임 이름”>~<IFRAME>
- HTML 문서 안에 다른 HTML문서를 창 형식으로 삽입한다.
- 익스플로러에서만 지원되는 기능이다.
- src, name외에 다음과 같은 속성을 지정 할 수 있다.
① Width : 프레임 너비(픽셀 또는 %)를 지정
② Height : 프레임 높이(픽셀 또는 %)를 지정
③ Marginwidth : 프레임 안의 좌우 여백(픽셀)을 지정
④ Marginheight : 프레임 안의 상하 여백(픽셀)을 지정
⑤ Scrolling : 스크롤(auto : 자동, yes : 있음, no : 없음) 설정
⑥ Frameborder : 프레임 구분선을 표시하거나 숨김(1 : 표시, 0 : 숨김)
⑦ Align : 프레임의 정렬 상태(left, right, center)를 지정
Source
실행화면
<P>iframe창을 만들자
<iframe src="iframe.htm" name="win" widht="100"
height="80" align="right">
</iframe>
72