HTML과 CGI 프로그래밍

(1)

PHP 웹 프로그래밍

(PHP Web Programming)

HTML 과 CGI 프로그래밍

문양세

강원대학교 IT 대학 컴퓨터과학전공

(2)

Web Programming & Practice by Yang-Sae Moon Page 2

강의 내용

HTML과 CGI 프로그래밍

HTML 개요

HTML 기본 태그

하이퍼텍스트와 하이퍼미디어 리스트와 테이블

CGI 프로그래밍

(3)

HTML

개요

HTML(HyperText Markup Language) 은 웹 문서를 기술하기 위한 마 크업 (markup) 언어이다 .

HTML은 제목 , 단락 , 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니 라 링크 , 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다 .

HTML은 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다 .

HTML 의 확장

XML(eXtensible Markup Language): 인터넷에 연결된 시스템끼리 데이터를 쉽게 주 고 받을 수 있게 하여 HTML 의 한계를 극복할 목적으로 만들어진 확장 언어

HTML5: 그래픽 , 모바일 기능이 크게 강화된 최신 HTML 언어

(4)

HTML

문서의 기본 구조

(1/2)

HTML 문서는 일반적으로 머리말 (header) 과 본문 (body) 의 두 부분 으로 나누어진다 .

<HTML>

<HEAD>

제목 등 HTML 문서의 머리말이 위치함

</HEAD>

<BODY>

HTML 문서의 본문의 위치함

</BODY>

</HTML>

머리말 (header)

본문 (body) HTML 문서

(5)

HTML

문서의 기본 구조

(2/2)

HTML 문서 예제

(6)

HTML

태그의 속성과 특징

HTML 문서를 이해하기 위해서는 HTML 태그를 이해할 수 있어야 한 다 .

태그는 속성 (attribute) 을 가질 수 있다 .

 속성은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정함

 웹 브라우저로 하여금 보다 세밀한 기능을 수행하도록 지정함

 속성을 사용한 태그 예제

 <a href=“http://www.naver.com"> 네이버 </a> 로 연결

 <img src=“./images/mypicture.jpg">

태그는 대문자와 소문자의 구분이 없다 .

 예를 들어 , <BODY>, <Body>, <body> 은 모두 같은 태그로 인식한다 .

(7)

HTML

에서 공백문자

공백 (space) 문자가 연속되는 경우 , 하나의 공백 문자로 인식함 탭 (tab) 이나 엔터 (enter) 도 하나의 공백 문자로 인식

(8)

HTML

편집기 (1/2)

텍스트 편집기 : 메모장 , 아래아한글 , MS 워드 , 에디트플러스

(9)

HTML

편집기 (2/2)

WYSIWYG 편집기 : 드림위버 ( 매크로미디어 ), 나모 웹 에디터 , 프론트페이 지 (MS)

(10)

텍스트 기반 에디터 사용 ?

WYSIWYG 편집기를 사용하지 않는 이유

HTML 태그를 익힐 수 없다 . ( 태그를 몰라도 HTML 문서 작성이 가능하기 때문 )

WYSIWYG 편집기는 사용자가 원하는 모든 기능을 제공하지 않는다 .

WYSIWYG 으로는 보다 간결하고 이해하기 쉬운 HTML 문서를 작성하기 어렵다 .

제안하는 바는…

여러분은 텍스트 기반 에디터 ( 메모장 , editplus) 로 HTML 태그를 익히시기 바랍니다 .

태그가 익숙해졌다면 , 추후에는 WYSIWYG 편집기로 HTML 문서를 만드세요 .

HTML 태그를 잘 알고 있다면 , WYSIWYG 편집기로 만든 문서도 , 에디터로 수정하여 ,

보다 간결하고 보기 좋게 만들 수 있습니다 .

(11)

강의 내용

HTML 개요

HTML 기본 태그

하이퍼텍스트와 하이퍼미디어 리스트와 테이블

CGI 프로그래밍

(12)

HTML

시작 !

텍스트 편집기를 열어 다음과 같이 first.html 을 작성 작성한 first.html 을 브라우저로 열어 내용을 확인함

(13)

구조와 주석 태그 (1/6)

<html> …. </html>: HTML 로 작성된 문서임을 나타냄

<head> …. </head>: HTML 문서의 헤더 영역을 의미함

<body> … </body>: HTML 문서의 본문 내용을 담고 있음

(14)

구조와 주석 태그 (2/6)

<title> …. </title>

문서의 제목을 브라우저 화면의 타이틀 바에 표시

일반적으로 <head> 와 </head> 사이에 위치함

브라우저에서 북마크 (bookmark) 했을 때 , 북마크 제목으로 사용되기도 함

(15)

<base href = “… path …”>

일반적으로 <head> 와 </head> 사이에 위치함

HTML 문서에서 참조하는 내용에 대한 상대 주소를 정의함

즉 , 해당 HTML 문서에서 참조하는 내용에 대한 URL 을 지정해 주는데 사용함

<BASE HREF="...."> 태그를 지정하면 HTML 문서 안에 있는 모든 URL 은

<BASE HREF="...."> 태그에서 지정된 URL 로부터 상대적인 경로를 가지게 됨

구조와 주석 태그 (3/6)

(16)

<body> 의 속성

bgcolor: 웹 페이지의 배경 색상을 지정함 ( 예 : bgcolor = “#ff0000”)

background : 주어진 이미지를 웹 페이지의 배경으로 사용함 ( 예 : backgroupd = “images/myback.jpg”)

text: 웹 페이지의 글자 색상의 지정함 ( 예 : text = “black”)

link, vlink, alink: 하이퍼링크에 대한 색상을 나타냄

 link는 방문하지 않은 경우 , vlink 는 이미 방문한 경우 , alink 는 마우스를 눌 렀을 때의 색상을 나타냄

 예 : <body link = “red” vlink = “#00ff00” alink = “#0f000f”>

구조와 주석 태그 (4/6)

(17)

<body> 의 속성 사용 예

구조와 주석 태그 (5/6)

(18)

: 주석 (comment)

프로그램과 마찬가지로 , 주석은 HTML 을 설명하기 위한 것으로 , 브라우저는 주석의 내용을 무시함  브라우저 화면에 나타나지 않음

구조와 주석 태그 (6/6)

(19)

문단 및 줄 바꿈 태그 (1/5)

<p>: 문단 태그

문단을 구분하기 위해서 사용하며 , <p> 가 있는 위치에서 새로운 문단이 시작함

많은 경우에 텍스트와 텍스트를 큰 공간으로 분리하기 위하여 사용됨

속성 : align = left | right | center

 문단 내용을 좌측 , 우측 , 중앙 정렬하기 위해서 사용함

 사용 예 : <p align = center> 문단 내용 </p>

(20)

문단 및 줄 바꿈 태그 (2/5)

<p> 의 사용 예제

(21)

문단 및 줄 바꿈 태그 (3/5)

<br>: 줄 바꿈 태그

BReak 의 약어로 , 해당 위치에서 줄 바꿈이 일어남

<p> 가 문단을 구분하여 공백이 큰 반면에 , <br> 은 단순히 줄 바꿈만 수행됨

(22)

<nobr> … </nobr>: 자동 줄 바꿈 방지 태그

NO BReak 의 약어로서 , 웹 브라우저에서 자동 줄 바꿈이 일어나는 것을 방지함

자동 줄 바꿈이란 문단 내용이 길어질 경우 웹 브라우저 오른쪽 끝에서 자동적으로 줄이 바뀌는 성질을 의미하며 , 일반적으로 자동 줄 바꿈이 활성화 되어 있음

자동 줄 바꿈이 일어나지 않게 되면 , 수평 스크롤바를 사용하여 내용을 확인할 수 있음

문단 및 줄 바꿈 태그 (4/5)

(23)

<nobr> … </nobr> 사용 예제

문단 및 줄 바꿈 태그 (5/5)

(24)

수평 구분선 태그 (1/2)

<hr>: Horizontal Ruler

수평 구분선 ( 경계선 ) 을 그리기 위해 사용함

속성을 사용하여 선의 굵기 , 길이 , 정렬 방식을 지정할 수 있음

사용 예 : <hr size = 5 width = 50%>

속성의 종류

 size: 구분석의 두께를 픽셀로 지정함 ( 예 : size = 5)

 width: 구분선의 길이를 픽셀 혹은 웹 브라우저의 상태 크기로 지정함 ( 예 : width = 200, width = 70%)

 align: 구분선을 좌측 , 우측 , 중앙 정렬하도록 함 (left, right, center)

(25)

수평 구분선 태그 (2/2)

<hr> 태그의 사용 예

(26)

글자 지정 태그 (1/3)

<h#> … </h#>: 제목의 글자 크기 지정에 사용

# = 1 일 때 가장 크고 , # = 6 일 떄 가장 작음

</h#> 이후에 자동 줄 바꿈이 일어남

(27)

<font> … </font>: 글자 크기 , 글꼴 , 색깔을 지정 / 변경하는 태그

<font> 의 속성

face: 글꼴 ( 폰트 ) 자체를 지정하는데 사용함 ( 예 : <font face=“ 굴림체” >)

 한글 글꼴의 종류로는 “바탕” , “ 굴림” , “ 궁서” , “ 돋움” 등이 있음

size: 글꼴의 크기를 지정할 때 사용함 ( 예 : <font size = 4>)

 글꼴 크기는 1(가장 작음 ) 에서 7( 가장 큼 ) 을 줄 수 있으며 , 디폴트 크기는 3 임

 상대적인 크기 지정이 가능함 , 즉 현재 크기에 “ +2” 혹은 “ -1” 과 같이 사용도 가능함

color: 글꼴의 색깔을 지정하는데 사용함 ( 예 : <font color=“yellow”>)

 주요 색깔 이름으로는 black, blue, yellow, cyan, green, red 등이 있음

 색깔 이름 대신 컬러 코드 (#ff00ff)를 직접 쓸 수도 있음 ( 컬러 코드는 추후 설명 )

글자 지정 태그 (2/3)

(28)

<font> 사용 예제

글자 지정 태그 (3/3)

(29)

문자 스타일 지정 태그 (1/2)

태그를 이용하여 브라우저에 다양한 문자 스타일로 표현함

<b> … </b> 태그 내 글자를 볼드 (bold) 체로 나타냄

<u> … </u> 태그 내 글자를 밑줄 (underline) 체로 나타냄

<i> … </i> 태그 내 글자를

이탤릭

^(italic) 체로 나타냄

<tt> … </tt> 태그 내 글자를 타자기 (teletype) 체로 나타냄

글자의 글꼴 , 크기 , 스타일에 대한 보다 다양한 설정은

CSS(Cascading Style Sheet) 기능을 사용하며 , 자세한 내용은 다음 링크를 참조한다 .

위키피디아 : http://en.wikipedia.org/wiki/Cascading_Style_Sheets/

CSS Tutorial: http://www.w3schools.com/css/

(30)

문자 스타일 지정 태그 (2/2)

(31)

컬러 코드 (1/4)

색깔 지정 방법 : 이름 이용 , 컬러 코드 이용 이름을 이용한 컬러 지정

 검정 , 빨강 , 노랑 , 파랑 등 잘 알려진 색깔 이름을 그대로 사용함

 예 : red, black, yellow, green, cyan, blue, purple

RGB 컬러 코드를 이용한 컬러 지정

RGB (Red, Green, Blue)  빛의 삼원색

 각 원색은 0(00)~255(FF) 의 256 단계의 컬러를 제공

0 은 컬러 요소가 전혀 없으며 , 255 는 가장 짙은 요소를 나타냄

 예 ) 000000: black, FF0000: red, 00FF00: green, 0000FF: blue, FFFFFF: white

(32)

컬러 코드 (2/4)

컬러 코드를 사용한 색깔 변경 예제

(33)

컬러 코드 (3/4)

컬러 차트 (color chart) 이용한 컬러 코드 확인

네이버 등의 검색 포털에서 “컬러 차트”를 입력하여 차트를 구함

자주 쓰이는 색깔들에 대한 컬러 코드 값이 차트 형태로 제공됨

http://www.tbi.univie.ac.at/TBI/hex_color_chart.

png

(34)

컬러 코드 (4/4)

색깔을 컬러 코드로 변환하는 도구

색깔을 선택하면 컬러 코드를 알려주는 웹 사이트 이용

대표적 사이트 : http://www.zspc.com/color, http://html-color-codes.info/

(35)

강의 내용

HTML 개요

HTML 기본 태그

하이퍼텍스트와 하이퍼미디어 리스트와 테이블

CGI 프로그래밍

(36)

하이퍼텍스트와 하이퍼미디어

(1/2)

하이퍼텍스트 (hypertext)

 하이퍼링크 (hyperlink) 를 가진 텍스트를 하이퍼텍스트라 함

HTML 문서의 텍스트에 링크가 연결되어 있으며 , 텍스트를 선택 ( 클릭 ) 할 경우 해당 링크로 이동함

하이퍼미디어 (hypermedia)

 하이퍼링크를 가진 멀티미디어 콘텐트 ( 이미지 , 오디오 , 동영상 등 ) 을 하이퍼미디어라 칭함

 해당 멀티미디어 콘텐트를 선택 ( 클릭 ) 할 경우 , 해당 링크로 이동하거나 연 결된 콘텐트가 플레이 됨

(37)

하이퍼텍스트와 하이퍼미디어

(2/2)

하이퍼텍스트와 하이퍼미디어 예제

하이퍼텍스트

하이퍼미디어

(38)

하이퍼링크 (1/2)

<a> … </a>: 앵커 (anchor) 태그

사용법 : <a href = “url”> 텍스트 내용 </a>

url 은 이동 ( 연결 ) 하고자 하는 주소이며 , 다른 사이트나 문서 내 지정된 위치가 될 수 있 음

HREF: hypertext reference 의 약어

(39)

하이퍼링크 (2/2)

HTML 문서 내에서의 이동

레이블 연결 : <a href = “#label-name”> 텍스트 </a>

레이블 지정 : <a name = “label-name”> 텍스트 </a>

(40)

HTML

문서에 이미지 삽입 (1/4)

<img src = “… image path …”> (

대개 </img> 는 생략 )

주요 속성

src: 삽입할 이미지의 파일이름 , 상대 혹은 절대 경로 사용 ( 예 : src = “images/myphoto.jpg”)

width: 이미지의 가로 크기 지정 , 픽셀 단위 혹은 상대 크기 ( 예 : width = 500, width = 150%)

height: 이미지의 세로 크기 지정 , 픽셀 단위 혹은 상대 크기 ( 예 : height = 400, height = 50%)

border: 이미지 테두리의 경계선 , 픽셀 단위 ( 예 : border = 1)

(41)

HTML

이미지 태그 사용 예제

(42)

HTML

애니메이션 GIF 사용 예제

(43)

이미지 맵 - 자세한 내용은 위키피디아 및 튜토리얼 참조

위키피디아 : http://en.wikipedia.org/wiki/Image_map 튜토리얼 : http://www.w3schools.com/tags/tag_map.asp

HTML

(44)

오디오 다운로드 및 재생하기 (1/4)

샘플링 : 아날로그 사운드를 디지털 데이터로 바꾸는 작업 오디오 에디터 : Cool Edit, GoldWave

오디오 파일의 종류 : wav, mid, ra, mp3

(45)

오디오 파일 다운로드 받기

<a href=“ 오디오 파일 이름” > 오디오 설명 </a>

(46)

오디오 재생하기 : <embed> 태그 사용

<embed> 태그의 속성

src: 오디오 파일의 URL ( 예 : src = “favorate-pop.mp3”)

width/height: 재생기의 너비와 높이를 픽셀로 지정 ( 예 : width = 200 height

= 50)

autorestart: 오디오 파일의 자동 재생 여부를 표시 (true | false)

loop: 오디오를 몇 차례 재생할지 결정 (n | infinite)

hidden: 재생기를 감출지 보여줄지를 결정 (true | false)

사용 예 : <embed src=“music/song3.mp3” autostart=true, loop=2>

(47)

오디오 재생 예제

(48)

동영상 파일 종류 : mpg, mov, avi, asf

동영상 파일 다운로드 : <a href=“ 동영상 파일 이름” > 파일 설명

</a>

동영상 플레이하기 : <embed src=“ 동영상 파일 이름” … >

동영상 다운로드 및 재생하기

(49)

Homework #2 (

실습 #1)

(50)

강의 내용

HTML 개요

HTML 기본 태그

하이퍼텍스트와 하이퍼미디어 리스트와 테이블

CGI 프로그래밍

(51)

리스트 ( 목록 ) 태그

리스트 태그의 종류 : 불릿 (bullet) 리스트 , 번호 (number) 리스트 불릿 리스트 : 불릿을 사용하여 목록을 나타냄 ( 순서 개념 없

음 )

첫 번째 항목

두 번째 항복

세 번째 항목

번호 리스트 : 번호를 사용하여 목록을 나타냄 ( 순서 개념 있음 )

1. 첫 번째 항목 2. 두 번째 항복 3. 세 번째 항목

(52)

불릿 리스트 (1/2)

불릿 리스트 시작 / 끝 태그 : <ul> … </ul> (ul: unordered list)

 목록의 아이템을 기호 ( 동그라미 , 사각형 등 ) 로 구분함

 목록의 중첩이 가능함 : 블릿 리스트 내에 불릿 리스트 표현이 가능함

<ul> 의 속성 : type = circle | square | disc

(circle = ○, square = ■, disc = ●  브라우저마다 조금씩 다르게 나타남 )

각 항목 (list item) 의 시작 / 끝 태그 : <li> … </li>

 혼란이 없는 한 </li> 는 종종 생략됨

<li> 의 속성 : type = circle | square | disc

참고 : 속성이 영향을 미치는 범위

<ul>( 혹은 <ol>) 에서의 속성은 목록 전체에 영향을 주는 반면에 ,

<li> 에서의 속성은 해당 항목에만 영향을 준다 .

(53)

불릿 리스트 (2/2)

(54)

번호 리스트 (1/3)

번호 리스트 시작 / 끝 태그 : <ol> … </ol> (ol: ordered list)

 목록의 아이템을 숫자 ( 혹은 문자 ) 순으로 나열할 때 사용함

 불릿 리스트와 마찬가지로 중첩하여 사용할 수 있음

<ol> 의 속성

type = “A” | “a” | “I” | “I” | “1”

 “A” 대문자 알파벳 (A, B, C, …)

 “a” 소문자 알파벳 (a, b, c, …)

 “I” 대문자 로마 숫자 (I, II, III, …)

 “i” 소문자 로마 숫자 (i, ii, iii, …)

 “1” 아라비아 숫자 (1, 2, 3)

start: 숫자 리스트의 시작 번호를 지정 ( 예 : start = 3)

(55)

번호 리스트 (2/3)

각 항목 (list item) 의 시작 / 끝 태그 : <li> … </li> (<ul> 과 동일 한 내용 )

 혼란이 없는 한 </li> 는 종종 생략됨

<li> 의 속성

type = “A” | “a” | “I” | “I” | “1”

value: 시작번호를 임의로 변경하고 싶은 경우 ( 예 : value = 4)

참고 : 속성이 영향을 미치는 범위 (<ul> 과 동일한 내용 )

<ol>( 혹은 <ul>) 에서의 속성은 목록 전체에 영향을 주는 반면에 ,

<li> 에서의 속성은 해당 항목에만 영향을 준다 .

(56)

번호 리스트 (3/3)

(57)

테이블 (1/4)

<table> … </table>: 하나의 테이블을 정의하는 시작 및 종료 태그

width, height: 테이블의 가로 / 세로 크기 , 절대크기 ( 픽셀 ) 또는 브라우 저에 대한 상대 크기 (%) 로 설정 ( 예 : width=50% height=400)

border: 테이블 둘레의 두께 ( 예 : border=1)

bgcolor: 테이블의 배경 색상 ( 예 : “bgcolor=yellow”)

<caption> … </caption>: 테이블의 제목

align: 캡션의 위치 ( 테이블 위 = top, 테이블 아래 = BOTTOM)

(58)

테이블 (2/4)

<tr> … </tr>: 테이블의 행 (row) 을 정의함 ( Table Row)

align: 행에 속한 텍스트들의 가로 정렬 방식 (= left | right | cen- ter)

valign: 행에 속한 텍스트들의 세로 정렬 방식 (= top | bottom | mid- dle)

<td> … </td>: 테이블의 셀 (cell) 을 정의함

width, height: 셀의 크기 , 픽셀 혹은 상대크기 ( 예 : width=100 height=20%)

align, valign: 해당 셀 텍스트의 가로 / 세로 정렬 방식

colspan: 오른쪽 셀과 병합 ( 예 : colspan=2  두 셀을 병합 )

rowspan: 아랫쪽 셀과 병합 ( 예 : rowspan=3  세 셀을 병합 )

bgcolor: 현재 셀의 색상

(59)

테이블 (3/4)

<th> … </th>: 테이블의 제목 ( 첫 번째 ) 행 ( Table Header)

(<td> 와 기능이 같으나 ) 테이블의 헤더의 셀을 나타내기 위해 사용

<td> 대신 <th> 로 지정해 주면 , 볼드체에 중앙 정렬로 표시됨

테이블 관련 태그 정리

<TABLE>

<TR>

<TH>

<TD>

[ 표 1] 학과별 학생 분포

(60)

테이블 (4/4)

(61)

Homework #3 (

실습 #2)

(62)

강의 내용

HTML 개요

HTML 기본 태그

하이퍼텍스트와 하이퍼미디어 리스트와 테이블

CGI 프로그래밍

(63)

Web Programming by Yang-Sae Moon Page 63

Common Gateway Interface  무언가와의 Gateway 역할 ?

 사용자가

1) 브라우저를 통해 입력한 정보가 웹 서버를 거쳐 2) 응용프로그램에 전달되고 가공되어

3) 다시 사용자에게 전달되기까지의 인터페이스

 외부 프로그램과 웹 서버 (Web Server) 간의 연결 역할

CGI 를 사용하는 이유

HTML 문서의 단순한 보여주기가 아니라 , 양방향 소통을 가능하게 함

 사용자와 서버 사이의 인터페이스가 가능한 웹 페이지를 제작함

CGI 프로그램의 사용 예

 방명록 , 게시판 , 카운터 , 사용자 계정 및 패스워드 관리

 대화방 , 자료실 , 검색엔진 , …

CGI

란 ?

(64)

1. 사용자가 브라우저에 입력한 내용이 웹 서버로 전달된다 .

2. 웹 서버는 입력을 CGI 프로그램에 전달한다 . 즉 , CGI 를 호출한다 .

3. CGI 프로그램은 입력에 따른 처리를 수행하고 , 그 결과를 웹 서버에게 전달한다 . 4. 웹 서버는 사용자의 브라우저 , 즉 클라이언트에 CGI 의 실행 결과를 출력한다 .

CGI

동작 절차









사용자

( 브라우저 ) 웹 서버 CGI 프로그램

(65)

제 1 세대

 C/C++

 Perl

 C Shell

제 2 세대

 ASP (Active Server Page)

 JSP (Java Server Page)

 PHP (Personal Home Page Tools) 제 3 세대

 ASP.NET

 JSP+EJB

CGI

개발 도구

(66)

HTML 문서에서 사용자 입력을 받기 위한 태그

<form> … </form> 으로 구성되며 ,

내부에 <input> 태그를 두어 입력형식을 지정함

<FORM>

태그 (1/2)

<form>

<input>

. . .

<input>

</form>

<form> 의 속성

 action=“cgi-program”: 동작시킬 CGI 프로그램

 method: 데이터를 전달하는 방식 (= GET | POST)

 GET: URL 에 포함되어 전달 ( 파라메터 값들을 전달 )

 POST: 표준 입출력 방식으로 전달 ( 대용량 데이터 전달 )

 target: 결과 윈도우 지정 (= _blank | _self | _parent | _top)

(67)

<form> 사용 예제

<FORM>

태그 (2/2)

(68)

<INPUT>

태그 (1/4)

<input>: <form> 에 포함될 입력양식을 지정함

<input> 의 속성

 텍스트 : <input type = "text" name = "...">  한 줄 문자열 입력

 암호 : <input type = "password" name = "...">  입력을 “ *” 로 표시

 라디오 버튼 : <input type = "radio" name = "..." value=“버튼글자” >

 선택 가능한 아이템들을 나열해 주고 한 가지만 선택

 체크 박스 : <input type = "checkbox" name = "...">

 선택 가능한 아이템들을 나열해 주고 한 개 이상 선택 가능

 리셋 버튼 : <input type = "reset" name = "..." value=“버튼글자” >

 <form> 안의 내용을 초기값으로 초기화

 전송 버튼 : <input type = "submit" name = "..." value="버튼글자” >

 입력된 내용을 CGI 프로그램 (action 에 지정한 URL) 으로 전송하는 역할

(69)

<INPUT>

태그 (2/4)

<input> 태그 예제 – 한 눈에 보기

(70)

<INPUT>

태그 (3/4)

<input> 태그 예제 – 라디오 버튼

(71)

<INPUT>

태그 (4/4)

<input> 태그 예제 – 체크 박스

(72)

<SELECT>

태그 (1/2)

<select> … </select>

 아이템 (<option>) 들을 목록형태로 제공하고 선택함

 제공된 목록의 여러 아이템들 중에서 하나 ( 혹은 하나 이상 ) 를 선택

<select> 의 속성

 name: <select> 태그에 의한 목록 이름 ( 예 : name=hobbies)

 size: <select> 태그의 크기 ( 예 : size=5)

 multiple: 한 개 이상 선택이 가능하게 함

<select>

<option> 아이템 1 . . .

<option> 아이템 n

</select>

(73)

<SELECT>

태그 (2/2)

<select> 사용 예제

(74)

<TEXTAREA>

태그 (1/2)

<textarea> … </textarea>

 한 줄 이상 여러 줄의 텍스트를 입력하고자 할 때 사용함

 텍스트 창의 크기를 지정할 수 있으며 , 초기값 제시도 가능함

<textarea> 의 속성

 name: 텍스트에 대한 이름 ( 예 : name=myopinion)

 rows: 텍스트 창의 세로 크기 ( 예 : rows=5)

 cols: 텍스트 창의 가로 크기 ( 예 : cols=40)

<textarea>

initial text

</textarea>

(75)

<TEXTAREA>

태그 (2/2)

<textarea> 사용 예제

(76)

CGI

프로그램으로의 입력

(77)

일반적으로 HTML 문서를 구성하여 출력함

HTML 문서 내에 이미지 , 오디오 , 동영상 등도 전달할 수 있음

CGI

프로그램으로부터의 출력

(78)

Homework #4 (

실습 #3)