홈페이지 만들기

(1)

홈페이지 만들기

c

글 오경희 http://phya.yonsei.ac.kr/~gang/

1. H TM L과 홈페이지 2. 기본적인 M arkup Tag 3. H TM L 활용 Ⅰ

4. H TM L 활용 Ⅱ 5. C G I

6. 좋은 문서 작성 습관

Version. 1.0.0 1995년 12월 9일

(2)

홈페이지 만들기

c

글 오경희 http://phya.yonsei.ac.kr/~gang/

Version. 1.0.0 1995년 12월 9일

(3)

본 문서는 사용자들이 Netscape와 같은 웹브라우저(Web Browser)를 사용 하여 인터넷을 검색해 본 경험이 어느 정도 있으며, 인터넷과 WWW에 대 한 기본 개념, 그리고 최소한의 유닉스 사용법을 알고 있다는 전제하에서 홈페이지 만드는 법에 대하여 주로 HTML 문법 위주로 설명한다.

본 문서는 참고한 페이지들 이라는 미명으로 다른 문서를 허가없이 도용 하였음을 인정한다.

필자는 이 문서의 저작권에 대한 모든 권리를 포기한다. 따라서 일부 도 용된 부분에 대한 저작권 이외에 사항에 대하여서는 어떠한 용도로도 사용 할 수 있다. 그러나 일부 내용을 개작, 첨삭하여 재배포할 경우 그 변경사항 을 문서내에 포함시켜 다른 사람들이 문서의 버젼을 구별할 수 있도록 할 것이 권장된다.

본 문서 파일은 HWP 2.1 format으로 만들어 졌으며, 그 파일은 http://phya.yonsei.ac.kr/~gang/writings/home100.zip

에 있다.

앞으로 본 필자에 의한 이 문서의 개정판이 나오게 된다면, HTML format 으로 구성될 가능성이 높다.

- 1995년 12월 9일

- 본 문서 내에서 잘못된 부분을 발견하시면, gang@phya.yonsei.ac.kr로 알려 주시면 감사하겠습니다.

(4)

제 1 장 H T M L과 홈페이지 4

1.1 S erv er와 C lien t 5

1.2 H T M L 5

1.3 홈페이지 7

1.3.1 웹 서버 7

1.3.2 시스템 홈페이지 7

1.3.3 개인 홈페이지 8

제 2 장 기본적인 M arku p T ag 9

2.1 H T M L 문서의 작성 10

2.2 기본적인 M arku p T ag 10

2.2.1 제목 <T IT L E> 10

2.2.2 머릿글 <H n> 11

2.2.3 문단<P>과 줄바꿈<B R> 12

제 3 장 H T M L 활용 I 15

3.1 T ag 의 사용법 16

3.2 H T M L 문서의 구조 16

3.3 다른 문서로 연결하기 ( an ch ors ) 18

3.3.1 파일의 연결 18

3.3.2 U R L(U niform R esource L ocator) 19

3.3.3 다른 문서상의 특정 부분과 연결하기 21

3.3.4 현재 문서내에서 특정부분과 연결하기 21

3.4 문자 포맷 21

3.4.1 논리적 포맷 22

3.4.2 물리적 포맷 22

3.4.3 특수문자 23

3.5 그림넣기 23

3.5.1 A L IG N , 그림의 위치 24

3.5.2 A L T 24

3.5.3 그 밖의 attrib ute 25

3.5.4 활용 25

(5)

제 4 장 H TM L 활용 Ⅱ 28

4.1 L IS T ( U L / O L / D L ) 29

4.1.1 U n n um b ered L ists 29

4.1.2 O rdered L ists 30

4.1.3 D efinition L ists 30

4.2 B lock S ty le 31

4.2.1 P reform atted T ext <P R E> 31

4.2.2 인용 <B L O C K Q U O T E> 32

4.2.3 주소 <A D D R E S S> 33

4.2.4 중앙정렬 <C E N T E R> 34

4.3 T A B L E 34

4.4 F ram es 35

4.5 그 밖의 tag 37

4.5.1 <H R> 37

4.5.2 <W B R> 38

4.5.3 <N O B R> 38

4.5.4 <!- - C om m en ts- -> 38

제 5 장 C G I 41

5.1 C G I와 F ill- O ut F orm 42

5.2 F ill O u t F orm 에서 사용되는 T ag 44

5.2.1 <F O R M > 44

5.2.2 <IN P U T> 44

5.2.3 <S E L E C T> 45

5.2.4 <T E X T A R E A > 45

제 6 장 좋은 문서 작성 습관 46

부록 50

< < 소스 코드의 실례 > > 51

< < 참고한 페이지들 > > 56

(6)

H T M L 과 홈페이지

학 습 목 표

☞ 클라 이언트와 서버 의 개념 을 익힌다.

☞ 홈페 이지와 H T M L 의 관계를 배운다 .

(7)

1. H T M L 과 홈페이지 5

1. HTML과 홈페이지

1 .1 S erver와 C lient

컴퓨터 네트웍에서는 서버(server,제공자) 역할과 클라이언트(client,고객) 역할이 있기 마련이다. 대개의 경우 서버는 다른 컴퓨터 시스템과의 공유하 기 위한 자료(Data Base)를 가지고 있다. 클라이언트 프로그램은 서버에게 자신이 원하는 자료를 요청하고, 서버 프로그램은 클라이언트에서 요청된 자료를 보내준다. 프로토콜(protocol)이란 이 과정에서 서버와 클라이언트가 대화하는 언어 규칙이다.

웹(web)을 이용하기 위해서는 사용자는 자신의 시스템에서 웹브라우저 (web browser)를 작동시켜야 한다. 예를 들자면 Netscape를 작동시키는 것이 다. Netscape, Mosaic, Lynx와 같은 프로그램들이 웹서비스의 클라이언트 프 로그램에 해당된다. 사용자들은 이 프로그램을 사용하여 웹의 프로토콜인

http(hypertext transfer protocol)로서 원하는 웹 사이트(site)에 접속하게 된다.

그러면 정보를 제공하는 시스템에서는 HTTPD(HTTP Daemon) 프로그램이 사용자가 요청한 웹 페이지의 문서를 보내주게 된다. HTTPD 프로그램이 서 버 프로그램이 되는 것이다. 클라이언트는 정보의 수용자로, 서버는 정보의 제공자로서의 역할을 하게 된다.

홈페이지를 작성한다는 것은 서버 프로그램이 설치된 시스템에 웹에서 사용하는 문서인 HTML 문서를 작성한다는 의미이다. 그러나 HTTPD 서버 는 단지 클라이언트에서 요청한 HTML 문서를 전송하는 역할만을 수행한 다. HTML 문서를 번역하고 화면에 표시하는 역할은 클라이언트에서 하는 일이다. 따라서 웹브라우저¹에 따라 화면 출력이 다른 경우가 있을 수 있다.

1 .2 H T M L

웹에서 사용되는 문서는 일반 문서와는 기능이 다르다. 텍스트 뿐만 아니 라 멀티미디어라 불리는 음성, 화상 등과 같은 다른 미디어들을 문서내에 포함하며, 또한 다른 문서에 연결 되어있기도 하다. 이러한 특징을 가진 문 서를 하이퍼 텍스트(hyper text)라고 하는데, 웹에서는 그냥 HTML(hyper text markup language) 문서라고 말하기도 한다.

현재 대부분의 자료 분류는 tree구조에 의한 것이다. 디스크의 디렉토리 구조, 상용 BBS들의 게시판 구조가 그러하다. 즉 뿌리(root)나 꼭대기(top)가 있고, 그 아래로 계속해서 갈라져 나가야 원하는 정보를 찾을 수 있다. 그러

1 브라우저는 검색기라는 의미로 클라이언트와는 개념에 차이가 있지만, 웹의 경우에는

동일한 프로그램을 가리킨다고 볼 수 있다.

(8)

나 인터넷의 구조가 그러하듯 웹의 구조도 뿌리나 꼭대기가 없다. HTML 문서는 이러한 거미줄 구조를 문서 자체에 내포하고 있다. 관련자료를 찾기 위하여 목차나 색인을, 이 게시판 저 게시판으로 헤매어 다닐 필요가 없이 문서 자체에서 제공하는 링크(link)를 선택하기만 하면 된다. 이렇게 문서에 관련된 사항들을 직접 연결시켜 줌으로써, 사용자가 무엇을 찾아 헤매어 다 녀야하는 수고를 상당히 줄여주게 된다.

HTML 문서는 ASCII(한글의 경우 KS-완성형) 코드로 작성된 일반 텍스트 형식의 문서이다. 대부분의 워드프로세서에서는 자체적으로 만든 binary 코 드를 사용하고 있다. 그러나 HTML 문서는 모든 시스템 환경에서 사용할 수 있는 일반 텍스트이므로 텍스트 형식을 편집할 수 있는 대부분의 에디터 를 사용하여서 작성할 수 있다. 또한 HTML 문서 작성을 위한 웹 전용 에디 터들을 사용할 수도 있다.

mark-up language라는 것은 일반 텍스트 형식에서 문서 중간에 문자나 문 장의 형태에 대한 명령 tag(표식)을 덧붙임으로써 문서의 형식을 규정한다.

Netscape의 메뉴 중 [View] - [Document Source]를 선택하면 현재 브라우저에 나타난 페이지의 소스(source) 코드를 볼 수 있다. 이러한 소스 코드를 편집 하는 것이 홈페이지를 만들기 위하여 필요한 작업이다. 아래는 소스 코드의 예이다.

[소스]

이 문장은 <b>HTML 문서 작성</b>의 예이다.<br>

[출력]

HTML 문서 작성의 예

이 문장은 HTML 문서 작 성의 예이다.

여기에서 ′<′와 ′>′로 둘러싸인 부분들이 tag들이다. <h2>는 문서의 제목

을 나타내는 tag이며 <b>는 강조체(bold)로 나타내라는 의미이다. 이러한 tag 들은 기본적으로 <tag>text</tag>의 형식을 취하게 된다. tag으로 둘러쌓인 부 분들이 지정된 속성으로 출력되게 된다. <br>은 행바꿈을 의미하는 tag으로 이러한 경우는 독립되어 혼자서 사용될 수 있다. 이러한 tag들은 대문자와 소문자를 구별하지 않는다. <BR>, <Br>, <br> 모두 동일한 의미이다. tag들 의 종류와 사용법은 다음 장 이후에 설명될 것이다.

(9)

3. H T M L 활 용 Ⅰ 7

1 .3 홈페이지

웹을 통하여 일단 어느 곳에 접속을 하면, 일정량의 내용이 전송되어 온 다. 웹에서 하나의 페이지라고 하는 것은 이렇게 한번 접속으로 보내어져서 (윈도우 환경에서) 하나의 윈도우를 통하여 볼 수 있는 내용을 말한다. 서버 쪽에 있는 하나의 HTML 문서가(필요하다면 그림 파일들을 포함해서) 하나 의 페이지가 되는 것이다.

이러한 페이지들 중, 초기화면이라고도 할 수 있는 처음 접하게 되는 페 이지를 홈페이지라 할 수 있으며, 웹 서버에서 제공하는 모든 HTML 문서 들의 관문이라고 할 수 있다. 홈페이지는 크게 두가지로 분류할 수 있다. 하 나는 시스템 자체의 홈페이지로 기업이나 대학, 연구기관의 홈페이지가 이 에 해당한다. 그리고, 다른 하나는 이러한 웹서비스를 하는 시스템에 계정이 있는 사람들이 제공하는 개인 홈페이지들이다. 개인 홈페이지에 접속하기 위해서는 해당 주소 다음에 그 사람의 계정을 ′~′ 다음에 덧붙여 주어야 한 다.

http:/ /some.site.co.kr/ 어떤 기업의 홈페이지

http:/ /some.site.co.kr/~someone/ someone의 개인 홈페이지

클라이언트 프로그램을 통하여 홈페이지에 접속하게 되면, 서버 프로그 램에서 홈페이지에 해당하는 HTML 문서를 보내주게 된다. 홈페이지에는 자신의 간단한 소개와 다른 문서로의 링크를 포함하게 된다. 넓은 의미에서 홈페이지라고 하면 접속하였을 때 나오는 첫 페이지 뿐만 아니라 그 곳을 통해서 제공되는 모든 페이지들을 의미하기도 한다. 일반적으로 홈페이지를 작성한다고 하는 것은 이러한 페이지들을 작성하는 것을 의미한다.

1 .3 .1 웹 서버

만약 어떤 시스템이 인터넷에 연결되어 있다면, 그 시스템에 적절한 웹 서버 프로그램을 설치할 수 있다. 주로 HTTPD라는 이름을 가진 웹 서버 프 로그램은 많은 종류의 공개 및 상용 프로그램들이 나와 있다. 현재 널리 쓰 이고 있는 서버로서는 NCSA와 CERN에서 만든 것들이다. 서버 프로그램과 설치 옵션에 따라 홈페이지의 작성방법이 달라진다. 여기에서는 공통으로 적용될 수 있는 일반적인 것들에 대하여 설명한다.

서버 프로그램의 설치에 관한 사항은 ′가자! 웹의 세계로 : 개정판′ Part

Ⅱ를 참고하면 많은 도움이 될 것이다.

1 .3 .2 시스템 홈페이지

서버 프로그램 설치 시에 시스템 관리자는 설치할 디렉토리를 비롯한 여

(10)

러 옵션을 지정해 주어야 한다. 그 중 ′도큐먼트 루트′로 지정된 디렉토리에 홈페이지가 설치되게 된다. 관리자가 특별히 변경하지 않았다면, 이 디렉토 리는 서버가 설치된 디렉토리의 ′htdocs′라는 하위 디렉토리가 된다. 시스템 에서 제공하는 모든 페이지들은 이곳과 그 하위 디렉토리에 있어야 한다.

그리고 클라이언트에서 요청한 URL이 디렉토리까지만 지정되어 있을 경우, 각 디렉토리에서 ′index.html′이라는 문서가 제공된다. 다시 말해서, 클라이 언트로부터 요청된 URL이 디렉토리까지만 지정되어 있을 경우 해당 디렉 토리에서 이러한 이름을 가진 문서를 제공하게 된다.

서버 프로그램을 설치한 후 간단한 .../htdocs/index.html 문서만을 편집해 두는 것으로 홈페이지 구축은 시작되는 것이다.

1 .3 .3 개인 홈페이지

일단 시스템에 웹서버가 설치되어 있다면 해당 시스템의 사용자들은 자 신의 홈페이지를 만들 수 있다. 그러기 위해서는 우선 자신의 홈디렉토리 아래에 자신의 ′도큐먼트 루트′ 디렉토리를 생성하여야 한다. 디렉토리의 이 름은 서버를 설치한 시스템 관리자에게 문의 하여야 한다.

디렉토리의 이름이 ′public_html′이라고 하자. 그럼 이곳에 역시

′index.html′이라는 문서를 만들면 된다. PC 환경에서 자신의 홈페이지에서 사용할 HTML 문서를 만들었다면, FTP와 같은 전송수단을 사용하여, 그 문 서를 적절한 위치에 옮겨 두면 된다.

만약 자신의 시스템에 웹서버가 설치되어 있지 않다면, 자신의 홈디렉토 리에 서버를 설치할 수도 있다. 홈페이지 사이트 뒤에 ′:8080′이라고 붙어있 는 경우에는 이러한 설치일 가능성이 높다.

(11)

제 2 장

기본적인 M a rk u p T a g

학 습 목 표

☞ 기 본적인 M a rku p T a g 을 익혀 H T M L

문서를 작성 해 본다.

(12)

2. 기본적인 Markup Tag

2.1 H T M L 문서의 작성

HTML 문서는 홈페이지를 구축할 유닉스 환경 속에서 바로 emacs나 vi와 같은 텍스트 편집기를 사용하여 바로 작성할 수도 있다. 그러나 많은 이들 에게 유닉스를 사용한 편집은 까다로운 작업이다. 따라서 대부분의 경우 일 반 PC 환경에서 문서를 작성한 후 홈페이지를 제공하게될 유닉스 시스템으 로 옮기는 방식을 사용한다. (홈페이지를 MS-Windows 환경에서 제공하는 경우도 있기는 하다) HTML 문서는 알려진 일반 텍스트 양식의 문서이므로 간단한 에디터나 자신이 좋아하는 워드프로세서를 사용하면 된다. 그러나, 대개의 웹 작동환경이 윈도우이므로 가급적이면 윈도우 환경에서 출력을 보아가며 작업하는 것이 좋다.

그 외에도 WYSWYG 환경을 제공하는 HoTMetaL, Hotdog과 같은 전용 편집기를 사용할 수도 있다. 초보자라면 복잡한 HTML tag들을 일일이 적어 넣지 않아도 되는 HTML 전용 편집기를 사용하고 싶을 것이다. 그러나 이 러한 편집기를 자유자제로 활용하기 위해서도 기본적인 HTML 구조와 tag 들을 알아둘 필요가 있다. 또한 나날이 새로운 기능들이 추가되는 tag들을 활용하기 위해서는 전용편집기는 보조적인 수단으로 사용하는 수준에서 만 족하는 것이 좋다. 이러한 경우에는 WebEdit와 같은 작은 에디터 규모의 프 로그램을 사용하는 것이 좋다. WebEdit의 경우 WYSWYG 방식은 아니지만, Netscape (또는 다른 브라우저)와 함께 사용하여 편집결과를 확인해 보면 된 다.

기존의 문서를 HTML로 번역하는 방법들도 있다. 윈도우 버전 3.0b 에서부터는 HTML 형식을 지원한다. Ms-Word의 경우 영문판만이 HTML 번 역 프로그램이 제공되고 있다.

2.2 기본적인 M arku p T ag

2 .2 .1 제목 < T IT L E >

브라우저의 상단 타이틀바(title bar)에는 해당 페이지의 제목(title)이 나오 게 된다. 이 title에 해당하는 부분은 HTML문서의 머릿부분에 적혀져야 한 다. 이 곳에는 문서의 내용을 가장 잘 나타내는 몇 단어 정도의 제목을 사 용하면 된다. 만약 title에 해당하는 tag이 문서에 들어있지 않으면, Netscape 의 경우, 해당 페이지의 주소(URL)가 이 부분을 대신하여 표시된다.

(13)

2. 기본적인 M arku p T ag 11

[사용법]

2 .2 .2 머릿글 < H n >

HTML에서는 여섯 단계의 수준의 머릿글(heading)이 있는데, 1부터 6까지 로 나타내며, 1 또는 2 수준이 가장 많이 사용된다. 머릿글은 보통 몸글 (body)보다 더 크고 굵은 글자체로 나타난다. 문서의 맨 처음 머릿글은 <h1>

을 사용하며 다음 소제목은<h2>를 사용한다. 그러나 작성자의 기호에 따라 선택적으로 사용할 수 있다. 단지 글자크기를 크게 하기 위해서 사용하는 경우도 있는데, 그럴 경우라면 <font> tag을 사용하는 것이 좋다.

[사용법]

여기에서 n는 1과 6사이의 숫자로, 머릿글의 수준을 지정한다.

[사용예]

[출력]

제 1 수준 머릿글

제 2 수준 머릿글

제 3 수 준 머 릿글 제 4 수준 머릿글

제 5 수준 머릿글 제 6 수준 머릿글

(14)

2 .2 .3 문단 < P > 과 줄바꿈 < B R >

대부분의 워드 프로세서와는 달리, HTML 파일에서 행바꿈(Enter키를 누 른 곳) 문자는 무시된다. 따라서 일반 텍스트를 HTML tag 없이 사용하게 되면, 화면에 행바뀜이 없이 글자들이 빽빽하게 나타난다. 또한 계속 연결된 공백(space) 문자나 행바꿈 문자들은 단지 하나의 공백문자로만 처리된다.

(예외 조항: <P>나 <Hn> tag 다음에 따라나오는 공백은 모두 무시됨) 이같

은 사실을 다음의 예를 통해 확인해 보자.

[소스]

HTML 문서 작성의 예

이 문장은 HTML 문서 작성의 예이다.

[출력]

HTML 문서 작성의 예 이 문장은 HTML 문 서 작성의 예이다.

<P> tag는 단락(paragraph)을 의미하며, 한 줄을 띄우고 새로운 단락을 시 작한다. 단락을 구분하기 위해서는 반드시 <P>를 사용하여야 한다. HTML 은 전적으로 표현형식을 tag에 의존하기 때문에 <P> tag이 없으면 문서는 단 하나의 단락으로 보게 된다. 또한 브라우저는 소스에서 나타나는 들여쓰 기나 빈 줄을 무시한다.

<BR> tag은 행바꿈(line break)으로서, 한 줄을 띄우지 않고 줄을 바꾼다.

[소스]

<H2>HTML 문서 작성의 예</H2>이 문장은 HTML 문서 작성의 예이다.<P> 다음

문단<BR>다음줄

(15)

2. 기본적인 M arku p T ag 13

[출력]

HTML 문서 작성의 예

이 문장은 HTML 문서 작성의 예이다.

다음 문단 다음줄

위의 예문처럼 tag이 의미하는 바와 달리 뒤죽박죽으로 소스 코드를 작성 하는 것보다 출력과 동일한 형태로 HTML 소스를 작성하여, 화일들을 읽기 쉽게 만드는 것이 좋다. 예를 들자면, 머릿글을 쓴 후에는 단락을 하나 분리 하고, <p>를 사용하여 문단들을 구분한 곳은 빈 줄을 하나 삽입하는 것이 좋다. 그리고 다소 긴 글을 작성할 경우, <BR>과 <P>를 적절히 사용하는 것이 좋다. <P>를 사용하지 않고 <BR>만 사용하여 글을 작성한 경우에는 읽는이가 금방 지루해하게 한다.

<< 참고 >> H TM L 문서 작성 환경의 예

Ms-Windows 환경에서, WebEdit라는 간단한 전용 에디터를 사용하여, Netscape를 통하여 확인하는 방법을 생각해 보자.

우선 Ms-Windows에서 WebEdit와 Netscape를 띄워야 한다. 메모리가 부족 할 경우 시스템이 다운 되는 경우도 있으니, 이런 경우에는 다른 어플리케 이션을 닫아둔다. 만약 자신의 시스템이 네트웍에 연결되지 않은 상태에서 Netscape가 작동하지 않는다면, mozock.dll이라는 파일을 구하여 Netscape가 설치된 디렉토리에 winsock.dll로 이름을 바꾸어 복사한다. 이렇게 하면, 네 트웍이 연결되지 않은 상태에서도 Netscape가 작동한다. 물론 http나 ftp와 같은 프로토콜을 사용할 수 없다. 이 경우에는 단지 local disk, 즉 하드 디스 크만을 file: URL로 억세스할 수 있다. 예를 들어

C:\WWW\HTML\SAMPLE.HTM

이라는 파일을 억세스하기 위해서는 file://C|/WWW/HTML/SAMPLE.HTM이 라고 URL을 사용하여야 한다.

그럼, WebEdit를 사용하여 간단한 HTML 문서를 작성하여 하드 디스크 에 저장해 두자. 다음 Netscape에 해당하는 URL 즉, file://....로서 그 문서를 열어보자. 만약 결과가 자신이 원하던 것과 다르다면, 소스 코드에서 문제점 을 찾아 보아야 할 것이다.

링크들은 그것이 상대 path로 지정되어 있을 경우에는 제대로 작동할 것 이다.

(16)

<< 실습 >>

자신이 좋아하는 시나 노랫말을 HTML 형식으로 나타내 보자.

[예]

물론 나는 알고있다.<BR>

내가 운동보다도 운동가를<BR>

술보다도 술 마시는 분위기를 더 좋아했다는 걸<BR>

그리고 외로울 땐 동지여!로 시작하는 투쟁가가 아니라<BR>

낮은 목소리로 사랑노래를 즐겼다는 걸<BR>

그러나 대체 무슨 상관이란 말인가<P>

잔치는 끝났다.<BR>

술 떨어지고, 사람들은 하나 둘 지갑을 챙기고 마침내 그도 갔지만<BR>

마지막 셈을 마치고 제각기 신발을 찾아 신고 떠났지만<BR>

어렴풋이 나는 알고 있다<BR>

여기 홀로 누군가 마지막까지 남아<BR>

주인 대신 상을 치우고<BR>

그 모든 걸 기억해내며 뜨거운 눈물 흘리리란 걸<P>

그가 부르다 만 노래를 마저 고쳐 부르리란 걸<BR>

어쩌면 나는 알고 있다<BR>

누군가 그 대신 상을 차리고, 새벽이 오기 전에<BR>

다시 사람들을 불러 모으리란 걸<BR>

환하게 불 밝히고 무대를 다시 꾸미리라<P>

그러나 대체 무슨 상관이란 말인가<P>

(17)

제 3 장

H T M L 활용 I

학 습 목 표

☞ H T M L 문서를 작성 하는 데 필요 한

T A G 들을 익힌다 .

(18)

3. HTML 활용 Ⅰ

3.1 T ag 의 사용법

<tag>...</tag>으로 둘러 싸인 부분은 tag이 지정하는 형식으로 브라우저에

의해 출력된다. 그런데 이러한 tag들에 다양한 attribute를 지정해 주어서 출 력을 보다 세련되게 할 수 있다. attribute들은 생략될 수 있으며, 해당 tag들 에 따라 지정하는 내용은 다르다. 그 형식은 다음과 같다. 이때 tag과 attribute, attribute와 attribute들은 공백으로 구분해 주어야 한다.

[예]

<p align=center> 문단이 화면 중앙에 정렬된다

<p>는 원래 <p>...</p>로서 하나의 단락을 의미하는 것이다. 그러나, 브라

우저는 </p>가 다시 나오지 않더라도 다음 <p>가 나오게 되면 이를 새로운

단락으로 처리하므로, 두번 쓸 필요가 없다. 따라서 <p align=center> 다음에 나오는 문단이 중앙 정렬된다. 그러나 <p> tag의 align attribute는 최근에 나 온 브라우저(Netscape 1.2 이후 버전)에서만 제대로 출력되므로 다른 브라우 저의 사용자들에 대한 고려도 하여야 한다.

3.2 H T M L 문서의 구조

HTML 문서의 기본 구조는 크게 머릿글(head)과 몸체(body)부분으로 나뉘 어 진다. 머릿글은 문서의 제목(title)이 기술되며 몸체에는 문서의 내용의 들 어가게 된다. 다음은 이러한 구조를 기술 하는 기본적인 HTML tag을 나타 낸다.

<html>--- HTML 문서임을 알림

<head> ---문서의 헤드부분

</head>

<body> ---문서의 몸체

</body>

</html>

실제 문서의 내용은 <body>와 </body>로 둘러싸인 tag 내에 들어가게 된

(19)

3. H T M L 활용 Ⅰ 1 7

다. 일반적으로 <body>에 오는 첫부분은 해당문서의 머릿글이 오게 된다.

<html>

<head>

</head>

<body>

<h1>홍길동의 홈페이지에 오신 것을 환영합니다!</h1>

</body>

</html>

위에서처럼 기본 골격을 잡고 타이틀과 헤딩을 넣어주었다면, 그 다음에 할 일은 내용을 채워 넣는 일이다. 이를 위해서 위의 헤딩 바로 다음에 다 음과 같이 원하는 내용을 넣는다.

<html>

<head>

</head>

<body>

안녕하십니까?<br>

여러분의 방문을 진심으로 환영합니다.<br>

여기는 동에 번쩍, 서에 번쩍 홍길동 홈페이지입니다.<br>

웹의 세계가 번창하면서 이제는 여기저기서 번쩍하는게 저 뿐만이 아니군요.<br>

즐겁고 유익한 시간이 되시기를 바랍니다.<p>

홍길동 올림.

</body>

</html>

그러나, 많은 HTML 문서의 소스를 보면, <html>, <head>, <body> tag들이 생략되어 있다. 이러한 tag들이 생략되어도 브라우저의 출력에는 별 영향을 미치지 않기 때문이다. 그러나 깔끔한 형식을 갖춤으로써 다음에 수정이 쉬 워지며 다른 사람들도 쉽게 알아볼 수 있다. 또한 다양한 브라우저들에 의

(20)

해 안정적으로 지원된다.

한편 <body> tag은 문서자체에 대한 몇가지 attribute를 지정할 수 있다.

[사용법]

<body background=" " bgcolor=# text=# link=# vlink=#

alink=# >

... ...

</body>

그림파일의 URL이 background로 지정되면, 문서의 배경그림이 된다. #색 상은 #FFFFFF와 같은 형식으로 각 두 문자씩 16진수의 RGB 칼라를 나타낸 다. 가장 왼쪽의 두 문자는 빨강, 가운데 두 문자는 녹색, 오른쪽은 파랑을 나타낸다. 예를 들어 #FF0000은 빨강, #000000는 검정, #FFFFFF는 흰색,

#8080FF는 하늘색을 나타낸다. 그리고 bgcolor는 배경색(흰색)을, text는 글자

색(검정), link는 접속된 적이 없는 링크의 색(파랑), vlink는 과거에 접속된

적이 있는 링크의 색(보라), alink는 마우스론 선택하였을 때의 색(빨강)을 지정하게 된다. 괄호 안의 색은 Netscape에서의 기본값들이다. 이들 중 브라 우저의 기본값을 바꾸고 싶은 attribute만을 선택적으로 사용하면 된다.

[사용예]

... 내용 ...

</body>

3.3 다른 문서로 연결하기 ( an ch o rs )

HTML의 커다란 장점은 다른 문서의 텍스트나 혹은 이미지와 연결할 수 있다는 것이다. 링크는 문서 중에 색깔이나 밑줄로 강조된 부분을 통하여 다른 문서로 연결시킨다. 이러한 링크에 관련된 tag이 <a>이다.

[사용법]

3 .3 .1 파일의 연결

href는 연결할 문서를 지정한다. 이경우 현재 문서가 있는 디렉토리에 대 한 상대 path나 도큐먼트 루트에 대한 절대 path로 파일을 지정하게 된다.

그리고 URL을 연결할 수도 있다.

(21)

3. H T M L 활용 Ⅰ 1 9

다음은 파일의 위치에 따른 href의 설정 예들이다.

[상대 path의 지정]

direc/ 현재 문서의 디렉토리가 이라고 가정 direc/index.html href="./" 또는 "index.html"

direc/another.html href="another.html"

direc/subdir/index.html href="subdir/" 또는 "subdir"

direc/subdir/another.html href="subdir/another.html"

direc/../index.html href="../" 또는 "../index.html"

[절대 path의 지정]

htdocs/ 도큐먼트 루트라고 가정

htdocs/index.html href="/" 또는 "/index.html"

htdocs/another.html href="/another.html"

htdocs/subdir/another.html href="/subdir/another.html"

~someone/public_html/ 자신의 도큐멘트 루트라고 가정

~someone/public_html/index.html href="/~someone/" 또는 "/~someone"

~someone/public_html/another.html href="/~someone/another.html"

~someone/public_html/subdir/a.html href="/~someone/subdir/a.html"

절대 path가 지정된 경우에는 ′/′로 시작하고 있다. 그리고 index.html로 링 크하는 경우에는 파일이름을 생략할 수 있다. URL에는 HTML문서 뿐만 아 니라 음성이나 동화상등 다른 종류의 파일이 올 수도 있다.

모든 상대 path를 절대 path로 지정할 수도 있다. 그러나 일반적으로 상대 path를 사용하는 것이 좋다. 우선 입력하여야 할 글자 수가 줄어들고, 관련 된 파일들 전체를 다른 곳으로 옮겨도 별 문제가 일어나지 않는다. 그러나 직접 관련된 문서가 아닌 경우에는 절대 path로 지정하는 것이 효율적이다.

함께 이동하지 않는 문서들은 절대 path로 지정해 주어야 호환성이 유지된 다.

[사용예]

<a href="http:/ /home.netscape.com/">NETSCAPE 홈페이지</a>

3 .3 .2 U R L ( U n ifo rm R eso u rce L oca tor )

World Wide Web은 다른 서버상의 화일 위치를 나타내기 위해 Uniform Resource Locators(URLs)를 사용한다. URL은 접속하는 resource의 형태(예를 들면 gopher, WAIS), 서버의 주소,그리고 화일의 위치를 나타낸다. 기본적으

(22)

로

scheme://host.domain[:port]/path/filename

과 같은 형태이다. scheme은 아래에 명시된 것들 중의 하나가 된다.

file

local system 상의 파일, 또는 anonymous FTP server 상의 파일

http

World Wide Web server 상의 파일

telnet

Telnet과 관련된 service에 대한 연결

ftp

Ftp와 관련된 service에 대한 연결

news

Usenet newsgroup

mailto

E-mail 쓰기

gopher

Gopher server 상의 파일

WAIS

WAIS server 상의 파일

예)

file:///C|/www/sample.htm http://www.dongguk.ac.kr/

telnet://archie@archie.sogang.ac.kr/ ftp://ara.kaist.ac.kr/pub/

gopher://cair-archive.kaist.ac.kr/ news:han.comp.www

mailto:webmast@www-me.postech.ac.kr

(23)

3. H T M L 활용 Ⅰ 2 1

아래의 예와 같이 문서 안에 URL을 포함하면 링크가 이루어 진다.

<A HREF = "http:/ /sunsite.unc.edu/mdw/linux.html">Linux Documentation Project</A>

이것은 리눅스에 관한 HTML 문서를 문서 안에서 연결시켜준 것이다.

3 .3 .3 다른 문서상의 특정 부분과 연결하기

앵커는 그 문서의 특정한 부분으로 이동하기 위해 사용될 수도 있다. 문 서 B의 한 부분(이 파일을 documentB.html라고 부른다.)과 문서 A의 특정한 부분을 서로 연결하려고 한다고 가정해 보자. 우선, 문서 B안에 이름 붙인

앵커(named anchor)를 만들어 줘야 한다. 예를들어, 문서 B에 "midway"라는

이름의 앵커를 설정하기 위해 다음과 같이 입력한다.

여기는<A NAME = "midway">B 문서의 중간 어느 부분</a>입니다.

이제 파일의 이름 뿐만 아니라 hash mark(#)로 구분된 named anchor를 갖 추고 있는 링크를 문서 A에 만들 수 있다.

A 문서에서 B 문서의 어느 부분으로

<A HREF = "documentB.html#midway">연결</A>하기.

문서 A 안의 "연결"이라는 단어를 마우스로 클릭하면, 사용자는 문서 B 안에 있는 midway라고 표시되어 있는

곳으로 곧장 가서 볼 수 있게 된다.

3 .3 .4 현재 문서내에서 특정부분과 연결하기

파일의 이름을 생략한다는 점을 제외하면 앞에서 설명한 것과 같은 방법 을 사용한다. 예를 들면, 동일한 파일(문서 B) 내에서 midway라는 앵커로 연 결하기 위해서는 다음과 같은 방법을 이용하면 된다.

여기는 문서 B 내부에서<A HREF="#Jabberwocky">midway로 이동</A>됩니다.

3 .4 문자 포맷

각각의 단어나 문장을 특별한 글자모양을 갖게 HTML 문서 작성을 할 수 있다. 글자 모양을 규정하는 것은 크게 논리적 포맷과 물리적 포맷으로 나눌 수 있다. 논리적 포맷은 글의 내용이 주고자 하는 의미에 따라 글자모

(24)

양을 규정하는 것이다. 예를 들자면, <strong>은 강조의 의미를 가지고 있다.

물리적 포맷은 그 부분을 특수한 모양으로 규정한다. 앞에서 나온 <b>는 bold체(굵은 글씨)로 나타내라는 의미이다. 대개의 경우 브라우저는<strong>

과 <b>를 동일한 출력으로 보여준다.

물리적 포맷과 논리적 포맷 중 가능하면 논리적 포맷 사용이 권장되고 있다. 논리적 tag의 장점은 브라우저의 기능이 최대한 활용될 수 있으며, 또 한 작성하는 문서의 짜임새를 더욱 좋게 해준다.

모든 문자 tag은 형식을 지정하고자 하는 문자열을 <tag>과 </tag>으로 둘 러싸면 된다.

3 .4 .1 논리적 포맷

<DFN> defining instance

정의되어지는 어떤 단어를 나타낼 때에 사용. 아직 평범한 문자와 동일한 형태로 나옴.

<EM> emphasis

문자를 강조하기 위해 사용되며, 글자 모양은 이탤릭체.

<CITE> citiation

책이나 사진 등의 제목을 나타낼 때에 쓰이며, 이탤릭체.

<CODE> code

프로그램의 코드를 나타내기 위해 사용됩니다. 고정폭 글자체.

<KBD> keyboard

사용자의 키보드 입력을 해야 하는 부분을 나타낼 때에 사용. 두터운 고 정폭 글자체로 나타나야만 하지만 많은 브라우저에서는 일반두께의 고정폭 글자꼴로 나타남.

<SAMP> sample

컴퓨터의 상태 메시지를 나타내기 위해 사용됩니다. 고정폭 글자체.

<STRONG> strong emphasis

글자모양의 강조를 위해 사용되며, 일반적으로 굵은 글자체.

<VAR> variable

특정한 것으로 대치시킬 변수를 나타내기 위해서 사용됩니다. 일반적으 로 이탤릭체.

3 .4 .2 물리적 포맷

<B> bold

굵은 글자 모양을 나타내기 위하여 사용.

<I> italic

이탤릭체로 나타내기 위하여 사용합니다.

(25)

3. H T M L 활용 Ⅰ 2 3

<TT> typewriter text

타자기로 타이핑한 것과 같이 고정폭 글자꼴로 나타낼 때에 사용.

<U> underlined

아랫줄 (아직 브라우저들에 의해 지원이 제대로 되지 않음)

<SUB> subscript

아래첨자

<SUP> superscript 윗첨자

<BLINK> blink

반짝임. 문자가 사라졌다 나타났다 한다.

<FONT SIZE=n>

글자크기. 기본값은 3이며 1-7까지의 범위의 값을 가진다. 숫자 앞에 +/- 를 사용하여 상대적인 크기를 지정할 수 있다.

<BASEFONT SIZE=n>

기본글자 크기를 변경. n은 <font>와 같은 범위의 값을 가진다.

3 .4 .3 특수문자

′<′, ′>′, ′&′ 등의 문자들은 HTML 문서 내에서 특수문자의 역할을 하므

로 이들 문자를 사용하기 위해서는 다음과 같은 형식을 사용하여야 한다.

< (< less-than symbol)

> (> greater-than symbol)

& (& ampersand)

" (" unidirectional typewriter-style "double quote")

  ( non-breaking space; 강제로 빈 공간을 넣음)

® ( registered)

3 .5 그림넣기

대부분의 Web 브라우저에서는 글자들과 함께 나오는 in-line 이미지들을 보여준다. 이때 제공되는 이미지는 XBM/GIF/JPG 파일 포맷이어야 한다.

위에서 image_URL은 이미지 파일이 있는 위치를 나타내는 URL로서, 파 일이 그림이어야 한다는 것을 제외하고는 <a> tag에서 사용된 href와 사용법 이 동일하다. 만약 이미지 파일이 GIF의 형식을 사용하는 것이라면 image_URL은 반드시 .gif의 확장자를 가져야하며, X Bitmap인 경우에는

(26)

.xbm의 확장자를 가져야만 한다.

이미지도 다른 문자와 마찬가지로 링크로 사용될 수 있다.

[예]

3 .5 .1 A L IG N , 그림의 위치

그림의 위치를 정하기 위하여 align attribute를 사용할 수 있다. 이 attribute 의 기본값은 bottom이며, 그림의 하단과 텍스트가 일치하도록 정렬한다.

( 1 ) 문단속에 있는 그림

문자와 그림의 특별한 배열이 필요 없는 경우에 사용 BOTTOM: 그림의 하단과 텍스트를 일치시킨다.

TOP: 그림의 상단과 텍스트를 일치시킨다.

MIDDLE: 그림의 중앙에 텍스트를 일치시킨다.

( 2 ) 문단과 그림이 어울림

그림과 텍스트는 워드프로세서의 ′어울림′과 같이 그림이 없는 공간에 텍 스트가 나타난다.

LEFT: 그림이 왼쪽에 오며, 텍스트는 오른쪽 빈 공간에 메워진다.

RIGHT: 그림이 오른쪽에 오며, 텍스트는 왼쪽에 메워진다.

3 .5 .2 A L T

이미지 자동로드(auto load) 옵션을 꺼 둔 경우나, text 기반의 웹브라우저 에서는 이미지가 나타나지 않는다. ALT 옵션을 사용하면 이미지를 보여줄 수 없는 경우 그것을 설명해 주는 문구를 넣어줄 수 있다. 예를 들면 아래 와 같이 사용한다.

위에서 보면 UpArrow.gif는 위쪽으로 올라가는 기능을 나타내는 화살표 그림이다. Lynx와 같은 VT100환경에서 브라우저를 사용하는 경우라면, 사 용자는 이미지 대신 "위로"라는 글자를 보게 된다.

(27)

3. H T M L 활용 Ⅰ 2 5

3 .5 .3 그 밖의 a ttrib u te

WIDTH, HEIGHT: 그림의 폭과 넓이를 변경한다. 그림의 축소,확대를 위 해 사용될 수 있다.

HSPACE, VSPACE: 그림 좌우, 상하에 여백을 준다.

BORDER: 그림 주위에 테두리를 그린다. 그림이 링크된 경우 푸른 테두 리가 나타나게 되는데, 이 테두리를 없애려면 border=0을 지정하면 된다.

3 .5 .4 활용

지나치게 크거나 많은 그림을 사용하는 것은 전송받는 시간을 길게 하여 가급적 자제하는 것이 좋다. 큰 그림을 제공할 필요가 있으면, 문서에서 바 로 제공하지 않고, 사용자가 선택적으로 검색할 수 있도록 따로 페이지를 만들어 주어야 한다.

일반적으로 사진은 JPG 포맷으로, 색상 수가 적은 그래픽은 GIF 포맷으 로 제공하는 것이 효율적이다. 특히 GIF는 인터레이스드 모드를 사용하는 것이 좋다. 유틸리티를 이용하여 GIF 파일은 배경을 투명하게 만들 수도 있 다. 그리고 가급적이면 색상 수를 줄여 파일 크기를 작게 해 주어야 전속속 도를 향상시킬 수 있다. 또한 alt attribute를 사용하여 text 환경의 사용자들도 알아 볼 수 있게 하여야 한다.

(28)

<< 실습 >>

자신의 홈페이지와 웹 사이트 목록을 가상으로 만들어 본 다음, 이를 hyper link로 연결하여 보자

[예]

index.html

<html>

<head>

</head>

안녕하십니까?<br>

여러분의 방문을 진심으로 환영합니다.<br>

여기는<blink>동에 번쩍, 서에 번쩍</blink>

<font size=+1>홍길동</font>홈페이지입니다.<br>

웹의 세계가 번창하면서 이제는 여기저기서 번쩍하는게 저 뿐만이 아니군요.<br>

제가 추천하는

<em><a href="website.html">다양한 웹의 세계</a></em>가

여러분 앞에 있습니다.

즐겁고 유익한 시간이 되시기를 바랍니다.<p>

<홍길동 올림.>

</body>

</html>

website.html

<A HREF="http:/ /www.nowcom.co.kr/Newsplus/homepage.htm">Nowcom;

Newsplus</A><p>

(29)

3. H T M L 활용 Ⅰ 2 7

[출력]

(30)

H T M L 활용 Ⅱ

학 습 목 표

☞ 여러 가지 ta g 들을 사용하 여 다양한 형태를

가 진 H T M L 문서를 만든다 .

(31)

4. H T M L 활용 Ⅱ 2 9

4. HTML 활용 Ⅱ

4 .1 LIS T ( U L / O L / D L )

리스트는 목차 따위의 목록을 나열할 때 사용된다. 그리고 unnumbered, ordered, definition 리스트가 있다.

4 .1 .1 U n n u m b ered L ists

unnumbered list를 만드는 법은 다음과 같다.

리스트를 열어주는 <ul> tag로 시작한다. 그리고 개별 항목 앞마다 <li>

tag를 넣어준다. 이때 닫는다는 의미를 주는 </li> tag는 필요 없다. 목록을 다 적은 후에 리스트를 닫아주는 </ul> tag로 끝낸다. 목록 안에 또 다른 목 록을 만들 수 있다.

[사용예]

<UL>

<LI>첫번째 항목

<LI>두번째 항목

<UL>

<LI>2.1 세부항목

<LI>2.2 세부항목

</UL>

<LI>세번째 항목

</UL>

[출력]

첫번째 항목 두번째 항목

2.1 세부항목 2.2 세부항목 세번째 항목

(32)

4 .1 .2 O rd ered L ists

Ordered list는 리스트(unnumbered list)에서 <UL> 대신에 <OL> tag를 사용 하는 것을 제외하고는 사용법이 같다. 그리고 출력에는 숫자가 표시된다.

[사용예]

<OL>

<LI>oranges

<LI>peaches

<LI>grapes

</OL>

[출력]

1.oranges 2.peaches 3.grapes

4 .1 .3 D efin itio n L ists

Definition List는 어떤 용어(DT)나 정의(DD)를 다룰 때에 사용된다.

[사용예]

<DL>

<DT>NCSA

<DD>NCSA, the National Center for Supercomputing

Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering.

<DT>Cornell Theory Center

<DD>CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering.

</DL>

(33)

4. H T M L 활용 Ⅱ 3 1

[출력]

NCSA

NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering.

Cornell Theory Center

CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering.

<dt>와 <dd> 항목에서는 <p> tags에 의해 분리된 여러개의 문단이나 리스

트들, 그리고 다른 정의된 정보들을 포함할 수 있다.

4 .2 B lo ck S tyle

4 .2 .1 P reform atted T ex t < P R E >

′preformatted′를 의미하는 <pre>를 사용하여 고정폭 글자꼴(fixed-width

font)을 사용하여 공백과 빈 줄, 그리고 탭이 유지가 된 ′미리 형태를 결정해 놓은′ 문서를 보여줄 수 있다. 다시 말하면 HTML 문서 안에서 빈칸이 여러 개 들어가 있을 경우에는 그 모습대로 나타나며, 특정 위치에 줄바꾸기가 이뤄져 있을 경우에는 그것이 그대로 보여지게 된다는 의미이다. 다시 말해 서 일반 텍스트 문서 그대로를 보여주는 것과 같은 효과가 나타난다. 이러 한 점은 프로그램 소스 코드의 내용을 보여주거나 하는 경우에 유용하게 사 용된다.

(34)

[사용예] - shell script의 소스 코드를 보여 준다.

<PRE>

#!/bin/csh cd $SCR

cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f

mya.out

cfs save myoutfile:mycfsdir/myoutfile rm *

</PRE>

[출력]

#!/bin/csh cd $SCR

cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f

mya.out

cfs save myoutfile:mycfsdir/myoutfile rm *

<pre> 부분 내부에서도 Hyperlink가 사용될 수 있다. 하지만 이러한 일은

피하는 것이 좋다. 또한 <, >, & 는 <PRE> tag 안에서도 여전히 특별한 의 미를 나타내므로 이러한 문자를 사용하기 위해서는 <, >, &로서 나타내야 한다.

4 .2 .2 인용 < B L O C K Q U O T E >

인용문을 사용할 경우에는 <blockquote> tag를 사용한다. 대부분의 웹 브 라우저에서는 이러한 경우에 주변의 다른 내용과는 구분이 될 수 있도록 들 여쓰기를 한다.

(35)

4. H T M L 활용 Ⅱ 3 3

[사용예]

I still have a dream. It is a dream deeply rooted in the American dream. <P>

I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal. <P>

</BLOCKQUOTE>

[출력]

I still have a dream. It is a dream deeply rooted in the American dream.

I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.

4 .2 .3 주소 < A D D R E S S >

<address> tag은 문서 작성자를 명시해주며, e-mail과 같은 방법을 사용하

여 타인들이 문서 작성자와 접촉할 수 있는 수단을 제공해주는 역할을 한 다. 이것은 일반적으로 그 파일의 맨 마지막에 나타나게 된다.

[사용예]

홈페이지 만들기 / Cyberland Co. / gang@phya.yonsei.ac.kr

</ADDRESS>

[출력]

/ Cyberland Co. / gang@phya.yonsei.ac.kr

주의: <address>는 우편물을 받을 때에 사용하는 주소를 나타내는 것이

아님. 우편물을 받을 때에 사용하는 주소를 어떻게 나타내는지에 대해서는

(36)

다음에 나올 줄바꾸기 항목을 보면 됨.

4 .2 .4 중앙정렬 < C E N T E R >

대부분의 브라우저들은 단락을 좌측정렬하게 되어 있다. Netscape에서는

<center> tag으로 둘러싸인 단락들을 중앙정렬하게 된다.

[사용예]

<CENTER> tag을 사용한 이 문장은 가운데로 정렬되어 나 타나게 됩니다.

</CENTER>

[출력]

<CENTER> tag을 사용한 이 문장은 가운데로 정렬되어 나타나게 됩니다.

4.3 T A B L E

table은 표작성에 사용된다. 현재 Netscape를 제외한 다른 브라우저에서는 제대로 지원되지 않을 수 있다.

table은 <table> ... </table>로 시작과 끝을 알리며, <tr>은 하나의 행을 나

타낸다. <th>는 각 행과 열의 제목을, 그리고<td>는 각 셀의 내용을 나타낸

다. <th>와 <td>는 브라우저의 문자 속성에 그 차이가 있다. 한편, </tr>,

</th>, </td>는 생략될 수 있다.

[사용예]

<tr><th>과목 <th>성적 <th>석차 <th>평가

<tr><th>영어 <td>90 <td>7/50 <td align=center>수

<tr><th>수학 <td>80 <td>12/50 <td align=center>우

</table>

(37)

4. H T M L 활용 Ⅱ 3 5

[출력]

과 목 성 적 석 차 평가 영 어 90 7/50 수 수 학 80 12/50 우

4 .4 Fram es

frame은 윈도우를 분할하여서 동시에 다른 문서들을 화면에 보여줄 수 있다. 그러나, frame은 Netscape 2.0 이상에서만 지원되므로 사용에 신중하여 야 한다. 기본 형태는 다음과 같다.

<HTML>

<HEAD>

</HEAD>

</FRAMESET>

</HTML>

<frame> tag의 SRC attribute에 사용된 url이 해당 frame의 내용으로 출력된 다. 실제 사용에 있어서는 <frameset> tag에 분할 방식을 지정하는 COLS와 ROWS attribute를 사용한다. 아래는 그 예들이다.

[사용예]

</frameset>

[출력]

Browser Window A.html의 내

용이 이 부 분에 나옴

B . h t m l 의 내용 이 이 부 분 에 나옴

C.html의 내용이 이 부분에 나옴

(38)

수직선으로 세등분한다. 좌측 frame은 윈도우 전체의 30%를 차지하며 A.html 문서가 들어가게 된다. 다음 B.html이 20%의 범위를 차지하며, 그 다 음 C.html이 들어간다.

[사용예]

</frameset>

[출력]

Browser Window A.html의 내용이 이 부분에 나옴 B.html의 내용이 이 부분에 나옴 C.html의 내용이 이 부분에 나옴

수평선으로 세등분되었다. *는 A와 B에서 사용된 50%를 제외한 나머지 모두에 해당한다. 즉 50%를 사용한 것과 동일하다.

[사용예]

</frameset>

(39)

4. H T M L 활용 Ⅱ 3 7

[출력]

Browser Window A . h t ml 의

내용이 이 부분에 나 옴

B.html의 내용이 이 부분에 나옴

C.html의 내용이 이 부분에 나옴

수직선으로 두 등분한 다음, 우측 80% 영역을 다시 수평선을 사용하여 상하로 분리한다.

위의 모든 예들은 frame을 지원하지 않는 브라우저들에서 아무것도 화면 에 나타나지 않는다. 이를 대비하기 위하여 <noframes> .. </noframes> 사이 에 frame이 지원되지 않는 브라우저에서 출력될 내용을 적어 넣는다.

4 .5 그 밖의 tag

4 .5 .1 < H R >

<hr> tag은 브라우저 폭에 맞는 수평 분할선을 그려준다. 몇가지의

attribute를 사용하여 모양을 바꿀 수 있다.

size는 pixel 단위로 수평선의 두께를 조절한다.

width는 좌우 폭을 결정한다. 뒤에 %가 붙으면 현재 윈도우 크기에 대한 상대적인 크기로 결정된다.

align은 좌우폭이 화면 보다 작을 경우, 수평선이 그려질 위치를 정한다.

noshade를 사용하면 그림자 선이 아닌 평범한 선으로 그려진다.

<< 사용팁 >> 그래피컬 H R

어떤 경우, 수평선 뿐만 아니라 부엉이나 몰래보는 눈과 같은 그림이 함 께 있는 분할선을 볼 수 있다. 이런 경우는 <hr>을 사용한 것이 아니라 그 러한 모습의 그림을 직접 넣어 준 것이다. 그런데, 이 경우 윈도우의 크기에 따라 그림이 너무 크거나 작을 수 있다. 이를 방지하기 위하여 다음 예와 같이 사용하면 된다.

[사용예] - 그림이 5x300 pixel 크기의 eye_bar.gif라는 파일인 경우

(40)

4 .5 .2 < W B R >

브라우저들은 단어들을 자르지 않는다. 그래서 우측이 제대로 정렬되지 않게 된다. 단어가 지나치게 길게 되면 화면의 출력이 보기에 껄끄러울 수 있다. 이런 경우 브라우저가 단어를 두 줄로 나누어 표시할 수 있도록 하여 준다.

4 .5 .3 < N O B R >

브라우저에 의하여 임의로 행바꿈이 일어나지 않도록 강제한다.

4 .5 .4 < !- - C om m en ts- - >

브라우저의 화면에 출력되지는 않고, HTML 소스 코드나 문서에 대한 주 석을 붙일 때 사용한다. 설명문은 그 안에서 중복(nested)될 수 없으며, 될 수 있으면 여러 줄에 걸치거나 특수 문자를 포함하지 않도록 하여야 한다.

[사용예]

(41)

4. H T M L 활용 Ⅱ 3 9

<< 실습 >>

HTML로 작성된 책의 목차를 만들어 보자.

[예] http://165.213.102.67/~hcchoi/home_make/ 의 소스 코드

<HTML>

<HEAD><TITLE>인터넷에서 내집 마련하기 </TITLE></HEAD>

<BODY>

<h2>인터넷에서 내집 마련하기</h2>

</center>

<HR>

<ul>

<li><a href="basic.html">사이버홈(CyberHome)을 위한 기초공사</a>

<ul>

</ul>

<UL>

<li><a href="interior.html#inter">인터레이스드(Interlaced) 이미지

만들기</a>

<li><a href="interior.html#icon">아이콘으로 치장하기</a>

</UL>

<li><a href="http:/ /165.213.101.23/~kiyoon/html/ref.html">HTML

Quick Reference</a>

</ul>

<hr>

자신만의 집을 마련하고픈 욕망은 보통 평범한 사람들에겐 커다란 소망이라고 할 수 있다. 그래서 주변에서 보면 조그마한 아파트라도

(42)

당첨된 사람들을 보게 되면 주변의 부러움과 함께, 어느 정도는 만족스러워하는 표정을 짓는 것을 흔히 볼 수 있다. 이와 같은 내집 마련의 꿈이 이제는 현실세계를 넘어서서 흔히들 이야기하는

사이버스페이스, 즉 가상의 세계로까지 번져가고 있다. 자신의 집을 소유하고픈 욕망은 현실이나 가상이나를 떠나서 인간의 본능에 속하는 영역과 같이 느껴진다. 이러한 가상 세계에서의 집(CyberHome), 즉 웹(web)에서의 자신만의 홈페이지를 만드는 방법에 대해서 알아보기로 한다.

<hr>

</address>

</html>

(43)

제 5 장 C G I

학 습 목 표

☞ C G I와 F ill o u t fo rm 의 관계를 통하여 그

개념을 익힌 다.

☞ F ill o u t fo rm 문 서를 작성 하여 C G I 활용을

실습한 다.

(44)

5. CGI

5.1 C G I와 F ill-O u t F o rm

CGI는 Common Gateway Interface의 약자이다. CGI의 목적은 웹을 통하여 바로 제공할 수 없는 자료를 제공할 수 있는 방법을 위한 것이며, 홈페이지 를 작성하기 위해서 꼭 CGI를 사용할 필요가 있는 것은 아니다. HTML 문 서만으로도 충분한 정보를 제공할 수 있다. 그러나, 이는 Server에서 제공하 여야 할 막대한 Date Base가 있다면, 문제가 된다. 모든 자료들을 HTML 문 서로 코딩(coding)한다는 것은 무척 어려운 일이다. 이러한 자료를 웹을 통 하여 제공하기 위하여서는 일종의 인터페이스 프로그램이 필요하다. 이러한 프로그램을 사용하면, 서버가 가지고 있는 DB의 제공은 물론 사용자의 입 력을 다시 DB에 추가할 수 있다. CGI 프로그램의 대표적인 예는 search engin과 counter, 이미지 맵, 웹을 통해 구축된 BBS 등을 생각해 볼 수 있다.

다음은 CGI가 어떠한 형식으로 구현되는가를 보여준다.

<그림 5-1> CGI를 통한 자료 전송

사용자가 브라우저를 통하여 서버인 HTTPD에게 원하는 정보를 보내면, 서버는 사용자가 요청한 CGI 프로그램을 작동시켜 그 결과를 사용자에게 되돌려 준다. 물론 이때 CGI 프로그램은 사용자가 보내온 정보를 서버의 DB에 저장할 수도 있다. 이와 같이 CGI를 사용하여 동적인 웹 페이지를 구 축할 수 있다.

그러면, CGI는 어떻게 이루어 지는가를 보자. HTTP 1.0에서는 이러한 CGI를 지원하기 위하여 Fill Out Form을 규정한다. Fill Out Form은 HTML 문서의 한 형식으로서 브라우저의 사용자가 서버에 보낼 정보를 입력하는 형식을 만들어 준다. 다음은 간단한 Fill Out Form의 예이다.

(45)

5.C G I 4 3

주소 : <INPUT NAME="address" size=20>

내용 : <TEXTAREA NAME="cont" ROWS=3 COLS=30></TEXTAREA>

</FORM>

그리고 다음은 실제 화면에 나오는 내용이다.

주소 :

내용 :

저장 지우기

여기서 적절한 내용을 적어 넣은 다음, 저장(submit)을 선택하면 브라우저 는 사용자가 입력한 내용을 서버에게 보내게 된다.

그러면, 입력된 내용이 어떠한 방식으로 cgi에 전달되는 지를 보자.

<그림 5-2> CGI에서 자료가 전달되는 방식

CGI 프로그램으로 입력이 전달되는 방식은 위<그림 5-2>의 두가지 방식 이 있다. <FORM>에서 METHOD="GET"을 쓸 경우 모든 입력이 환경변수 (environment)로 전달된다. 입력된 내용은 QUERY_STRING이라는 환경변수 로 전달된다. 이때 각종 환경들(접속경로, 서버종류 등등)도 환경변수를 통 하여 전달된다.

브라우저에서는 사용자가 입력한 내용을 아래의 URL형식과 같이 전달한 다.

http:/ /phya.yonsei.ac.kr/cgi-bin/test-cgi?name1= 1&name2= 2

(46)

이때 환경변수 QUERY_STRING은 ′name1=내용1&name2=내용2′이 된다.

QUERY_STRING을 해석하는 역할 은 cgi 프로그램이 맡는다. 이에 관련한 perl, c 등의 라이브러리를 구할 수도 있다.

METHOD="POST"를 상용한 경우에는 ′name1=내용1&name2=내용2′이 environment가 아닌 표준입력(standard input)으로 입력된다. environment로 내 용을 전달하는 방법은 입력 길이의 한계가 있다. 따라서 Textarea와 같은 많 은 정보를 입력하는 tag을 사용할 경우 POST 방식이 필수적이다. 아주 간단 한 경우가 아니면 POST방식을 사용할 것을 권고하고 있다. post 방식에서는 표준입력을 읽어들여 그 내용을 해석해야 한다.

5.2 F ill O u t F orm 에서 사용되는 T ag

5 .2 .1 < F O R M >

CGI를 작동시키기 위하여 몇가지 tag들을 사용한다. 위의 예에서 보았듯 이 이러한 tag들은 모두 <form method=... action=...> ... </form>이라는 tag 안 에 있어야 한다.

<form>에서는 METHOD와 ACTION attribute를 지정하여야 한다.

METHOD는 GET이거나 POST 둘 중 하나이어야 한다. ACTION은 실행될 CGI 프로그램의 URL이다. 한 문서 내에서 둘 이상의 form이 사용될 경우 사용자가 구분할 수 있도록 <hr> 등으로 나누어 구분하여야 한다.

5 .2 .2 < IN P U T >

<input> tag은 브라우저가 서버에 보내게 될 내용이 적혀질 곳이다. 여기 서는 TYPE, NAME, VALUE attribute가 사용된다.

TYPE이 지정되지 않을 경우 "text"가 기본값이 된다. 아래에 TYPE으로 지정될 수 있는 것들이 나열되어 있다.

text 일반 텍스트를 입력할 수 있다

password 입력된 문자들이 ′*′로 나타나는 점을 제외하면 text와 동일하다 checkbox on/off의 선택이 checkbox에 표시된다

radio 몇개의 동일한 NAME을 가진 것들 중 하나를 선택한다 submit 입력된 내용을 URL에 해당하는 CGI 프로그램으로 보낸다 reset 재입력할 수 있도록 이미 입력된 내용을 지운다

file Form-base File Upload in HTML (RFC #1867) binary file 전송에 사용된다. 단 이때

(47)

5.C G I 4 5

의 형태로 form tag을 사용하여야 한다. 다음 문서들을 참고 http://www.ics .uci.edu/pub/ietf/html/r fc1867.txt

http://www.netscape.com/as sis t/net_sites/html_extensions_3.html http://140.114.63.14:6083/doc/

http://www- genome.wi.mit.edu/ftp/distr ibution/s oftware/ WWW/more_examples/

NAME attribute는 항상 사용되어야 하며, VALUE attribute는 사용될 경우 초기값으로 설정된다. input tag의 file type은 Netscape 2.0beta 이상에서만 지 원된다.

5 .2 .3 < S E L E C T >

<select> tag은 스크롤 메뉴중에서 하나의 value를 선택할 수 있게 한다.

[사용예]

<OPTION>First option.

<OPTION>Second option.

</SELECT>

5 .2 .4 < T E X T A R E A >

여러줄로 이루어진 문장을 입력할 수 있다. COLS와 ROWS attribute를 사 용하여 화면에 나타날 크기를 결정한다.

[사용예]

(48)

좋은 문서 작성 습관

학 습 목 표

☞ H T M L 문서 작성시 지 켜야 할 에티 켓을

익 힌다.

(49)

6. 좋은 문서 작성 습관 47

6. 좋은 문서 작성 습관

현재 자신이 사용하는 브라우저에서는 잘 작동하지만, 다른 브라우저와 의 호환성이나, 앞으로의 변화에 대하여 문제를 일으킬 수 있는 사용법들은 자제하는 것이 좋다. 몇몇 특수한 효과를 내기 위하여 사용하는 변칙적인 방법들이 역효과를 가져 올 수 있다는 점을 주의하여야 한다. 아래에 주의 해야할 몇 가지가 나열되어 있다.

- tag끼리의 겹침을 피하라

아래의 HTML을 한번 살펴보기로 하면 :

<B>This is an example of <DFN>overlapping</B>HTML tags.</DFN>

"overlapping" 이라는 단어가<B> 와 <DFN> tag 사이에 포함되어 있는 것 을 볼 수 있다. 브라우저에서는 이것을 어떻게 나타내게 될 지 브라우저를 통하여 그것을 보기 전에는 알 수가 없다. 그리고 서로 다른 브라우저에서 는 각각 달리 그에 따른 반응을 보일 것이다. 일반적인 경우에 tag 를 중첩 사용하는 것은 피하는 것이 좋다.

- 삽입된 앵커와 문자 tag

다른 HTML 요소간에 앵커를 삽입하는 것이 가능하다.

<H1><A HREF = "Destination.html">My heading</A></H1>

그러나 앵커 안에는 머릿글과 같은 다른 HTML 요소를 삽입하지 않는 것 이 권장된다.

<H1>My heading</H1>

</A>

비록 대부분의 브라우저들이 위와 같은 예제를 제대로 처리하지만, 공식 적인 HTML과 HTML+ 사양에서는 이러한 것들이 명시되어 있지 않다. 그리 고 향후의 브라우저에서는 이것들에 대하여 제대로 작동하지 않을 수도 있 다.

- 문자 tag들은 다른 tag들이 나타내는 모양에 대하여 영향을 미친다.

<UL>

<LI><I>An italic list item</I>

</UL>

어쨌든 간에 서로 다른 HTML tag들끼리 삽입되는 것은 피하는 것이 좋 다. 예를 들어, 리스트 안에서 글자크기를 크게 하기 위해서 머릿글 tag을 사용한다고 하면 :