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 )
ExampleHeader 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 bolditalic
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 ###
이 갖는 속성에는 "border","cellspacing","cellpadding","width","height"
등이 있다.
-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
border 테이블의 테두리 두께를 결정한다.
cellspacing 각 셀간의 간격을 결정한다.
cellpadding 각 셀의 테두리와 그 안의 데이타 사이의 거리를 나타낸다.
width 넓이를 나타내며 여기서는 테리블의 가로길이를 나타낸다.
height 높이란 뜻의 이 속성은 말그대로 테이블의 세로길이를 나타낸다.
-------------------------------------------------------------------------------
모든 테이블에는 그 테이블의 이름이 있다. 바로
이란 태그를 사용하면 된
다. 이 태그는 다음과 같은 속성을 갖는다.
-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
align 제목을 붙일 위치를 결정한다.
이것은 "top","bottom" 두가지의 값을 갖을 수 있다.
top : 테이블의 윗부분에 제목을 붙인다.(Default)
bottom : 테이블의 아랫부분에 제목을 붙인다.
-------------------------------------------------------------------------------
Example )
table example1
good morning
● tr
테이블의 가로를 채울때는
이란 태그를 사용한다. 여기서
이란 Table Row
를 나타내는 것이다. 이 태그의 속성은 다음과 같다.
-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
align 수평상의 정렬방법을 나타낸다. 이것은 "left","center or middle",
"right" 세가지의 값을 갖을 수 있다. 각각의 값은 그 의미와 같이
정렬을 하게 하는 것이다.
vlign 수직상의 정렬방법을 나타낸다. 이것은 "top","middle","bottom",
"baseline"의 네가지의 값을 갖을 수 있다. 이것 역시 그 의미와
같이 정렬을 하게 한다.
-------------------------------------------------------------------------------
● th
가로줄의 시작은
이다.
란 Table Header를 나타내는 말이다.
이 태그의 속성은 다음과 같다.
-------------------------------------------------------------------------------
속성 하는일
-------------------------------------------------------------------------------
align 수평상의 정렬방법을 나타낸다. 기본값은 "center"이나
에서
지정된 값을 기본값으로 지정한다.
vlign 수직상의 정렬방법을 나타낸다. 기본값은 "middle"이나 이 역시
에서 지정된 값을 기본값으로 지정한다.
nowrap 테이블를 만들때 보통 줄이 길면 다음줄로 자동으로 넘어가게 되는
데, 이 속성은 이를 방지한다. 즉 줄이 아무리 길더라도 줄을 바꾸
지 못하게 한다.
colspan 세로줄을 나누는 기능을 한다. 기본값은 "1"로 설정되어 있다.
rowspan 가로줄을 나누는 기증을 한다. 기본값은 역시 "1"이다.
width 테이블의 셀의 가로길이를 결정한다. 이것은 백분율로도 표시할 수
있는데 이 경우에는 전체 테이블의 가로길이를 기준으로 해서 맞추
게 된다.
height 테이블의 셀의 세로길이를 결정한다. 이것 역시 백분율로도 표시할
수 있는데 이 경우에는 전체 테이블의 세로길이를 기준으로 해서
맞추게 된다.
-------------------------------------------------------------------------------
Example )
table example2
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
※.프레임 만들기
프레임은 하나의 윈도우에 여러개의 윈도우를 만드는데 사용이 된다.
우선 프레임을 만들기 위해선 태그가 필요한데
