HTML

Axil S/E kdk021
1997. 4. 16
Kim Do Kyung

SUBJECT: HTML

DESCRIPTION:

★ HTML

※.기본 태그 익히기

● html

태그는 해당문서가 웹문서임을 브라우저에게 알려준다. 하지만, 이것은 꼭
필요한 것은 아니다.

● head/title

와 은 브라우저 윈도우의 캡션 영역에 글을 표시하기 위해 사용한다.
이것들을 이용하여 문서의 제목따위를 표시한다.

● body

<head>와 <title> 윈도우를 제어하는 태그다. 이것이 품고 있는 글과 태그들이 곧
윈도우에 표시된다.

-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
background 배경으로 사용될 그림을 URL로 지정해 준다. 타일형태로 출력.

bgcolor 배경의 색상을 지정해 준다. 색의 표시는 "#"표시와 함께 RGB(Hex)
로 표시된다.

text 텍스트의 색상을 지정해 준다. (Default: Black)

link Link 할 수 있는 URL의 색상을 지정한다. (Default: BLUE)

vlink 이미 접속해 본 URL Link의 색상을 지정한다.(Default: purple)

alink URL Link를 누르는 순간의 색상을 지정해 준다. (Default: Red)
-------------------------------------------------------------------------------

● h1, h2, h3, h4, h5, h6

문서의 글자 크기를 조절할 수 있다. <h1>이 가장 큰 글자를 출력하며, <h6>은 가장
작은 글자를 출력한다.

Example )

<html>
<head>
<title>Example

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

● ol/ul

과 은 어떤 목록을 표시하기 위해 사용된다. 둘 차이점은 ol은 목록의 앞에
일련 번호를 표시함에 반해, 은 일련번호 대신에 특정 불릿 문자를 표시한다.
이 태그들과 더불어 쓰이는 것으로 와 가 있다. 는 아이템 목록들의
제목을
는 아이템을 표시한다. 이때 는 생략 가능하다.

Example )

Example

Header 1
item 1-1

item 1-2

Sub Header
item 1-3-1

item 1-3-2

item 1-3-3

item 1-4

● dl/dt/dd

어떤 것을 정의할 때 사용한다. 예를 들어 xv를 정의한다면 xv를 가 감싸고,
그것의 정의는
가 감싼다. 그리고, 이들 모두를 이 감싼다. 아래 예제의
결과에서 부분이 들여 써진 것에 주목하라.

Example )

Example

xv

It is a X-windows application for view,
image processing, and grabbing.

● br

브라우저는 문서상의 CR/LF를 무시한다. 따라서, 아무리 줄간을 띄운다고 엔터를
쳐도 브라우저를 통해 보면 소용이 없다. 이때,
태그를 사용하면, 간단히 해결 된다.

Example )

Example

line1....
line2???...

line2!

line5!!

● p

이것은 컨테이너 태그로 동작할 때는 문단의 모양을 결정하고, 그렇지 않을 때는
단순히 문단을 나누는 역활을 한다.
과의 차이점은
은 여러번 연속 적용할
수 있는것에 반해 이것은 연속 사용은 한번 사용한것과 똑같다. 즉, 한 개 이상의
의미는 없다. 아래 비 컨테이너 태그로 동작하는 예가 있다.

Example )

Example

The lastest version of XV is availabe via anonymo
us ftp on ftp.cis.upenn.edu, in the direc pub/xv

The lastest version of XV is availabe via anonymo
us ftp on ftp.cis.upenn.edu, in the direc pub/xv

The lastest version of XV is availabe via anonymo
us ftp on ftp.cis.upenn.edu, in the direc pub/xv

The lastest version of XV is availabe via anonymo
us ftp on ftp.cis.upenn.edu, in the direc pub/xv

문단을 정렬할 수 도 있다. 아래에 컨테이너 태그로서 동작하는 보기가 있다.

Example )

Example

The lastest version of XV is availabe via anonymo
us ftp on ftp.cis.upenn.edu, in the direc pub/xv

The lastest version of XV is availabe via anonymo
us ftp on ftp.cis.upenn.edu, in the direc pub/xv

The lastest version of XV is availabe via anonymo
us ftp on ftp.cis.upenn.edu, in the direc pub/xv

● i/b/pre

글자에 장식을 주기 위한 태그이다.
는 Italic(기울임), 는 Bold(두꺼운), 는 PREformed,입력된 문서 그대로
보여준다. 위에서 브라우저는 엔터키를 많이 쳐도 그것을 무시한다고 했다. 하지
만, 태그가 감싸고 있는 것들은 그대로 출력된다.

Example )

Example

normal bold italic
line1
line2
line3
line4
line5

● hr

문서에 선을 넣는 태그이다. 이것은 브라우저의 폭에 따라 함께 자동으로 폭이 변한
다.

Example )

Example

※. 이미지 삽입하기

● img

HTML문서에 이미지를 넣을 수 있는 태그이다. 이 태그가 갖고 있는 속성은 다음과
같다.

-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
src 그림화일이 있는 곳을 URL로 지정한다. 네트워크에 연결되어있는 다
른 컴퓨터의 그림화일도 지정이 가능한 것이다.

alt 여러 브라우저 중에서 image출력을 지원하지 않는 브라우저들을 위해
그림 대신에 출력할 텍스트를 지정해 주는 것이다. 브라우저를 사용
해본 사람이라면 전송중에 중지되었을때 그림 대신에 텍스트가 출력
되는 것을 보았을 것이다. 바로 이 속성에서 그러한 텍스트를 지정해
주는 것이다.

align 글자의 위치를 지정해 준다. left,right,top,bottom,middle등의 값을
갖을 수 있다. 각각은 말 그대로의 위치를 나타내는 것이다.

width 넣을 그림의 가로크기를 지정하는 것이다. 원래의 그림의 크기와 다
르게 확대/축소 할 수 있다. 이것과 height를 지정함으로써 브라우
저는 그림이 표시될 영역을 비워둔채 우선적으로 텍스트를 출력한다.
따라서 그림을 제외한 나머지 부분을 빨리 볼 수 있다. 지정은 픽셀
크기로 지정이 가능하다.

height 넣을 그림의 세로크기를 지정하는 것이다. 이것 역시 원래 그림의 크
기와 다르게 확대/축소 할 수 있다.

border 그림주위에 테두리를 형성하게 한다.

vspace 그림 위,아래의 공백을 지정하는 것이다. 픽셀크기로 지정한다.

hspace 그림 좌,우의 공백을 지정하는 것이다. 픽셀크기로 지정한다.
-------------------------------------------------------------------------------

Example )

image example2

SLAMDUNK image.

배경과 색상에 대해 알아보기로 하자. 배경과 색상에 관해서는 태그에서 지
정해줄 수 있다. 자세한 것은 태그를 참고하기 바란다.
그럼 이번엔 배경으로 image를 깔아보고 글씨 색깔은 흰색으로 바꿔 보자.

Example )

image example4

SLAMDUNK

※.URL 링크 하기
● a

하이퍼텍스트 링크를 위한 태그이다.

파란색으로 될 내용

일반적으로 하이퍼텍스트 링크는 파란색 글자로 나타나게 된다. 그 글자를 마우스로
클릭하면 주소로 연결된 정보를 가져올 수 있다. 그리고 한번 방문한 링크는 색이
변하게 된다. 이는 방문한 장소와 그렇지 못한 장소를 구별해 준다.
여기서 주소(Uniformed Resource Locator or Uniformed Resource Indicator)는 일
정한 형식을 따라야 한다. 주소의 형식은 다음과 같다.

인터넷 서비스://호스트 이름/경로/파일 이름

인터넷 서비스 : 여러가지의 인터넷 서비스가 있으나 주로 사용하고 우리가 다루고
자 하는 것은 하이퍼 텍스트 전송 프로토콜을 의미하는 http이다.
그 밖에 ftp.telnet,news,gopher등이 있다.
호스트 이름 : 링크의 대상이 되는 호스트 이름(정확히 말하면 호스트.도메인 이다)
경로와 파일 이름 : 링크하고자 하는 파일 이름과 그 파일의 경로

Example ) ### a.html ###

이것은 링크 문서입니다...

### b.html ###

링크 테스트

HTML문서상에선 어떠한 특정 위치로 연결을 할 수 있는데, 그 지점을 target이라
한다. 이렇게 하기 위해선 두가지 과정이 필요하다. 하나는 target에 이름을 부여
하는 것이고, 다른 하나는 그곳과 연결하는 것이다.
이와 연결하기위해서는 주소대신에 #target이름을 써주면 된다. 단지 #을 추가 하
는것 뿐이다.

제품 소개
.
.
여기는 제품을 소개하는 란입니다.
.
.

※.테이블 만들기

● table

그럼 이제 HTML을 이용하여 TABLE을 만들어 보자.
TABLE을 만들때 쓰는 태그는 이다.
이 갖는 속성에는 "border","cellspacing","cellpadding","width","height"
등이 있다.

-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
border 테이블의 테두리 두께를 결정한다.

cellspacing 각 셀간의 간격을 결정한다.

cellpadding 각 셀의 테두리와 그 안의 데이타 사이의 거리를 나타낸다.

width 넓이를 나타내며 여기서는 테리블의 가로길이를 나타낸다.

height 높이란 뜻의 이 속성은 말그대로 테이블의 세로길이를 나타낸다.
-------------------------------------------------------------------------------

모든 테이블에는 그 테이블의 이름이 있다. 바로 이란 태그를 사용한다. 여기서 이란 Table Row
를 나타내는 것이다. 이 태그의 속성은 다음과 같다.

-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
align 수평상의 정렬방법을 나타낸다. 이것은 "left","center or middle",
"right" 세가지의 값을 갖을 수 있다. 각각의 값은 그 의미와 같이
정렬을 하게 하는 것이다.
vlign 수직상의 정렬방법을 나타낸다. 이것은 "top","middle","bottom",
"baseline"의 네가지의 값을 갖을 수 있다. 이것 역시 그 의미와
같이 정렬을 하게 한다.
-------------------------------------------------------------------------------

● th
가로줄의 시작은 에서
지정된 값을 기본값으로 지정한다.

vlign 수직상의 정렬방법을 나타낸다. 기본값은 "middle"이나 이 역시
에서 지정된 값을 기본값으로 지정한다.

nowrap 테이블를 만들때 보통 줄이 길면 다음줄로 자동으로 넘어가게 되는
데, 이 속성은 이를 방지한다. 즉 줄이 아무리 길더라도 줄을 바꾸
지 못하게 한다.

colspan 세로줄을 나누는 기능을 한다. 기본값은 "1"로 설정되어 있다.

rowspan 가로줄을 나누는 기증을 한다. 기본값은 역시 "1"이다.

width 테이블의 셀의 가로길이를 결정한다. 이것은 백분율로도 표시할 수
있는데 이 경우에는 전체 테이블의 가로길이를 기준으로 해서 맞추
게 된다.

height 테이블의 셀의 세로길이를 결정한다. 이것 역시 백분율로도 표시할
수 있는데 이 경우에는 전체 테이블의 세로길이를 기준으로 해서
맞추게 된다.
-------------------------------------------------------------------------------

Example )
table example2 이란 태그를 사용하면 된
다. 이 태그는 다음과 같은 속성을 갖는다.

-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
align 제목을 붙일 위치를 결정한다.
이것은 "top","bottom" 두가지의 값을 갖을 수 있다.
top : 테이블의 윗부분에 제목을 붙인다.(Default)
bottom : 테이블의 아랫부분에 제목을 붙인다.
-------------------------------------------------------------------------------

Example )

table example1

good morning

● tr

테이블의 가로를 채울때는
이다. 란 Table Header를 나타내는 말이다.
이 태그의 속성은 다음과 같다.

-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
align 수평상의 정렬방법을 나타낸다. 기본값은 "center"이나

Hi! there..
T.G. J.S. B.L. T.H.

● td

테이블안의 칸을 채우는데는 라는 태그를 사용한다. 는 Table Data를 나타
내는 말이다. 이것 역시 속성을 갖고 있는데 그 속성은 다음과 같다.

-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
align 수평상의 정렬방법을 나타낸다. 기본값은 "left"이나 에서
지정된 값을 기본값으로 지정한다. 기본값이 "left"임에 유의하라.

vlign 수직상의 정렬방법을 나타낸다. 기본값은 "middle"이나 이 역시
에서 지정된 값을 기본값으로 지정한다.

nowrap 테이블을 만들때 보통 줄이 길면 다음줄로 자동으로 넘어가게 되는
데 이 속성은 이를 방지한다. 즉 줄이 아무리 길더라도 줄을 바꾸
지 못하게 한다.

colspan 세로줄을 나누는 기능을 한다. 기본값은 "1"로 설정되어 있다.

rowspan 가로줄을 나누는 기능을 한다. 기본값은 역시 "1"이다.

width 테이블의 칸의 가로길이를 결정한다. 이것은 백분율로도 표시할 수
있는데 이 경우에는 전체 테이블의 가로길이를 기준으로 해서 맞추
게 된다.

height 테이블의 셀의 세로길이를 결정한다. 이것 역시 백분율로도 표시할
수 있는데, 이 경우에는 전체 테이블의 세로길이를 기준으로 해서
맞추게 된다.
-------------------------------------------------------------------------------

Example )

table example3

Hi!there..
T.G. J.S. B.L. T.H.
Tough Guy Joshua
BepLee TaeHoon

● 만약 테이블의 어떤 셀을 빈칸으로 남겨두어야 할 경우에는 어떻게 해야 할까?
다음과 같이하면 된다.

Example )

table example4

Hi!there..
T.G. J.S. B.L. T.H.
Tough Guy

BepLee TaeHoon

● 그러면 빈 칸을 나타낼때 마다 위와 같이 해 주어야 하는것인가? 물론 아니다.
다른 방법이 있다. 바로 " "를 쓰거나
태그를 사용하면 된다.

Example )

table example5

Hi!there..
T.G. J.S. B.L. T.H.
Tough Guy
BepLee TaeHoon

Example )

table example6

Hi!there..
T.G. J.S. B.L. T.H.
Tough Guy

BepLee TaeHoon

● 칸 나누기

Example )

table example7

Hi! there..
T.G.
J.S. B.L. T.H.
Tough Guy Hansome Joshua
BepLee TaeHoon

Example )

table example8

Hi!there..
PEOPLE
T.G. J.S.
B.L. T.H.
Tough Guy
Joshua
BepLee TaeHoon

※.프레임 만들기

프레임은 하나의 윈도우에 여러개의 윈도우를 만드는데 사용이 된다.
우선 프레임을 만들기 위해선 태그가 필요한데 과 등
의 태그가 있다.

● frameset

프레임을 만들어주는 태그로써 행과 열의 프레임 개수를 지정한다. 이 태그안에는
, 태그가 올 수 있다.
내용 2열의 프레임을 만든다.
이때 퍼센트가 아닌 픽셀로 줄 수 있다. *은 지정하고 남은 나머지영역을 뜻한다.
내용
위의 것은 3열로 나누고, 첫번째 열은 30픽셀, 세번째열은 70픽셀이다. 두번째열은
그 나머지가 된다.

● frame

으로 만들어진 각각의 프레임에 대해 속성을 지정한다.

-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
src 프레임에 들어올 HTML 문서를 가리킨다.
name 프레임의 이름을 지정한다.
marginewidth 세로 마진을 지정한다.
margineheight 가로 마진을 지정한다.
scolling 스크롤속성을 결정한다.
noresize 프레임의 크기를 변경여부를 결정한다.
-------------------------------------------------------------------------------

noframe
프레임을 지원하지 않는 브라우저를 위한 태그이다.

Example )

Frame Tag

먼저 2열로 프레임을 나눈다음, 오른쪽 프레임을 다시 2행으로 나눈것이다. 여기서
왼쪽의 링크를 눌러보면 그 프레임 윈도우에 링크된 파일이 출력이 된다.

● 링크된 파일을 다른 프레임으로 보내서 출력하기

Example )

### index.html ###

Frame Tag

### right_top.html ###

Clink Here...

링크된 문서를 target에 지정된 프레임 윈도우에 보여준다.

● 링크된 파일을 루트윈도우에 보내서 출력하기

Example )

index.html은 위와 동일.

### right_top.html ###

Clink Here...

링크된 문서를 루트윈도우에 보여준다.

● 링크된 파일을 새로운 네비게이터 윈도우에 보내서 출력하기

Example )

index.html은 위와 동일.

### right_top.html ###

Clink Here...

링크된 문서를 새로운 네비게이터 윈도우에 보여준다.

※ CGI와의 연결을 위한 FORM TAG

● form

내용 의 형식으로 지정한다.

-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
action 실행될 QUERY_SERVER의 URL에 해당되며, 명시하지 않으면 현재 문서
의 URL이 된다.

method GET과 POST가 있고, POST사용을 권한다. GET의 사용시 발생되는 문
제점은 대부분 환경변수를 통해서 정보를 전달하는데서 일어난다.
UNIX SHELL에서는 한번에 처리할 수 있는 문자의 수에 한계가 있다.
이것은 GET을 사용하여 길이가 긴 문자열을 보내게 되면 이 중의 일
부분를 잃어버릴 수 있다는 것을 의미한다. 하지만, POST는 보내는
정보의 길이에 한계가 없다.
-------------------------------------------------------------------------------

● input

의 형식으로 입력을 받는다.

-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
type text,passwd,checkbox,radio,hidden,submit,reset을 쓸 수 있다.
text : 문자 입력
passwd : 문자를 입력받고 "*"를 화면에 보여준다.
checkbox : toggle 버튼으로 두개 이상을 선택할 수 있다.
radio : toggle 버튼으로 두개 이상을 선택할 수 없다.
hidden : 실제 화면에 보여지지는 않지만 QUERY_URL에는 Parameter
값으로 넘겨 주어야 할 경우에 사용한다.
submit : 현재 FORM의 QUERY_URL이 실행된다.
reset : 현재 입력된 값이 초기화 된다.

name QUERY_URL에 넘겨줄 Parameter명이 된다.

value QUERY_URL에 넘겨줄 Parameter의 값이 된다.

value checkbox 혹은 radio 버튼이 Default값으로 선택되어 있음을 보여줌

size INPUT FIELD의 실제 윈도우에 보여지는 크기를 지정

maxlength INPUT FIELD의 실제 받아드릴 수 있는 최대 크기를 명시
-------------------------------------------------------------------------------

● select