7 장 HTML 의 구조와 사용

7 장 HTML 의 구조와 사용

2

77 장 장 HTMLHTML 의 구조와 사용의 구조와 사용

7.1 HTML 이란 ? HyperText Markup Language 의 약자 월드 와이드 웹 (World Wide Web) 을 위한 하이퍼텍스트 (Hyper

text) 문서를 작성하는 언어 . 즉 브라우저를 통하여 사용자에게 보여지는 문서의 내부형식을 규정하는 언어 .

일반 텍스트 문서와 마찬가지로 아스키 (ASCII) 파일이며 확장자는 htm 또는 html

HTML 은 SGML 표준에 따라 구현한 문서 형식 문서의 내용과 이를 둘러싼 태그로 그 형식을 정한다 .

3


태그의 형식 • 시작 태그 : < 태그 이름 > • 끝 태그 : </ 태그 이름 > • 시작 태그와 끝 태그 사이에 문서 내용이 오며 , 다른 태그들도

포함 가능 . • 시작 태그안에 ' 속성 이름 =" 속성값 " ' 의 쌍들로 속성을

지정 . HTML 기본 태그

• <HTML>: HTML 문서임을 명시 • <TITLE>: 브라우저의 바에 나타나는 문서의 제목을 명시 • <HEAD>: 문서에 관해 브라우저에 알릴 정보 • <BODY>: 문서의 실제 내용부분을 기술

4


HTML 문서의 기본 구성

<HTML>

<HEAD>

<TITLE> 문서의 제목을 쓰세요 </TITLE>

</HEAD>

<BODY>

HTML 문서의 내용을 넣으세요 . 이 장에서는 텍스트는 물론 이미지를 활용하여 나만의 웹 문서 작성 방법을 배울 수 있습니다 .

</BODY>

</HTML>

5


7.2 HTML 의 기초7.2.1 텍스트의 작성(1) 줄 바꾸기와 문단 나누기 <BR> : 줄 바꾸기 <P>...</P> : 문단 나누기

• HTML 에서는 엔터 (Enter) 와 탭 (Tab) 을 무시하고 하나의 공백 (space) 로 처리하며 , 연속된 공백을 하나의 공백으로 처리하므로 줄을 바꾸기 위해서 별도의 태그를 사용해야 함

• <BR> 태그는 줄만 바꿔주는 역할 • <P> 태그는 줄을 바꿔줄 뿐 아니라 다음에 한줄을 공백으로

만듬

6


(2) 문서의 헤더 <Hn>...</Hn>

• 문서에서 제목에 해당하는 문자열을 표시 • <H1> ~ <H6> 의 Heading tag 가 있으며 숫자가 작을 수록

글씨 크기가 커지며 , 한 줄을 차지 (3) 문자의 크기 결정 <FONT SIZE="n">...</FONT>

• 본문의 글자 크기를 조절하는데 사용 • n 은 1~7 까지이고 1 일때 크기가 가장 작음

7


(4) 문자 색깔의 결정 <FONT COLOR="#16 진수

색 코드 ">...</FONT>

• RGB 의 방식으로 표현 • R, G, B 모두 0~255

까지의 단계가 가능하며 두자리의 16 진수로 표현

8


(5) 문자 모양의 결정 <EM> ... </EM>, <I> ... </I> : 이탤릭 문자체로 보여줌 <STRONG> ... </STRONG>, <B> ... </B> : 굵은 문자체로

보여줌 <CITE> ... </CITE> : 자료를 인용할 때 쓰이며 이탤릭

문자체로 보여줌 <U> ... </U> : 밑줄을 그어줌 <TT> ... </TT> : 타자체로 보여줌 <CODE> ... </CODE> : 프로그램 코드를 보여줄 때 쓰이며

타자체로 보여줌 <SUP> ... </SUP> : 위 첨자 <SUB> ... </SUB> : 아래 첨자

9


(6) <PRE> 태그 <PRE>...</PRE>

• 태그 안의 문장에서 여백이나 줄 바꿈 등이 그대로 브라우저에 출력

(7) 가로선 긋기 <HR WIDTH=" " SIZE=" " ALIGN=" ">...</HR>

• 문서의 중간에 입체감 있는 수평선을 그어 문단을 구분한다 .

• 속성• WIDTH = " 백분율 또는 픽셀의 수 " : 선의 길이 • SIZE = "n" : 선의 굵기 • ALIGN = "CENTER 또는 LEFT 또는 RIGHT" :

선의 위치 정렬

10


(8) 주석문 달기 <!- 여기에 담긴 주석은 웹 브라우저에서는 볼 수 없음 ->

• <! 와 > 사이에 주석문 입력 . 이 내용은 브라우저에 출력되지 않음

(9) 특수 문자의 출력 • & , < . > , " 등의 기호는 HTML 태그에서 직접 사용되기

때문에 특수문자 코드로 처리 • 자판에 없는 문자들도 특수문자 코드로 처리

11


7.2.2 링크 만들기(1) 문서간의 연결 <A HREF=" 연결하고자 하는 곳의 URL">...</A>

• Anchor 의 약자로 다른 문서나 다른 컴퓨터에 연결 • HREF 속성에 연결하고자 하는 URL 이나 File 이름등을

지정 • 링크가 있는 곳에는 밑줄이 생기며 , 이곳을 클릭하면

연결된 문서가 열림

12


(2) 문서내의 연결 <A HREF="# 문서 내에서 찾아가야 할 단어 ">...</A> <A NAME=" 단어 ">...</A>

• 한 문서에 많은 양의 정보를 나타내고자 할 때 문서 내의 인덱스를 만드는 데 사용

• NAME 속성으로 찾아 가야 할 단어를 정해 놓고 , HREF 속성에 연결하고자 하는 단어를 지정함

• 링크된 단어를 클릭하면 NAME 속성 에서 지정된 부분으로 이동

• 문서 내 목차나 사전식 분류에 사용

13


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


(3) 이미지의 여백과 테두리 이미지의 테두리 : BORDER = 픽셀의 수 이미지의 여백

• 좌우 여백 : HSPACE = 픽셀의 수 • 상하 여백 : VSPACE = 픽셀의 수

(4) 이미지에 링크 연결하기 텍스트에서와 마찬가지로 이미지 태그 바깥쪽에 앵커 (Anchor)

태그를 씌운다 . <A HREF="URL"><IMG SRC=" 이미지 파일 " ...></a>

15


(5) 이미지를 배경으로 사용하기 <BODY BACKGROUND=" 이미지 파일 이름 " BGCOLOR

=" 색번호 " TEXT=" 색번호 ">

• 이미지를 배경에 사용하려면 <BODY> 태그에서 지정해야 한다 .

• BGCOLOR 는 배경색을 , TEXT 는 글자 색을 결정한다 .

• 색번호는 위에서 언급한 것과 마찬가지로 16 진수로 표현된다 .

16


7.3 구조적 문서의 작성7.3.1 목록 만들기(1) 순서 없는 목록 (Unordered List) 형식 : <UL>...</UL>

• 각 항목 앞에 불릿 (bullet) 이 붙는 목록 • <UL> 과 </UL> 태그 안의 <LH> 와 </LH> 사이에 목록의

제목을 , <LI> 다음에 각 항목의 내용을 기입• <LI> 태그의 하위에 <UL> 태그를 넣어 계층적 정보를

표현• 불릿의 모양은 TYPE 속성에 다음 값을 주어 지정

• DISC( 검은 원 ), CIRCLE( 하얀 원 ), SQUARE( 검은 사각형 )

17


(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


(3) 정의 목록 (Definition List) 형식 : <DL>...</DL>

• 어떤 항목에 대한 정의나 설명을 써줄 때 사용 • <DL> 과 </DL> 태그 안의 <LH> 와 </LH> 사이에

목록의 제목을 , <DT> 뒤에 항목을 , <DD> 뒤에 그 항목에 대한 정의나 설명을 기입

• 중첩 사용이 가능하며 , 하위 항목으로 들어감에 따라 문단이 조금씩 안쪽으로 들어감

(4) 목록 겹쳐 쓰기 서로 다른 형식의 목록을 중첩해 사용할 수 있다 . 문서가 계층적인 구조를 갖게 되어 더욱 효율적으로 정보를

전달하는 페이지를 만들 수 있다 .

19


7.3.2 테이블 만들기(1) 테이블의 장점 단순한 도표뿐만 아니라 복잡한 문단을 정렬할 수 있고 , 표제

지정도 가능 . 문서를 일목요연하게 정리할 수 있음(2) 테이블의 삽입 형식 : <TABLE BORDER=" " WIDTH=" " HEIGHT=" "

CELLPADDING=" " CELLSPACING=" ">...</TABLE>

• <Table> 과 </Table> 태그 사이에 줄 (row) 에 해당하는 <TR>... </TR> 태그를 넣고 그 사이에 각 칸에 들어갈 표의 내용을 나타내는 <TD>...</TD> 태그가 들어간다 .

• <TD> 는 항상 <TR> 에 의해 둘러싸여야 한다 .

20


(3) 테이블의 속성 테이블 크기 : WIDTH = 픽셀의 수 또는 백분율 , HEIGHT =

픽셀의 수 또는 백분율 테두리 : BORDER = 픽셀의 수 테이블 내부의 선 굵기 : CELLSPACING = 픽셀의 수 테이블 내용과 선 간의 여백 : CELLPADDING = 픽셀의 수 셀 내부 텍스트의 좌우 정렬 : ALIGN="align"

• <TD ALIGN="LEFT / CENTER / RIGHT"> 셀 내부 텍스트의 상하 정렬 : VALIGN="align"

• <TD VALIGN="TOP / MIDDLE / BOTTOM">

21


테이블에서 <TD> 대신 <TH> 태그를 쓰면 수평 , 수직 정렬이 자동으로 가운데가 되며 , 볼드 (bold) 체로 표시되는 제목 셀이 된다 .

(4) 셀 합치기 여러 행에 걸치는 셀 : ROWSPAN = 행의 수 여러 열에 걸치는 셀 : COLSPAN = 열의 수

22


7.4 프레임을 이용한 화면 분할

프레임이란 ?

• 프레임은 하나의 웹 브라우저 화면을 여러개의 창으로 나누어 주는 역활을 한다 .

• HTML 문서를 몇 개의 파일로 나누어 작성한 후 , 이 파일을 프레임으로 구분된 각 창에서 보여줄 수 있다

23


7.4.1 화면 나누기

가로로 나누기• <FRAMESET ROWS=" 나누는 개수만큼의 각 프레임의 세로 길이들 ">

세로로 나누기• <FRAMESET COLS=" 나누는 개수만큼의 각 프레임의 세로 길이들 ">

만들고 싶은 프레임의 개수 만큼 길이를 입력하고 , 각각 쉼표로 구분

24


프레임의 길이• 픽셀의 수 : 예 ) 두개로 나눌때 "140, *"

• 백분율 : 예 ) 세개로 나눌때 "20%, 30%, 50%

• 비율 : 예 ) 두개를 3:1 로 나눌때 "3*, *"

• * : 나머지 부분을 대신해서 사용할 수 있음 프레임에 보여질 문서

• <FRAME SRC=" 문서 이름 ">

25


7.4.2 프레임의 속성 스크롤바 표시 속성 : SCROLLING

• YES : 항상 표시됨 • AUTO : 문서의 길이가 길어지면 표시됨 • NO : 표시하지 않음

NAME 속성• 프레임의 이름을 지정할 수 있다 .

• 앵커 (<A>) 태그에서 TARGET 속성으로 프레임의 이름을 지정하면 지정된 프레임에서 문서를 보여준다 .

프레임 크기 고정• NORESIZE 로 set 된 프레임은 브라우저가 resize 할 수

없음

26


7.5 CGI 의 활용 Common Gateway Interface 의 약자 브라우저와 웹 서버 , 응용프로그램간의 인터페이스 . CGI 의 동작과정

27


CGI 를 이용하면 사용자의 요구에 따라 필요한 정보만을 전달할 수 있음

대표적인 예 • 사용자가 원하는 페이지만을 보여주는 웹 문서 • 보안이 필요한 페이지의 경우 사용자로부터 등록 정보를

입력받아 확인 • 사용자가 입력한 문서를 페이지에 연동시켜서 만든

방명록 혹은 게시판 • 사용자가 몇 번째 방문자인지 보여주는 카운터 등

28


7.5.1 CGI 와 FORM 태그(1) FORM 의 개요 형식 : <FORM ACTION=“ “ METHOD=“ “>...</FORM>

• 사용자의 입력을 받음 • ACTION : 데이터가 전달될 URL 을 지정하는 것으로

대부분의 경우 클라이언트의 요구를 처리할 CGI프로그램에 대한 URL 이 지정된다 .

• METHOD : 데이터가 지정된 위치로 어떤 방법으로 전달될 것인가를 명시한다 . 가능한 값으로는 GET 과 POST 가 있다 .

29


<INPUT TYPE=“ “ NAME=“ “ VALUE=“ “>...</INPUT>

• 입력 양식을 결정 • TYPE : 입력 필드의 형식을 결정하는 것으로 TEXT, PAS

SWORD, SUBMIT, RESET, CHECKBOX, RADIO 등이 있다 .

• NAME : 입력 필드의 데이터가 CGI 프로그램으로 넘어갈 때 입력필드의 이름를 지칭한다 .

• VALUE : 해당 입력필드에 나타나는 기본값 , SUBMIT이나 RESET 의 경우 이값이 버튼에 나타난다 .

30


(2) 입력 필드의 형식

<INPUT TYPE="TEXT" MAXLENGTH="n" SIZE="n"> : 텍스트 입력 양식

<INPUT TYPE="PASSORD" MAXLENGTH="n" SIZE="n"> : 암호 입력 양식 • 이름이나 ID 를 입력받을 때나 암호를 입력 받을 때 사용 • 암호 입력 양식은 입력된 내용을 '*' 로 표시한다 .

• MAXLENGTH : 입력 받을 수 있는 최대 길이의 문자수

31


<INPUT TYPE="SUBMIT" VALUE="버튼 이름 "> <INPUT TYPE="RESET" VALUE="버튼 이름 ">

• SUBMIT 버튼은 양식안에 입력된 내용을 <FORM> 태그 안에서 지정된 곳으로 보냄

• RESET 버튼은 양식안에 입력된 내용을 모두 지움 • VALUE 는 버튼위에 보여지는 이름을 지정

<INPUT TYPE="RADIO" NAME="..." VALUE="...">

• 여러 항목들 중에서 하나만 선택 가능한 버튼 • 같은 선택군의 같은 NAME 값을 갖고 각각의 항목은 고유의

VALUE 값을 갖는다 .

32


<INPUT TYPE="CHECKBOX" NAME="..." VALUE="...">

• 라디오 버튼은 선택군에서 하나만 선택가능하지만 체크박스는 여러개 선택 가능

• 같은 선택군의 같은 NAME 값을 갖고 각각의 항목은 고유의 VALUE 값을 갖는다 .

33


(3) 기타 입력 태그

<TEXTAREA NAME="..." ROWS="n” COLS="n">… </TEXTAREA>

• <INPUT TYPE="TEXT"> 를 이용한 텍스트 입력 받기 보다 긴 텍스트를 입력 받을 때 사용

• NAME 은 지정된 곳 ( 보통 CGI 프로그램 ) 으로 넘어갈 때 필드의 이름

• ROWS : 입력 영역 행의 글자수 • COLS : 입력 영역 열의 글자수

34


<SELECT NAME="...">...</SELECT>

• 선택 목록은 풀 다운 메뉴 (Full Down Menu) 를 말함 • <SELECT> 와 </SELECT> 사이에 <OPTION> 태그로

항목을 만든다 .

• <SELECT> 태그의 속성• NAME : 지정된 곳 ( 보통 CGI 프로그램 ) 으로 넘어갈 때 필드의 이름

• MULTIPLE : 한개이상의 선택이 가능 • SIZE : 드롭다운 항목에 표시되는 옵션의 수

• <OPTION> 태그의 속성• SELECTED : 그 항목이 초기 선택 값으로 결정

35


HTML 문서에 <FORM> 태그로 입력 서식을 작성하고 서버쪽에는 CGI 응용프로그램을 작성해 저장한 후 이들을 연동시키는 것은 쉬운 일이 아님 .

근래에는 무료로 카운터나 방명록 등을 제공해 주는 서버가 많이 있어서 , CGI 프로그래밍을 전혀 알지 못하더라도 쉽게 이들을 이용할 수 있음 .

카운터의 경우는 아무런 제약이 없이 사용할 수 있고 , 방명록이나 게시판은 배너 광고를 함께 보아야 하는 게 보통임 .

36


유명한 서버 사이트들• Korea Famous CGI Server : http://www.cgiserver.net

• 링코 : http://www.linko.com

• 넷토픽 : http://anu.andong.ac.kr/~kaen/bbs

• 프리보드 : http://www.bbs4u.com

37


7.5.2 카운터 달기

카운터 : 현재까지 홈페이지를 방문한 사용자의 수를 카운트하여 표시

사용자로부터 직접 입력을 받는 것은 아니지만 , CGI 로 동작하는 프로그램

38


무료 CGI 서버 페이지를 방문

39


'카운터 ' 의 ' 사용법 ' 을 클릭하면 카운터를 삽입하는 방법이 자세하게 설명된 페이지를 보여줌

40


자신의 카운터를 관리할 DataBase 의 이름을 결정하여 등록

41


다음과 같은 라인을 HTML 문서에 삽입하면 등록한 카운터가 홈페이지에 삽입된다 .

<img SRC="http:// count.free.cgiserver.net/CrazyCounter.cgi?display=counter|ft=3|md=6|dd=b|df= 등록한 DB이름 ">

42


7.5.3 방명록 삽입하기

방명록 : 홈페이지를 방문한 사람이 남기고 싶은 말을 적을 수 있는 일종의 게시판

글을 남기면 과거 글들과 함께 저장이 되고 , 언제라도 열람 가능

43


등록까지의 과정은 카운터와 동일 , 다음과 같은 라인을 HTML 문서에 삽입하면 등록한 방명록이 홈페이지에 삽입된다 .

<img SRC="http://count.free.cgiserver.net/CrazyGuestbook.cgi?db= 등록한 DB 이름 ">

44


방명록을 처음 방문하면 초기설정이 없다는 경고가 발생

45


"ADMIN" 을 클릭하여 환경설정 페이지로 이동한 후 , 자신의 환경에 맞게 설정

46


환경설정이 끝나면 방명록을 사용할 수 있고 , "Write" 를 클릭하면 글을 남길 수 있음

47


등록된 글은 테이블 형태로 열람할 수 있음

Documents

7 장 HTML 의 구조와 사용