[ 부록 ] HTML 과 CGI

(1)

[ 부록 ]

HTML 과 CGI

(from PHP 웹 프로그래밍 )

문양세

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

(2)

Web Programming & Practice by Yang-Sae Moon Page 2

강의 내용

HTML과 CGI 프로그래밍

HTML 개요 테이블

CGI 연동

(3)

HTML 개요

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

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

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

(4)

HTML 문서의 기본 구조

HTML 문서 예제

(5)

HTML 태그의 속성과 특징

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

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

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

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

속성을 사용한 태그 예제

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

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

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

(6)

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

<p>: 문단 태그

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

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

속성 : align = left | right | center

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

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

(7)

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

<p> 의 사용 예제

(8)

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

<br>: 줄 바꿈 태그

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

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

(9)

<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)를 직접 쓸 수도 있음 ( 컬러 코드는 추후 설명 )

글자 지정 태그 (1/2)

(10)

<font> 사용 예제

글자 지정 태그 (2/2)

(11)

하이퍼링크 (Hyperlink)

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

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

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

HREF: hypertext reference 의 약어

(12)

강의 내용

HTML 개요 테이블

CGI 연동

(13)

테이블 (1/4)

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

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

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

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

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

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

(14)

테이블 (2/4)

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

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

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

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

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

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

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

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

bgcolor: 현재 셀의 색상

(15)

테이블 (3/4)

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

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

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

테이블 관련 태그 정리

(16)

테이블 (4/4)

(17)

강의 내용

HTML 개요 테이블

CGI 연동

(18)

Web Programming by Yang-Sae Moon Page 18

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

사용자가

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

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

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

CGI 란 ?









사용자

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

(19)

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

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

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

<FORM> 태그 (1/2)

<form>

<input>

. . .

<input>

</form>

<form> 의 속성

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

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

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

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

(20)

<form> 사용 예제

<FORM> 태그 (2/2)

(21)

<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="버튼글자” >

(22)

<INPUT> 태그 (2/4)

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

(23)

<INPUT> 태그 (3/4)

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

(24)

<INPUT> 태그 (4/4)

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

(25)

CGI 프로그램으로의 입력

(26)

예제 1: 두 수 및 연산자를 입력 받아 계산하기 HTML 프로그램 (lecture10_form1.html)

Form 필드를 사용한 입력 처리 (1/2)

프로그래밍 본격 시작

<form method=post action="lecture10_form1.php">

<input type="text" name="val01" size=5>

<input type="text" name="operator" size=1>

<input type="text" name="val02" size=5>

<input type="submit" value=" 계산하기 ">

</form>

(27)

예제 1: 두 수 및 연산자를 입력 받아 계산하기 ( 계속 ) PHP 프로그램 (lecture10_form1.php)

Form 필드를 사용한 입력 처리 (2/2)

프로그래밍 본격 시작

<?

extract(array_merge($HTTP_GET_VARS, $HTTP_POST_VARS));

switch($operator) {

case("+"):

$result = $val01 + $val02;

print $val01." + ".$val02." = ".$result;

break;

case("-"):

$result = $val01 - $val02;

print $val01." - ".$val02." = ".$result;

break;

case("*"):

$result = $val01 * $val02;

print $val01." * ".$val02." = ".$result;

GET 및 POST 방식으로 전달된 변수 값을 “변 수 = 값”의 형태로 변환  다음 슬라이드 참조