1 13 장. 웹 (WWW) 컴퓨터네트워크
2 13-1 웹서비스 이번시간의학습목표 웹서비스를위한클라이언트 - 서버구조이해 웹서비스를지원하는 APM(Apache, PHP, MySQL) 의연동방식이해
3 웹서비스개요 전세계적으로 TCP, UDP, SCTP 포트 80 으로지정 보안을위해 8000, 8080 등을이용하기도함 보안이강화된 HTTPS(HTTP over TLS/SSL) 의경우 TCP, UDP, SCTP 포트 443 이용 웹브라우저는 http 또는 https 서비스에지정된포트를통해서버와연결시도 다양한웹브라우저존재 웹서버와연결이되면클라이언트의정보요구에대해서버가웹문서회신 사용자요구마다연결설정과해제반복
4 클라이언트 - 서버모델 (1) URL(Uniform Resource Locator) 서버의자원명칭 사용하는프로토콜, 서버의호스트이름, 서버내부의파일경로명으로구성 예 : http://www.korea.co.kr/welcom.html UNIX/Linux 시스템 로그인이름 hong 개인홈디렉토리 /public_html/index.html http://www.korea.co.kr/~hong HTTP (HyperText Transfer Protocol)
5 클라이언트 - 서버모델 (2) 연결설정과해제 1. 사용자가웹브라우저에게웹서버의 URL 주소입력 2. 웹브라우저가 DNS 서버에게웹서버의호스트이름을 IP 주소로변경요청 3. 웹브라우저가 <IP 주소 + 포트 80 번 > 의웹서버와 TCP 접속시도 4. 웹브라우저가웹서버에게최초화면을위한 GET 명령전송 5. 웹서버가웹브라우저에게요청한웹문서를회신 6. 웹브라우저와웹서버사이의연결해제 7. 웹브라우저가사용자화면에웹문서를출력
6 APM (1) APM (Apache, PHP, MySQL) Apache 웹서버프로그램 대응되는프로그램 : Microsoft의 IIS(Internet Information Services) 등 PHP 유닉스 / 리눅스환경에서지원되며, HTML 언어의기능을보강 대응되는언어 : Microsoft의 ASP(Active Server Page), Java 언어기반 JSP(Java Server Pages) 등 MySQL 데이터베이스기능지원 대응되는 DB: Oracle DB, MariaDB
7 APM (2) APM 의동작원리 1. 웹브라우저가 Apache 에웹문서요청 2. PHP 코드처리필요시 PHP 에요청 3. 데이터베이스처리필요시 MySQL 에요청 4. 데이터베이스결과회신 5. PHP 가실행결과인 HTML 코드회신 6. 웹문서를웹브라우저에회신
8 APM (3) PHP 코드의처리 PHP 코드는 HTML 문서에 Embedded 형식으로작성 : <? 와?> 이구분자 PHP 코드가포함된문서의확장자는.php 웹브라우저에회신되는내용 : PHP 코드는서버에서실행되고결과만회신 10
9 13-2 HTML 이번시간의학습목표 HTML의기본태그이해 웹표준이해 HTML5 개요이해
HTML (1) HTML(HyperText Markup Language) 웹브라우저에서데이터를어떻게표시하는지나타냄 HTML로작성한문서는서버에보관 클라이언트는그문서를받아화면에표시 HTML 문서구조 <HTML> 로시작하고, </HTML> 로종료 헤더 : <HEAD> 로시작하고, </HEAD> 로종료 바디 : <BODY> 로시작하고, </BODY> 로종료 10
HTML (2) HTML 문서구조 ( 계속 ) 11
HTML (3) 기본태그 태그이름좌우에 < 와 > 문자를표기 시작위치에는태그이름, 종료위치에는 / 문자와태그이름을함께표시 12
HTML (4) 13
HTML (5) 표태그 14
HTML (6) 프레임태그 한화면을여러프레임 Frame 으로나누는기능 15
웹표준개요 (1) W3C(World Wide Web Consortium) http://www.w3.org Open Standards Principles Design Principles Web for All Web on Everything Vision 웹표준 Web for Rich Interaction Web of Data and Services Web of Trust XHTML(eXtensible HTML) 정보의구조를표현 CSS(Cascading Style Sheet) 디자인을담당 Cross browsing 16
웹표준개요 (2) 웹표준으로자리잡는 HTML5 HTML5 = HTML + CSS + Javascript API 관련사이트 http://www.w3schools.com/default.asp Learn HTML (http://www.w3schools.com/html/default.asp) Learn CSS (http://www.w3schools.com/css/default.asp) 17
시맨틱마크업 시맨틱검색 검색로봇이검색어의미를스스로분석하고추리해사람이원하는정보를정교하게찾아주는검색방법 일반검색방식 사용자가입력한단어위주로찾으면서가장검색빈도수가높은순으로제시 사용자의검색어입력후다시입력하는검색어를기록하여연관검색어를만들어냄 검색로봇이정보를잘추출할수있도록구조적인홈페이지작성이중요 시맨틱마크업과디자인분리 내용의의미표현에집중 HTML 대신 CSS 를사용하여 구조 와 표현 을구분 대표적인혼동 : <font> 18
기본적인 HTML5 마크업사용 (1) 앨리먼트와태그 앨리먼트 (element) HTML 문서의개별적인구성요소 예 : p(paragraph), img(image) 태그 (tag) 부등호 (< >) 로둘러싸인앨리먼트를조합해서부르는이름 예 : <p>, <img> 블록레벨앨리먼트와인라인레벨앨리먼트 블록레벨앨리먼트 항상새로운줄바꿈을하여표시됨 너비값은브라우저화면에 100% 로꽉차게표시됨 예 : <p> 문단 1</p> <p> 문단 2 </p> 인라인레벨앨리먼트 같은줄안에서이어서표시됨 너비값은요소가가지고있는값자체로표시됨 예 : <em> 강조 1 </em><em> 강조 2 </em> 인라인레벨앨리먼트는반드시블록레벨앨리먼트안에있어야함 19
기본적인 HTML5 마크업사용 (2) 시맨틱마크업방법 Heading: <h1>, <h2>, <h6> 가장중요한정보는 <h1> 문서의구조와내용의중요도를표시 ( 폰트가크다는의미가아님 ) <h1> 은가장중요한제목에사용, 페이지안에반드시나타나야함 순서대로사용 중간단계를건너뛰면안됨 건너뛰면로봇은더이상중요한내용이없다고판단 시맨틱마크업은앨리먼트가가지고있는본래목적에맞게사용하는것 http://www.w3schools.com/tags/default.asp 참조 20
기본적인 HTML5 마크업사용 (3) 주요태그사용제안 p, em, strong, address 는각각의목적에맞게의미전달시꼭사용 태그를그룹으로묶을때블록레벨에서는 div, 인라인레벨에서는 span 을사용 그룹핑할때 header, nav, article, footer, section 의엘리먼트를목적에맞게사용 header 문서의머리말지정 nav 메뉴영역지정 article 콘텐츠영역지정 section 문서내용구분 footer 꼬리말영역지정 21
13-3 HTTP 이번시간의학습목표 HTTP 의요청 / 응답메시지의구조와동작원리이해 22
요청과응답 (1) HTTP (HyperText Transfer Protocol) 웹브라우저는 URL 을이용원하는자원표현 HTTP 메소드 (method) 를이용하여데이터를요청 (GET) 하거나, 회신 (POST) 요청과응답 RFC 2616 으로발표된 HTTP 1.1 버전 클라이언트의요청과서버의응답에의해동작하는간단한프로토콜 요청 HTTP 클라이언트가서버에요청을전송 요청메소드, URL, HTTP 버전과기타부가정보포함 응답 HTTP 서버가요청의결과인응답코드가포함된정보를회신 23
요청과응답 (2) 비상태 (stateless) 연결 요청과응답이후, 연결이끊어지므로비상태프로토콜 24
MIME 유사메시지 (1) MIME Multipurpose Internet Message Extensions 기존 ASCII 문자로구성된텍스트만이전송가능했던전자우편을멀티미디어데이터전송도가능하도록확장한것 MIME Header MIME-Version Content-Type Content-Transfer-Encoding Content-Id Content-Description 25
MIME 유사메시지 (2) MIME ( 계속 ) 데이터타입 Type Subtype Description Text Plain Unformatted text Mixed Body contains ordered parts of different data types Multipart Message Image Parallel Digest Alternative RFC822 Partial Ext. Body JPEG GIF Same as above, but no order Similar to mixed, but the default is message/rfc822 Parts are different versions of the same message Body is an encapsulated message Body is a fragment of a bigger message Body is a reference to another message Image is in JPEG Video is in GIF format Video MPEG Video is in MPEG format Audio Basic Single-channel encoding of voice at 8 KHz 26 Application PostScript Octet-Stream Adobe PostScript General binary data (8-bit bytes)
MIME 유사메시지 (3) MIME ( 계속 ) Content-Transfer-Encoding 메시지를 0 과 1 로인코딩하는방법정의 Content-Transfer-encoding : <type> Type Description 7bit ASCⅡ characters and short lines 8bit Non-ASCⅡ characters and short lines Binary Non-ASCⅡ characters with unlimited-length lines Base64 Quotedprintable 6-bit blocks of data are encoded into 8-bit ASCⅡcharacters Non-ASCⅡ characters are encoded as an equal sign followed by an ASCⅡ code 27
MIME 유사메시지 (4) MIME ( 계속 ) Content-Transfer-Encoding ( 계속 ) 차이점 Base64 최상위비트가 0 일필요가없을때 byte data 전송해결책 연속된비트 (bin) 데이터를 24 비트블록으로분할 각블록은네개의단락 ( 각 6 비트 ) 으로분리 각 6 비트단락은하나의문자로해석하여 ASCII 변환 24 비트가네개의문자가되어최종적으로 32 비트가전송 25% 의오버헤드 HTTP 에서사용하는 MIME 유사메시지는 content-length 필드존재 Content-Transfer-Encoding 대신 Content- Encoding, Transfer-Encoding 필드사용 28
요청메시지 (1) 요청메시지 (Request Message) 구성 요청문 (Request Line) 헤더 공백 바디 29
요청메시지 (2) 요청메소드의명령 예 ) GET / HTTP/1.1 요청메서드 : GET URL : / HTTP 버전 : HTTP/1.1 30
응답메시지 (1) 응답메시지구성 요청메시지와유사하나, 요청문대신상태문 (Status line) 사용 31
응답메시지 상태문의구성 HTTP 버전 상태코드 상태이름 주요상태코드와이름 32
HTTP 의동작과정 (1) 요청메시지 요청메서드 : GET URL : /index.php HTTP 버전 : HTTP/1.1 서버주소 : uu.ac.kr 33
HTTP 의동작과정 (2) 응답메시지 34
HTTP 의동작과정 (3) 시뮬레이션 HTTP 서버 : uu.ac.kr HTTP 클라이언트 kihyun.uu.ac.kr telnet 프로그램이대행 1. telnet 명령으로연결을시도 2. 텔넷프로그램의메시지 3줄이출력, 80번포트에서 HTTP 서버와연결 3. 사용자가 GET/index.php, HTTP/1.1, Host: uu.ac.kr 두줄과공백한줄을입력 4. 요청메시지를수신한 HTTP 서버는 HTTP/1.1 200 OK를시작으로, 응답메시 지를회신하고 HTTP 동작을완료 35
HTTP 의동작과정 (4) 36
13-4 CGI 이번시간의학습목표 CGI 의원리이해 FORM 태그로사용자입력을처리하는방식이해 37
CGI 개념 Common Gateway Interface CGI 필요성 HTML 로만웹문서를작성하는경우서버의정보만을일방적으로받아들이는단방향정보흐름 사용자가입력하는정보에따른처리기능제공필요 C, C++ 과같은고급언어로도작성가능하나, 독립된개발과컴파일, 개별프로세스로처리하는부담때문에스크립트 (Script) 언어선호 PHP, Ruby, Java 를이용한웹응용개발도하나의흐름 MVC 개념, Spring 38
FORM 태그 (1) 사용자의입력을서버에전달 39
FORM 태그 (2) FORM 태그사용예 웹브라우저측 JavaScript 이용하여처리 웹서버 CGI 로처리 40