HTML &JAVASCRIPT
(1) HTML의 개념 - hypertext markup language의 약자 - 월드 와이드 웹에서 하이퍼텍스트 문서를 만들기 위한 기본언어 1) HTML의 특징 - HTML문서의 골격은 태그의 쌍으로 구성된다. <태그이름>문서의 내용</태그이름> - 태그 중에는 <BR>, <IMG>처럼 종료 태그가 없는 경우도 있다. - 태그는 대소문자를 구분하지 않는다. (2) HTML의 기본 구조 및 태그 1) 태그구조 : HTML의 기본 구조를 이루는 태그 <HTML> <HEAD> 문서정보 </HEAD> <BODY> 실제로 표시되는 문서의 내용 </BODY> </HTML> <HTML> ~ </HTML>: HTML로 작성된 것을 표시, HTML의 시작을 의미. <HEAD> ~ </HEAD> : 문서정보 기술, 문서 전체에 영향을 미치는 내용으로 화면에는 출력되지 않음. <BODY> ~ </BODY> : 실질적인 웹 페이지 내용 삽입, 이 태그 안의 내용은 모두 화면에 출력 됨. 2) <HEAD>내 태그 <TITLE> : 홈페이지의 제목을 설정하는 것으로 브라우저의 제목 표시줄에 표시된다. <STYLE> : 웹 페이지에 서식을 적용시키는 태그로 서식을 설정하는 스타일 시트를 정의한다. <SCRIPT> : Javascript나 Vbscript와 같은 스크립트 언어를 사용하고자 할 때 사용한다.
3) <BODY > 옵션 bgcolor : 배경색을 지정 background : 배경그림을 지정. 배경그림이 지정되면 스타일을 지정하지 않는 한 배경색은 나타나지 않는다. link : 하이퍼링크 된 문자나 그림 테두리의 색을 지정. 기본 색은 파란색 text : 기본 문자색을 지정한다. 기본 색은 검은색 vlink : 이미 본 페이지의 하이퍼링크 된 곳의 색을 지정. 기본 색은 보라색 alink : 마우스로 클릭동작을 행할 때의 색을 지정. 기본 색은 빨간색 topmargin : 전체 화면의 위쪽 여백을 설정 leftmargin : 전체 화면의 좌측 여백을 설정 onload : 문서가 다 로드 되었을 때 처리되는 스크립트를 지정 (3) 도큐먼트 1) <TITLE> 홈페이지의 제목을 설정하는 것으로 브라우저의 제목 표시줄에 표시된다. 브라우저의 즐겨 찾기에 추가 시 홈페이지의 제목으로 이름이 지정된다. Source 실행화면 <HTML> <HEAD> <TITLE> 홍길동의 홈페이지</TITLE> </HEAD> <BODY> Hello! </BODY> </HTML>
2) 코멘트(주석문) 홈페이지 소스가 복잡할 경우 설명이 필요한 부분에 주석을 삽입한다. 주석을 사용하면 홈페이지의 수정이 용이 하다. <!-- 로 시작하여 -->로 끝난다. 주석처리 된 것은 홈페이지에 나타나지 않는다. Source 실행화면 <BODY> <!--강좌 오픈 알림 메시지--> 홈페이지 강좌를 시작했습니다. </BODY>
(1) 페이지 - 실질적인 홈페이지의 내용이 삽입되는 부분이다 (1) 페이지 - 실질적인 홈페이지의 내용이 삽입되는 부분이다. - <BODY>태그에서 사용되는 속성들은 본문 전체에 영향을 미친다. - <BODY>태그 옵션으로 배경이나 텍스트, 링크를 표시하는 부분의 색을 각각 지정할 수 있다. 1) 배경색 지정 <BODY BGCOLOR=”color”>~</BODY> color=#RRGGBB 또는 colorname <BODY>태그를 이용하여 페이지의 배경색을 지정한다. 색 지정에는 6자리 16진수 표기 앞에 #을 붙이거나 색 이름을 입력한다. 예) <body bgcolor=”#0000FF”> : 배경색이 파란색으로 지정된다. ※ 아래의 소스를 메모장에 입력하고 ‘파일이름.HTML’로 저장하여 익스플로러로 실행하여 보시기 바랍니다. Source 실행화면 <HTML> <HEAD> <TITLE>홍길동의 홈페이지</TITLE> </HEAD> <BODY bgcolor="#0000FF"> <font color="white"> 배경색을 파란색으로...</font> </BODY> </HTML>
2)<BODY>태그를 이용하여 페이지의 텍스트 색을 지정한다. <BODY TEXT=”color”>~</BODY> : 표준 텍스트 색 <BODY LINK=”color”>~</BODY> : 링크 부분의 색 <BODY ALINK=”color”>~</BODY> : 링크를 클릭한 순간부터 데이터를 읽어오고 있는 도중의 색 <BODY VLINK=”color”>~</BODY> : 이미 읽어온 페이지 링크 부분의 색(Visited Link) color=#RRGGBB 또는 colorname ① 텍스트나 링크를 표시하는 부분의 색을 지정하는 태그이다. 예) <body bgcolor="white" text="black" link="blue" vlink="gray" alink="red"> : 배경색은 흰색, 기본텍스트는 검정색, 링크된 텍스트는 파란색, 링크된 텍스트를 클릭했을 때의 색상은 빨강색, 방문한 링크 텍스트는 회색으로 지정 Source 실행화면 <html> <head><title>홍길동의 홈페이지</title></head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#808080" alink="#ff00ff"> <p>표준 텍스트는 검정색으로<br> <a href="link1.html">링크되어 있으며 방문하지 않은 페이지는 파란색으로</a><br> <a href="link2.html">링크되어 있으며 이미 방문한 페이지는 회색으로</a> </p> </body> </html>
3)<BODY>태그를 이용하여 페이지의 배경 이미지를 지정한다. <BODY BACKGROUND =”이미지 파일명”> <BODY BACKGROUND =”이미지 파일명” BGPROPERTIES=FIXED> : 배경패턴 고정 읽어온 이미지는 연속적으로 타일 모양으로 표시된다. 배경이미지로만 지정될 뿐 body내의 텍스트 입력이나 표 삽입등에는 전혀 영향을 주지 않는다. BGPROPERTIES=FIXED를 함께 써주면 화면을 위아래로 오른쪽으로 스크롤 해도 배경 이미지는 고정된 채 움직이지 않는다. 예) <body background="flower.jpg"> : 페이지에 배경이미지를 flower.jpg로 지정 Source 실행화면 <html> <head> <title>홍길동의 홈페이지</title> </head> <body background="flower.jpg"></body> </html>
4) <BODY>태그를 이용하여 페이지 여백을 설정 한다. <BODY LEFTMARGIN=”num”>~</BODY> <BODY TOPMARGIN=”num”>~</BODY> num=픽셀수 페이지 전체에 걸쳐 왼쪽 혹은 위의 여백 폭을 설정한다. ② 디폴트 마진은 무효가 되고, 0을 지정하면 왼쪽(위)끝에 정렬된다. 예) <BODY LEFTMARGIN=”60” TOPMARGIN=”10”></BODY> Source 실행화면 <html> <head><title>홍길동의 홈페이지</title></head> <body leftmargin="60" topmargin="10"> <p>이 페이지 여백은 왼쪽 60픽셀, 위 10픽셀입니다.</p> </body> </html> 5) 가로선을 지정 한다. <HR option> option SIZE=”X” 선의 굵기(픽셀수) WIDTH=”X" 선의 길이(픽셀수나 %) ALIGN=”left" 정렬 방식(LEFT,RIGHT,CENTER) NOSHADE 그림자 없음
<title>홍길동의 홈페이지</title> </head> <body> ①문서의 중간에 수평선을 그어 문단을 분리시킨다. Source 실행화면 <html> <head> <title>홍길동의 홈페이지</title> </head> <body> 1. 속성 없이 사용할 때 <hr><p> 2. 수평선의 두께가 12일때 <hr size="12"><p> 3.그림자가 없을 때 <hr noshade><p> 4. 수평선 두께가 15이고 폭이 브라우저 화면의 50%, 왼쪽 정렬일 때 <hr size="15" width="50%" align=left><p> 5. 수평선 두께가 30이고, 폭이 100픽셀, 그림자가 없을 때 <hr size=30 width=100px noshade><p> </body> </html>
(1) 텍스트 1) <BR> 본문 중 텍스트의 줄 바꾸기를 한다. 이 태그는 시작 태그만 사용한다. Source에서 줄을 바꾸(‘바꾸기’ 다음)어도 브라우저에는 영향을 주지 않는다. Source 실행화면 <HTML> <HEAD><TITLE><br>태그 사용하기</TITLE> </HEAD> <BODY> 여기서<br>줄 바꾸기 합니다. </BODY> </HTML> 2) <P> 문서의 단락을 나눌 때 사용한다. 텍스트의 줄이 바뀌면서 한 줄을 띄운다 Source 실행화면 <HTML> <HEAD> <TITLE><p>태그 사용하기</TITLE> </HEAD> <BODY> 단락을 나눠보자.<p>단락이 나눠질 뿐 아니라 한 줄 띄어진다. </BODY> </HTML>
3) 행 정렬 <P ALIGN=”option”>~</P> option=left, center, right 단락(행)을 정렬할 때 사용한다. 왼쪽정렬, 중간정렬, 오른쪽정렬을 하며, 왼쪽정렬이 표준이다. Source 실행화면 <HTML> <HEAD> <TITLE><p align>태그 사용하기</TITLE> </HEAD> <BODY> <P ALIGN="left">좌로 정렬 <P ALIGN="center">중간 정렬 <P ALIGN="right">우로 정렬 </BODY> </HTML> <Hnum ALIGN=”option”>~</Hnum> num=1~6, option=left, center, right 행 정렬 위치를 설정 할 때 사용한다. ② Num에 문자크기를, 옵션에 위치(좌,우,중간)를 입력한다
Source 실행화면 <HTML> <HEAD> <TITLE> <Hnum align>태그 사용하기 </TITLE> </HEAD> <BODY> <H4 ALIGN="left">문자크기 4, 좌로 정렬</H4> <H5 ALIGN="center"> 문자크기 5, 중간정렬</H5> <H6 ALIGN="right"> 문자크기 6, 우로 정렬</H6> </BODY> </HTML> <DIV ALIGN=”option”>~</DIV> option=left, center, right <DIV>는 특정한 부분을 하나의 그룹으로 정의하는 태그로 문서를 논리적으로 분할한다. 분할된 한 문단에 스타일을 적용할 수 있다. (ID, LANG, CLASS, CLEAR, NOWRAP) ③ <DIV ALIGN>은 정렬 위치를 설정할 때 사용하며, ALIGN 생략 시 left로 지정된다.
Source 실행화면 <HTML> <HEAD> <TITLE><div align>태그 사용하기</TITLE> </HEAD> <BODY> <DIV ALIGN="left">DIV태그를 이용한 행 정렬<br> 왼쪽 정렬</DIV> <p> <DIV ALIGN="center">DIV태그를 이용한 행 정렬<br>가운데 정렬</DIV> </BODY> </HTML> <CENTER> ~ </CENTER> 문단을 가운데 정렬한다. 브라우저 폭에 맞춰 중심에 텍스트나 이미지가 표시된다. 중간에 다른 태그를 넣을 수도 있다. 4) <PRE> ① 문서에 나타나 있는 그대로의(present 현재의) 형태로 문단을 보고자 할 때 사용한다.
Source 실행화면 <HTML> <HEAD><TITLE><pre>태그 사용하기</TITLE> </HEAD><BODY> <PRE> 사 랑 사 랑 사 랑 사 랑 사 랑 사 랑 사 랑 사랑 </PRE> </BODY></HTML> 5) <XMP> ① 문서에 나타나 있는 그대로의 형태로 보여줄 때 사용한다. ② <PRE>와 다른 점은 HTML 태그까지 보여준다는 것이다. Source 실행화면 <HTML> <HEAD><TITLE><xmp>태그 사용하기</TITLE> </HEAD> <BODY> <XMP> <center>가운데 정렬</center> <h2>글자크기 2로 지정</h2> </XMP> </BODY> </HTML>
6) <MARQUEE> <MARQUEE option> ~ </MARQUEE> Option은 아래와 같다. 1. 위치에 관한 것 ㆍALIGN=TOP,MIDDLE,BOTTOM(문자열의 위치) ㆍHEIGHT=픽셀수나 %(문자열의 크기) ㆍWIDTH=픽셀수나 % ㆍHSPACE=픽셀수(문자열의 바깥 여백) ㆍVSPACE=픽셀수 3. 횟수와 시간에 관한 것 ㆍLOOP=num, -1(무한루프), INFINITE ㆍSCROLLDELAY=num : 다시 MARQUEE시킬 때까지의 초수 지정 ㆍSCROLLAMOUNT=num : 텍스트를 다시 MARQUEE시킬 때까지의 픽셀수 지정 2. 움직임에 관한 것 ㆍBEHAVIOR : 텍스트의 흘러가는 형식 - SCROLL : 텍스트가 흘러가다 사라진다. - SLIDE : 텍스트가 흘러가다 마지막에 멈춘다. - ALTERNATE : 텍스트가 양쪽 방향으로 왕복을 한다. ㆍDIRECTION : 텍스트의 흘러갈 방향으로 LEFT, RIGHT가 있다. 4. 색에 관한 것 ㆍBGCOLOR=#RRGGBB, colorname 홈페이지 내에서 텍스트가 어느 한 방향에서 반대 방향으로 흘러가는 동작을 연출한다. ② 익스플로러 전용 태그이다. Source <BODY> <MARQUEE ALIGN=TOP BEHAVIOR=SCROLL DIRECTION=RIGHT SCROLLDELAY=10 SCROLLAMOUNT=10 LOOP=-1>IT POSCO에 오신걸 환영합니다.</MARQUEE> </BODY>
(1) 폰트 1) <Hnum> 문서의 제목에 해당하는 문자열을 나타낼 때 주로 사용한다. Head의 약자로 H1 ~ H6까지 있다. H1이 가장 큰 글자이고, H6이 가장 작은 글자이다. 볼드체가 되며, 태그의 앞뒤는 강제적으로 줄이 바뀌어 스페이스가 들어간다. Source 실행화면 <HTML> <HEAD><TITLE><Hn>태그 사용하기</TITLE> </HEAD> <BODY> <H1>안녕하세요!</H1> <H2>안녕하세요!</H2> <H3>안녕하세요!</H3> <H4>안녕하세요!</H4> <H5>안녕하세요!</H5> <H6>안녕하세요!</H6> </BODY> </HTML> 2) <Font> <FONT SIZE=num>~</font> <FONT COLOR=색상명 또는 #RRGGBB>~</font> <FONT FACE=글꼴 이름>~</font> <FONT SIZE=num COLOR=색상명 또는 #RRGGBB FACE=글꼴>~</font> num=1~7
① size : 문서 내의 해당 문자열의 크기를 지정할 수 있다. - Num 수치가 클수록 문자 크기가 커진다. ② Color : 글자의 색상을 나타낸다. 색상표에 따라 16진수나 색 이름을 입력한다. - 표준 색상 이름 : red, green, gray, white등 예)<font color=”blue”> - 16진수 : FF00FF, 000000, 808080등 예)<font color=”FF00FF”> - RGB%값 : RGB(R:Red, G:Green, B:Blue)라는 함수를 사용하여 백분율 값으로 지정. 예)<font color=RGB(100%, 10%, 20%)> - 0~255까지의 RGB 정수값 : RGB라는 함수를 사용하여 0~255값으로 지정. 예)<font color=RGB(155,127,0)> ③ Face : 글자의 글꼴을 지정한다. - arial, lucida, sans, 궁서, 돋움, 굴림 등 ④ size, color, face를 각각 지정할 수도 있고, 하나의 태그에 함께 사용할 수도 있다 Source 실행화면 <HTML><HEAD> <TITLE><font>태그 사용하기</TITLE></HEAD> <BODY> <font size=2>글자 크기 2입니다.</font><p> <font color=#FF0000>글자색 빨강 입니다.</font><p> <font face=arial>font face is arial.</font><p> <font size=3 color=green>크기, 색상 지정</font><p> <font color=RGB(255,0,0) face=굴림>색상, 글꼴 지정</font><p> <font size= 4 color=RGB(50%,50%,50%) face=궁서>크기, 색상, 글꼴 지정</font><p> </BODY> </HTML>
3) <BaseFont> 12, <BASEFONT SIZE=num COLOR=색상명 또는 #RRGGBB FACE=글꼴 이름> <FONT SIZE=±num COLOR=색상명 또는 #RRGGBB FACE=글꼴 이름> num=1~7 문서 내의 기본 글자의 크기, 색깔, 글꼴 등을 지정해 줌으로써 같은 태그를 반복하는 번거로움을 피할 수 있다. Font size에 ±값을 적용하면 Base font를 기준으로 하여 상대값이 적용되며, font size에 ±없이 값을 입력하면 절대값이 적용된다. Basefont를 지정하고 태그를 종료하지 않으면 지정부분부터 끝까지 basefont가 적용되며 구간을 정하여 지정하고자 한다면 </basefont>로 종료하면 된다. <font>에서와 마찬가지로 size, color, face를 각각 지정할 수도 있고, 하나의 태그에 함께 사용할 수도 있다. Source 실행화면 <HTML> <HEAD> <TITLE><basefont>태그 사용하기</TITLE> </HEAD><BODY> <basefont size=4 color=red face=궁서>기본폰트, 색상, 글꼴 지정<p> 기본폰트 적용되나?<p> <font size=-1 color=gray face=돋움>상대값 적용</font><p> <font size=3 color=green face=굴림>절대값 적용</font><p> 기본폰트 여기도 적용되나?<p> </BODY></HTML>
4) 이탤릭 스타일 태그 ① <I> : Italic을 의미하며 문자를 이탤릭체로 표시한다. ② <EM> : emphasize의 의미로 문서 내의 강조할 부분을 이탤릭체로 보여준다. ③ <CITE> : 책이나 문서에서의 인용문을 나타낼 때 사용한다. ④ <ADDRESS> : 문서를 제작한 회사나 제작사에 대한 정보를 나타낼 때 사용하는 것으로 전화번호, 팩스번호, E-mail주소 등을 나타낸다. ⑤ <VAR> : 컴퓨터 프로그램의 변수 이름을 문서의 중간에 삽입할 때 사용한다. ⑥ <DFN> : Definition을 의미하며, 문자를 정의할 때 사용한다 Source 실행화면 <HTML><HEAD><TITLE> 이탤릭 스타일</TITLE> </HEAD><BODY> <i>이탤릭체를 사용할 때 가장 편리하게 쓸 수 있다</i><p> <em>Emphasize(강조)의 의미가 있다.</em><p> <cite>인용된 경우에 사용한다.</cite><p> <address>E-mail주소, 전화, 팩스번호등을 나타낼 때 쓴다.</address></p> <var>프로그램 변수등에 사용한다.</var><p> <dfn>문자를 정의할 떄 사용한다.</dfn><p> </BODY></HTML> 5) 강조 스타일 태그 ① <B> : 특별히 강조하고 싶은 부분을 진하게 Bold체로 나타낸다. ② <BIG> : 주위의 글자보다 조금 크게 나타낸다. ③ <SMALL> : 주위의 글자보다 조금 작게 나타낸다. ④ <BLINK> : 글자가 깜박인다. ⑤ <S> : 주로 잘못된 글자를 지우지 않고 가운데 줄을 긋는 효과를 주어 표시한다. ⑥ <STRIKE> : <S>와 같은 효과로 글자 중간에 줄을 긋는 효과를 준다. ⑦ <U> : Underline으로 글자 아래에 밑줄을 긋는다. ⑧ <STRONG> : <B>와 같은 효과로 특별히 강조하고 싶은 부분을 진하게 나타낸다
Source 실행화면 <HTML><HEAD><TITLE>강조 스타일</TITLE> </HEAD><BODY> <b>문자를 진하게 강조</b><p> <big>주위 문자보다 조금 크게</big><p> <small>주위 문자보다 조금 작게</small><p> <blink>문자가 깜박인다.(네스케이프에서만 보인다)</blink><p> <s>문자 가운데 줄긋기</s><p> <strike>문자 가운데 줄긋기</strike><p> <u>글자 아래에 밑줄을 긋는다.</u><p> <strong>문자를 진하게 표시</strong> </BODY></HTML> 6) 첨자 스타일 태그 <SUP> : 복잡한 수식이나 원소기호를 나타낼 때 사용하는 것으로 위 첨자를 나타낸다. <SUB> : 복잡한 수식이나 원소기로를 나타낼 때 사용하는 것으로 아래 첨자를 나타낸다. Source 실행화면 <HTML> <HEAD> <TITLE>첨자 스타일</TITLE> </HEAD> <BODY> 물은 H<sub>2</sub>O 이다<p> 방정식 X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup>의 값은? </BODY> </HTML>
7) 그 외 스타일 태그 <TT> : TeleType체로 구식 타자기형의 글꼴을 보여준다. <KBD> : 홈페이지 내에서 특정 키 입력을 설명하고자 할 때 사용한다. ③ <KEB> 태그가 적용되면 글꼴 크기가 2포인트 커진다. ④ <CODE> : 문서 중간에 컴퓨터 프로그램 소스를 삽입할 때 사용한다. Source 실행화면 <HTML><HEAD> <TITLE>그 외 스타일</TITLE> </HEAD><BODY> <tt>타자체의 글자</tt><p> <kbd>그만하려면 Q나 X를 누르세요</kbd><p> 프로그램 코드를 표시한다.<br><code>비주얼 베이직 코드 private a, b as integer</code><p> </BODY></HTML> 8)특수 문자 &키워드, &아스키코드 태그 표기에 사용되는 기호(<,>,&등)나 키보드에서는 입력할 수 없는 문자를 특수폰트라고 부른다. 특수 폰트를 표시하고 싶을 때는 Name Entity라고 불리는 서식을 사용한다. 키워드에는 특정폰트를 표시하는 문자, 아스키코드에는 문자의 아스키코드를 입력. " Quotation mark(“) NoneBreak Space(공백) & Ampersand(&) © Copyright(ⓒ) < Less Than(<) ® Registered trademark(ⓡ) > Greater Than(>)
Source 실행화면 <HTML><HEAD><TITLE>특수폰트</TITLE> </HEAD><BODY> Quotation mark(") : "<p> Ampersand(&) : &<p> Less Than<<) : <<p> Greater Than(>) : ><p> NoneBreak Space(공백) : <p> Copyright(ⓒ) : ©<p> Registered trademark(®) : ®<p> </BODY></HTML>
(1) 리스트 1) <UL> Unordered List로 비순서형 목록을 설정한다. <UL>태그를 사용하고 그 사이의 문장 맨 앞에 <LI>를 열거한다. 위 아래에 스페이스가 들어가고 각 항목에 마크가 붙여진다. 각 항목은 자동적으로 줄 바뀜이 된다. Source 실행화면 <HTML> <HEAD><TITLE><UL>태그 사용하기</TITLE> </HEAD><BODY> <UL> <LI>빨간 장미 <LI>노란 장미 <LI>흰 장미 </UL> </BODY></HTML> ⑤ 리스트의 마크를 변경할 수 있다. <UL TYPE=”OPTION”><LI>~</UL> 또는 <UL><LI TYPE=”OPTION”>~</UL> OPTION=disk(검은색 동그라미), circle(흰색 동그라미), square(검색은 사각형)
Source 실행화면 <UL type="circle"> <LI>html 강좌 <LI>javascript 강좌 <LI>css 강좌 </UL> <UL> <LI type="circle">속이 빈 원형 <LI type="disk">속이 검은 원형 <LI type="square">속이 검은 사각형 </UL> 2) <OL> 11, ①Ordered List로 순서형 목록을 설정한다. ②순서형 목록이라는 것을 제외하고는 <UL>과 같다. Source 실행화면 <BODY> <OL> <LI>windows 98 따라하기 <LI>linux 따라하기 <LI>unix 따라하기 </OL> </BODY> ③목록의 번호 형식을 변경 할 수 있다. <OL TYPE=”option”><LI>~</OL> 또는 <OL><LI TYPE=” option”>~</OL> option =1(계산용 숫자, 표준), a(영문 소문자), A(영문 대문자), i(소문자 로마자), I(대문자 로마자)
Source 실행화면 <OL type=i> <LI>windows 98 따라하기 <LI>linux 따라하기 <LI>unix 따라하기 </OL> <OL> <LI type=a>windows 98 따라하기 <LI type=I>linux 따라하기 <LI type=A>unix 따라하기 ④ 목록의 번호 순서를 변경할 수 있다. <OL start=”시작번호”> ~ </OL> <LI value=”시작번호”> ~ </LI> Source 실행화면 <OL start=4> <LI>항목 A</LI> <LI>항목 B</LI> <LI value=1>항목 C</LI> <LI>항목 D</LI> <LI>항목 F</LI> </OL>
⑤ 목록의 번호 형식과 시작번호를 함께 변경할 수 있다. <OL start=”시작번호”><LI type=option> ~ </OL> <OL start=”시작번호” type=option><LI> ~ </OL> Source 실행화면 <OL start=4> <LI type=A>빨간 장미 <LI type=A>노란 장미 <LI type=A>흰장미 </OL> <OL start=4 type=A> <LI>빨간 장미 <LI>노란 장미 <LI>흰장미 3) <DIR>와 <MENU> <DIR> : 디렉토리 리스트 - 디렉토리형 목록을 설정한다. - 목록 내 항목을 추가할 때는 <LI>를 사용한다. <MENU> : 메뉴 리스트 - 메뉴형 목록을 설정한다. - 목록 내 항목을 추가할 때는 <LI>를 사용한다
Source 실행화면 <DIR>매체의 속성 <LI>상징적 속성 <LI>내용적 속성 </DIR> <MENU>매체의 연구 <LI>매체 비교 연구 <LI>매체 소성 연구 </MENU> 4) <DL> : 정의형 리스트 13, - Definition List로 설명(정의)형 목록을 설정한다. - <DL>로 정의된 목록은 <DT>와 <DD>로 나누어 진다 ① <DT> : 정의되는 말 - 반드시 <DL>안에서 사용되며 목록에 대한 제목이나 설명을 기재한다. ② <DD> : 정의된 말의 의미 - 자동적으로 줄을 바꾸어 주며, 설명목록 안에서 항목을 추가할 때 사용한다. Source 실행화면 <DL> <DT>HTML이란 <DD>HyperText Markup Language의 약자 <DT>VRML이란 <DD>Virtual Reality Markup Language의 약자 </DL>
5) <LI> - 모든 목록들에 세부 항목을 지정할 때 사용한다. Type : 각 항목 앞에 붙이는 기호나 숫자 스타일 Value : 순서형 목록에서 처음 시작하는 번호를 지정하며 끊어진 항목을 다시 시작할 때 유용하다. 6) <BLOCKQUOTE> 외부 문서의 일부를 인용할 때 사용하며 인용된 부분은 들여쓰기가 된다. 많은 양의 텍스트인 경우 더 적절하며 페이지의 좌, 우측으로 여백을 설정하여 준다. Source 실행화면 디지털 컨버전스 (Digital convergence) <blockquote> 디지털 기술을 매개로 컴퓨터, 가전, 통신 등의 여러가지 기기와 기반 기술이 서로 유기적으로 융합되는 현상을 말한다. 디지털 컨버전스는 PC, AV 가전, 휴대폰 등 단말 기기 뿐만 아니라 디지털 정보가 생성, 유통, 재가공, 재생되는 컨텐츠, 네트워크, 서비스 등 다양한 과정에서 일어나고 있다. </blockquote>
(1) 링크 - 문서 연결은 홈페이지의 큰 특징인 하이퍼링크 기능을 수행하는 것이다 (1) 링크 - 문서 연결은 홈페이지의 큰 특징인 하이퍼링크 기능을 수행하는 것이다. - HTML문서뿐만 아니라 다른 웹 소스(이미지, 비디오 클립, 사운드, 프로그램)를 연결 할 수 있다. - HTML문서가 아닌 경우는 지정한 파일을 다운로드할 수 있도록 안내 메시지가 나타난다. 1) <A> - Anchor로 홈페이지 내에 링크를 설정한다. - href와 같이 사용하여 하이퍼링크를 설정한다. 다른 문서로 링크 <A href=”URL”>~</A> - 문자열이나 그림을 다른 HTML문서나 웹 사이트로 링크 시킨다. - URL은 상대경로나 절대경로로 지정 할 수 있다. - 문서가 아닌 웹 소스(이미지, 비디오 클립, 사운드, 프로그램)를 연결 할 수 있다. ※ 상대경로와 절대경로 ▷ 상대경로 : 현재 파일이 있는 위치에서부터 상대적인 위치를 지정하는 것이다. 예를 들면 c:/test/a.htm파일이 있고 c:/e-test/z.htm이 있을 때 a.htm에서 z.htm을 가리키려면 ../e-test/z.htm와 같이 쓸 수 있다. ▷ 절대경로 : 현재 위치가 어디에 있든 상관없이 전체 경로를 지정하는 것이다. 위의 예를 절대 경로로 표시하면 file:///c:/e-test/z.htm과 같이 쓸 수 있다.
Source 실행화면 <HTML><HEAD> 11, <TITLE><A> : 문서연결</TITLE></HEAD> <BODY> <a href="html_ex1.htm">같은 웹사이트 내 다른 문서로 이동</a><p> <a href="http://www.e-test.co.kr/">다른 웹 사이트로의 이동</a><p> <a href="http://www.e-test.co.kr/"><img src="it_posco.jpg" border=0></a><p> <a href="mr.postman.mp3">음악파일</a> </BODY></HTML> ② NAME : 현재 HTML문서의 특정 위치로 링크 9, 14, 15, 10, <A href=”#키워드”>~</A> (링크 거는 지점 지정) <A name=”키워드”>~</A> (링크 되는 지점 지정) - 같은 문서내 특정 위치로 이동한다. - 하나의 문서가 길어 스크롤 해서 보기 힘들 때 사용하면 유용하다. 책갈피를 꽂아 두는 것과 같다. - 링크할 곳(name)에서 같은 키워드를 하나 이상 사용해서는 안 된다. ※ 소스를 다운 로드 받아 확인시 브라우저 창을 작게 줄여 세로 스크롤이 생기도록 하여 확인하도록 하세요!
Source <a name=top><a href="#list1">출제 형식 및 문제 접근 방법</a>/<a href="#list2">검색문제 예제</a></a> <p><a name="#list1">1. 출제형식 및 문제 접근방법</a></p> --- 중 략 --- 6) 6단계 : 정답을 확인하고 문제의 요구에 맞게 저장한다.<a href=#top>▲ TOP</a> <p><a name="#list2">2. 검색문제 예제</a><br> 왜구의 토벌이 한창 진행되던 우왕 말기에 고려와 명나라 사이에 영토 분쟁이 일어났다. - 시기가 장마철이라 활이 휘고 군사가 병이 들기 쉬워 불가하다.<a href=#top>▲ TOP</a> ③ 다른 HTML 문서의 특정 위치로 링크 <A href=”URL#키워드”>~</A> (링크 거는 지점 지정) <A name=”키워드”>~</A> (링크 되는 지정 지정) - 다른 HTML문서로 이동해서 이동한 문서내의 특정 위치로 이동하도록 지정한다. ※ 아래의 예는 예제 2의 특정 위치로 이동하도록 설정 한 것입니다. Source <HTML> <HEAD><TITLE><Name> : 다른 문서의 특정 위치 링크</TITLE></HEAD> <BODY> <a href="7-2ex.htm#list1">예제 2의 출제 형식 및 문제 접근 방법</a><p> <a href="7-2ex.htm#list2">예제 2의 검색문제 예제</a> </BODY> </HTML>
④ TARGET <A href=”URL” target=”창 이름”>~</A> 링크된 소스가 보여지게 될 곳을 정의한다. - 프레임이 있는 HTML문서에서 사용한다. 프레임이 없는 HTML문서에서도 새로운 창을 열기 위해 ‘_blank’를 사용하기도 한다. - 속성 값은 프레임 이름, _blank, _self, _parent, _top등이 있다. (이 부분에 대한 자세한 내용은 프레임 단원에서 소개할 것임) Source <HTML> <HEAD><TITLE>target : 새로운 창에서 열기</TITLE></HEAD> <BODY> <a href="7-2ex.htm" target=”_blank">예제 2를 새창으로 열기</a><p> <a href="7-2ex.htm#list2" target=”_blank">새창으로 열어 예제 2의 검색문제 부분으로 이동</a> </BODY> </HTML> ⑤ 전자 메일 링크 <A href=”mailto:전자 메일 주소”>~</A> - 문자열에 링크 연결시 ‘mailto:’와 전자 메일 주소를 입력하면 전자 메일을 보낼 수 있다. - 링크된 부분을 클릭하면 기본적으로 설정되어 있는 메일 클라이언트 프로그램 (대부분은 아웃룩 익스프레스가 지정)이 실행된다. - 메일 클라이언트 프로그램의 받는 사람(수신처) 입력란에 자동적으로 지정된 전자 메일 주소가 입력된다.
Source 실행화면 <HTML> <HEAD> <TITLE>mailto : 전자 메일 링크</TITLE> </HEAD> <BODY> <a href="mailto:pd0a3956@posco.co.kr">IT P OSCO 문의처</a><p> IT POSCO 문의처 <a href="mailto:pd0a3956@ posco.co.kr">pd0a3956@posco.co.kr</a> </BODY> </HTML>
(1) 테이블 이용 - 홈페이지 내에서 테이블은 다양한 용도로 사용된다. - 내용을 표 안에 잘 정돈하여 넣어줄 수 있다 (1) 테이블 이용 - 홈페이지 내에서 테이블은 다양한 용도로 사용된다. - 내용을 표 안에 잘 정돈하여 넣어줄 수 있다. - 홈페이지의 화면 디자인을 표 형식으로 하여 고정시킬 수 있다. - 용량이 큰 이미지를 작은 이미지로 잘라 만든 다음 표에 넣어 큰 이미지를 표시할 수 있다. 1) 테이블의 기본형식 <TABLE border=”외곽선 굵기(픽셀)”>~</TABLE> <TR>~</TR> <TH>~</TH> <TD>~</TD> ← 표 전체 ← 가로 1열 ← 제목용 셀 ← 데이터용 셀 - 종료 태그를 반드시 사용하여야 한다. - 제목용 셀(TH) 안의 문자는 굵은 글씨로, 가운데 정렬되어 나타난다. Source 실행화면 <table border="2"> <tr> <tH>이름</tH><tH>나이</tH><tH>성별</tH> </tr> <td>홍길동</td><td>35</td><td>남</td> <td>김영희</td><td>26</td><td>여</td> </table>
2) <CAPTION> : 표 제목 <CAPTION>~</CAPTION> <CAPTION align=”표시 위치”>~</CAPTION> 표시 위치 : top, bottom, (left, right) - 테이블에 대한 설명이나 제목 등을 기재할 때 사용된다. - <TABLE>태그 내에서만 사용된다. - align 속성을 이용하여 위치를 지정하지 않으면 표의 위쪽 가운데에 나타난다. Source 실행화면 <table border="2"> <caption align="left">출석부</caption> <tr> <tH>이름</tH><tH>나이</tH><tH>성별</tH> </tr> <td>홍길동</td><td>35</td><td>남</td> <td>김영희</td><td>26</td><td>여</td> </table>
3) 표의 크기와 여백 지정 <TABLE width=“폭” height=”높이”>~</TABLE> <TABLE cellspacing=”셀 안의 간격” cellpadding=”셀 사이의 간격”>~</TABLE> - width : 표 전체의 너비를 지정하며 입력은 픽셀 단위 또는 전체 브라우저 화면에 대한 비율 퍼센트로 표시한다. - height : 표 전체의 높이값을 입력하며 입력은 픽셀 단위로 한다. - cellspacing : 한 셀의 경계와 인접 셀 사이의 간격을 설정한다. - cellpadding : 셀 경계와 셀 안에 있는 내용 사이의 간격을 설정한다. Source 실행화면 <table border="2" width="100%" height="100"> <tr> --- 중략 --- </tr> </table> <p> <table border="8" cellspacing="4" cellpadding="10">
4) 표 외곽선 색과 형식 지정 <TABLE bordercolor=”16진수/색이름”>~</TABLE> <TABLE frame=”외곽선 형식”>~</TABLE> ※ 외곽선 형식 - void : 없다(기본), above : 위, below : 아래, lhs : 좌, rhs : 우, hside : 위아래, vside : 좌우, box : 상하좌우, border : 상하좌우만 보인다. - bordercolor : 표 외곽선의 색상을 지정한다. - frame : 표 외곽선의 형태를 지정한다. Border속성이 1이상이 되어야 한다. Source 실행화면 <table border="8" bordercolor="#0000ff"> <tr> --- 중략 --- </tr> </table> <p> <table border="6" frame="hsides"> 5) 셀 구분선의 형식 지정 <TABLE rules=”셀 구분선 형식”>~</TABLE> ※ 셀 구분선 형식 - none : 없다, rows : 가로열 경계선, cols : 세로열 경계선, group : THEAD, TBODY, TFOOT, COLGROUP, COL의 경계선, all : 모든 경계선
- 표 내의 셀들 사이의 경계선을 설정한다. Source 실행화면 <table border="6" rules="cols"> <tr> <tH>이름</tH> <tH>나이</tH> <tH>성별</tH> </tr> --- 중략 --- </table> 6) 표의 배경색과 배경 그림 지정 <TABLE bgcolor=”색”>~</TABLE> <TR bgcolor=”색”>~</TR> <TH bgcolor=”색”>~</TH> <TD bgcolor=”색”>~</TD> <TABLE background=”이미지 URL”>~</TABLE> <TR background=”이미지 URL”>~</TR> <TH background=”이미지 URL”>~</TH> <TD background=”이미지 URL”>~</TD> ← 표 전체 배경색 ← 가로 한 열 배경색 ← 표 제목 셀 배경색 ← 데이터용 셀 배경색 ← 표 전체 이미지 ← 가로 한 열 이미지 ← 제목 셀 이미지 ← 데이터용 셀 이미지 - bgcolor : 표의 배경색을 설정한다. - background : 표의 배경이미지로 사용할 이미지 파일을 지정한다.
Source 실행화면 <table bgcolor="#996688" border="2> <tr> --- 중략 --- </tr> </table> <p> <table background="orangecheck.gif" border="2" cellpadding="10"> 7) 텍스트와 표의 배열과 표와의 간격 지정 <TABLE align=”위치”>~</TABLE> <TABLE vspace=”세로 간격” hspace=”가로 간격”>~</TABLE> - align : 표의 위치를 설정하며, 위치는 left, right, center로 지정할 수 있다. - vspace : 표 아래위 간격을 지정한다. - hspace : 표 좌우 간격을 지정한다. - vspace, hspace는 네스케이프에서만 지원되는 속성이다. - 표를 왼쪽이나 오른쪽으로 정렬한 경우에 텍스트가 표 옆에 나타나지 않게 하려면 <br clear=”left 또는 right”>를 사용한다.
Source 실행화면 <table border="2" align="left" vspace="10" hspace="30"> <tr> --- 중략 --- </tr> </table> <p>오른쪽 표에서 알 수 있듯이 홍길동씨는 현재 35 세의 남성입니다. 최근의 취미는 낚시라고 하며, 회사 동료들과 매주 바다를 찾는다고 합니다. 8) 셀 병합 <TH rowspan=”세로 방향으로 합칠 셀의 개수”>~</TH> <TH colspan=”가로 방향으로 합칠 셀의 개수”>~</TH> <TD rowspan=”세로 방향으로 합칠 셀의 개수”>~</TD> <TD colspan=”가로 방향으로 합칠 셀의 개수”>~</TD> - rowspan은 현재 셀에서 아래 방향으로, colspan은 현재 셀에서 오른쪽 방향으로 2개 이상의 셀을 하나의 셀로 만든다. Source 실행화면 <table border="2"> <tr><tH colspan="2">회원</tH> <tH>지역</tH></tr> <tr><td>홍길동</td> <td>남자</td> <td rowspan="3">서울</td></tr> <tr><td>김영희</td><td>여자</td></tr> <tr><td>박철수</td><td>남자</td></tr> </table>
9) 셀 크기 지정 <TH width=”셀 너비” height=”셀 높이”>~</TH> <TD width=”셀 너비” height=”셀 높이”>~</TD> - 셀의 크기를 특정한 너비오 높이로 설정할 때 사용한다. 10) 셀 안의 텍스트 위치 지정 <TR align=”가로 위치” valign=”세로 위치”>~</TR> <TH align=”가로 위치” valign=”세로 위치”>~</TH> <TD align=”가로 위치” valign=”세로 위치”>~</TD> <THEAD align=”가로 위치” valign=”세로 위치”>~</THEAD> <TBODY align=”가로 위치” valign=”세로 위치”>~</TBODY> <TFOOT align=”가로 위치” valign=”세로 위치”>~</TFOOT> <COL align=”가로 위치” valign=”세로 위치”>~</COL> <COLGROUP align=”가로 위치” valign=”세로 위치”>~</COLGROUP> - align : 셀 안에서 가로 위치를 지정한다. - valign : 셀 안에서 세로 위치를 지정한다. 가로 위치 세로 위치 left 왼쪽 정렬(TD의 기본값) Top 위 Right 오른쪽 정렬 Middle 가운데 Center 가운데 정렬 Bottom 아래 Justify 양끝 정렬 baseline 가로 열에서 첫 번째 행이 기준선 char 특수 문자 위치(소수점 등)
11) 셀 안에서 줄 바꾸기 금지 <TH nowrap>~</TH> <TD nowrap>~</TD> - 셀의 width속성이 지정되지 않으면 웹 브라우저의 너비에 따라 자동적으로 설정되기 때문에 텍스트가 긴 경우에 자동적으로 줄 바꾸기가 된다. 이 자동적으로 줄이 바뀌는 기능을 해제하는 것이다. Source 실행화면 <p>일반적인 경우 <table border="2"> <tr><tH>이름</tH><tH>주소</tH></tr> <tr><td>홍길동</td><td>서울시 강남구 대치 4동 892 포스코센타</td></tr> </table> <p> 줄바꾸기를 금지시킨 경우 <tr><td nowrap>홍길동</td><td nowrap>서울시 강남구 대치 4동 892 포스코센타</td> </tr></table> 12) 가로 방향 셀 그룹화 <THEAD>~</THEAD> <TFOOT>~</TFOOT > <TBODY>~</TBODY > ← 표의 머리말 부분 ← 표의 꼬리말 부분 ← 표의 본문 부분
표의 가로 방향을 머리말, 본문, 꼬리말 세 부분으로 나누어 그룹화 하는 경우에 이용한다 표의 가로 방향을 머리말, 본문, 꼬리말 세 부분으로 나누어 그룹화 하는 경우에 이용한다. - 태그 적용 범위 전체에 대한 속성이나 스타일 시트를 지정할 수 있다. - 머리말과 꼬리말을 고정시킨 상태에서 본문 부분을 스크롤하거나, 인쇄할 때 각 페이지에 머리말과 꼬리말을 인쇄할 수 있다. ① <THEAD> - 머리말에 해당하는 내용을 기재한다. - 반드시 <TFOOT>앞에 사용하여야 하며 한번만 사용 가능하다. - 종료 태그는 생략할 수 있다. ② <TFOOT> - 꼬리말에 해당하는 내용을 기재한다. - <TBODY>뒤에 사용하며 <TFOOT>는 한 번만 사용하여야 한다. - 종료 태그는 생략 할 수 있다. ③ <TBODY> - 본문에 해당하는 내용을 기재한다. - <TFOOT>와 반드시 함께 사용하며 <TBODY>는 여러 번 사용하여도 된다. - 종료 태그는 생략할 수 있다. 13) 세로 방향 셀 그룹화 <COLGROUP span=”세로열의 개수”>~</COLGROUP> <COLGROUP span=”세로열의 개수” width=”셀 너비”>~</COLGROUP> - 표의 세로 방향을 그룹화 할 경우에 사용한다. - 여러 개의 세로 열에 대해 한꺼번에 너비와 정렬 등, 속성이나 스타일을 지정할 수 있다. - 세로열 개수는 그룹화할 세로열의 개수로 생략하면 1이다. - 너비는 픽셀, %, *을 사용한다. - <COLGROUP>은 시작 태그만 사용한다. - 표에 <CAPTION>이 있는 경우에는 바로 다음에 삽입해야 하며, <THEAD>가 있는 경우에는 그 앞에 삽입해야 한다.
14) 열에 대한 속성 <COL span=”세로열의 개수”> <COL span=”세로열의 개수” width=”셀 너비”> - 표의 세로 방향 셀을 그룹화하지 않으면서 셀 너비나 정렬 방식 등의 속성이나 스타일 시트를 한꺼번에 지정 할 수 있다. - 시작 태그만 사용하며, 일반적으로 <COLGROUP>태그 하에서 사용한다. - <COLGROUP>의 속성을 그대로 사용한다. - <CAPTION>이 있는 경우에는 바로 다음에 삽입해야 하며, <THEAD>가 있는 경우에는 그 앞에 삽입해야 한다. Source 실행화면 <table border="2"> <col width="120"> <col span="2" align="right"> <col align="center"> <tr><th>이름</th><th>나이</th><th>성별</th> </tr> <tr><td>홍길동</td><td>35</td><td>남자</td> </tr> <tr><td>김영희</td><td>29</td><td>여자</td> </table>
(1) <FORM> - 폼은 서버와 사용자 간의 상호작용을 할 수 있는 대화형 HTML 문서를 만들 수 있다 (1) <FORM> - 폼은 서버와 사용자 간의 상호작용을 할 수 있는 대화형 HTML 문서를 만들 수 있다. - 폼은 클라이언트 쪽에서 버튼, 텍스트 박스, 라디오 버튼 등의 입력 양식을 가지고 사용자의 입력을 받아 서버쪽으로 연결시키는 역할을 한다. - 그러나 폼 자체가 서버쪽으로 데이터를 전송하는 것이 아니라 그에 알맞은 양식을 만들어 준다. 1) <FORM> <FORM action=”URL” method=”HTTP 방법” enctype=”MIME형식” target=프레임 이름>~</FORM> 홈페이지 내 양식 폼을 설정한다. <FORM>자체로는 큰 의미가 없지만 양식 관련 태그들은 모두 <FORM>태그 안에서 사용해야 한다. Name : 여러 개의 폼을 사용할 경우 이를 구분할 수 있는 폼의 이름이다. Action : 폼의 데이터가 보내어졌을 때 웹 서버상의 CGI프로그램을 지정한다. 폼에 입력된 데이터를 전달받아 웹 서버에서 준비된 동작을 하고 결과를 만들어줄 URL을 지정한다. Target : 폼의 데이터가 서버에 전송되고 action에서 정의되어 있는 CGI의 결과가 다시 사용자의 클라이언트로 돌아올 때 사용될 프레임의 이름을 지정한다. Method : 폼의 데이터를 전달하는 방식으로 get과 post가 있다. Get은 환경 변수의 형태로 전송하고 post는 프로그램 표준 입력 방식으로 전송한다. Enctype : 양식을 서버에 전송할 때 사용되는 MIME(Multipurpose Internet Mail Extention)형식을 설정한다. 기본값은 ‘application/x-www-form-urlencoded’이다. Accept : 서버에 쉼표로 구분된 다양한 MIME형식의 데이터를 올려보낼 때 서버가 올바른 동작을 할 수 있게끔 지정할 때 사용한다. 2) 한 줄로 입력할 수 있는 글상자 <INPUT type=”text” name=”이름” value=”기본문자” size=”너비” maxlength=”최대문자 수”> - 한 줄을 입력할 수 있는 글상자를 삽입한다. 이름 : 입력 필드 이름 기본문자 : 글상자에 미리 입력되어 있는 문자 너비 : 입력 필드의 너비(문자수) 최대 문자 수 : 글상자에 입력할 수 있는 최대 문자 수
Source 실행화면 <BODY> <form action="/cgi-bin/formmail.cgi" method="post"> <p>이름 : <input type="text" name="user_name" size="20"></p> </form> </BODY> 3) 여러 줄을 입력할 수 있는 글상자 <TEXTAREA name=”이름” rows=”행 수” cols=”너비”>~</TEXTAREA> <TEXTAREA wrap=”줄 바꾸기 방법”>~</TEXTAREA> - 여러 줄을 입력할 수 있는 글상자를 삽입한다. Readonly : 읽을 수만 있고 입력하지는 못하게 설정한다. Rows : 텍스트 입력란의 행수를 지정한다. Cols : 텍스트 입력란이 한 행 문자수를 지정한다. Wrap : cols를 지정했을 때 지정한 cols의 크기를 넘어선 입력에 대해 처리하는 방식을 지정한다. - off : 줄 바꿈 없음, soft : 줄 바꿈 나타남, hard : 줄 바꿈 송신 - soft는 화면상에서만 줄 바꿈 되고 송신되는 데이터는 줄 바꿈 되지 않지만, hard는 실제로 송신되는 데이터도 줄 바꿈이 된다. .
Source 실행화면 <BODY> <form action="/cgi-bin/formmail.cgi" method="post"> <p><font size="2">readonly가 지정되지 않은 경우</font> <textarea name="sample" rows="3" cols="25"></textarea></p> <p><font size="2">readonly를 지정했을 때</font> <textarea name="sample" rows="3" cols="25" readonly>글 입력이 안되죠?!</textarea></p> </form> </BODY> 4) 암호 글 상자 <INPUT type=”password” name=”이름” value=”기본문자” size=”너비” maxlength=”최대 문자 수”> - 암호 입력에 사용되는 한 줄 글상자를 만들 때 사용한다. - 암호 글상자로 설정되면 입력되는 모든 문자는 ‘*’로 나타난다. value : 글상자에 미리 입력되어 있는 문자 size : 입력 필드의 너비 maxlength : 글상자에 입력할 수 있는 최대 문자 수
Source 실행화면 <BODY> <form action="/cgi-bin/formmail.cgi" method="post"> <p><font size="2">비밀번호1 : </font> <input type="password" name="pswd1" size="10"></p> <p><font size="2">비밀번호2 : </font> <input type="password" name="pswd2" size="10" value="itposco"></p> </form> </BODY> 5) 숨겨진 필드 작성 <INPUT type=”hidden” name=”이름” value=”송신문자”> 화면에 나타나지 않는 필드를 만들 때 사용 - 일반적으로 사용자에게 보일 필요가 없는 특정한 CGI 프로그램으로 송신하고 싶은 경우 사용하며 value속성에서 지정한 내용이 고정값으로 송신된다. Source <form action="/cgi-bin/formmail.cgi" method="post"> <input type="hidden" name="recitpient" value="runt@posco.co.kr"> <input type="hidden" name="subject" value="사용자등록"> <p><font size="2">비밀번호1 : </font> <input type="password" name="pswd1" size="10"></p> <p><font size="2">비밀번호2 : </font> <input type="password" name="pswd2" size="10" value="itposco"></p> </form> ※ hidden 값으로 지정한 것은 화면에 보이지 않으므로 4)암호글상자와 똑같이 화면에 출력된다.
6) 전송, 내용 최소 버튼 <INPUT type=”submit” name=”이름” value=”송신문자”> <INPUT type=”reset” value=”송신문자”> - 양식에 사용되는 단추는 일반적으로 전송 버튼과 취소 버튼을 같이 사용한다. - submit은 양식에 입력된 내용을 송신하는 기능을 담당하며, reset은 양식 전체의 입력 필드를 초기화한다. - value속성에서 지정한 값은 버튼의 레이블을 지정하며, 레이블을 지정하지 않을 경우 웹 브라우저의 기본 레이블로 나타난다. - name속성에서 지정한 이름은 각각 다른 기능을 하는 여러 개의 송신 버튼을 배치할 경우, 수신자 측에서 어떤 송신 버튼이 눌러졌는지를 가려낼 때 사용된다. Source 실행화면 <BODY> <form action="/cgi-bin/formmail.cgi" method="post"> <p><font size="2">기본적인 버튼<br> <input type="submit"> <input type="reset"> <p><font size="2">레이블 지정한 버튼</font><br> <input type="submit" value="전송"> <input type="reset" value="취소"> </p></form> </BODY>
7) 이미지로 된 전송 버튼과 스크립트에서 사용하는 버튼 <INPUT type=”image” src=”URL” name=”이름” alt=”대체용 설명” align=”정렬방법”> <INPUT type=”button” name=”이름” value=”레이블”> - image : 이미지를 이용하여 버튼을 만드는 것이며, 정렬 방법은 ‘top, middle, bottom, left, right’등이 있다. - button : 양식에 사용되지 앟는 일반 단추를 만들 때 사용하며, 일반적으로 자바 스크립트와 같은 이벤트 핸들러와 연결시킨다. Source 실행화면 <form action="/cgi-bin/formmail.cgi" method="post"><input type="image" src="button1.jpg" name="submit" alt="전송"> <input type="button" name="prev" value="돌아가기" onClick="javascript:history.back();"> </form> 8) <BUTTON> <BUTTON type=”버튼 형식” name=”이름” value=”레이블”>~</BUTTON> - 단추만을 전문적으로 만들기 위한 태그로 버튼 형식은 submit, reset, button으로 구분된다. - <BUTTON>~</BUTTON>사이의 내용을 버튼 레이블로 나타낼 수 있다.
Source 실행화면 <form action="/cgi-bin/formmail.cgi" method="post"><p> <button type="submit"><font size="3"><b>전송</b></font></button> <button type="reset"><font size="3"><b>취소</b></font></button> <button type="button"><font size="3"><b>일반단추</b></font></button><p> <button type="submit"><img src="button1.jpg"><p>전송</button> </form> 9) 라디오버튼과 체크박스 <INPUT type=”radio” name=”이름” value=”전송문자” checked> <INPUT type=”checkbox” name=”이름” value=”전송문자” checked> - radio : 라디오 버튼은 여러 개의 선택 항목 중에서 단일 항목만 선택할 수 있는 형식 - checkbox : 여러 개의 선택 항목에서 하나 이상의 항목을 선택할 수 있는 형식 - 한 항목에 포함된 라디오 버튼은 모두 같은 이름을 가지고 있어야 하며, 어떤 항목이 선택되었는지 구별하기 위해 value속성을 반드시 지정해야 한다. - 미리 선택된 상태로 지정할 경우 사용되며, checked가 되면 값이 ‘true’로 설정된다.
Source 실행화면 <form action="/cgi-bin/formmail.cgi" method="post"> <p>당신이 좋아하는 과일은 무엇입니까?</p> <input type="radio" name="fruit" value="사과">사과 <input type="radio" name="fruit" value="포도">포도 <input type="radio" name="fruit" value="바나나">바나나 <input type="radio" name="fruit" value="오렌지">오렌지 <p>당신이 좋아하는 색상은 무엇입니까?</p> <input type="checkbox" name="color" value="노랑" checked>노랑 <input type="checkbox" name="color" value="파랑">파랑 <input type="checkbox" name="color" value="빨강">빨강 <input type="checkbox" name="color" value="녹색">녹색 10) 펼침 메뉴 및 펼침 메뉴 항목 그룹 지정 <SELECT size=”항목 수” name=”이름”>~</SELECT> <OPTION value=”송신문자”>~</OPTION> <OPTION selected>~</OPTION> - 드롭다운 형태의 선택형 메뉴를 만든다. - 메뉴 전체를 <SELECT>~</SELECT>로 둘러싸고, 선택항목은 <OPTION>~</OPTON>태그로 지정한다.
<OPTGROUP label=”그룹 이름”>~</OPTGROUP> <OPTION label=”생략된 이름”>~</OPTION> - <SELECT>로 설정한 펼침 메뉴의 선택 항목을 그룹으로 만든다. Source 실행화면 <form action="/cgi-bin/formmail.cgi" method="post"> <p>당신의 이상형은?</p> <SELECT name="type"> <option> 김희선 </option> <option> 이영애 </option> <option> 한채영 </option> </SELECT> <p>가장 많이 이용하는 브라우저는?</p> <SELECT name="browser"> <optgroup label="인터넷 익스플로러"> <option label="6.x">인터넷 익스플로러 6.x</option> <option label="5.x">인터넷 익스플로러 5.x</option> </optgroup> <optgroup label="넷스케이프 네비케이터"> <option label="6.x">넷스케이프 네비케이터 6.x</option> <option label="5.x">넷스케이프 네비케이터 5.x</option> </form>
11) 목록 상자 <SELECT size=”항목 수” name=”이름” multiple> <OPTION value=”송신문자”>~</OPTION> <OPTION selected>~>/OPTION> - 펼침 메뉴 작성법과 유사하며 드롭다운 형태가 아닌 목록 상자 형태로 작성된다. - 항목 수는 목록 상자에 선택 항목을 나타낼 행수이며, multiple은 ctrl, shift키를 이용하여 여러 개의 항목을 선택할 수 있도록 지정한다. - <option>에서 지정한 항목 수가 size속성에서 지정한 항목 수보다 많으면 목록 상자에 자동으로 스크롤 바가 생성된다. Source 실행화면 <form action="/cgi-bin/formmail.cgi" method="post"> <p>당신의 이상형은?</p> <SELECT size="3" name="type" multiple> <option> 김희선 </option> <option> 이영애 </option> <option> 한채영 </option> <option> 이미연 </option> </SELECT> </form> 12) 파일 선택 상자 <INPUT type=”file” name=”이름” value=”파일 이름” accept=”MIME형식”> - 파일을 선택할 수 있는 상자를 만들 때 사용한다. - accept 속성에서 수신 프로그램이 받아 들일 수 있는 파일의 종류를 MIME형식으로 지정하며, 여러 종류를 수신 할 수 있는 경우는 [,]로 구분하여 지정할 수 있다. - 이 기능을 이용할 경우 <FORM>의 enctype속성에는 [multipart/form-data]를 사용하고 method 속성에는 ‘post’를 지정해야 한다
Source 실행화면 <form action="/cgi-bin/formmail.cgi" enctype="multipart/form-data" method="post"> <p>파일을 선택하세요!</p> <input type="file" name="imagefile" accept="image/jpeg,image/gif"> <p><input type="submit" value="전송"></p> </SELECT> </form> 13) 양식 필드의 레이블 및 그룹화 <LABEL for=”참조ID”>~</LABEL> - 양식 중 value 속성에 의해 레이블을 붙일 수 없는 경우에 사용한다. - <LABEL>사이에 레이블이 될 텍스트만 배치하고 입력 및 선택 항목으로 지정한 ID와 똑같이 for속성에서 지정한다. 이때 레이블과 입력 및 선택 항목이 반드시 1:1이 되어야 한다. <FIELDSET>~</FIELDSET> <LEGEND align=”정렬 방법”>~</LEGEND> - 양식의 일부분을 그룹으로 지정한다. - <LEGEND>는 그룹의 제목을 지정한다. - 정렬방법은 top, bottom, left, right로 제목의 위치를 지정한다.
Source 실행화면 <form action="/cgi-bin/formmail.cgi" method="post"> <label for="nm">이름 : </label> <input type="text" name="name" id="nm"><br> <label for="em">메일 : </label> <input type="text" name="email" id="em"> <fieldset> <legend>개인정보</legend> 이름 : <input type="text" name="uname"> 주소 : <input type="text" name="uaddrs" size="20"><br> 전화 : <input type="text" name="uphone"> </form>
(1) 프레임 - 하나의 창을 가로, 세로로 구분해서 그 안에 각각 다른 HTML문서를 나타낼 수 있다 (1) 프레임 - 하나의 창을 가로, 세로로 구분해서 그 안에 각각 다른 HTML문서를 나타낼 수 있다. - 프레임을 지정한 틀은 고정되고 각 프레임에 각기 다른 HTML문서를 불러들일 수 있으므로 특정 부분에 반복적으로 새로운 내용의 페이지가 필요할 때 유용하다. 1) 프레임 전체 구성 <FRAMESET rows=”분할 높이”>~</FRAMESET> <FRAMESET cols=”분할 너비”>~</FRAMESET> <FRAME src=”URL” name=”프레임 이름”> - 분할 높이(너비) : 가로(세로) 분할했을 때의 각 높이를 ,(쉼표)로 구분해서 지정(픽셀,%.*) - FRAMESET : 창을 어떻게 구분할지 지정하는 태그이며 이 태그안에는 BODY태그를 사용할 수 없다. - FRAME : 분할된 각 프레임에 나타낼 내용을 지정하는 태그이다.
※ 프레임 구성에 따른 프레임 셋 소스 예제
Source 실행화면 <frameset rows="70, *"> <frame src="title.htm" name="title"> <frameset cols="150, *"> <frame src="menu.htm" name="menu"> <frame src="content.htm" name="contents"> </frameset> <noframes> <body> <p>이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가 필요합니다.</p> </body> </noframes> 2) 프레임 세부 항목 지정 <FRAME scrolling=”auto, yes, no” noresize> <FRAME marginwidth=”픽셀” marginheight=” 픽셀”> <FRAME frameborder=”0,1” border=”픽셀” bordercolor=”#color” > - scrolling : 스크롤 생성을 제어하는 것으로 auto, yes, no가 있다. auto는 필요에 따라 스크롤이 자동으로 생성되는 것이며, yes는 항상 스크롤이 나타나며, no는 항상 스크롤 바가 나타나지 않는 것이다. - marginwidth[marginheight] : 프레임 안의 좌우[상하] 여백을 지정하는 것이다. - noresize : 프레임 구분선을 고정하여 프레임의 크기를 변경할 수 없도록 하는 것이다. 일반적으로 프레임 구분선은 마우스로 드랙하면 움직이게 되어 프레임의 크기를 변경시킬 수 있다. - frameborder : 프레임 구분선의 표시를 지정하는 것으로 1은 표시, 0은 구분선이 나타나지 않는다. - border : 프레임의 구분선의 두께를 설정한다. 0으로 지정하면 프레임의 구분선이 나타나지 않는다. - bordercolor : 프레임의 구분선의 색상을 지정한다. - frameborder, border, bodercolor속성은 <FRAMESET>태그 속성에도 적용되어 프레임 셋 내의 모든 프레임을 제어한다. 또한 프레임 셋에서는 framespacing 속성으로 프레임들 간의 간격을 설정한다.
Source 실행화면 <frameset rows="70,*" frameborder="0" framespacing="0"> <frame src="title.htm" scrolling="no" norsize> <frameset cols="150,*"> <frame src="menu.htm" scrolling="yes"> <frame src="content.htm" marginwidth="20" marginheight="60"> </frameset> <noframes> <body> <p>이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가 필요합니다.</p> </body> </noframes> 3) <NOFRAMES> - 프레임을 지원하지 않는 브라우저가 있을 시 프레임대신 대체되는 내용을 지정한다. - <NOFRAMES>~</NOFRAMES>형태로 정의되며, 이 태그안에 <body>를 삽입하여 내용을 입력한다. 프레임이 지원되는 브라우저에서는 <body>의 내용이 보이지 않지만 프레임을 지원하지 않는 브라우저에서는 프레임대신 <body>의 내용이 나타난다. 4) 하이퍼링크의 대상 프레임 지정하기 <A href=”URL” target=”프레임 명”>~</A> - 프레임에서 하이퍼링크는 링크된 문서가 나타날 프레임을 지정해 주어야 한다. 미지정시 하이퍼링크된 프레임에 나타나게 된다. - <FRAME name=”프레임명”>에서 지정한 프레임명은 하이퍼링크할 때 target의 속성이 되어 해당 프레임에 하이퍼링크된 문서가 나타나게 된다.
- 시스템에서 사용하는 4가지 예약어 _top 프레임을 해제하고 링크될 문서를 창 전체로 불러온다. _parent 링크될 문서를 링크 전 원래의 프레임인 부모 프레임에 나타낸다. 부모 프레임이 없는 경우는 [_self]와 같다. _self 링크될 문서를 원래 위치와 같은 프레임으로 불러온다. _blank 이름이 없는 새로운 창을 열고 링크될 문서를 그 창으로 불러온다. Source 실행화면 ※ menu 소스 <body bgcolor="#FAFFF8" text="black" link="blue" vlink="purple" alink="red"> <a href="document.htm" target="contents">문서 1</A> </body> ※ 프레임셋 소스 <frame src="title.htm" name="title"> <frameset cols="150,*"> <frame src="menu1.htm" name="menu"> <frame src="content.htm" name="contents"> </frameset>
5) <IFRAME> <IFRAME src=”URL” name=”프레임 이름”>~<IFRAME> - HTML 문서 안에 다른 HTML문서를 창 형식으로 삽입한다. - 익스플로러에서만 지원되는 기능이다. - src, name외에 다음과 같은 속성을 지정 할 수 있다. ① Width : 프레임 너비(픽셀 또는 %)를 지정 ② Height : 프레임 높이(픽셀 또는 %)를 지정 ③ Marginwidth : 프레임 안의 좌우 여백(픽셀)을 지정 ④ Marginheight : 프레임 안의 상하 여백(픽셀)을 지정 ⑤ Scrolling : 스크롤(auto : 자동, yes : 있음, no : 없음) 설정 ⑥ Frameborder : 프레임 구분선을 표시하거나 숨김(1 : 표시, 0 : 숨김) ⑦ Align : 프레임의 정렬 상태(left, right, center)를 지정 Source 실행화면 <P>iframe창을 만들자 <iframe src="iframe.htm" name="win" widht="100" height="80" align="right"> </iframe>