HTML 기본 태그 문자 관련 태그와 속성을 알아본다. 서식 관련 태그와 문서 레이아웃 관련 태그를 알아본다. 목록을 만드는 태그와 링크 관련 태그를 알아본다. 배경 관련 태그와 멀티미디어 관련 태그를 알아본다. 표를 만들고 프레임 문서 제작 방법을 알아본다. 사용자 입력 양식 문서 제작 방법을 알아본다.
■ <FONT> 01_문자 관련 태그 글자의 크기, 색상, 서체를 지정 속성 SIZE=“n” : n=1~7, 기본값은 n=3 COLOR=“{#색상코드|색상이름 }” FACE="글꼴체" 태그 사용예 <FONT SIZE=“4”> … </FONT> <FONT COLOR=“red”> … </FONT> <FONT FACE=“바탕체”> … </FONT> <FONT SIZE=“4” COLOR=“#ff0000”>...</FONT>
01_문자 관련 태그 ■ 색상표현 단어
01_문자 관련 태그 ■ 색상코드표 RGB : 각각을 8비트를 이용하여 16진수로 표현 11111111 00000000
01_문자 관련 태그 ■ <FONT> 태그 사용 예
■ <BASEFONT> 01_문자 관련 태그 <HEAD> 태그 내에서 지정하면 문서전체에 적용 <BASEFONT size=“2” color=“black”> <BODY> 태그 내에서는 종료태그와 함께 사용
■ 문자관련 태그 01_문자 관련 태그 글자모양: 논리적 형태 <cite> : 인용문 <code> : 소스코드 <dfn> : 정의 <em> : 강조 <strong> : 강한 강조 <samp> : 예제 <var> : 변수
■ 문자관련 태그 01_문자 관련 태그 글자모양: 물리적 형태 <b> ... </b> <I> ... </I> <u> ... </u> <tt> ... </tt> <sub> ... </sub> <sup> ... </sup> <big> ... </big> <small> ... </small> <strike> … </strike> <blink> ... </blink>
■ <Hn> 태그 - heading 01_문자 관련 태그 ■ <Hn> 태그 - heading 문서 내의 단계별 제목 문서에 논리적 의미 부여 <Hn> : n = 1 ~ 6 n=1이 가장 큰 제목 자동 줄바꿈 속성 ALIGN=“{left|center|right }” <H1> … </H1> <H3 ALIGN=“center”> … </H3>
■ <Hn> 태그 사용 예 01_문자 관련 태그 <html> <head> <title>기본구조</title> </head> <body> <h1>h1 tag</h1> <h2>h2 tag</h2> <h3>h3 tag</h3> <h4>h4 tag</h4> <h5>h5 tag</h5> <h6>h6 tag</h6> <h1 align="center"> h1 tag </h1> </body> </html>
02_문서 레이아웃 관련 태그 ■ <BR> - Brake 줄바꿈 태그 단락구분은 하지 않음 종료태그 없음
■ <P> 태그 - Paragraph 02_문서 레이아웃 관련 태그 ■ <P> 태그 - Paragraph 문단 구분 줄을 바꿈과 동시에 한 줄 띄게 되는 효과 속성 align=“{ left|center|right }” 이것은 문단관련 태그를 연습 중입니다. <p>여기서 부터 새로운 문단으로 시작하고 있습니다.</p> 문단관련 태그의 사용법을 익힙시다. 이것은 문단관련 태그를 연습 중입니다. <p align=“center”>여기서 부터 새로운 문단으로 시작하고 있습니다.</p> 문단관련 태그의 사용법을 익힙시다.
■ <CENTER> 태그 02_문서 레이아웃 관련 태그 태그사이의 내용을 가운데 정렬 이것은 중앙정렬 태그를 연습<br> 중입니다. <center> 중앙정렬 태그를 이용하면 이렇게 보입니다.<br> 여기까지 </center> 중앙정렬 태그의 사용법을 익힙니다.
■ <HR> 태그 - Horizontal Rules 02_문서 레이아웃 관련 태그 ■ <HR> 태그 - Horizontal Rules 가로선 긋기 속성 ALIGN=“{left|center|right }” SIZE=“n” : 선의 두께(pixel), 기본값은 2 WIDTH=“n” : 선의 폭(pixel,%) NOSHADE : 음영효과 사용안함 COLOR=“color” : 선의 색상 <hr align=“ ” size=“n” width=“n” color=“color” [noshade]>
■ <HR>태그 사용 예 02_문서 레이아웃 관련 태그 hr 태그의 사용법을 알아봅니다.<br> 기본 선 선두께 4 <hr size="4"> 선두께 4 음영효과없음 왼쪽정렬 <hr align="left" size="4" noshade> 선두께 7 음영효과없음 폭 200픽셀 <hr size=7 noshade width=200> 선두께 7 음영효과없음 폭 창크기의 80% 선색상 빨강 <hr size=7 noshade width=80% color="red">
■ <ADDRESS> 태그와 주석문 02_문서 레이아웃 관련 태그 ■ <ADDRESS> 태그와 주석문 <ADDRESS> 문서 수정일, 주소 저자 정보 <!-- .... --> 주석문 <!-- 주석문을 연습하는 부분입니다. --> 위에 주석문이 있습니다. 안보이죠? <br><br> <hr size=4> <address> 서울특별시 종로구 명륜동 53 성균관대학교 600주년 기념관 hckim@ocu.ac.kr </address> <!-- 주석문은 이와같이 여러 줄도 가능합니다. -->
■ DIV 태그 - division 02_문서 레이아웃 관련 태그 특정부분과 구역으로 구분 논리적 블록요소 주로 스타일 시트와 함께 사용 앞뒤 줄바꿈 속성 ALIGN=“{ left|center|right }” 이것은 문단관련 태그를 연습 중입니다. <div>여기서 부터 새로운 문단으로 시작하고 있습니다.</div> 문단관련 태그의 사용법을 익힙시다. 이것은 문단관련 태그를 연습 중입니다. <div align=“center”>여기서 부터 새로운 문단으로 시작하고 있습니다.</div> 문단관련 태그의 사용법을 익힙시다.
■ SPAN 태그 02_문서 레이아웃 관련 태그 강제 줄바꿈 없이 텍스트를 구분 주로 스타일시트와 함께 사용 이것은 문단관련 태그를 연습 중입니다. <span>여기서 부터 새로운 문단으로 시작하고 있습니다.</span> 문단관련 태그의 사용법을 익힙시다.
■ <PRE> 태그 - Preformatted 02_문서 레이아웃 관련 태그 ■ <PRE> 태그 - Preformatted 입력한 형태그대로 출력 공백, 줄바꿈 인식 내부의 태그 인식 이것은 문단관련 태그를 연습 중입니다. <pre> <p>여기서 부터 새로운 문단으로 시작하고 있습니다.</p> 문단관련 태그의 사용법을 익힙시다. </pre>
■ Character Entity 02_문서 레이아웃 관련 태그 HTML 내에서의 특수문자표시 방법 기호 표기 설명 “ " 인용문기호 & & 앰퍼센트 < < Lower than > > Greater than 공백 © © 권한기호 ® ® 등록상표
■ Character Entity 사용 예 02_문서 레이아웃 관련 태그 <p> 태그를 보여주고 싶은데.... ??? <br> < p > 이렇게 하면 됩니다.<br> 공백은 이렇게 해선 만들어지 않습니다.<br> 공백은 이렇게 해야합니다.
■ <MARQUEE> 태그 02_문서 레이아웃 관련 태그 텍스트에 움직임 효과를 부여 속성 BEHAVIOR=”{alternate|scroll|slide}” 텍스트의 움직임형태 DIRECTION=”{down|up|left|right}” 텍스트의 움직임 방향 LOOP=”{n|infinite}” 반복횟수 SCROLLAMOUNT=”n” 스크롤되는 픽셀 수 SCROLLDELAY=”n” 메시지출력 시간간격(msec) BGCOLOR=“color” : 스크롤되는 공간의 배경색 WIDTH, HEIGHT : 스크롤되는 공간의 크기 HSPACE, VSPACE : 스크롤되는 공간의 좌우, 상하여백
■ 순서 리스트 03_목록 관련 태그 순서글 머리번호에 순서번호가 있는 리스트 <OL> <LI> 리스트의 시작과 종료(Ordered List) 속성 - TYPE=“{ A|a|I|i|1 }” : 글머리번호의 종류 - START=“n” : 글머리번호의 시작번호 <LI> 리스트 항목을 기술 TYPE=“{ A|a|I|i|1 }” : 해당항목의 글머리번호의 종류 VALUE=“n” <OL> <LI> … </LI> </OL>
■ 순서리스트 사용 예 03_목록 관련 태그 <ol> <li>서울</li> <ol type=I> <li>서울 <li>경기 <li value=5>제주 </ol> <ol type=a start=3> <li>서울 <li>경기 <li>제주 </ol>
■ 무순서 리스트 03_목록 관련 태그 순서글머리번호에 순서번호가 없는 리스트 <UL> <LI> 리스트의 시작과 종료(Unordered List) 속성 TYPE=“{ disc|circle|square }” : 글머리의 모양 l ¡ n <LI> 리스트 항목을 기술 <UL> <LI> … </LI> </UL>
■ 무순서 리스트 사용 예 03_목록 관련 태그 <ul> <ul type=square> <li>서울 <li>경기 <li>제주 </ul> <ul type=square> <li>서울 <li>경기 <li>제주 </ul>
■ 정의리스트 03_목록 관련 태그 <DL> : 정의리스트의 시작과 종료 <DT> : 정의 제목 <DD> : 설명, 항목, DT에 대해 들여쓰기효과 <DL compact> <dl> <dt>HTML <dd>Hyper Text Markup Language <dt>DHTML <dd>Dynamic HTML </dl> <dl compact> <dt>[1] <dt>[2]
■ 중첩 리스트 03_목록 관련 태그 시작태그, 마감태그 사용주의 (대칭) <ol> <li>서울 <ul type=disc> <li>종로 <li>동대문 </ul> <li>경기 <li>제주 </ol>
■ Hyperlink - <A> 태그 04_링크 관련 태그 ■ Hyperlink - <A> 태그 anchor 속성 HREF=“url” : 연결문서지정 TARGET : 연결문서를 출력할 대상 _blank : 새로운 창을 열어서 문서연결 _top : 현재창의 최상위에 문서연결 _parent : 현재문서창을 연 문서창에서 연결 _self : 자기 자신의 창에서 연결 Frame_name : 지정한 프레임에서 연결 TITLE : 링크에 대한 설명을 기술 <A HREF=“연결할 문서” TARGET=“대상”> 내용 </A>
■ Hyperlink 사용 예 04_링크 관련 태그 2.htm 하이퍼링크연습문서입니다. <a href="2.htm"> HTML </a>이란 무엇인가? 하이퍼링크연습문서입니다. <a href="2.htm“ target=“_blank”> HTML </a>이란 무엇인가?
■ <A>의 TITLE 속성 04_링크 관련 태그 <a href="http://www.ocu.ac.kr" title="OCU 홈페이지로"> ocu가기 </a>
■ Hyperlink의 책갈피 이용 04_링크 관련 태그 NAME 속성을 이용하여 문서 내의 특정부분으로의 연결설정 대상문서에 책갈피위치설정 후 하이퍼링크지정 시 책갈피이름을 지정 책갈피 위치 설정 : <A NAME=“name”>..</A> 책갈피 위치로 링크생성 :<A HREF=“문서#name”> .. </A> 동일문서 내에서는 문서명 생략가능
<A NAME=“name”>..</A> 04_링크 관련 태그 ■ NAME 속성(1) www.htm 하이퍼링크연습문서입니다. <a href="www.htm"> WWW </a>란 무엇인가? <A NAME=“name”>..</A>
■ NAME 속성(2) 04_링크 관련 태그 www.htm www.htm 하이퍼링크연습문서입니다. <a href="www.htm#imsi"> HTML </a>이란 무엇인가? www.htm 그 부분과 연관이 되는 다른 문서로 이동이 된다.<br> <a name="imsi"> WWW </a> 은 바로 이러한 원리를 이용하는 하이퍼텍스트문서로 정보를 표현 함으로서 이용자가 자신이 원하는 정보를 보다 더 편하고 빠르게 습득할 수 있도록 기능을 제공한다. www.htm
■ 동일문서 내에서 책갈피 사용 04_링크 관련 태그 <html> <head> <title> 링크연습 </title> </head> <body> <a href=“#서론” name=“위”>1.서론 </a> <a href=“#본론”>2.본론 </a> <a href=“#결론”>3.결론 </a> <a name=“서론”> 1.서론 </a> 이부분은 서론이…. <a href=“#위”>위로가기</a> <a name=“본론”> 2.본론 </a> 이부분은 본론입니다….. <a name=“결론”> 3.결론 </a> 이부분은 결론입니다.… ……….. ………...
■ 다른 서버의 문서로 연결 04_링크 관련 태그 웹문서로 연결 : http://www.ocu.ac.kr FTP서버로 연결 : ftp://ftp.shareware.co.kr 하이퍼링크연습문서입니다. <a href=“http://www.ocu.ac.kr"> OCU로 가기 </a>
■ 편지보내기 04_링크 관련 태그 편지보내기 : mailto:메일주소 하이퍼링크연습문서입니다. <a href=“mailto:abc@ocu.ac.kr"> 편지쓰기 </a>
■ Hyperlink 만들기 04_링크 관련 태그 하이퍼링크연습문서입니다. <a href="http://www.ocu.ac.kr/images/img_01.gif"> OCU 그림 </a> 클릭
■ <BODY> 태그의 속성들 04_링크 관련 태그 BACKGROUND : 문서의 배경그림 BGPROPERTIES="fixed“ : 배경그림 고정 BGCOLOR=“color” : 문서의 배경색상 TEXT=“color” : 기본 글자색상 LINK=“color” : 링크색상 VLINK=“color” : 방문한 링크색상 ALINK=“color” : 클릭순간부터 링크연결 중 색상 LEFTMARGIN=“n” : 문서의 왼쪽여백 TOPMARGIN=“n” : 문서의 위쪽여백 marginheight, marginwidth : NETSCAPE
04_링크 관련 태그 ■ 문서의 배경 이미지 <BODY BACKGROUND=“image_url” >
04_링크 관련 태그 ■ 문서의 배경색 지정
04_링크 관련 태그 ■ 링크관련 글자색 변경 <body text="#0000ff" link="red" vlink="green“ alink=“black”> 하이퍼링크연습문서입니다.<br> <a href="http://www.ocu.ac.kr"> OCU로 가기 </a><br> <a href="http://mail.ocu.ac.kr"> OCU 메일 </a>
■ 그림 삽입 06_멀티미디어 관련 태그 <IMG> : 그림 삽입 속성 SRC = “image_url” : 그림의 위치지정 WIDTH, HEIGHT : 그림의 크기 지정 ALIGN = “{left|right|top|middle|bottom}” : 정렬 BORDER = “n” : 테두리 두께 ALT =“설명”: 마우스오버 시 표시할 설명 VSPACE, HSPACE : 그림주위의 글자와의 간격
06_멀티미디어 관련 태그 ■ 그림 삽입 예 <img src=“http://www.ocu.ac.kr/images/img_01.gif”> <img src=“images/abc.gif”> Homepage and ... 하이퍼링크연습문서입니다. <img src="http://www.ocu.ac.kr/images/img_01.gif"> OCU 그림 삽입
- 06 멀티미디어 관련태그 ■ 이미지와 텍스트 정렬 글자의 위치를 이미지와 연관시켜 배치 이미지를 중심으로 텍스트를 배치할 경우 ALIGN= top, middle, bottom top -글자를 이미지의 가장 윗 부분에 정렬 middle -글자를 이미지의 중앙선에 정렬 bottom -글자를 이미지의 가장 밑부분에 정렬 ALIGN=bottom옵션은 기본값 문장이 긴 경우, 창의 크기를 줄이면 자동적으로 이미지 밑으로 위치하게 된다는 것에 주의
06_멀티미디어 관련 태그 ■ 이미지 정렬 예 <img src=“...” align=top|middle|bottom|right|left> <p align=left|center|right><img src=“...“> </p> 하이퍼링크연습문서입니다.<br> <img src="pic.jpg" > 그림삽입 <br> <img src="pic.jpg" align=top> 그림삽입 <br> <img src="pic.jpg" align=middle> 그림삽입 <br> <img src="pic.jpg" align=right>
■ 이미지 제목 넣기 예 06_멀티미디어 관련 태그 이미지 제목 넣기 <img src=“img_url” alt=“title” > 이미지위치에 이미지 대신 제목 보여 줌 텍스트베이스 브라우저에서 사용 로딩시간동안 이미지 위치에 보여 줌 하이퍼링크연습문서입니다. <img src=“http://www.ocu.ac.kr/images/img_01.gif” alt=“OCU 로고”> OCU 그림 삽입
■ 여백 및 테두리 조정하기 06_멀티미디어 관련 태그 <IMG SRC=”그림파일" VSPACE=n HSPACE=n> 이미지를 부동 이미지로 판별하게 해서 글자가 그 주위에 오지 못하게 함 HSPACE 속성 이미지의 양 옆으로 (가로측) 여백을 지정 VSPACE 속성 이미지의 위,아래 여백을 지정 BORDER 속성 이미지의 테두리를 지정, 강조 색깔 : BLACK
■ 이미지 넣기 (5) 06_멀티미디어 관련 태그 외부 이미지 지정하기 <a href=“ex_img.jpg”><img src=“in_img.jpg”></a>
■ Image Map 06_멀티미디어 관련 태그 하나의 이미지 내에 여러 개의 서로 다른 링크구성 활용 예 <img usemap=“map_name”> <map name=”map_name”> <area href=“..” shape=“..” coords=“..”> </map> shape 모양 coords 설명 rect 사각형 x1,y1,x2,,y2 x1,y1 : 왼쪽위 좌표 x2,y2 : 오른쪽아래 좌표 circle 원 x,y,r x,y : 중심점 좌표 r : 반지름 poly 다각형 x1,y1,x2,y2,x3,y3.. 각각의 모서리 좌표
06_멀티미디어 관련 태그 ■ 이미지 맵 예제 <img src="global.gif" usemap="my_menu"> <map name="my_menu"> <area href="sj.htm" shape="rect" coords-"0,0,45,10"> <area href="st.htm" shape="rect" coords-"47,0,90,10"> <area href="sk.htm" shape="rect" coords-"92,0,135,10"> </map>
■ 멀티미디어 삽입 파일재생방식 06_멀티미디어 관련 태그 <EMBED> : 플러그인으로 작동하는 요소를 삽입 속성 다운로드 : wav, mid, au, mp3 스트리밍 : ra, wmv, wma, asf <EMBED> : 플러그인으로 작동하는 요소를 삽입 속성 align=”{left;right;top;bottom;middle}” 텍스트와의 정렬 border=”n” 테두리 두께 height, width=”n” 객체의 높이와 두께 hidden=”{true;false}” : 화면상에 표시 유뮤 loop=”{n;infinite}” : 반복유무 pluginspace=”url” 사용자가 플러그인이 없을 경우 해당 플러그인을 다운로드받을 수 있는 주소 src=”url” 객체의 url autostart=”{true;false}” 문서 로딩 후 자동으로 재생
06_멀티미디어 관련 태그 ■ 멀티미디어 연습 <img src=“http://image.hanmail.net/hanmail/top/logo/030101_logo.gif”>
■ <TABLE> 태그 07_표 관련 태그 표의 시작과 끝 속성 BORDER=“n” : 외부테두리 두께, 기본값은 0 CELLSPACING=“n” : 셀 간격 CELLPADDING=“n” : 셀 내부여백 WIDTH=“n”, HEIGHT=“n” : 표의 너비, 높이 BGCOLOR=“color” : 표의 배경색 BORDERCOLOR=“color” : 표의 테두리 색
■ 표만들기 예 07_표 관련 태그 <TR>..</TR> : 행단위 지정 <TH>..</TH> : 셀 헤더지정 <TD>..</TD> : 셀 데이타지정 <table border=1> <tr> <th>No.</th> <th>시간</th> </tr> <td>1교시</td> <td>10:00</td> </table>
■ 표 만들기 연습 07_표 관련 태그 <table border=5 cellspacing=5 <table border=1 cellspacing=1 cellpadding=1> <tr><th>No.</th><th>시간</th></tr> <tr><td>1</td><td>10:00</td></tr> </table> <table border=5 cellspacing=5 cellpadding=5 width=200 bgcolor=“#ddefdd”>
■ <TR><TH><TD>에서 사용되는 속성 07_표 관련 태그 ■ <TR><TH><TD>에서 사용되는 속성 ALIGN=“{ left|center|right }”(tr,th,td) VALIGN=“{ top|middle|bottom }”(tr,th,td) BGCOLOR=“color” : 셀의 배경색 (tr,th,td) COLSPAN=“n” : 열합병 (th,td) ROWSPAN=“n” : 행합병 (th,td) NOWRAP : 문장의 줄바꿈 방지 (th,td) WIDTH=“n”, HEIGHT=“n” : 셀의 폭, 높이 (th,td)
■ 셀 합병 연습 07_표 관련 태그 <table border=2> <tr> <td colspan=“2”> ..</td> <td> .. </td> </tr> <td>..</td> </table>
■ <CAPTION> 태그 07_표 관련 태그 표 제목 속성 ALIGN=“{ top|bottom }” : 제목의 위치 <table border=3 cellpadding=5> <caption align=bottom>표 1: caption 값</caption> <tr><th>align값</th><th>위 치</th></tr> <tr><th>bottom</th><td>표아래</td></tr> <tr><th>top</th><td>표 위</td></tr> </table>
07_표 관련 태그 ■ 표 만들기
■ 표 만들기 응용 07_표 관련 태그 활용하기 다단 문서 작성 : border=0이용 이미지 삽입 시 액자효과 : 중첩된 table사용
■ FRAME 문서 08_프레임 관련 태그 하나의 창을 여러 개의 화면으로 분할 프레임마다 독립적인 URL 가짐 <BODY>대신 <FRAMESET> 태그 사용 프레임문서 제작 방법 <FRAMESET> 태그를 이용하여 창나누기 <FRAMESET> 태그 내에 <FRAME>태그를 이용하여 각 프레임에 나타낼 문서지정
■ <FRAMESET> 태그 08_프레임 관련 태그 프레임정의의 시작과 끝, 프레임설정 속성 ROWS, COLS : 행 또는 열방향으로의 프레임구분 ROWS=“프레임1크기,프레임2크기,… ” ROWS=“200, 600” COLS=“30%, 70%” ROWS=“100, *, 100” FRAMEBORDER=“{ yes|no }” : 경계선표시 유무 FRAMESPACING : 경계선의 두께 BORDERCOLOR : 경계선 색상 <html> <head> </head> <frameset cols=“200,*”> <frame> </frameset> </html>
■ <FRAME> 태그 08_프레임 관련 태그 각각의 프레임에 표시할 문서 지정 속성 SRC=“url” : 프레임에 보여질 HTML문서의 URL NAME=“name” : 프레임의 이름 SCROLLING=“{ yes|no|auto }” : 스크롤 바 생성유무, NORESIZE : 프레임크기 고정 프레임설정 순서: L -> R, T -> B 1.htm <html> <head> </head> <frameset cols=“200,*”> <frame src=“m.htm”> <frame src=“2.htm”> </frameset> </html> 2.htm m.htm
■ FRAME NAME(1) 08_프레임 관련 태그 Target 지정 기본 Target 설정 m.htm 2.htm main <a href=“….” target=“……”> _top, _blank, _self, 프레임명 기본 Target 설정 <base target=“…... “> : HEAD tag 내에 선언 <html> <head> </head> <frameset cols=“200,*”> <frame src=“m.htm”> <frame src=“2.htm” name=“main”> </frameset> </html> m.htm 2.htm main frame_name
■ FRAME NAME(2) 08_프레임 관련 태그 m.htm <a href="http://www.ocu.ac.kr"> ocu가기 </a> <br> <a href="http://www.ocu.ac.kr" target="main"> ocu가기2 </a> m.htm
■ <NOFRAMES> 태그 08_프레임 관련 태그 FRAME 태그를 지원하지 않는 브라우저를 위해 설정 <html> <head> </head> <frameset cols=“200,*”> <frame src=“1.htm”> <frame src=“2.htm” name=“main”> </frameset> <noframes> <body> 이 페이지를 보려면 프레임을 지원하는 브라우저가 필요합니다. </body> </noframes> </html>
■ 다중 FRAME 문서 08_프레임 관련 태그 <html> <head> </head> <frameset cols="50,*"> <frame > <frameset rows="60,*"> <frame> </frameset> </html>
■ Floating 프레임 08_프레임 관련 태그 <IFRAME> : floating 프레임 src=”url” 로드할 문서의 url width, height = “n” 프레임의 크기 지정 align : iframe 위치 지정 주위에 글자가 배치될 수 있게 할 수 있는 박스형프레임 생성 태그
08_프레임 관련 태그 ■ Floating 프레임 예제
■ 입력 폼 08_폼 관련 태그 사용자로부터 정보를 입력 받을 수 있는 형식 속성 <FORM> NAME : 폼 이름 ACTION : 폼에서 입력된 데이터를 보내서 처리하는 프로그램의 URL을 지정 METHOD : 데이터 전송방법 <FORM> </FORM>
■ 텍스트 입력 양식 09_폼 관련 태그 <INPUT> 속성 TYPE=“text” : 텍스트 입력상자 NAME = “field_name” : 입력상자 이름 SIZE = “n” : 입력상자 크기 (디폴트:20) MAXLENGTH = “n” : 최대 입력가능 글자수 VALUE = “value” : 입력상자 초기값 TITLE : 마우스오버 시 표시문자 READONLY : 입력불가 입력하나 : <INPUT TYPE="text" NAME="text1" MAXLENGTH=5> <P> 입력둘 : <INPUT TYPE="text" NAME="text2" SIZE=10 > 입력셋 : <INPUT TYPE="text" NAME="text3"> 입력셋 : <INPUT TYPE="text" NAME="text4" VALUE="초기값">
■ 암호 입력 양식 09_폼 관련 태그 <INPUT> 속성 TYPE=“password” : 암호 입력상자 NAME = “field_name” : 입력상자 이름 SIZE = “n” : 입력상자 크기 (디폴트:20) MAXLENGTH = “n” : 최대 입력가능 글자수 VALUE = “value” : 입력상자 초기값 암호넣기 하나 : <INPUT TYPE="password" NAME="pass1" MAXLENGTH=5> <P> 암호넣기 둘 : <INPUT TYPE="password" NAME="pass2" SIZE=10 > 암호넣기 셋 : <INPUT TYPE="password" NAME="pass3"> 암호넣기 넷 : <INPUT TYPE="password" NAME="pass4" VALUE="abc">
■ 체크박스 양식 09_폼 관련 태그 <INPUT> 속성 TYPE=“checkbox” : 체크박스 NAME = “field_name” : 체크박스 이름 VALUE = “value” : 선택 시 넘겨줄 데이터 CHECKED : 체크된 상태로 로딩 <H2> 좋아하는 프로그래밍 언어를 선택하시오. </H2> <H3> <INPUT TYPE="checkbox" NAME="check" VALUE="item1" CHECKED> 비주얼베이직 <BR> <INPUT TYPE="checkbox" NAME="check" VALUE="item2"> 델파이 <BR> <INPUT TYPE="checkbox" NAME="check" VALUE="item3" CHECKED> 비주얼C++ <BR> <INPUT TYPE="checkbox" NAME="check" VALUE="item4"> 자바 <BR> </H3>
■ 라디오 버튼 양식 09_폼 관련 태그 <INPUT> 속성 TYPE=“radio” : 옵션버튼 NAME = “field_name” : 옵션버튼 이름 같은 이름으로 그룹화 VALUE = “value” : 선택 시 넘겨줄 데이터 CHECKED : 체크된 상태로 로딩 <H2> 좋아하는 프로그래밍 언어를 하나만 선택하시오. </H2> <H3> <INPUT TYPE="radio" NAME="radio_btn" VALUE="item1" CHECKED> 비주얼베이직 <BR> <INPUT TYPE="radio" NAME="radio_btn" VALUE="item2"> 델파이 <BR> <INPUT TYPE="radio" NAME="radio_btn" VALUE="item3"> 비주얼C++ <BR> <INPUT TYPE="radio" NAME="radio_btn" VALUE="item4"> 자바 <BR> </H3>
■ 확인 버튼 09_폼 관련 태그 <INPUT> 속성 TYPE=“submit” : 확인버튼 NAME = “button_name” : 확인버튼 이름 VALUE = “value” : 버턴에 표시할 글자 <FORM ACTION = "MOVE.HTML" METHOD=POST> 이름 : <INPUT TYPE="text" NAME="text1" SIZE=10> <P> 전화 : <INPUT TYPE="text" NAME="text2" SIZE=14> <P> 주소 : <INPUT TYPE="text" NAME="text2" SIZE=60> <P> <INPUT TYPE="submit" VALUE="다른 곳으로 이동"> </FORM>
■ 취소 버튼 09_폼 관련 태그 <INPUT> 속성 TYPE=“reset” : 취소버튼 NAME = “button_name” : 취소버튼 이름 VALUE = “value” : 버튼에 표시할 글자 <FORM ACTION = "MOVE.HTML" METHOD=POST> 이름 : <INPUT TYPE="text" NAME="text1" SIZE=10> <P> 전화 : <INPUT TYPE="text" NAME="text2" SIZE=14> <P> 주소 : <INPUT TYPE="text" NAME="text2" SIZE=60> <P> <INPUT TYPE="reset" VALUE="리셋버튼"> </FORM>
■ 파일선택 버튼 09_폼 관련 태그 <INPUT> 속성 파일입력상자와 버튼이 자동생성 TYPE=“file” : 파일선택버튼 NAME = “button_name” : 버튼 이름 파일입력상자와 버튼이 자동생성 <FORM ACTION = "MOVE.HTML" METHOD=POST> 파일보내기 : <INPUT TYPE="file" VALUE="보낼파일선택"> </FORM>
■ 일반 버튼 09_폼 관련 태그 <INPUT> 속성 TYPE=“button” : 일반버튼 NAME = “button_name” : 버튼 이름 VALUE = “value” : 버튼에 표시할 글자 <FORM ACTION = "MOVE.HTML" METHOD=POST> ID : <INPUT TYPE="text" NAME="text1" > <INPUT TYPE=“button" VALUE="ID중복확인"> </FORM>
■ 기타 09_폼 관련 태그 그림버튼 속성 숨김양식 TYPE=“image” : 그림버튼 NAME = “button_name” : 버튼 이름 SRC = “url” : 그림파일위치 숨김양식 TYPE=“hidden” : 숨김 양식 NAME = “name” : 양식 이름 <FORM ACTION = "MOVE.HTML" METHOD=POST> <INPUT TYPE=“image" SRC=“2.jpg"> 마음에 드는 곳을 누르세요 </FORM>
■ 리스트박스 09_폼 관련 태그 <SELECT> : 리스트박스의 시작과 끝 속성 SIZE=“n” : 리스트박스 크기 NAME = “listbox_name” : 박스 이름 MULTIPLE : 복수항목 선택가능 <OPTION> : 각 항목을 설정 SELECTED : 초기 선택상태 VALUE = “value” : 선택 시 할당값 <SELECT NAME=“list1" SIZE=3> <OPTION> … </OPTION> </SELECT>
■ 리스트박스 예제 09_폼 관련 태그 <SELECT NAME=“list1" SIZE=3> <OPTION selected> 서울특별시 </OPTION> <OPTION> 경기도 </OPTION> <OPTION> 부산광역시 </OPTION> <OPTION> 제주도 </OPTION> </SELECT> <SELECT NAME=“list1" SIZE=3 MULTIPLE> <OPTION> 서울특별시 </OPTION> <OPTION> 경기도 </OPTION> <OPTION> 부산광역시 </OPTION> <OPTION> 제주도 </OPTION> <OPTION> 광주광역시 </OPTION> <OPTION> 충청남도 </OPTION> <OPTION> 경상북도 </OPTION> </SELECT>
■ 콤보박스 09_폼 관련 태그 <SELECT> : 콤보박스의 시작과 끝 속성 NAME = “listbox_name” : 박스 이름 <OPTION> : 각 항목을 설정 SELECTED : 초기 선택상태 VALUE = “value” : 선택 시 할당값 <SELECT NAME=“list1" > <OPTION> 서울특별시 </OPTION> <OPTION selected > 경기도 </OPTION> <OPTION> 부산광역시 </OPTION> <OPTION> 제주도 </OPTION> </SELECT>
■ 메모 입력상자 09_폼 관련 태그 <TEXTAREA> 속성 ROWS, COLS : 행과 열의 개수 NAME = “name” : 상자 이름 <FORM > <H2> 낙서를 열심히 합시다. </H2> <TEXTAREA NAME = "memo" ROWS=12 COLS=70> 내용을 여기에 적습니다. </TEXTAREA> <P> <INPUT TYPE="reset" VALUE="다시 입력"> <INPUT TYPE="submit" VALUE="저장 하기"> </FORM>
■ 요약 문자의 색상은 색상명을 사용할 수도 있으나 RGB 색상 코드를 사용하는 것이 더 정확한 색상 표현 방법이다. <FONT> 태그에서 사용할 수 있는 속성으로 SIZE, FACE, COLOR가 있다. HTML 문서의 기본 글자 크기는 SIZE=3이다. 주석문 태그는 브라우저에서는 무시하기 때문에 보이지 않으며, 소스를 관리하기 좋게 해주며, 다른 사람이 봐도 쉽게 이해되게 해주는 역할을 한다. 하이퍼링크란 윈도우의 도움말 같은 형태로 문서 안에 특정 문자열이나 이미지를 마우스로 클릭했을 때 관련된 다른 문서를 연결해주는 것이다. 하이퍼링크에서 문서 내의 특정 위치로 연결하고자 하는 경우 NAME 속성을 이용하여 이름을 미리 정한 후 해당 이름 위치로 바로 이동하는 것이 가능하다. 하이퍼링크 설정 시 연결 문서를 보여줄 대상을 설정하는 속성은 TARGET이다. <BODY> 태그에는 속성 중 배경 관련 속성으로 배경 색상을 지정하는 BGCOLOR 속성과 배경 그림을 지정하는 BACKGROUND 속성이 있다. 표를 작성할 때 하나의 행을 정의할 경우는 <TR> 태그를 사용한다. 표를 작성할 때 여러 셀을 합병하는 경우 ROWSPAN과 COLSPAN 속성을 사용한다. 프레임 구조에 대한 정보를 가지고 있는 문서를 프레임 셋 문서라고 한다. 사용자 입력 양식 작성 시 텍스트 입력상자, 라디오 버튼, 체크상자, 확인 버튼 등을 만들 때 <INPUT> 태그를 사용한다.