웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 2 장 HTML 문법
목차 제 2 장 HTML 문법 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2
2.1 기본태크 구조태그 문자서식태그 문단서식태그 3
2.1.1 구조태그 HTML 태그들중가장기본이되는태그 <HTML> : HTML 문서의시작을의미함 <TITLE> : 웹브라우저의제목표시줄에표시될내용을작성 <HEAD> : 스타일시트를기술하거나, 각종스크립트언어의함수등을선언하는부분으로사용됨 <BODY> : HTML 문서의실제내용을포함하는부분, 이부분에작성된내용이브라우저에나타남 4
2.1.1 구조태그 <BODY> 태그의속성 속성설명 BACKGROUND = 이미지파일명 배경으로사용될이미지파일을지정 BGCOLOR = 색상명 OR RGB값 배경색을지정함 TEXT = 색상명 OR RGB값 문자색을지정함 LINK = 색상명 OR RGB값 링크로설정된문자색을지정 ALINK = 색상명 OR RGB값 링크클릭시변화되는색을지정 VLINK = 색상명 OR RGB값 링크를사용한후의문자색을지정 색상적용방법 BGCOLOR = RED BGCOLOR = #FF0000 5
2.1.1 구조태그 구조태그연습 예제 2-1 Structure-Tag.html <HTML> <HEAD><TITLE> HTML 문서의구조태그 </TITLE></HEAD> <BODY BACKGROUND = "BG.GIF" TEXT = "BLACK"> <BR> HTML 은 <HTML><HEAD> <BR> <TITLE><BODY> 4 개의구조태그를 <BR> 이용하여구성할수있다. </BODY> </HTML> 6
2.1.2 문자서식태그 문자서식태그란글자의모양, 글자의색, 굵은글자, 기울임등다양한문자모양을만들기위한태그임 기본글꼴태그 <FONT> 태그 특수문자표현방법 7
2.1.2 문자서식태그 기본문자태그 <B> : Bold의약자로굴은글자를표현함 <I> : 이탤릭체를표현하는데사용함 ( 기울임 ) <S> : 취소선 (strike Through) 을나타내는데사용 <SUP> : 위첨자를나타내는데사용 <SUB> : 아래첨자를나타내는데사용 8
2.1.2 문자서식태그 기본문자태그예제 예제 2-2 Font.html <HTML> <HEAD><TITLE> HTML 문서의글꼴태그들 </TITLE></HEAD> <BODY> <BR><B> : <B>Bold 의약자로굵은글자를표현할때사용한다.</B> <BR><I> : <I> 이탤릭체를표현하는데사용한다.( 기울임 )</I> <BR><U> : <U> 글자에밑줄을표시하는데사용한다.</U> <BR><S> : <S> 취소선 (Strike Through) 을나타낸다.</S> <BR><SUP> : <SUP> 위첨자를나타낸다.<SUP> <BR><SUB> : <SUB> 아래첨자를나타낸다.<SUB> </BODY> </HTML> 9
2.1.2 문자서식태그 FONT 태그 FONT 태그는문자의다양한속성을바꾸기위해사용됨 < 태그명속성 1 = 속성값 속성 2= 속성값 > 속성설명 SIZE = N 문자의크기를지정함 FACE = 폰트명 폰트모양을지정함 COLOR = 색상명 OR RGB값 문자의색을지정함 SIZE 속성의기본값은 3 으로설정되어있음 10
2.1.2 문자서식태그 FONT 태그 다음과같이다양한문자표현이가능함 11
2.1.2 문자서식태그 특수문자표현 HTML에서 < 와같은특수문자는이미태그에서사용하기로예약되어있음 특수문자를표현하기위해다음과같은표현을사용하여야함 : 공백 < : < > : > & : & " : 12
2.1.2 문자서식태그 특수문자예제 예제 2-6 Special-char.html <HTML> <HEAD><TITLE> 특수문자의표현 </TITLE></HEAD> <BODY> <BR><FONT FACE = "ARIAL"> < </FONT> <BR><FONT FACE = "ARIAL"> > </FONT> <BR><FONT FACE = "ARIAL"> & </FONT> <BR><FONT FACE = "ARIAL"> " </FONT> <BR><FONT FACE = "ARIAL"> 공 백 </FONT> </BODY> </HTML> 13
2.1.3 문단서식태그 문단의정렬, 스타일, 문단의문자색상등을한번에적용시키기위한태그 <BR> 태그 <P> 태그 수평선태그 문장인용태그 <PRE> 태그 14
2.1.3 문단서식태그 <BR> 태그 줄바꿈태그, 워드프로세싱프로그램에서엔터키와동등한역할을수행함 <BR> 태그는 </BR> 과같은닫힘태그없이단독으로사용됨 앞의예제들을통해많은예제를확인할수있음 15
2.1.3 문단서식태그 <P> 태그 문단을바꾸기위해서는 <P> 태그를사용함 <P> 태그는중복으로적용되지않음 <P> 태그는다음장에서배우게될스타일시트를적용할때중요한요소로사용됨 속성설명 ALIGN = LEFT OR CENTER OR RIGHT 문단의정렬모양을지정 16
2.1.3 문단서식태그 <P> 태그예제 예제 2-7 Paragraph.html <HTML> <HEAD><TITLE> 문단태그사용법 </TITLE></HEAD> <BODY> <P ALIGN = "LEFT"> 왼쪽정렬입니다.</P> <P ALIGN = "CENTER"> 가운데정렬입니다.</P> <P ALIGN = "RIGHT"> 오른쪽정렬입니다.</P> 이것은 P 태그를줄바꿈태그로사용하는예입니다.<P><P><P> <BR> 두개는 <P> 와비슷하게동작합니다.<BR><BR> 하지만 P 태그는중복되지않습니다. </BODY> </HTML> 17
2.1.3 문단서식태그 수평선태그 문장과문장을나누거나페이지의상하구분을나눌필요가있을때사용함 <HR> 태그를사용하며다음과같은속성값을가지고있음 속성설명 SIZE = 픽셀수 수평선의세로길이 ( 굵기 ) 를지정 WIDTH = 픽셀수 OR OO% 수평선의가로길이를지정 ALIGN = LEFT, CENTER, RIGHT 수평선의정렬위치를지정 NOSHADE 수평선의입체감을제거한다. 18
2.1.3 문단서식태그 문장인용태그 문서를작성할때, 인용문은특별하게처리해야하는경우에사용 <BLOCKQUOTE> 태그를사용 TAB 키나공백문자를삽입하지않아도자동으로들여쓰기가적용됨 19
2.1.3 문단서식태그 문장인용태그예제 예제 2-9 BlockQuote.html <HTML> <HEAD><TITLE>BLOCKQUOTE 태그사용법 </TITLE></HEAD> <BODY> 오늘의명언 <BLOCKQUOTE>The most beautiful thing in the world is, of course, the world itself</blockquote> The most beautiful thing in the world is 세상에서가장아름다운것은물론세상그자체이다. </BODY> </HTML> 20
2.1.3 문단서식태그 <PRE> 태그 특수문자또는수식, 공백의사용이빈번한경우매번특수한방법으로표현하기에는사용자에게너무불편함 HTML에서는 <PRE> 태그안의내용은그대로문서에표현하는방법을사용하여위와같은문제를해결하고있음 21
2.1.3 문단서식태그 <PRE> 태그예제 예제 2-10 Pre-Tag.html <HTML> <HEAD><TITLE>BLOCKQUOTE 태그사용법 </TITLE></HEAD> <BODY> 보통 HTML 에서는 < 를 &LT; 으로표시해야하지만 <PRE>PRE 태그안에서는 < 그냥사용해도됩니다.</PRE> </BODY> </HTML> 22
2.2 LINK 태그 문서내링크 URL 을이용한문서갂링크 E-MAIL 링크 23
2.2.1 문서내링크 PDF 문서에서목차를클릭하면해당페이지로이동하게된다. HTML 문서에서위와같은기능을적용하기위해서는문서내링크기능을사용함 문서내 LINK 생성 ( 링크된문자열생성, 이동할 LABLE 지정 ) <A HREF= #LABLE > 링크될문자열 </A> 문서내 LABLE 생성 ( 이동할 LABLE 생성 ) <A NAME= LABLE > 이동할부분의내용작성 </A> 24
2.2.1 문서내링크 문서내링크예제 예제 2-11 Doc-Link.html <HTML> <HEAD><TITLE>HYPER LINK - 문서내링크 </TITLE></HEAD> <BODY> <A HREF = "#LABLE1">LABLE1 로이동 </A> <A HREF = "#LABLE2">LABLE2 로이동 </A> <BR><BR><BR><BR><BR><BR><BR> <A NAME = "LABLE1"> 이곳이 LABLE1 부분입니다. <BR><BR><BR><BR><BR><BR><BR> <A NAME = "LABLE2"> 이곳이 LABLE2 부분입니다. </BODY> </HTML> 25
2.2.2 URL 을이용한문서갂링크 링크된문자열, 또는문장을클릭하면해당문서로이동하는기능을말함 검색엔짂등에서쉽게볼수있는기능임 검색한정보를확인하고일일이주소를입력하여해당문서로이동할때의불편함을보완하여 HTML 의핵심기능역할을함 태그사용법 <A HREF= URL > 링크될문자열 </A> 26
2.2.2 URL 을이용한문서갂링크 URL 링크예제 예제 2-12 URL-Link.html <HTML> <HEAD><TITLE>HYPER LINK - URL 링크 </TITLE></HEAD> <BODY> 홈페이지정보 <BR> <A HREF = "HTTP://WWW.DAUM.NET"> 다음 </A><BR> <A HREF = "HTTP://WWW.EMPAS.COM"> 네이트 </A> </BODY> </HTML> 27
2.2.3 E-MAIL 링크 E-MAIL 링크란링크된문자열을클릭하였을때링크된주소로 E-MAIL 을젂송할수있는프로그램을실행시키는기능을수행함 일반적으로 OUTLOOK-EXPRESS 를실행시킴 태그사용법 <A HREF= mailto:e-mail 주소 > 링크될문자열 </A> 28
2.2.3 E-MAIL 링크 E-MAIL 링크예제 예제 2-13 MAIL-Link.html <HTML> <HEAD><TITLE>HYPER LINK - MAIL 링크 </TITLE></HEAD> <BODY> 메일보내기 <BR> <A HREF = "mailto:kjb123@empas.com"> 김종배 </A> </BODY> </HTML> 29
2.3 Image 문서에삽입그림을삽입할때사용하는태그임 삽입그림은문서의젂체적인모양을꾸미거나문서의이해를돕기위해주로사용되는방법임 <IMG> 태그를사용함 태그사용법 <IMG SRC= 경로 / 파일명 속성 = 속성값 > 30
2.3 Image 주요속성 속성설명 SRC = 경로 / 파일명 삽입될이미지의파일의위치를지정 WIDTH = 픽셀수 이미지의가로크기를지정 HEIGHT = 픽셀수 이미지의세로크기를지정 ALT = 문자열 이미지에대한설명을기술 ALIGN = LEFT, CENTER, RIGHT 이미지와문자간의정렬위치를지정 HSPACE = 픽셀수 이미지의좌 / 우여백을지정 VSPACE = 픽셀수 이미지의상 / 하여백을지정 31
2.3 Image 이미지태그의특징 이미지의경로는젃대경로와상대경로를모두지원함 WIDTH, HEIGHT 속성을지정하지않으면원본사이즈로지정됨 ALT 속성은이미지에마우스를올릮후일정시갂기다리면지정한문장이나타남 32
2.3 Image 이미지태그예제 (1) 예제 2-14 Image.html <HTML> <HEAD><TITLE>IMAGE 삽입 </TITLE></HEAD> <BODY> 상대경로를이용한이미지삽입 <BR> <IMG SRC = "IMG.JPG"></IMG><BR> 절대경로를이용한이미지삽입 <BR> <IMG SRC = "C:\2-14\IMG.JPG"></IMG<BR> </BODY> </HTML> 상대경로는현재폴더를기준으로함 젃대경로는사용자마다달라질수있음 33
2.3 Image 이미지태그예제 (2) 예제 2-15 Image-size.html <HTML> <HEAD><TITLE>IMAGE 삽입 </TITLE></HEAD> <BODY> 원본사이즈 <BR> <IMG SRC = "IMG.JPG" ALT =" 네잎클로버 "></IMG><BR> 사용자정의사이즈 <BR> <IMG SRC = "IMG.JPG" WIDTH = "50" HEIGHT = "50"></IMG><BR> </BODY> </HTML> 34
2.4 TABLE 여러데이터를비교하거나각종데이터의특징, 수량등을기록하기위해표를사용함 HTML 은 <TABLE> 태그를활용하여표를작성할수있고, 표는단순히표뿐만아니라여러용도로사용됨 HTML 문서가 <HEAD>, <BODY> 와같이서브태그를가지고있듯이 <TABLE> 태그는 <TR>, <TD> 등의서브태그를가지고있음 35
2.4 TABLE <TABLE> 태그와서브태그 <TABLE> : 표의시작과끝을선언하는태그 <TR> : ROW, 테이블의행을정의 <TD> : DATA, 행의셀을정의 (COL) <TH> : HEADER, 행의셀을강조 <CAPTION> : 표의 CAPTION을지정 36
2.4 TABLE <TABLE> 예제 예제 2-19 Table.html <HTML> <HEAD><TITLE>TABLE 생성 </TITLE></HEAD> <BODY> 2 2 TABLE 작성 <TABLE BORDER = "1"> <TR> <TD> 첫번째 </TD> </TR> <TR> </TR> </TABLE> <TD> 두번째 </TD> <TD> 세번째 </TD> <TD> 네번째 </TD> </BODY></HTML> 37
2.4.1 <TD> 태그 <TD> 태그의속성 속성설명 ALIGN = LEFT, CENTER, RIGHT 셀의좌우정렬방식을지정 VALIGN = TOP, MIDDLE, BOTTOM 셀의상하정렬방식을지정 ROWSPAN = N N은합칠셀개수 셀의열을합칠수를지정 COLSPAN = N N은합칠셀개수 셀의행을합칠수를지정 WIDTH = 픽셀수 셀의가로크기를지정 HEIGHT = 픽셀수 셀의세로크기를지정 셀병합시병합할수를행, 열에맞게기입하여야표가구성됨 38
2.4.2 <TABLE> 태그 <TABLE> 태그의속성 속성설명 BORDER = 픽셀수 TABLE의외각선두께를지정 WIDTH = 픽셀수 OR OO% TABLE의전체가로크기지정 HEIGHT = 픽셀수 OR OO% TABLE의전체세로크기지정 CELLSPACING = 픽셀수 셀과셀사이의여백을지정 CELLPADDING = 픽셀수 셀과문자사이의여백을지정 39
2.4.2 <TABLE> 태그 <TABLE> 속성예제 예제 2-21 Table-Spacing.html <HTML> <HEAD><TITLE>TABLE 속성 </TITLE></HEAD> <BODY> TABLE 태그의다양한속성들 <BR> <TABLE BORDER = "2" WIDTH = "600" HEIGHT = "30%" CELLSPACING = "10"> <TR><TD WIDTH = "300">CELLSPACING</TD> <TD WIDTH = "300"> 외각과셀사이 </TD> </TR> </TABLE><BR> <TABLE BORDER = "3" WIDTH = "600 HEIGHT = "30%" CELLPADDING = "10"> <TR><TD WIDTH = "300">CELLPADING</TD> <TD WIDTH = "300"> 셀과셀내용사이 </TD> </TR> </TABLE></BODY></HTML> 40
2.4.3 TABLE 정렬 <TABLE> 태그에 ALIGN 속성을활용하면표젂체를문서에알맞게정렬할수있음 예제 2-22 Table-Align.html <HTML> <HEAD><TITLE>TABLE 정렬 </TITLE></HEAD> <BODY> <TABLE BORDER ALIGN ="RIGHT"> <TR><TD WIDTH = "300"> 오른쪽정렬 </TD><TR> </TABLE> <TABLE BORDER ALIGN ="LEFT"> <TR><TD WIDTH = "300"> 왼쪽정렬 </TD><TR> </TABLE> <P ALIGN = "CENTER"><TABLE BORDER> <TR><TD WIDTH = "300">P 태그로정렬 </TD></TR> </TABLE></P></BODY></HTML> P 태그와 TABLE 태그를중첩하여정렬할수도있음 41
2.4.4 배경색정의 배경색예제 (1) 예제 2-21 Table-Spacing.html <HTML><HEAD><TITLE>TABLE BGCOLOR</TITLE></HEAD> <BODY> <TABLE BORDER BGCOLOR="RED" ALIGN ="LEFT"> <TR><TD COLSPAN = "2">TABLE 전체 </TD></TR> <TR><TD> 일괄적으로 </TD><TD>RED</TD></TR> </TABLE> <TABLE BORDER ALIGN = "RIGHT"> <TR><TD COLSPAN = "2">2 번째 ROW</TD></TR> <TR BGCOLOR = "BLUE"><TD> 일괄적으로 </TD><TD>BLUE</TD></TR> </TABLE> <TABLE BORDER ALiGN="CENTER"> <TR><TD COLSPAN = "2" BGCOLOR = "BLUE"> 각각의셀 </TD></TR> <TR> <TD BGCOLOR = "YELLOW">YELLOW</TD> <TD BGCOLOR = "GREEN">GREEN</TD> </TR> </TABLE><BR> <TABLE BORDER ALiGN="LEFT" BGCOLOR = "BLUE"> <TR> <TD COLSPAN = "2"> 전체 BLUE</TD></TR> <TR> <TD BGCOLOR = "YELLOW"> 특정셀 YELLOW</TD> <TD BGCOLOR>GREEN</TD></TR> </TABLE></BODY></HTML> 42
2.4.4 배경색정의 배경색예제 (2) 43
2.5 프레임 (Frame) 문서를구조적으로작성하기위해주로사용 44
2.5.1 프레임정의 프레임을생성하기위해서는프레임수 + 1 개의 HTML 파일이필요함 각각의프레임을나타내는 HTML + 구조를정의한 HTML 프레임을정의하기위해서 <FRAMESET> 태그를사용함 프레임구조를정의하는 HTML 파일에는 <BODY> 태그를사용하지않는특징을가지고있음 45
2.5.1 프레임정의 <FRAMESET> 속성 속 성 설 명 BORDER = 픽셀수 FRAME의외각선의두께를지정 ROWS = OO% or 픽셀수 FRAME을열로나눔 COLS = OO% or 픽셀수 FRAME을행으로나눔 MARGINHEIGHT = 픽셀수 FRAME의좌우여백을지정 MARGINWIDTH = 픽셀수 FRAME의상하여백을지정 NOSIZE FRAME의사이즈를조절할수없음 SCROLLING = YES or NO FRAME의스크롤여부를지정 <FRAMESET> 예제 ROWS = 100,100 FRAME을상하로 100px 로분할 COLS = 30%,* FRAME을좌우로 30%, 나머지분할 46
2.5.1 프레임정의 <FRAMESET> 예제 (1) 예제 2-24 Frameset.html <HTML> <HEAD><TITLE>FRAME SET</TITLE></HEAD> <FRAMESET ROWS = "20%,*"> <FRAME SRC = "TOP.HTML"> <FRAME SRC = "BOTTOM.HTML"> </FRAMESET> </HTML> 상단은윈도우의 20%, 하단은나머지를할당함 상, 하두개의 Frame 을생성한후각각에 TOP.HTML, BOTTOM.HTML 을표시하라 47
2.5.1 프레임정의 <FRAMESET> 예제 (2) 예제 2-25 Multi-Frame.html <HTML> <HEAD><TITLE>FRAME SET</TITLE></HEAD> <FRAMESET COLS = "20%,*"> <FRAME SRC = "LEFT.HTML"> <FRAMESET ROWS = "50%,50%"> <FRAME SRC = "TOP.HTML"> <FRAME SRC = "BOTTOM.HTML"> </FRAMESET> </FRAMESET> </HTML> <FRAMESET> 태그를중첩함으로써다양한프레임을만들수있음 48
2.5.2 타겟프레임지정 링크기능을사용할때이동할문서를어디에표시할것인가를지정 특별한타겟프레임속성 TARGET = _blank 새로운윈도우 TARGET = _self 현재프레임 TARGET = _top 모든프레임을없애고현재문서 TARGET = _parent 링크가있는프레임에새로운프레임 을생성하고링크된문서를표현 49
2.5.2 타겟프레임지정 타겟프레임예제 예제 2-26 타겟프레임지정 Target-Frame.html <HTML> <HEAD><TITLE>TARGET FRAME</TITLE></HEAD> <FRAMESET COLS = "20%,*"> <FRAME SRC = "LEFT.HTML"> <FRAMESET ROWS = "50%,50%"> <FRAME SRC = "TOP.HTML" NAME = "TOP"> <FRAME SRC = "BOTTOM.HTML" NAME = "BOTTOM"> </FRAMESET> </FRAMESET> </HTML> left.html <HTML> <HEAD><TITLE>FRAME SET</TITLE></HEAD> <BODY> 메뉴 <BR> <A HREF="http://wwwdb.kangwon.ac.kr" TARGET = "TOP"> 교수최황규 </A><BR> <A HREF="http://ailab.kangwon.ac.kr" TARGET = "BOTTOM"> 교수하진영 </A> </BODY> 50
2.5.2 타겟프레임지정 타겟프레임예제 51
2.6 INPUT 양식만들기 <FORM> 태그 웹서버로클라이언트의정보를젂달할때어떤범위의데이터 를어떠한방식으로어디에젂달할것인지를결정하는태그 <FORM> 태그속성 속성설명 ACTION = URL 클라이언트의정보를처리할 URL METHOD = GET or POST 정보전달방법 자바스크립트, ASP PART 에서자세히다룸 52
2.6 INPUT 양식만들기 <INPUT> 태그 일반적으로 <FORM> 태그안에서사용되며젂달될데이터를입력받기위해사용됨, 단독으로도사용가능함 <INPUT> 태그의 TYPE 속성 속 성 설 명 TYPE = TEXT 문자입력양식을생성 TYPE = PASSWD 문자입력약식을생성 ( 입력되는값을 * 로표시 ) TYPE = CHECKBOX 체크박스를생성 TYPE = RADIO 라디오버튼을생성 TYPE = IMAGE 이미지입력양식을생성 TYPE = HIDDEN 숨겨진입력양식을생성 TYPE = SUBMIT 보내기버튼을생성 TYPE = RESET 취소버튼을생성 53
2.6 INPUT 양식만들기 TEXT, PASSWD 예제 2-27 Input-TEXT.html <HTML> <HEAD><TITLE>INPUT TAG</TITLE></HEAD> <BODY> <FORM> ID : <INPUT TYPE = "TEXT" NAME = "ID"><BR> PASS : <INPUT TYPE = "PASSWORD" NAME = "PASSWD" SIZE = 20"> NAME : <INPUT TYPE = "TEXT" NAME = "NAME" SIZE ="6"><BR> E-MAIL : <INPUT TYPE = "TEXT" NAME = "MAIL" SIZE = 40" VALUE = "ABC@ABC.COM"> </FORM></BODY></HTML> 54
2.6 INPUT 양식만들기 CHECKBOX, RADIO 예제 2-28 Input-Select.html <HTML> <HEAD><TITLE>INPUT TAG</TITLE></HEAD> <BODY> <FORM> <INPUT TYPE = "CHECKBOX" NAME = "C1" VALUE = "1"> 스키 <INPUT TYPE = "CHECKBOX" NAME = "C2" VALUE = "2"> 보드 <INPUT TYPE = "CHECKBOX" NAME = "C3" VALUE = "3"> 인라인 <HR> <INPUT TYPE = "RADIO" NAME ="R1" VALUE ="1"> 스키 <INPUT TYPE = "RADIO" NAME ="R1" VALUE ="2" CHECKED> 보드 <INPUT TYPE = "RADIO" NAME ="R1" VALUE ="3"> 인라인 </FORM></BODY></HTML> 55
2.6 INPUT 양식만들기 SUBMIT, RESET 예제 2-29 Input-Submit.html <HTML> <HEAD><TITLE>INPUT TAG</TITLE></HEAD> <BODY> <FORM> <INPUT TYPE = "CHECKBOX" NAME = "C1" VALUE = "1"> 스키 <INPUT TYPE = "CHECKBOX" NAME = "C2" VALUE = "2"> 보드 <HR> <INPUT TYPE = "RADIO" NAME ="R1" VALUE ="1"> 스키 <INPUT TYPE = "RADIO" NAME ="R1" VALUE ="2" CHECKED> 보드 <HR> <INPUT TYPE = "SUBMIT" VALUE =" 보내기 "> <INPUT TYPE = "RESET" VALUE =" 취소 "> </FORM></BODY></HTML> 56
2.6 INPUT 양식만들기 <SELECT> 태그 회원가입페이지등에서직업을선택할때처럼이미정해져있는목록중하나를선택하는입력양식 목록을만들기위해서는 <OPTION> 태그를이용 <SELECT> <OPTION> ITEM1 <OPTION> ITEM2 </SELECT> 57
2.6 INPUT 양식만들기 <SELECT> 태그예제 예제 2-30 Select.html <HTML> <HEAD><TITLE>SELECT TAG</TITLE></HEAD> <BODY> <FORM> <SELECT NAME = "SPORTS" SIZE = "4"> <OPTION> 축구 <OPTION> 농구 <OPTION> 배구 <OPTION> 족구 <OPTION> 피구 <OPTION> 스키 <OPTION> 수영 </FORM></BODY></HTML> 58
2.6 INPUT 양식만들기 <TEXTAREA> 태그 대량의문자열을입력받기위해사용되는입력양식으로한줄에입력받을수있는양과줄수등을속성으로변경함 ROWS, COLS 옵션을활용함 59
2.6 INPUT 양식만들기 <TEXTAREA> 태그예제 예제 2-31 Textarea.html <HTML> <HEAD><TITLE>TEXT AREA</TITLE></HEAD> <BODY> <FORM> <TEXTAREA NAME = "INTRO" ROWS = "10" COLS = "50"> </TEXTAREA><P> <INPUT TYPE = "SUBMIT" VALUE =" 보내기 "> <INPUT TYPE = "RESET" VALUE =" 취소 "> </FORM> </BODY> </HTML> 60