<3033B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

Similar documents
PowerPoint Template

Javascript

Javascript

PHP & ASP

SK Telecom Platform NATE

쉽게 풀어쓴 C 프로그래밍

PHP & ASP

PowerPoint 프레젠테이션

2009년 상반기 사업계획

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

PowerPoint 프레젠테이션

하둡을이용한파일분산시스템 보안관리체제구현

쉽게 풀어쓴 C 프로그래밍

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

HTML

네트워크 명령 실습

(Microsoft PowerPoint - 9\300\345.ppt [\310\243\310\257 \270\360\265\345])

INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS

슬라이드 1

[ 네이버마일리지 ] 디자인셋팅매뉴얼 1. 장바구니페이지에네이버마일리지안내추가 - 위치 : HTML 디자인설정 > 장바구니 > 장바구니주문목록 {{$c_3}} [ 편집 ] 버튼클릭 > HTML 편집탭으로이동 > 여러개의장바구니모두결제버튼 {u9} [ 편집 ] 버튼클릭하

<3036B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

컴퓨터프로그래밍 - HTML

PowerPoint Presentation

Microsoft PowerPoint HTML기초(2).pptx

PowerPoint 프레젠테이션

미쓰리 파워포인트

HTML5

Microsoft PowerPoint Python-WebDB

I T C o t e n s P r o v i d e r h t t p : / / w w w. h a n b i t b o o k. c o. k r

e-비즈니스 전략 수립

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

Data Provisioning Services for mobile clients

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

Javascript

Cookie Spoofing.hwp

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc

Microsoft PowerPoint - aj-lecture4.ppt [호환 모드]

웹의 뼈대 HTML의 이해 개요 및 텍스트 태그

½½¶óÀ̵å 1

게임 기획서 표준양식 연구보고서

웹 개발자를 위한 서블릿/JSP

윈도우즈프로그래밍(1)

<3035B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

C스토어 사용자 매뉴얼


PowerPoint 프레젠테이션

PowerPoint Template

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션

2_안드로이드UI

Visual Basic 기본컨트롤

02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자.

Microsoft PowerPoint HTML.ppt

Microsoft PowerPoint Android-SDK설치.HelloAndroid(1.0h).pptx

Visual Basic 반복문

PowerPoint 프레젠테이션

<4D F736F F F696E74202D203130C0E52EBFA1B7AF20C3B3B8AE205BC8A3C8AF20B8F0B5E55D>

Data Provisioning Services for mobile clients

PowerPoint 프레젠테이션

q 학습목표 l 표삽입 l 표 / 셀크기조절및이동 l 셀블록설정및셀나누기 / 합치기 l 셀속성및셀테두리 / 배경설정 l 차트생성및서식변경 l 글상자생성및속성변경 l 머리말 / 꼬리말, 쪽번호넣기 l 주석다루기 - 2 -

Microsoft PowerPoint 세션.ppt

PowerPoint Presentation

Microsoft PowerPoint SDK설치.HelloAndroid(1.5h).pptx

SAP Tech를 통해 SAP의 Web Application Server와 그것을 근간으로 서비스되는 BSP Application에 대한 소개를 하게 되어 기쁘다

슬라이드 1

PowerPoint 프레젠테이션

목차 윈도우드라이버 1. 매뉴얼안내 운영체제 (OS) 환경 윈도우드라이버준비 윈도우드라이버설치 Windows XP/Server 2003 에서설치 Serial 또는 Parallel 포트의경우.

1

MF3010 MF Driver Installation Guide

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션

Microsoft PowerPoint - e pptx

<4D F736F F F696E74202D203236C2F7BDC3C7D0BDC0B3BBBFEB28B1E2C3E2B9AEC1A632C8B82D32B0FAB8F1292E BC8A3C8AF20B8F0B5E55D>

슬라이드 1

EDB 분석보고서 (04.03) ~ Exploit-DB( 에공개된별로분류한정보입니다. ** 5개이상발생한주요소프트웨어별상세 EDB 번호 종류 공격난이도 공격위험도 이름 소프트웨어이름 3037 SQL Inj

System Recovery 사용자 매뉴얼

HTML Basic & Advanced

쉽게 풀어쓴 C 프로그래밍

EDB 분석보고서 (04.06) ~ Exploit-DB( 에공개된별로분류한정보입니다. Directory Traversal users-x.php 4.0 -support-x.php 4.0 time-

PowerPoint 프레젠테이션

JSP 의내장객체 response 객체 - response 객체는 JSP 페이지의실행결과를웹프라우저로돌려줄때사용되는객체이다. - 이객체는주로켄텐츠타입이나문자셋등의데이터의부가정보 ( 헤더정보 ) 나쿠키 ( 다음에설명 ) 등을지정할수있다. - 이객체를사용해서출력의방향을다른

PowerPoint 프레젠테이션

- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl

Data Provisioning Services for mobile clients

캘크 시작하기

Microsoft PowerPoint - chap04-연산자.pptx

PowerPoint 프레젠테이션

뇌를 자극하는 JSP & Servlet 슬라이드

Microsoft PowerPoint Python-Web.pptx

JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 ( ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각

쉽게 풀어쓴 C 프로그래밍

PowerPoint 프레젠테이션

5장. JSP와 Servlet 프로그래밍을 위한 기본 문법(완성-0421).hwp

PowerPoint 프레젠테이션

제 1 절 복습 \usepackage{ g r a p h i c x }... \ i n c l u d e g r a p h i c s [ width =0.9\ textwidth ] { b e a r. j p g } (a) includegraphics 사용의일반적인유형

최종보고서 데이터베이스의취약점분석과해결책 제출일자 : 2012년 5월 00일과목명 : 캡스톤디자인팀명 : DIS 팀장 : 강연준팀원 : 강연준 조응철담당교수 : 양환석교수님

Microsoft PowerPoint - HTML-CSS3.pptx

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]

목차 1. 시스템요구사항 암호및힌트설정 ( 윈도우 ) JetFlash Vault 시작하기 ( 윈도우 ) JetFlash Vault 옵션 ( 윈도우 )... 9 JetFlash Vault 설정... 9 JetFlash Vault

저작자표시 - 비영리 - 변경금지 2.0 대한민국 이용자는아래의조건을따르는경우에한하여자유롭게 이저작물을복제, 배포, 전송, 전시, 공연및방송할수있습니다. 다음과같은조건을따라야합니다 : 저작자표시. 귀하는원저작자를표시하여야합니다. 비영리. 귀하는이저작물을영리목적으로이용할

Transcription:

HTML/XML 인터넷보충학습자료 - 1 - - HTML 표를만들기위해서는 <TABLE> 태그를사용한다. - <TABLE> - 테이블에서행과열을나눠주기위한태그는따로지정해야해며나눌개수만큼반복해서작성해야한다. <TABLE> <--테이블시작행 : <--1행열 : <TD> </TD> <TD> 1행1열 </TD> <-1행의1열 - 2행 3열표만들기의예 ( 표의테두리가 <TD> 1행2열 </TD> <-1행의2열 <TD> 1행3열 </TD> <-1행의3열지정되지않은경우 ) <--2행 <TD> 2행1열 </TD> <-2행의1열 <TD> 2행2열 </TD> <-2행의2열 <TD> 2행3열 </TD> <-2행의3열 - <TABLE> 태그의속성 속성 WIDTH=" 수치 " HEIGHT=" 수치 " BORDER=" 수치 " ALIGN=" 정렬 " CELLSPACING=" 수치 " CELLPADDING=" 수치 " 설명표의너비지정표의높이지정표의테두리두께지정정렬지정표에서각셀간의간격지정표에서셀안의내용간의간격지정 - 테두리를표시하는태그속성은 BORDER이며, 이속성을지정하지않으면선없는표가생성된다. -

HTML/XML 인터넷보충학습자료 - 2 - - 제목에해당하는셀에 <TD> 대신 <TH> 태그를사용하면 <B> 태그를사용한것같이글자가두껍게표시된다. <TABLE BORDER="2"> <TH> </TH> <TH> 중간 </TH> <TH> 기말 </TH> <TH> 성적 </TH> <TH> 수학 </TH> <TD> 95 </TD> <TD> 90 </TD> <TD> A </TD> <TH> 영어 </TH> <TD> 87 </TD> <TD> 92 </TD> <TD> B </TD> - 태그의속성 속성 ALIGN=" 정렬 " VALIGN=" 정렬 " BGCOLOR=" 색상 " 설명수평정렬방식지정수직정렬방식지정셀의배경색지정 -<TD>, <TH> 태그의속성 속성 WIDTH=" 수치 " HEIGHT=" 수치 " ALIGN=" 정렬 " VALIGN=" 정렬 " ROWSPAN=" 수치 " COLSPAN=" 수치 " BGCOLOR=" 색상 " 설명셀의너비지정셀의높이지정수평정렬방식지정수직정렬방식지정세로방향으로셀을합칠때사용가로방향으로셀을합칠때사용셀의배경색지정 - <TABLE> 태그의 CELLPADDING 속성은표의테두리와셀안에나타나는데이터와의여백크기를지정하는것이고, CELLSPACING 속성은셀과셀사이의간격 ( 선굵기 ) 을지정하는것이다.

HTML/XML 인터넷보충학습자료 - 3 - - <TABLE> 태그의 WIDTH, HEIGHT 속성을사용하여가로와세로크기를지정하고, ALIGN, VALIGN 속성을사용하여셀안에서의수직, 수평정렬을지정한다. - 예 1 <TABLE BORDER="2" WIDTH="80%" HEIGHT="200" ALIGN="center"> <TR VALIGN="top"> <TH> </TH> <TH> 중간 </TH> <TH> 기말 </TH> <TH> 성적 </TH> TABLE 기본속성으로 WIDTH, HEIGHT, ALIGN를사용하였다. 셀의가로, 세로의크기지정시 % 를사용하면상대적크기는나타내는것으로웹브라우저크기에따라상대적으로변하여표가잘려보일염려가없다. ALIGN( 수평정렬 ) 은가운데정렬이며, 1행의 VALIGN( 수직정렬 ) 의기본값은위쪽정렬로지정된것을알수있다. - 예 2 <TABLE BORDER="2" WIDTH="80%" HEIGHT="200" ALIGN="center"> <TR ALIGN="left" VALIGN="top"> <TH WIDTH="200" HEIGHT="50"> </TH> <TH> 중간 </TH> <TH> 기말 </TH> <TH> 성적 </TH>

HTML/XML 인터넷보충학습자료 - 4 - TABLE 기본속성이정해진가운데 1열의가로길이만다시지정할수있다. WIDTH를상대값이아닌절대값으로 200으로지정하고높이를 50으로재지정하였더니 1열의너비가원래셀보다길어졌고, 1행의높이가 2행과 3행보다작아진것을확인할수있다. - 예 3 <TABLE BORDER="2" WIDTH="80%" HEIGHT="200" ALIGN="center"> <TR ALIGN="center" VALIGN="middle"> <TH> 수학 </TH> <TD> 95 </TD> <TD ALIGN="right" VALIGN="bottom"> 90 </TD> <TD> A </TD> 2행의속성이상하모두가운데정렬이되도록지정되었으나, 3열 ( 90 ) 만 ALIGN="right" VALIGN="bottom" 로재지정되었다. - 예 4 <TABLE BORDER="2" WIDTH="80%" HEIGHT="200" ALIGN="center"> <TR ALIGN="right" VALIGN="bottom"> <TH> 영어 </TH> <TD> 87 </TD> <TD ALIGN="left" VALIGN="top"> 92 </TD> <TD> B </TD> 3행의속성이가로오른쪽정렬, 수직으로아래에정렬되게지정되었으나, 3열 ( 92 ) 만 ALIGN="left" VALIGN="top" 로재지정되었다.

HTML/XML 인터넷보충학습자료 - 5 - - 셀합치기의속성 세로셀합치기 : ROWSPAN=" 수치 " 가로셀합치기 : COLSPAN=" 수치 " -> 여기서 수치 는합치고싶은셀의개수 <TABLE BORDER="1"> <TD ROWSPAN="3"> 1 행 1 열 </TD> <TD COLSPAN="2"> 1 행 2 열 </TD> <TD> 2 행 2 열 </TD> <TD> 2 행 3 열 </TD> <TD COLSPAN="2"> 3 행 2 열 </TD> (1) 테두리선색지정속성 테두리선색 : BORDERCOLOR= 색상 셀배경색 : BGCOLOR= 색상 <TABLE BORDER="4" BORDERCOLOR="red"> <TR BGCOLOR="red"> <TD> </TD> <TD> 중간 </TD> <TD> 기말 </TD> <TD> 성적 </TD> <TD> 수학 </TD> <TD BGCOLOR="green"> 95 </TD> <TD> 90 </TD> <TD> A </TD> <TD> 영어 </TD> <TD> 87 </TD> <TD BGCOLOR="green"> 92 </TD> <TD> B </TD>

HTML/XML 인터넷보충학습자료 - 6 - (2) 표를입체적으로보일수있도록하는속성 BORDERCOLORDARK : 테두리아래와오른쪽부분의색을따로지정 ( 보통은입체효과에서어두운부분에해당된다.) <TABLE BORDER="4" BORDERCOLORDARK="blue"> <TD> </TD> <TD> 중간 </TD> <TD> 기말 </TD> <TD> 성적 </TD> BORDERCOLORLIGHT : 테두리위와왼쪽부분의색을따로지정 ( 보통은입체효과에서밝은색부분에해당된다.) <TABLE BORDER="4" BORDERCOLORLIGHT="red"> <TD> </TD> <TD> 중간 </TD> <TD> 기말 </TD> <TD> 성적 </TD> - 줄바꿈제한하기테이블의셀은가로길이를늘이지않아도자동으로줄바꿈이되도록기본설정되어있다. NOWRAP 속성을사용하면이를금지할수있다. <BODY> <TABLE BORDER="1"> <TD NOWRAP> 셀안의글자는기본적으로자동으로줄바꿈이된다.</TD> <TD> 셀안의글자는기본적으로자동으로줄바꿈이된다.</TD> </BODY>

HTML/XML 인터넷보충학습자료 - 7 - - 캡션삽입 <CAPTION> 태그를이용하여표에캡션 ( 첨부설명 ) 을붙일수있다. ALIGN속성을이용하면표의위 (top) 또는아래 (bottom) 어느부분에표시되게할것인지도지정할수있다. <BODY> <TABLE BORDER="1"> <CAPTION ALIGN="bottom"> 캡션삽입하기 </CAPTION> <TD> 1 행 1 열 </TD> <TD> 1 행 2 열 </TD> <TD> 2 행 1 열 </TD> <TD> 2 행 2 열 </TD> / - 표없는기본항목을나열한다. - 표없는기본 <BODY BGCOLOR="#DDAD00"> <P ALIGN="center ><FONT SIZE="4" COLOR="blue"> <B> 회원정보입력 </B></FONT></P> <HR>

HTML/XML 인터넷보충학습자료 - 8 - <TABLE WIDTH="600" HEIGHT="350" BORDER="1" CELLPADDING="5" ALIGN="center"> <TD> 아이디 </TD> <TD> 입력부분 </TD> 비밀번호, 이름,, 취미, 자기소개하는글 <TD COLSPAN="2" ALIGN="center"> 버튼삽입부분 </TD> </BODY>

HTML/XML 인터넷보충학습자료 - 9 - - <INPUT> 태그를사용하면텍스트박스, 체크박스, 버튼과같은사용자가직접입력할수있도록하는기능을삽입할수있다. - 종료태그 </INPUT> 없음 - 입력양식의종류 : text, password, radio, checkbox, submit, reset 등 - 형식 <INPUT TYPE= 입력양식의종류 > text, password radio, checkbox submit, reset -<INPUT> 태그의속성 속성 TYPE=" 타입 " NAME=" 이름 " VALUE=" 값 " SIZE=" 수치 " MAXLENGTH=" 수치 " CHECKED 설명입력양식의타입지정입력값에대한이름지정입력양식의기본값지정입력양식의크기지정입력양식에입력할수있는문자의최대값지정 TYPE 속성값이 checkbox, radio 일때초기값으로선택할상자나버튼지정 (1) 한줄로된텍스트박스 텍스트박스 : <INPUT TYPE= text > 비밀번호입력박스 : <INPUT TYPE= password > (2) 여러줄로된텍스트박스 <TEXTAREA> ~ </TEXTAREA> - <TEXTAREA> 의경우 <INPUT> 태그를사용하지않고속성값에따라서박스의크기나이름지정등을설정할수있다. - <TEXTAREA> 태그의속성

HTML/XML 인터넷보충학습자료 - 10 - 속성 ROWS=" 수치 " COLS=" 수치 " NAME=" 이름 " READONLY WRAP 설명텍스트박스의세로줄수지정텍스트박스의가로문자수지정이름지정값을수정할수없도록지정 <TEXTAREA> 는 Enter" 키를누르기전까지줄바꿈없이입력되도록기본설정외어있으나, WRAP속성을이용해자동줄바꿈을할수있다. 설정값 : off, virtual, physical - 예 텍스트박스 1 : <INPUT TYPE="text" NAME="TBox1"><BR><BR> 텍스트박스 2 : <INPUT TYPE="text" NAME="TBox2" SIZE="40"><BR><BR> 텍스트박스 3 : <INPUT TYPE="text" NAME="TBox3" MAXLENGTH="5"><BR><BR> 텍스트박스 4 : <INPUT TYPE="text" NAME="TBox4" VALUE=" 텍스트박스 "><BR><BR> 비밀번호박스 : <INPUT TYPE="password" NAME="password"><BR><BR> 텍스트에어리어 1 <BR> <TEXTAREA NAME="TArea1" WRAP="off"></TEXTAREA><BR><BR> 텍스트에어리어 2 <BR> <TEXTAREA NAME="TArea2" ROWS="7" COLS="40" WRAP="virtual"> 텍스트에어리어입니다.</TEXTAREA>

HTML/XML 인터넷보충학습자료 - 11 - (1) 체크박스 - 항목들앞에사각형모양의박스가있고항목들중에서한꺼번에여러개선택할수있는것. 형식 : <INPUT TYPE= checkbox NAME= VALUE= > (2) 라디오버튼 - 항목들앞에원모양의체크버튼이있고항목들중에서오로지한가지항목만선택할수있는것. 형식 : <INPUT TYPE= radio NAME= VALUE= > - 체크박스와라디오버튼의속성 속성 NAME=" 이름 " VALUE CHECKED 설명입력할필드의이름지정. ( 일반적으로같은주제에대해서같은이름으로짖는다.) 사용자가선택한항목이어떤것인지알수있도록하는속성초기화면에서기본적으로어떤항목이선택되어표시 -예라디오버튼 <BR><P> <INPUT TYPE="radio" NAME="radio" VALUE="radio1"> 버튼1 <INPUT TYPE="radio" NAME="radio" VALUE="radio2"> 버튼2 <INPUT TYPE="radio" NAME="radio" VALUE="radio3" CHECKED> 버튼3</P><BR> 체크박스 <BR><P> <INPUT TYPE="checkbox" NAME="checkbox" VALUE="checkbox1 " CHECKED > 박스1 <INPUT TYPE="checkbox" NAME="checkbox" VALUE="checkbox2" CHECKED> 박스2 <INPUT TYPE="checkbox" NAME="checkbox" VALUE="checkbox3"> 박스3</P>

HTML/XML 인터넷보충학습자료 - 12 - (1) 콤보박스 - 콤보박스는여러개의항목이아래로늘어져나타나고그중에한가지만선택할수있게하는양식이다. - 형식 : - 예 1 <SELECT> <OPTION> 선택 1 </OPTION> <OPTION> 선택 2 </OPTION> </SELECT> <SELECT NAME="PL"> <OPTION VALUE="select1"> C++ </OPTION> <OPTION VALUE="select2"> Java </OPTION> <OPTION VALUE="select3"> C# </OPTION> <OPTION VALUE="select4"> HTML </OPTION> <OPTION VALUE="select5"> COBOL </OPTION> <OPTION VALUE="select6"> Pascal </OPTION> </SELECT> - <SELECT> 태그의속성 속성 SIZE=" 수치 " NAME=" 이름 " MULTIPLE 설명메뉴의높이지정텍스트박스의가로문자수지정여러개의항목선택할수있도록지정 - <OPTION> 태그의속성 - 예 2 속성 VALUE=" 값 " SELECTED DISABLED 항목의값지정기본값지정항목비활성화 설명

HTML/XML 인터넷보충학습자료 - 13 - <SELECT NAME="PL" SIZE="6" MULTIPLE> <OPTION VALUE="select1"> C++ </OPTION> <OPTION VALUE="select2"> Java </OPTION> <OPTION VALUE="select3"> C# </OPTION> <OPTION VALUE="select4" SELECTED> HTML </OPTION> <OPTION VALUE="select5"> COBOL </OPTION> <OPTION VALUE="select6"> Pascal </OPTION> </SELECT> (1) 전송버튼 - 입력한내용을전송하기위한버튼 - 형식 <INPUT TYPE= submit VALUE= 버튼이름 > - TYPE 속성 속성 설명 submit 기본적으로버튼에 쿼리전송 이라는글 자가표시 VALUE=" 이름 " 버튼에다른이름을붙일수있다. reset 취소버튼 (2) 취소버튼 - 입력한내용을취소하기위해모두지우는버튼 - 형식 - 예 <INPUT TYPE= reset VALUE= 버튼이름 >

HTML/XML 인터넷보충학습자료 - 14 - <BODY> 취소버튼 <BR><BR> <INPUT TYPE="reset"><BR><BR> <INPUT TYPE="reset" VALUE=" 취소버튼 "><BR><BR> 전송버튼 <BR><BR> <INPUT TYPE="submit"><BR><BR> <INPUT TYPE="submit" VALUE=" 전송버튼 "> </BODY> - <FORM> 태그는사용자가입력한데이터들을특정한위치로전송하는역할을한다. 예 ) 전송버튼을눌러데이터들을전송할때전송할위치를지정을 <FORM> 태그에서한다. - <FORM> 태그를사용하여 <INPUT> 태그나 <SELECT> 태그로만들수있는기능들은입력양식으로 <FORM> 태그안에들어가며, 결과화면상의차이는발생하지않음 - <FORM> 태그의속성속성설명 ACTION="URL" 값을전송할주소지정 METHOD=" 전송방식 " 전송방식지정 - 전송방식 post 방식 HTTP 헤더속에감춰서전송되므로보안이필요한로그인정보나, 회원정보등의개인정보전송에많이사용된다 get 방식이름과값형태로 URL로그대로전송되므로다른사용자에게그대로노출된다는단점이있다. 그리고전체길이가거의무한적인 post 방식과는다르게 4,096 바이트까지전송이가능하다. get 방식은주로포털사이트에서검색어전달등의보안에신경쓰지않아도되는곳에서많이사용한다. - 형식 - ACTION 속성의값으로데이터를전송할 URL 을입력하거나 mailto: 이메일주소 를

HTML/XML 인터넷보충학습자료 - 15 - 입력하면해당주소로데이터를전송한다. - METHOD 속성을 post 방식과 get 방식을설정한다. (1) 회원정보입력양식만들기 - <INPUT>,<SELECT> 태그를사용하여아래와같은회원정보입력양식을만들다. (2) <FORM> 태그넣기

HTML/XML 인터넷보충학습자료 - 16 - <BODY BGCOLOR="#DDAD00"> <P ALIGN="center"> <FONT SIZE="4" COLOR="blue"> <B> 회원정보입력 </B></FONT> </P> <HR> <FORM ACTION="OK.html" METHOD="post"> <TABLE WIDTH="600" HEIGHT="350" BORDER="1" CELLPADDING="5" ALIGN="center"> <TD> 아이디 </TD> <TD> <INPUT TYPE="text" NAME="ID" SIZE="10"></TD>... </FORM> </BODY> (3) <INPUT> 태그넣기 - text 박스넣기 <TD> 아이디 </TD> <TD> <INPUT TYPE="text" NAME="ID" SIZE="10"> </TD> <TD> 비밀번호 </TD> <TD> <INPUT TYPE="password" NAME="password" SIZE="10"> </TD> <TD> 이름 </TD> <TD> <INPUT TYPE="text" NAME="name" SIZE="10"> </TD>

HTML/XML 인터넷보충학습자료 - 17 - (4) <INPUT> 태그넣기 - TEXTAREA 박스넣기 <TD> 전화번호 </TD> <TD> <INPUT TYPE="text" NAME="tel1" SIZE="3" VALUE="02"> -<INPUT NAME="tel2" SIZE="4"> -<INPUT NAME="tel3" SIZE="4"></TD> (5) <INPUT> 태그넣기 - 콤보박스넣기

HTML/XML 인터넷보충학습자료 - 18 - <TD> 직업 </TD> <TD> <SELECT SIZE="1" NAME="job"> <OPTION VALUE="job1" SELECTED> 학생 </OPTION> <OPTION VALUE="job2"> 회사원 </OPTION> <OPTION VALUE="job3"> 프로그래머 </OPTION> <OPTION VALUE="job4"> 무직 </OPTION> </SELECT> </TD> (6) <INPUT> 태그넣기 - 라디오버튼삽입 <TD> 성별 </TD> <TD> <INPUT TYPE="radio" NAME="gender" VALUE="male" CHECKED> 남자 &nbsp&nbsp <INPUT TYPE="radio" NAME="gender" VALUE="female"> 여자 </TD> (7) <INPUT> 태그넣기 - 체크박스삽입

HTML/XML 인터넷보충학습자료 - 19 - <TD> 취미 </TD> <TD> <INPUT TYPE="checkbox" NAME="hobby" VALUE="reading"> 독서 &nbsp&nbsp <INPUT TYPE="checkbox" NAME="hobby" VALUE="game"> 게임 &nbsp&nbsp <INPUT TYPE="checkbox" NAME="hobby" VALUE="movie"> 영화감상 &nbsp&nbsp <INPUT TYPE="checkbox" NAME="hobby" VALUE="music"> 음악감상 &nbsp&nbsp <INPUT TYPE="checkbox" NAME="hobby" VALUE="soccer"> 축구 </TD> (8) <INPUT> 태그넣기 - TEXTAREA 삽입하기 <TD> 자기소개하는글 </TD> <TD> <TEXTAREA ROWS="7" COLS="60" NAME="Intro"> 자기를소개하는글을쓰세요 </TEXTAREA> </TD> <TD COLSPAN="2" ALIGN="center"> <INPUT TYPE="submit" VALUE=" 등록하기 ">&nbsp&nbsp <INPUT TYPE="reset" VALUE=" 취소하기 "> </TD>

HTML/XML 인터넷보충학습자료 - 20 - (9) 등록완료페이지 <HTML> <HEAD> <TITLE> 등록페이지 </TITLE> </HEAD> <BODY> <FONT SIZE="4" ALIGN="center"> <B> 등록이완료되었습니다.</B></FONT> </BODY> </HTML>

HTML/XML 인터넷보충학습자료 - 21 - 연습문제 1. 다음과같이테이블이구성되도록 HTML 코드를작성하시오. <BODY> <TABLE BORDER="1"> <TD COLSPAN="3"> 내용 </TD> <TD ROWSPAN="2"> 내용 </TD> <TD> 내용 </TD> <TD> 내용 </TD> <TD> 내용 </TD> <TD> 내용 </TD> </BODY> 2. <SELECT> 태그를사용하여다음에서설명하는것과같은입력양식을만드시오. - 높이 8의콤보박스를만든다. - 여러개의항목을동시에선택할수있도록한다. - 선택항목은프로야구 8개구단으로정한다. <HTML> <BODY> <SELECT NAME="BASEBALL" SIZE="8"> <OPTION> SK 와이번스 </OPTION> <OPTION> 두산베어스 </OPTION> <OPTION> 삼성라이온즈 </OPTION> <OPTION> 롯데자이언츠 </OPTION> <OPTION> 한화이글스 </OPTION> <OPTION> 기아타이거즈 </OPTION> <OPTION> 넥센히어로즈 </OPTION> <OPTION> LG 트윈스 </OPTION> </SELECT> </BODY> </HTML> 3. post 방식과 get 방식의차이점에대하여설명하시오. post 방식은 HTTP 헤더속에감춰서전송되므로보안이필요한로그인정보나, 회원정보등의개인정보전송에많이사용된다. 하지만 get 방식은이름과값형태로 URL로그대

HTML/XML 인터넷보충학습자료 - 22 - 로전송되므로다른사용자에게그대로노출된다는단점이있다. 그리고 URL 주소로전송하기때문에전체길이가거의무한적인 post 방식과는다르게 4,096 바이트까지전송이가능하다. 그러므로 get 방식은주로포털사이트에서검색어전달등의보안에신경쓰지않아도되는곳에서많이사용한다. 확인문제 다음의빈칸에알맞은단어를작성하시오. 1. 제목으로지정하고싶은셀을해당셀에해당하는 <TD> 태그대신에 ( ) 를사용한다. 2. 표에캡션을붙일경우 <CAPTION> 태그의 ALIGN 속성을사용하여표의 ( ),( ) 에위치시킬수있다. 3. 콤보박스를만들기위해서는 <SELECT> 태그와 ( ) 태그를사용해야한다. 4. 체크박스에초기값을지정하기위해서는 <INPUT> 태그의 ( ) 속성을사용한다. 5. 입력양식폼을지정해야할경우 METHOD 속성의값으로 ( ), ( ) 2가지전송방식을지정할수있다. 다음문장의참거짓여부를판별하시오. 6. 2행 2열의표를만들기위해서는 2개의 태그와 2개의 <TD> 태그를사용한다. ( ) 7. <TABLE> 태그의 WIDTH, HEIGHT 속성을사용하여크기를지정할경우웹브라우저창너비의상대적인크기로지정하려면퍼센트 (%) 로형식으로지정한다. ( ) 8. <INPUT> 태그의 TYPE 속성을 text 로지정함으로써여러줄의텍스트박스를만들수있다. ( ) 9. 여러개의항목을한꺼번에선택할수있는버튼을체크박스라고한다. ( ) 10. 콤보박스는화면에하나의항목만이보여지며화살표를클릭하여여러항목가운데원하는항목을선택할수있다. ( ) 다음의문제에해당되는보기를고르시오. 11. 다음과같이테이블을구성하기위하여빈칸에들어갈태그는? ( ) 1 행 1 열 1행 2열 2행 2열

HTML/XML 인터넷보충학습자료 - 23 - <TABLE BORDER="1"> <TD> 1행 2열 </TD> <TD> 2행 2열 </TD> 1 행 1 열 </TD> 1) <TD COLSPAN="1"> 2) <TD ROWSPAN="1"> 3) <TD COLSPAN="2"> 4) <TD ROWSPAN="2"> 12. 표안의셀간의구분선두께를지정하기위해서사용하는속성은? (2) 1) BORDER 2) CELLSPACING 3) CELLPADDING 4) ALIGN 13. 다음중 <INPUT> 태그의 TYPE 속성의값을 text 로지정하여만든텍스트박스에대한설명을잘못된것은? ( ) 1) SIZE 속성을사용하여여러줄을입력할수있는텍스트박스를만들수있다. 2) MAXLENGTH 속성을사용하여최대글자수를미리지정할수있다. 3) VALUE 속성의값을입력하여텍스트박스에표시될글자를미리지정할수있다. 4) NAME 속성으로텍스트박스의이름을지정할수있다. 14. 입력내용을전송하기위한 TYPE 속성의값은? ( ) 1) text 2) password 3) reset 4) submit 15. 콤보박스를생성할때여러개의항목을선택할수있도록지정하는속성은? (4) 1) CHECKED 2) SELECTED 3) DISABLED 4) MULTIPLE