7 장 HTML 의 구조와 사용
2
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
7.1 HTML 이란 ? HyperText Markup Language 의 약자 월드 와이드 웹 (World Wide Web) 을 위한 하이퍼텍스트 (Hyper
text) 문서를 작성하는 언어 . 즉 브라우저를 통하여 사용자에게 보여지는 문서의 내부형식을 규정하는 언어 .
일반 텍스트 문서와 마찬가지로 아스키 (ASCII) 파일이며 확장자는 htm 또는 html
HTML 은 SGML 표준에 따라 구현한 문서 형식 문서의 내용과 이를 둘러싼 태그로 그 형식을 정한다 .
3
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
태그의 형식 • 시작 태그 : < 태그 이름 > • 끝 태그 : </ 태그 이름 > • 시작 태그와 끝 태그 사이에 문서 내용이 오며 , 다른 태그들도
포함 가능 . • 시작 태그안에 ' 속성 이름 =" 속성값 " ' 의 쌍들로 속성을
지정 . HTML 기본 태그
• <HTML>: HTML 문서임을 명시 • <TITLE>: 브라우저의 바에 나타나는 문서의 제목을 명시 • <HEAD>: 문서에 관해 브라우저에 알릴 정보 • <BODY>: 문서의 실제 내용부분을 기술
4
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
HTML 문서의 기본 구성
<HTML>
<HEAD>
<TITLE> 문서의 제목을 쓰세요 </TITLE>
</HEAD>
<BODY>
HTML 문서의 내용을 넣으세요 . 이 장에서는 텍스트는 물론 이미지를 활용하여 나만의 웹 문서 작성 방법을 배울 수 있습니다 .
</BODY>
</HTML>
5
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
7.2 HTML 의 기초7.2.1 텍스트의 작성(1) 줄 바꾸기와 문단 나누기 <BR> : 줄 바꾸기 <P>...</P> : 문단 나누기
• HTML 에서는 엔터 (Enter) 와 탭 (Tab) 을 무시하고 하나의 공백 (space) 로 처리하며 , 연속된 공백을 하나의 공백으로 처리하므로 줄을 바꾸기 위해서 별도의 태그를 사용해야 함
• <BR> 태그는 줄만 바꿔주는 역할 • <P> 태그는 줄을 바꿔줄 뿐 아니라 다음에 한줄을 공백으로
만듬
6
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
(2) 문서의 헤더 <Hn>...</Hn>
• 문서에서 제목에 해당하는 문자열을 표시 • <H1> ~ <H6> 의 Heading tag 가 있으며 숫자가 작을 수록
글씨 크기가 커지며 , 한 줄을 차지 (3) 문자의 크기 결정 <FONT SIZE="n">...</FONT>
• 본문의 글자 크기를 조절하는데 사용 • n 은 1~7 까지이고 1 일때 크기가 가장 작음
7
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
(4) 문자 색깔의 결정 <FONT COLOR="#16 진수
색 코드 ">...</FONT>
• RGB 의 방식으로 표현 • R, G, B 모두 0~255
까지의 단계가 가능하며 두자리의 16 진수로 표현
8
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
(5) 문자 모양의 결정 <EM> ... </EM>, <I> ... </I> : 이탤릭 문자체로 보여줌 <STRONG> ... </STRONG>, <B> ... </B> : 굵은 문자체로
보여줌 <CITE> ... </CITE> : 자료를 인용할 때 쓰이며 이탤릭
문자체로 보여줌 <U> ... </U> : 밑줄을 그어줌 <TT> ... </TT> : 타자체로 보여줌 <CODE> ... </CODE> : 프로그램 코드를 보여줄 때 쓰이며
타자체로 보여줌 <SUP> ... </SUP> : 위 첨자 <SUB> ... </SUB> : 아래 첨자
9
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
(6) <PRE> 태그 <PRE>...</PRE>
• 태그 안의 문장에서 여백이나 줄 바꿈 등이 그대로 브라우저에 출력
(7) 가로선 긋기 <HR WIDTH=" " SIZE=" " ALIGN=" ">...</HR>
• 문서의 중간에 입체감 있는 수평선을 그어 문단을 구분한다 .
• 속성• WIDTH = " 백분율 또는 픽셀의 수 " : 선의 길이 • SIZE = "n" : 선의 굵기 • ALIGN = "CENTER 또는 LEFT 또는 RIGHT" :
선의 위치 정렬
10
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
(8) 주석문 달기 <!- 여기에 담긴 주석은 웹 브라우저에서는 볼 수 없음 ->
• <! 와 > 사이에 주석문 입력 . 이 내용은 브라우저에 출력되지 않음
(9) 특수 문자의 출력 • & , < . > , " 등의 기호는 HTML 태그에서 직접 사용되기
때문에 특수문자 코드로 처리 • 자판에 없는 문자들도 특수문자 코드로 처리
11
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
7.2.2 링크 만들기(1) 문서간의 연결 <A HREF=" 연결하고자 하는 곳의 URL">...</A>
• Anchor 의 약자로 다른 문서나 다른 컴퓨터에 연결 • HREF 속성에 연결하고자 하는 URL 이나 File 이름등을
지정 • 링크가 있는 곳에는 밑줄이 생기며 , 이곳을 클릭하면
연결된 문서가 열림
12
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
(2) 문서내의 연결 <A HREF="# 문서 내에서 찾아가야 할 단어 ">...</A> <A NAME=" 단어 ">...</A>
• 한 문서에 많은 양의 정보를 나타내고자 할 때 문서 내의 인덱스를 만드는 데 사용
• NAME 속성으로 찾아 가야 할 단어를 정해 놓고 , HREF 속성에 연결하고자 하는 단어를 지정함
• 링크된 단어를 클릭하면 NAME 속성 에서 지정된 부분으로 이동
• 문서 내 목차나 사전식 분류에 사용
13
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
7.2.3 이미지의 삽입• <IMG SRC=" 이미지의 URL" WIDTH="n" HEIGHT="n"
BORDER="n" VSPACE="n" HSPACE="n" ALIGN="n" ALT="n">
• SRC 는 반드시 지정해야 함 .
(1) 이미지의 크기 조절 WIDTH 와 HEIGHT 값을 픽셀 수나 창에 대한 백분율로 지정 .
(2) 이미지와 텍스트의 정렬 이미지와 텍스트의 정렬
• ALIGN = TOP, MIDDLE, BOTTOM 문서 내의 이미지의 위치
• ALIGN = LEFT, RIGHT
14
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
(3) 이미지의 여백과 테두리 이미지의 테두리 : BORDER = 픽셀의 수 이미지의 여백
• 좌우 여백 : HSPACE = 픽셀의 수 • 상하 여백 : VSPACE = 픽셀의 수
(4) 이미지에 링크 연결하기 텍스트에서와 마찬가지로 이미지 태그 바깥쪽에 앵커 (Anchor)
태그를 씌운다 . <A HREF="URL"><IMG SRC=" 이미지 파일 " ...></a>
15
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
(5) 이미지를 배경으로 사용하기 <BODY BACKGROUND=" 이미지 파일 이름 " BGCOLOR
=" 색번호 " TEXT=" 색번호 ">
• 이미지를 배경에 사용하려면 <BODY> 태그에서 지정해야 한다 .
• BGCOLOR 는 배경색을 , TEXT 는 글자 색을 결정한다 .
• 색번호는 위에서 언급한 것과 마찬가지로 16 진수로 표현된다 .
16
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
7.3 구조적 문서의 작성7.3.1 목록 만들기(1) 순서 없는 목록 (Unordered List) 형식 : <UL>...</UL>
• 각 항목 앞에 불릿 (bullet) 이 붙는 목록 • <UL> 과 </UL> 태그 안의 <LH> 와 </LH> 사이에 목록의
제목을 , <LI> 다음에 각 항목의 내용을 기입• <LI> 태그의 하위에 <UL> 태그를 넣어 계층적 정보를
표현• 불릿의 모양은 TYPE 속성에 다음 값을 주어 지정
• DISC( 검은 원 ), CIRCLE( 하얀 원 ), SQUARE( 검은 사각형 )
17
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
(2) 순서 있는 목록 (Ordered List) 형식 : <OL>...</OL>
• 각 항목 앞에 번호가 붙는 목록 • <OL> 과 </OL> 태그 안의 <LH> 와 </LH> 사이에
목록의 제목을 , <LI> 다음에 각 항목의 내용을 기입• <LI> 태그의 하위에 <OL> 태그를 넣어 계층적 정보를
표현 • 초기치로 지정된 번호는 아라비아 숫자 (1,2,3,...)
• 번호 형식은 TYPE 속성에 다음 값을 주어 지정 • I : 로마자 (I, II, III,...)
• A : 알파벳 (A,B,C...)
18
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
(3) 정의 목록 (Definition List) 형식 : <DL>...</DL>
• 어떤 항목에 대한 정의나 설명을 써줄 때 사용 • <DL> 과 </DL> 태그 안의 <LH> 와 </LH> 사이에
목록의 제목을 , <DT> 뒤에 항목을 , <DD> 뒤에 그 항목에 대한 정의나 설명을 기입
• 중첩 사용이 가능하며 , 하위 항목으로 들어감에 따라 문단이 조금씩 안쪽으로 들어감
(4) 목록 겹쳐 쓰기 서로 다른 형식의 목록을 중첩해 사용할 수 있다 . 문서가 계층적인 구조를 갖게 되어 더욱 효율적으로 정보를
전달하는 페이지를 만들 수 있다 .
19
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
7.3.2 테이블 만들기(1) 테이블의 장점 단순한 도표뿐만 아니라 복잡한 문단을 정렬할 수 있고 , 표제
지정도 가능 . 문서를 일목요연하게 정리할 수 있음(2) 테이블의 삽입 형식 : <TABLE BORDER=" " WIDTH=" " HEIGHT=" "
CELLPADDING=" " CELLSPACING=" ">...</TABLE>
• <Table> 과 </Table> 태그 사이에 줄 (row) 에 해당하는 <TR>... </TR> 태그를 넣고 그 사이에 각 칸에 들어갈 표의 내용을 나타내는 <TD>...</TD> 태그가 들어간다 .
• <TD> 는 항상 <TR> 에 의해 둘러싸여야 한다 .
20
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
(3) 테이블의 속성 테이블 크기 : WIDTH = 픽셀의 수 또는 백분율 , HEIGHT =
픽셀의 수 또는 백분율 테두리 : BORDER = 픽셀의 수 테이블 내부의 선 굵기 : CELLSPACING = 픽셀의 수 테이블 내용과 선 간의 여백 : CELLPADDING = 픽셀의 수 셀 내부 텍스트의 좌우 정렬 : ALIGN="align"
• <TD ALIGN="LEFT / CENTER / RIGHT"> 셀 내부 텍스트의 상하 정렬 : VALIGN="align"
• <TD VALIGN="TOP / MIDDLE / BOTTOM">
21
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
테이블에서 <TD> 대신 <TH> 태그를 쓰면 수평 , 수직 정렬이 자동으로 가운데가 되며 , 볼드 (bold) 체로 표시되는 제목 셀이 된다 .
(4) 셀 합치기 여러 행에 걸치는 셀 : ROWSPAN = 행의 수 여러 열에 걸치는 셀 : COLSPAN = 열의 수
22
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
7.4 프레임을 이용한 화면 분할
프레임이란 ?
• 프레임은 하나의 웹 브라우저 화면을 여러개의 창으로 나누어 주는 역활을 한다 .
• HTML 문서를 몇 개의 파일로 나누어 작성한 후 , 이 파일을 프레임으로 구분된 각 창에서 보여줄 수 있다
23
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
7.4.1 화면 나누기
가로로 나누기• <FRAMESET ROWS=" 나누는 개수만큼의 각 프레임의 세로 길이들 ">
세로로 나누기• <FRAMESET COLS=" 나누는 개수만큼의 각 프레임의 세로 길이들 ">
만들고 싶은 프레임의 개수 만큼 길이를 입력하고 , 각각 쉼표로 구분
24
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
프레임의 길이• 픽셀의 수 : 예 ) 두개로 나눌때 "140, *"
• 백분율 : 예 ) 세개로 나눌때 "20%, 30%, 50%
• 비율 : 예 ) 두개를 3:1 로 나눌때 "3*, *"
• * : 나머지 부분을 대신해서 사용할 수 있음 프레임에 보여질 문서
• <FRAME SRC=" 문서 이름 ">
25
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
7.4.2 프레임의 속성 스크롤바 표시 속성 : SCROLLING
• YES : 항상 표시됨 • AUTO : 문서의 길이가 길어지면 표시됨 • NO : 표시하지 않음
NAME 속성• 프레임의 이름을 지정할 수 있다 .
• 앵커 (<A>) 태그에서 TARGET 속성으로 프레임의 이름을 지정하면 지정된 프레임에서 문서를 보여준다 .
프레임 크기 고정• NORESIZE 로 set 된 프레임은 브라우저가 resize 할 수
없음
26
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
7.5 CGI 의 활용 Common Gateway Interface 의 약자 브라우저와 웹 서버 , 응용프로그램간의 인터페이스 . CGI 의 동작과정
27
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
CGI 를 이용하면 사용자의 요구에 따라 필요한 정보만을 전달할 수 있음
대표적인 예 • 사용자가 원하는 페이지만을 보여주는 웹 문서 • 보안이 필요한 페이지의 경우 사용자로부터 등록 정보를
입력받아 확인 • 사용자가 입력한 문서를 페이지에 연동시켜서 만든
방명록 혹은 게시판 • 사용자가 몇 번째 방문자인지 보여주는 카운터 등
28
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
7.5.1 CGI 와 FORM 태그(1) FORM 의 개요 형식 : <FORM ACTION=“ “ METHOD=“ “>...</FORM>
• 사용자의 입력을 받음 • ACTION : 데이터가 전달될 URL 을 지정하는 것으로
대부분의 경우 클라이언트의 요구를 처리할 CGI프로그램에 대한 URL 이 지정된다 .
• METHOD : 데이터가 지정된 위치로 어떤 방법으로 전달될 것인가를 명시한다 . 가능한 값으로는 GET 과 POST 가 있다 .
29
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
<INPUT TYPE=“ “ NAME=“ “ VALUE=“ “>...</INPUT>
• 입력 양식을 결정 • TYPE : 입력 필드의 형식을 결정하는 것으로 TEXT, PAS
SWORD, SUBMIT, RESET, CHECKBOX, RADIO 등이 있다 .
• NAME : 입력 필드의 데이터가 CGI 프로그램으로 넘어갈 때 입력필드의 이름를 지칭한다 .
• VALUE : 해당 입력필드에 나타나는 기본값 , SUBMIT이나 RESET 의 경우 이값이 버튼에 나타난다 .
30
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
(2) 입력 필드의 형식
<INPUT TYPE="TEXT" MAXLENGTH="n" SIZE="n"> : 텍스트 입력 양식
<INPUT TYPE="PASSORD" MAXLENGTH="n" SIZE="n"> : 암호 입력 양식 • 이름이나 ID 를 입력받을 때나 암호를 입력 받을 때 사용 • 암호 입력 양식은 입력된 내용을 '*' 로 표시한다 .
• MAXLENGTH : 입력 받을 수 있는 최대 길이의 문자수
31
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
<INPUT TYPE="SUBMIT" VALUE="버튼 이름 "> <INPUT TYPE="RESET" VALUE="버튼 이름 ">
• SUBMIT 버튼은 양식안에 입력된 내용을 <FORM> 태그 안에서 지정된 곳으로 보냄
• RESET 버튼은 양식안에 입력된 내용을 모두 지움 • VALUE 는 버튼위에 보여지는 이름을 지정
<INPUT TYPE="RADIO" NAME="..." VALUE="...">
• 여러 항목들 중에서 하나만 선택 가능한 버튼 • 같은 선택군의 같은 NAME 값을 갖고 각각의 항목은 고유의
VALUE 값을 갖는다 .
32
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
<INPUT TYPE="CHECKBOX" NAME="..." VALUE="...">
• 라디오 버튼은 선택군에서 하나만 선택가능하지만 체크박스는 여러개 선택 가능
• 같은 선택군의 같은 NAME 값을 갖고 각각의 항목은 고유의 VALUE 값을 갖는다 .
33
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
(3) 기타 입력 태그
<TEXTAREA NAME="..." ROWS="n” COLS="n">… </TEXTAREA>
• <INPUT TYPE="TEXT"> 를 이용한 텍스트 입력 받기 보다 긴 텍스트를 입력 받을 때 사용
• NAME 은 지정된 곳 ( 보통 CGI 프로그램 ) 으로 넘어갈 때 필드의 이름
• ROWS : 입력 영역 행의 글자수 • COLS : 입력 영역 열의 글자수
34
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
<SELECT NAME="...">...</SELECT>
• 선택 목록은 풀 다운 메뉴 (Full Down Menu) 를 말함 • <SELECT> 와 </SELECT> 사이에 <OPTION> 태그로
항목을 만든다 .
• <SELECT> 태그의 속성• NAME : 지정된 곳 ( 보통 CGI 프로그램 ) 으로 넘어갈 때 필드의 이름
• MULTIPLE : 한개이상의 선택이 가능 • SIZE : 드롭다운 항목에 표시되는 옵션의 수
• <OPTION> 태그의 속성• SELECTED : 그 항목이 초기 선택 값으로 결정
35
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
HTML 문서에 <FORM> 태그로 입력 서식을 작성하고 서버쪽에는 CGI 응용프로그램을 작성해 저장한 후 이들을 연동시키는 것은 쉬운 일이 아님 .
근래에는 무료로 카운터나 방명록 등을 제공해 주는 서버가 많이 있어서 , CGI 프로그래밍을 전혀 알지 못하더라도 쉽게 이들을 이용할 수 있음 .
카운터의 경우는 아무런 제약이 없이 사용할 수 있고 , 방명록이나 게시판은 배너 광고를 함께 보아야 하는 게 보통임 .
36
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
유명한 서버 사이트들• Korea Famous CGI Server : http://www.cgiserver.net
• 링코 : http://www.linko.com
• 넷토픽 : http://anu.andong.ac.kr/~kaen/bbs
• 프리보드 : http://www.bbs4u.com
37
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
7.5.2 카운터 달기
카운터 : 현재까지 홈페이지를 방문한 사용자의 수를 카운트하여 표시
사용자로부터 직접 입력을 받는 것은 아니지만 , CGI 로 동작하는 프로그램
38
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
무료 CGI 서버 페이지를 방문
39
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
'카운터 ' 의 ' 사용법 ' 을 클릭하면 카운터를 삽입하는 방법이 자세하게 설명된 페이지를 보여줌
40
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
자신의 카운터를 관리할 DataBase 의 이름을 결정하여 등록
41
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
다음과 같은 라인을 HTML 문서에 삽입하면 등록한 카운터가 홈페이지에 삽입된다 .
<img SRC="http:// count.free.cgiserver.net/CrazyCounter.cgi?display=counter|ft=3|md=6|dd=b|df= 등록한 DB이름 ">
42
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
7.5.3 방명록 삽입하기
방명록 : 홈페이지를 방문한 사람이 남기고 싶은 말을 적을 수 있는 일종의 게시판
글을 남기면 과거 글들과 함께 저장이 되고 , 언제라도 열람 가능
43
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
등록까지의 과정은 카운터와 동일 , 다음과 같은 라인을 HTML 문서에 삽입하면 등록한 방명록이 홈페이지에 삽입된다 .
<img SRC="http://count.free.cgiserver.net/CrazyGuestbook.cgi?db= 등록한 DB 이름 ">
44
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
방명록을 처음 방문하면 초기설정이 없다는 경고가 발생
45
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
"ADMIN" 을 클릭하여 환경설정 페이지로 이동한 후 , 자신의 환경에 맞게 설정
46
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
환경설정이 끝나면 방명록을 사용할 수 있고 , "Write" 를 클릭하면 글을 남길 수 있음
47
77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용
등록된 글은 테이블 형태로 열람할 수 있음