[부록] HTML과 CGI (from PHP 웹 프로그래밍) 문양세 강원대학교 IT대학 컴퓨터과학전공.

[부록] 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=“ 연결 <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의 약어

테이블 (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 프로그래밍

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 방식으로 전달된 변수 값을 “변수 = 값”의 형태로 변환  다음 슬라이드 참조

[부록] HTML과 CGI (from PHP 웹 프로그래밍) 문양세 강원대학교 IT대학 컴퓨터과학전공.

Similar presentations

Presentation on theme: "[부록] HTML과 CGI (from PHP 웹 프로그래밍) 문양세 강원대학교 IT대학 컴퓨터과학전공."— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

[부록] HTML과 CGI (from PHP 웹 프로그래밍) 문양세 강원대학교 IT대학 컴퓨터과학전공.

Similar presentations

Presentation on theme: "[부록] HTML과 CGI (from PHP 웹 프로그래밍) 문양세 강원대학교 IT대학 컴퓨터과학전공."— Presentation transcript:

Similar presentations

About project

지원