[부록] HTML과 CGI (from PHP 웹 프로그래밍) 문양세 강원대학교 IT대학 컴퓨터과학전공
강의 내용 HTML과 CGI 프로그래밍 HTML 개요 테이블 CGI 연동
HTML 개요 HTML과 CGI 프로그래밍 HTML(HyperText Markup Language)은 웹 문서를 기술하기 위한 마크업 (markup) 언어이다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. HTML은 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다.
HTML 문서의 기본 구조 HTML과 CGI 프로그래밍 HTML 문서 예제
HTML 태그의 속성과 특징 HTML 문서를 이해하기 위해서는 HTML 태그를 이해할 수 있어야 한다. HTML과 CGI 프로그래밍 HTML 문서를 이해하기 위해서는 HTML 태그를 이해할 수 있어야 한다. 태그는 속성(attribute)을 가질 수 있다. 속성은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정함 웹 브라우저로 하여금 보다 세밀한 기능을 수행하도록 지정함 속성을 사용한 태그 예제 <a href=“http://www.naver.com">네이버</a>로 연결 <img src=“./images/mypicture.jpg"> 태그는 대문자와 소문자의 구분이 없다. 예를 들어, <BODY>, <Body>, <body>은 모두 같은 태그로 인식한다.
문단 및 줄 바꿈 태그 (1/3) <p>: 문단 태그 HTML과 CGI 프로그래밍 <p>: 문단 태그 문단을 구분하기 위해서 사용하며, <p>가 있는 위치에서 새로운 문단이 시작함 많은 경우에 텍스트와 텍스트를 큰 공간으로 분리하기 위하여 사용됨 속성: align = left | right | center 문단 내용을 좌측, 우측, 중앙 정렬하기 위해서 사용함 사용 예: <p align = center> 문단 내용 </p>
문단 및 줄 바꿈 태그 (2/3) HTML과 CGI 프로그래밍 <p>의 사용 예제
문단 및 줄 바꿈 태그 (3/3) <br>: 줄 바꿈 태그 BReak의 약어로, 해당 위치에서 줄 바꿈이 일어남 HTML과 CGI 프로그래밍 <br>: 줄 바꿈 태그 BReak의 약어로, 해당 위치에서 줄 바꿈이 일어남 <p>가 문단을 구분하여 공백이 큰 반면에, <br>은 단순히 줄 바꿈만 수행됨
글자 지정 태그 (1/2) <font> … </font>: 글자 크기, 글꼴, 색깔을 지정/변경하는 태그 HTML과 CGI 프로그래밍 <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/2) HTML과 CGI 프로그래밍 <font> 사용 예제
하이퍼링크 (Hyperlink) <a> … </a>: 앵커(anchor) 태그 HTML과 CGI 프로그래밍 <a> … </a>: 앵커(anchor) 태그 사용법: <a href = “url”>텍스트 내용</a> url은 이동(연결)하고자 하는 주소이며, 다른 사이트나 문서 내 지정된 위치가 될 수 있음 HREF: hypertext reference의 약어
강의 내용 HTML과 CGI 프로그래밍 HTML 개요 테이블 CGI 연동
테이블 (1/4) <table> … </table>: 하나의 테이블을 정의하는 시작 및 종료 태그 HTML과 CGI 프로그래밍 <table> … </table>: 하나의 테이블을 정의하는 시작 및 종료 태그 width, height: 테이블의 가로/세로 크기, 절대크기(픽셀) 또는 브라우저에 대한 상대 크기(%)로 설정 (예: width=50% height=400) border: 테이블 둘레의 두께 (예: border=1) bgcolor: 테이블의 배경 색상 (예: “bgcolor=yellow”) <caption> … </caption>: 테이블의 제목 align: 캡션의 위치 (테이블 위 = top, 테이블 아래 = BOTTOM)
테이블 (2/4) <tr> … </tr>: 테이블의 행(row)을 정의함 (Table Row) HTML과 CGI 프로그래밍 <tr> … </tr>: 테이블의 행(row)을 정의함 (Table Row) align: 행에 속한 텍스트들의 가로 정렬 방식 (= left | right | center) valign: 행에 속한 텍스트들의 세로 정렬 방식 (= top | bottom | middle) <td> … </td>: 테이블의 셀(cell)을 정의함 width, height: 셀의 크기, 픽셀 혹은 상대크기 (예: width=100 height=20%) align, valign: 해당 셀 텍스트의 가로/세로 정렬 방식 colspan: 오른쪽 셀과 병합 (예: colspan=2 두 셀을 병합) rowspan: 아랫쪽 셀과 병합 (예: rowspan=3 세 셀을 병합) bgcolor: 현재 셀의 색상
테이블 (3/4) <th> … </th>: 테이블의 제목(첫 번째) 행 (Table Header) HTML과 CGI 프로그래밍 <th> … </th>: 테이블의 제목(첫 번째) 행 (Table Header) (<td>와 기능이 같으나) 테이블의 헤더의 셀을 나타내기 위해 사용 <td>대신 <th>로 지정해 주면, 볼드체에 중앙 정렬로 표시됨 테이블 관련 태그 정리 <CAPTION> [표 1] 학과별 학생 분포 <TABLE> <TH> <TR> <TD>
테이블 (4/4) HTML과 CGI 프로그래밍
강의 내용 HTML과 CGI 프로그래밍 HTML 개요 테이블 CGI 연동
CGI란? Common Gateway Interface 무언가와의 Gateway 역할? HTML과 CGI 프로그래밍 Common Gateway Interface 무언가와의 Gateway 역할? 사용자가 1) 브라우저를 통해 입력한 정보가 웹 서버를 거쳐 2) 응용프로그램에 전달되고 가공되어 3) 다시 사용자에게 전달되기까지의 인터페이스 외부 프로그램과 웹 서버(Web Server) 간의 연결 역할 사용자 (브라우저) CGI 프로그램 웹 서버
<FORM> 태그 (1/2) HTML 문서에서 사용자 입력을 받기 위한 태그 HTML과 CGI 프로그래밍 HTML 문서에서 사용자 입력을 받기 위한 태그 <form> … </form>으로 구성되며, 내부에 <input> 태그를 두어 입력형식을 지정함 <form> <input> . . . </form> <form>의 속성 action=“cgi-program”: 동작시킬 CGI 프로그램 method: 데이터를 전달하는 방식 (= GET | POST) GET: URL에 포함되어 전달 (파라메터 값들을 전달) POST: 표준 입출력 방식으로 전달 (대용량 데이터 전달)
<FORM> 태그 (2/2) HTML과 CGI 프로그래밍 <form> 사용 예제
<INPUT> 태그 (1/4) <input>: <form>에 포함될 입력양식을 지정함 HTML과 CGI 프로그래밍 <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)으로 전송하는 역할
<INPUT> 태그 (2/4) HTML과 CGI 프로그래밍 <input> 태그 예제 – 한 눈에 보기
<INPUT> 태그 (3/4) HTML과 CGI 프로그래밍 <input> 태그 예제 – 라디오 버튼
<INPUT> 태그 (4/4) HTML과 CGI 프로그래밍 <input> 태그 예제 – 체크 박스
CGI 프로그램으로의 입력 HTML과 CGI 프로그래밍
Form 필드를 사용한 입력 처리 (1/2) 예제 1: 두 수 및 연산자를 입력 받아 계산하기 프로그래밍 본격 시작 예제 1: 두 수 및 연산자를 입력 받아 계산하기 HTML 프로그램 (lecture10_form1.html) <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>
Form 필드를 사용한 입력 처리 (2/2) 예제 1: 두 수 및 연산자를 입력 받아 계산하기 (계속) 프로그래밍 본격 시작 예제 1: 두 수 및 연산자를 입력 받아 계산하기 (계속) PHP 프로그램 (lecture10_form1.php) <? 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; case("*"): $result = $val01 * $val02; print $val01." * ".$val02." = ".$result; case("/"): $result = $val01 / $val02; print $val01." / ".$val02." = ".$result; } ?> GET 및 POST 방식으로 전달된 변수 값을 “변수 = 값”의 형태로 변환 다음 슬라이드 참조