HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세

HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세
강원대학교 IT대학 컴퓨터과학전공

HTML 개요 HTML 기본 태그 하이퍼텍스트와 하이퍼미디어 리스트와 테이블 CGI 프로그래밍 강의 내용

HTML 개요 HTML과 CGI 프로그래밍 HTML(HyperText Markup Language)은 웹 문서를 기술하기 위한 마크업 (markup) 언어이다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. HTML은 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다. HTML의 확장 XML(eXtensible Markup Language): 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으로 만들어진 확장 언어 HTML5: 그래픽, 모바일 기능이 크게 강화된 최신 HTML 언어

HTML 문서의 기본 구조 (1/2) HTML과 CGI 프로그래밍 HTML 문서는 일반적으로 머리말(header)과 본문(body)의 두 부분으로 나누어진다. <HTML> <HEAD> 제목 등 HTML 문서의 머리말이 위치함 </HEAD> <BODY> HTML 문서의 본문의 위치함 </BODY> </HTML> 머리말(header) HTML 문서 본문(body)

HTML 문서의 기본 구조 (2/2) HTML과 CGI 프로그래밍 HTML 문서 예제

HTML 태그의 속성과 특징 HTML 문서를 이해하기 위해서는 HTML 태그를 이해할 수 있어야 한다.
HTML과 CGI 프로그래밍 HTML 문서를 이해하기 위해서는 HTML 태그를 이해할 수 있어야 한다. 태그는 속성(attribute)을 가질 수 있다. 속성은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정함 웹 브라우저로 하여금 보다 세밀한 기능을 수행하도록 지정함 속성을 사용한 태그 예제 <a href=“ 연결 <img src=“./images/mypicture.jpg"> 태그는 대문자와 소문자의 구분이 없다. 예를 들어, <BODY>, <Body>, <body>은 모두 같은 태그로 인식한다.

HTML에서 공백문자 공백(space) 문자가 연속되는 경우, 하나의 공백 문자로 인식함
HTML과 CGI 프로그래밍 공백(space) 문자가 연속되는 경우, 하나의 공백 문자로 인식함 탭(tab)이나 엔터(enter)도 하나의 공백 문자로 인식

HTML 편집기 (1/2) HTML과 CGI 프로그래밍 텍스트 편집기: 메모장, 아래아한글, MS 워드, 에디트플러스

HTML 편집기 (2/2) WYSIWYG 편집기: 드림위버(매크로미디어), 나모 웹 에디터, 프론트페이지(MS)
HTML과 CGI 프로그래밍 WYSIWYG 편집기: 드림위버(매크로미디어), 나모 웹 에디터, 프론트페이지(MS)

텍스트 기반 에디터 사용? WYSIWYG 편집기를 사용하지 않는 이유 제안하는 바는…
HTML과 CGI 프로그래밍 WYSIWYG 편집기를 사용하지 않는 이유 HTML 태그를 익힐 수 없다. (태그를 몰라도 HTML 문서 작성이 가능하기 때문) WYSIWYG 편집기는 사용자가 원하는 모든 기능을 제공하지 않는다. WYSIWYG으로는 보다 간결하고 이해하기 쉬운 HTML 문서를 작성하기 어렵다. 제안하는 바는… 여러분은 텍스트 기반 에디터(메모장, editplus)로 HTML 태그를 익히시기 바랍니다. 태그가 익숙해졌다면, 추후에는 WYSIWYG 편집기로 HTML 문서를 만드세요. HTML 태그를 잘 알고 있다면, WYSIWYG 편집기로 만든 문서도, 에디터로 수정하여, 보다 간결하고 보기 좋게 만들 수 있습니다.

HTML 시작! 텍스트 편집기를 열어 다음과 같이 first.html을 작성
HTML과 CGI 프로그래밍 텍스트 편집기를 열어 다음과 같이 first.html을 작성 작성한 first.html을 브라우저로 열어 내용을 확인함

구조와 주석 태그 (1/6) <html> …. </html>: HTML로 작성된 문서임을 나타냄
HTML과 CGI 프로그래밍 <html> …. </html>: HTML로 작성된 문서임을 나타냄 <head> …. </head>: HTML 문서의 헤더 영역을 의미함 <body> … </body>: HTML 문서의 본문 내용을 담고 있음

구조와 주석 태그 (2/6) <title> …. </title>
HTML과 CGI 프로그래밍 <title> …. </title> 문서의 제목을 브라우저 화면의 타이틀 바에 표시 일반적으로 <head>와 </head> 사이에 위치함 브라우저에서 북마크(bookmark)했을 때, 북마크 제목으로 사용되기도 함

구조와 주석 태그 (3/6) <base href = “… path …”>
HTML과 CGI 프로그래밍 <base href = “… path …”> 일반적으로 <head>와 </head> 사이에 위치함 HTML 문서에서 참조하는 내용에 대한 상대 주소를 정의함 즉, 해당 HTML 문서에서 참조하는 내용에 대한 URL을 지정해 주는데 사용함 <BASE HREF="...."> 태그를 지정하면 HTML 문서 안에 있는 모든 URL은 <BASE HREF="...."> 태그에서 지정된 URL로부터 상대적인 경로를 가지게 됨

구조와 주석 태그 (4/6) <body>의 속성
HTML과 CGI 프로그래밍 <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”>

구조와 주석 태그 (5/6) HTML과 CGI 프로그래밍 <body>의 속성 사용 예

구조와 주석 태그 (6/6) : 주석(comment)
HTML과 CGI 프로그래밍 <! >: 주석(comment) 프로그램과 마찬가지로, 주석은 HTML을 설명하기 위한 것으로, 브라우저는 주석의 내용을 무시함  브라우저 화면에 나타나지 않음

문단 및 줄 바꿈 태그 (1/5) <p>: 문단 태그
HTML과 CGI 프로그래밍 <p>: 문단 태그 문단을 구분하기 위해서 사용하며, <p>가 있는 위치에서 새로운 문단이 시작함 많은 경우에 텍스트와 텍스트를 큰 공간으로 분리하기 위하여 사용됨 속성: align = left | right | center 문단 내용을 좌측, 우측, 중앙 정렬하기 위해서 사용함 사용 예: <p align = center> 문단 내용 </p>

문단 및 줄 바꿈 태그 (2/5) HTML과 CGI 프로그래밍 <p>의 사용 예제

문단 및 줄 바꿈 태그 (3/5) <br>: 줄 바꿈 태그 BReak의 약어로, 해당 위치에서 줄 바꿈이 일어남
HTML과 CGI 프로그래밍 <br>: 줄 바꿈 태그 BReak의 약어로, 해당 위치에서 줄 바꿈이 일어남 <p>가 문단을 구분하여 공백이 큰 반면에, <br>은 단순히 줄 바꿈만 수행됨

문단 및 줄 바꿈 태그 (4/5) <nobr> … </nobr>: 자동 줄 바꿈 방지 태그
HTML과 CGI 프로그래밍 <nobr> … </nobr>: 자동 줄 바꿈 방지 태그 NO BReak의 약어로서, 웹 브라우저에서 자동 줄 바꿈이 일어나는 것을 방지함 자동 줄 바꿈이란 문단 내용이 길어질 경우 웹 브라우저 오른쪽 끝에서 자동적으로 줄이 바뀌는 성질을 의미하며, 일반적으로 자동 줄 바꿈이 활성화 되어 있음 자동 줄 바꿈이 일어나지 않게 되면, 수평 스크롤바를 사용하여 내용을 확인할 수 있음

문단 및 줄 바꿈 태그 (5/5) HTML과 CGI 프로그래밍 <nobr> … </nobr> 사용 예제

수평 구분선 태그 (1/2) <hr>: Horizontal Ruler 수평 구분선(경계선)을 그리기 위해 사용함
HTML과 CGI 프로그래밍 <hr>: Horizontal Ruler 수평 구분선(경계선)을 그리기 위해 사용함 속성을 사용하여 선의 굵기, 길이, 정렬 방식을 지정할 수 있음 사용 예: <hr size = 5 width = 50%> 속성의 종류 size: 구분석의 두께를 픽셀로 지정함 (예: size = 5) width: 구분선의 길이를 픽셀 혹은 웹 브라우저의 상태 크기로 지정함 (예: width = 200, width = 70%) align: 구분선을 좌측, 우측, 중앙 정렬하도록 함 (left, right, center)

수평 구분선 태그 (2/2) HTML과 CGI 프로그래밍 <hr> 태그의 사용 예

글자 지정 태그 (1/3) <h#> … </h#>: 제목의 글자 크기 지정에 사용
HTML과 CGI 프로그래밍 <h#> … </h#>: 제목의 글자 크기 지정에 사용 # = 1일 때 가장 크고, # = 6일 떄 가장 작음 </h#> 이후에 자동 줄 바꿈이 일어남

글자 지정 태그 (2/3) <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)를 직접 쓸 수도 있음 (컬러 코드는 추후 설명)

글자 지정 태그 (3/3) HTML과 CGI 프로그래밍 <font> 사용 예제

문자 스타일 지정 태그 (1/2) 태그를 이용하여 브라우저에 다양한 문자 스타일로 표현함
HTML과 CGI 프로그래밍 태그를 이용하여 브라우저에 다양한 문자 스타일로 표현함 <b> … </b> 태그 내 글자를 볼드(bold)체로 나타냄 <u> … </u> 태그 내 글자를 밑줄(underline) 체로 나타냄 <i> … </i> 태그 내 글자를 이탤릭(italic)체로 나타냄 <tt> … </tt> 태그 내 글자를 타자기(teletype)체로 나타냄 글자의 글꼴, 크기, 스타일에 대한 보다 다양한 설정은 CSS(Cascading Style Sheet) 기능을 사용하며, 자세한 내용은 다음 링크를 참조한다. 위키피디아: CSS Tutorial:

문자 스타일 지정 태그 (2/2) HTML과 CGI 프로그래밍

컬러 코드 (1/4) 색깔 지정 방법: 이름 이용, 컬러 코드 이용 이름을 이용한 컬러 지정
HTML과 CGI 프로그래밍 색깔 지정 방법: 이름 이용, 컬러 코드 이용 이름을 이용한 컬러 지정 검정, 빨강, 노랑, 파랑 등 잘 알려진 색깔 이름을 그대로 사용함 예: red, black, yellow, green, cyan, blue, purple RGB 컬러 코드를 이용한 컬러 지정 RGB (Red, Green, Blue)  빛의 삼원색 각 원색은 0(00)~255(FF)의 256단계의 컬러를 제공 0은 컬러 요소가 전혀 없으며, 255는 가장 짙은 요소를 나타냄 예) : black, FF0000: red, 00FF00: green, 0000FF: blue, FFFFFF: white

컬러 코드 (2/4) HTML과 CGI 프로그래밍 컬러 코드를 사용한 색깔 변경 예제

컬러 코드 (3/4) 컬러 차트(color chart) 이용한 컬러 코드 확인
HTML과 CGI 프로그래밍 컬러 차트(color chart) 이용한 컬러 코드 확인 네이버 등의 검색 포털에서 “컬러 차트”를 입력하여 차트를 구함 자주 쓰이는 색깔들에 대한 컬러 코드 값이 차트 형태로 제공됨

컬러 코드 (4/4) 색깔을 컬러 코드로 변환하는 도구 색깔을 선택하면 컬러 코드를 알려주는 웹 사이트 이용
HTML과 CGI 프로그래밍 색깔을 컬러 코드로 변환하는 도구 색깔을 선택하면 컬러 코드를 알려주는 웹 사이트 이용 대표적 사이트:

하이퍼텍스트와 하이퍼미디어 (1/2) 하이퍼텍스트(hypertext) 하이퍼미디어(hypermedia)
HTML과 CGI 프로그래밍 하이퍼텍스트(hypertext) 하이퍼링크(hyperlink)를 가진 텍스트를 하이퍼텍스트라 함 HTML 문서의 텍스트에 링크가 연결되어 있으며, 텍스트를 선택(클릭)할 경우 해당 링크로 이동함 하이퍼미디어(hypermedia) 하이퍼링크를 가진 멀티미디어 콘텐트(이미지, 오디오, 동영상 등)을 하이퍼미디어라 칭함 해당 멀티미디어 콘텐트를 선택(클릭)할 경우, 해당 링크로 이동하거나 연결된 콘텐트가 플레이 됨

하이퍼텍스트와 하이퍼미디어 (2/2) HTML과 CGI 프로그래밍 하이퍼텍스트와 하이퍼미디어 예제 하이퍼텍스트 하이퍼미디어

하이퍼링크 (1/2) <a> … </a>: 앵커(anchor) 태그
HTML과 CGI 프로그래밍 <a> … </a>: 앵커(anchor) 태그 사용법: <a href = “url”>텍스트 내용</a> url은 이동(연결)하고자 하는 주소이며, 다른 사이트나 문서 내 지정된 위치가 될 수 있음 HREF: hypertext reference의 약어

하이퍼링크 (2/2) HTML 문서 내에서의 이동
HTML과 CGI 프로그래밍 HTML 문서 내에서의 이동 레이블 연결: <a href = “#label-name”>텍스트</a> 레이블 지정: <a name = “label-name”>텍스트</a>

HTML 문서에 이미지 삽입 (1/4) HTML과 CGI 프로그래밍 <img src = “… image path …”> (대개 </img>는 생략) 주요 속성 src: 삽입할 이미지의 파일이름, 상대 혹은 절대 경로 사용 (예: src = “images/myphoto.jpg”) width: 이미지의 가로 크기 지정, 픽셀 단위 혹은 상대 크기 (예: width = 500, width = 150%) height: 이미지의 세로 크기 지정, 픽셀 단위 혹은 상대 크기 (예: height = 400, height = 50%) border: 이미지 테두리의 경계선, 픽셀 단위 (예: border = 1)

HTML 문서에 이미지 삽입 (2/4) HTML과 CGI 프로그래밍 이미지 태그 사용 예제

HTML 문서에 이미지 삽입 (3/4) HTML과 CGI 프로그래밍 애니메이션 GIF 사용 예제

HTML 문서에 이미지 삽입 (4/4) 이미지 맵 - 자세한 내용은 위키피디아 및 튜토리얼 참조
HTML과 CGI 프로그래밍 이미지 맵 - 자세한 내용은 위키피디아 및 튜토리얼 참조 위키피디아: 튜토리얼:

오디오 다운로드 및 재생하기 (1/4) 샘플링: 아날로그 사운드를 디지털 데이터로 바꾸는 작업
HTML과 CGI 프로그래밍 샘플링: 아날로그 사운드를 디지털 데이터로 바꾸는 작업 오디오 에디터: Cool Edit, GoldWave 오디오 파일의 종류: wav, mid, ra, mp3

오디오 다운로드 및 재생하기 (2/4) HTML과 CGI 프로그래밍 오디오 파일 다운로드 받기 <a href=“오디오 파일 이름”>오디오 설명</a>

오디오 다운로드 및 재생하기 (3/4) 오디오 재생하기: <embed> 태그 사용
HTML과 CGI 프로그래밍 오디오 재생하기: <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>

오디오 다운로드 및 재생하기 (4/4) HTML과 CGI 프로그래밍 오디오 재생 예제

동영상 다운로드 및 재생하기 동영상 파일 종류: mpg, mov, avi, asf
HTML과 CGI 프로그래밍 동영상 파일 종류: mpg, mov, avi, asf 동영상 파일 다운로드: <a href=“동영상 파일 이름”>파일 설명</a> 동영상 플레이하기: <embed src=“동영상 파일 이름” …>

Homework #2 (실습 #1) HTML과 CGI 프로그래밍

리스트(목록) 태그 리스트 태그의 종류: 불릿(bullet) 리스트, 번호(number) 리스트
HTML과 CGI 프로그래밍 리스트 태그의 종류: 불릿(bullet) 리스트, 번호(number) 리스트 불릿 리스트: 불릿을 사용하여 목록을 나타냄 (순서 개념 없음) 첫 번째 항목 두 번째 항복 세 번째 항목 번호 리스트: 번호를 사용하여 목록을 나타냄 (순서 개념 있음) 첫 번째 항목 두 번째 항복 세 번째 항목

불릿 리스트 (1/2) HTML과 CGI 프로그래밍 불릿 리스트 시작/끝 태그: <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>에서의 속성은 해당 항목에만 영향을 준다.

불릿 리스트 (2/2) HTML과 CGI 프로그래밍

번호 리스트 (1/3) HTML과 CGI 프로그래밍 번호 리스트 시작/끝 태그: <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)

번호 리스트 (2/3) HTML과 CGI 프로그래밍 각 항목(list item)의 시작/끝 태그: <li> … </li> (<ul>과 동일한 내용) 혼란이 없는 한 </li>는 종종 생략됨 <li>의 속성 type = “A” | “a” | “I” | “I” | “1” value: 시작번호를 임의로 변경하고 싶은 경우 (예: value = 4) 참고: 속성이 영향을 미치는 범위 (<ul>과 동일한 내용) <ol>(혹은 <ul>)에서의 속성은 목록 전체에 영향을 주는 반면에, <li>에서의 속성은 해당 항목에만 영향을 준다.

번호 리스트 (3/3) 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 프로그래밍

CGI란? Common Gateway Interface  무언가와의 Gateway 역할? CGI를 사용하는 이유
HTML과 CGI 프로그래밍 Common Gateway Interface  무언가와의 Gateway 역할? 사용자가 1) 브라우저를 통해 입력한 정보가 웹 서버를 거쳐 2) 응용프로그램에 전달되고 가공되어 3) 다시 사용자에게 전달되기까지의 인터페이스 외부 프로그램과 웹 서버(Web Server) 간의 연결 역할 CGI를 사용하는 이유 HTML 문서의 단순한 보여주기가 아니라, 양방향 소통을 가능하게 함 사용자와 서버 사이의 인터페이스가 가능한 웹 페이지를 제작함 CGI 프로그램의 사용 예 방명록, 게시판, 카운터, 사용자 계정 및 패스워드 관리 대화방, 자료실, 검색엔진, …

CGI 동작 절차     사용자가 브라우저에 입력한 내용이 웹 서버로 전달된다.
HTML과 CGI 프로그래밍 사용자가 브라우저에 입력한 내용이 웹 서버로 전달된다. 웹 서버는 입력을 CGI 프로그램에 전달한다. 즉, CGI를 호출한다. CGI 프로그램은 입력에 따른 처리를 수행하고, 그 결과를 웹 서버에게 전달한다. 웹 서버는 사용자의 브라우저, 즉 클라이언트에 CGI의 실행 결과를 출력한다.     사용자 (브라우저) CGI 프로그램 웹 서버

CGI 개발 도구 제 1세대 제 2세대 PHP (Personal Home Page Tools) 제 3세대 C/C++ Perl
HTML과 CGI 프로그래밍 제 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

<FORM> 태그 (1/2) HTML 문서에서 사용자 입력을 받기 위한 태그
HTML과 CGI 프로그래밍 HTML 문서에서 사용자 입력을 받기 위한 태그 <form> … </form>으로 구성되며, 내부에 <input> 태그를 두어 입력형식을 지정함 <form> <input> . . . </form> <form>의 속성 action=“cgi-program”: 동작시킬 CGI 프로그램 method: 데이터를 전달하는 방식 (= GET | POST) GET: URL에 포함되어 전달 (파라메터 값들을 전달) POST: 표준 입출력 방식으로 전달 (대용량 데이터 전달) target: 결과 윈도우 지정 (= _blank | _self | _parent | _top)

<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> 태그 예제 – 체크 박스

<SELECT> 태그 (1/2) <select> … </select>
HTML과 CGI 프로그래밍 <select> … </select> 아이템(<option>)들을 목록형태로 제공하고 선택함 제공된 목록의 여러 아이템들 중에서 하나(혹은 하나 이상)를 선택 <select>의 속성 name: <select> 태그에 의한 목록 이름 (예: name=hobbies) size: <select> 태그의 크기 (예: size=5) multiple: 한 개 이상 선택이 가능하게 함 <select> <option>아이템1 . . . <option>아이템n </select>

<SELECT> 태그 (2/2) HTML과 CGI 프로그래밍 <select> 사용 예제

<TEXTAREA> 태그 (1/2)
HTML과 CGI 프로그래밍 <textarea> … </textarea> 한 줄 이상 여러 줄의 텍스트를 입력하고자 할 때 사용함 텍스트 창의 크기를 지정할 수 있으며, 초기값 제시도 가능함 <textarea>의 속성 name: 텍스트에 대한 이름 (예: name=myopinion) rows: 텍스트 창의 세로 크기 (예: rows=5) cols: 텍스트 창의 가로 크기 (예: cols=40) <textarea> initial text </textarea>

<TEXTAREA> 태그 (2/2)
HTML과 CGI 프로그래밍 <textarea> 사용 예제

CGI 프로그램으로의 입력 HTML과 CGI 프로그래밍

CGI 프로그램으로부터의 출력 일반적으로 HTML 문서를 구성하여 출력함
HTML과 CGI 프로그래밍 일반적으로 HTML 문서를 구성하여 출력함 HTML 문서 내에 이미지, 오디오, 동영상 등도 전달할 수 있음

HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세

Similar presentations

Presentation on theme: "HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세"— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세

Similar presentations

Presentation on theme: "HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세"— Presentation transcript:

Similar presentations

About project

지원