명품 웹 프로그래밍

강의 목표 웹의 기본 개념과 구조를 이해한다. 웹 서버와 웹 브라우저의 상호 관계를 이해한다. 웹 문서와 기존의 전자 문서와의 차이점을 이해한다. 웹 페이지를 구성하는 HTML, CSS, 자바스크립트의 3 요소를 이해한다. HTML5의 목적과 기능을 안다. HTML5로 웹 페이지를 작성하는 과정을 알고 필요한 도구를 안다.

웹의 기본 목적과 구성 웹의 기본 목적 웹의 구조 웹의 구성 다른 여러 컴퓨터에서 문서를 공유하거나 보는 목적 웹에서 다루는 문서를 웹 문서라고 부름 웹의 구조 인터넷을 활용하여 거미줄처럼 연결된 정보 소통 망, World Wide Web 웹 문서를 인터넷 상의 컴퓨터들끼리 주고 받는 네트워크 시스템 웹의 구성 웹 서버와 웹 클라이언트 컴퓨터들로 구성 웹 서버 웹 사이트를 탑재하는 컴퓨터. 구글(www.google.com), 네이버(www.naver.com) 등 웹 문서, 이미지. 동영상 등의 데이터 저장 관리 웹 클라이언트의 요청을 받아 웹 문서 전송 웹 서버로 작동하도록 하는 소프트웨어 실행 웹 클라이언트 사용자 인터페이스 담당 웹 서버에 웹 문서를 요청하고 받아 사용자에게 출력

웹 서버와 웹 클라이언트로 이루어진 웹 인터넷 아마존 웹 서버 웹 서버 웹 클라이언트 웹 서버 웹 서버 웹 클라이언트 HTML 문서, 이미지, 동영상 HTML 문서, 이미지, 동영상 웹 서버 HTML 문서, 이미지, 동영상 인터넷 웹 서버 HTML 문서, 이미지, 동영상 웹 클라이언트 구글 웹 서버 웹 서버 HTML 문서, 이미지, 동영상 HTML 문서, 이미지, 동영상 웹 클라이언트

웹 서버와 웹 클라이언트의 작동 웹 문서 요청 HTML 문서, 이미지, 동영상 웹 문서 전송 웹 클라이언트 웹 서버

인터넷과 웹은 다르다 인터넷 월드 와이드 웹, 웹(WWW) 인터넷이 고속도로라면 웹은 고속도로 망을 이용한 물류 산업 웹의 개념이 나오기 전부터 만들어진 컴퓨터 연결 네트워크 1969년 미 국방성 고등 연구 계획국(ARPA) 여러 대학들과 계약 업체 사이의 컴퓨터 연결 컴퓨터마다 고유한 주소(IP 주소, 113.198.80.208)를 부여하여 컴퓨터 구분 인터넷을 활용하는 응용 서비스 사례 전자우편(e-mail) 뉴스(news) 파일 전송(ftp) 채팅(Internet Relay Chat) 메신저(Messenger) P2P(Peer to Peer) 스트리밍 서비스(Streaming Service) 인터넷 전화기(Internet Phone) 월드 와이드 웹(World Wide Web) 월드 와이드 웹, 웹(WWW) 인터넷을 활용하는 응용 서비스 중의 하나 웹 서버와 웹 브라우저로 구성되는 정보 전달 및 공유 서비스 인터넷이 고속도로라면 웹은 고속도로 망을 이용한 물류 산업

웹 브라우저의 종류 인터넷 익스플로러 오페라 파이어폭스 크롬

Netscape Communicator 웹 브라우저의 역사 1990 WORLDWIDEWEB Nexus 1993 Mosaic 1994 Netscape Navigator 1995 Internet Explorer 1996 Opera 1998 Netscape Communicator 2002 Mozilla Firefox 2003 Safari 2008 Chrome 2015 Microsoft Edge

최초의 웹 브라우저, WorldWideWeb 웹 개념 창시자, Tim Berners-Lee가 개발 이후 Nexus로 개명 출처) Wikipedia

여러 웹 브라우저의 특징 Netscape Navigator Internet Explorer Opera Safari 일반인도 쉽게 사용하도록 GUI를 갖춘 최초의 브라우저 1993년 Marc Andreesseen 개발. Netscape 사 창업 Internet Explorer 1995년 마이크로소프트에서 개발 윈도우 운영체제에 끼워 배포하여 순식간에 Netscape 잠식 Opera 1994년 오페라 소프트웨어에서 개발. 1996년에 출시 프로그램 크기 작고, 렌더링 속도 빠름. 사용 미미 Safari 2003년 애플에서 개발. Mac OS와 모바일 iOS에서 실행 Mozilla Firefox 2002년 Mozilla 재단에서 개발. W3C의 표준안에 가장 충실 Mozilla 재단은 Netscape 사가 브라우저 소스를 공개하고 만든 재단 Google Chrome 2008년 구글에서 개발. 새로운 강자. 현재 가장 많이 사용되고 있음 Microsoft Edge 2015년 마이크로소프트에서 개발 Internet Explorer 업그레이드 중단

2016년 기준 웹 브라우저의 시장 점유율 비교 데스크톱 브라우저 점유율 비교 (b) 모바일/태블릿 브라우저 점유율 비교

웹 사이트 구축 웹 사이트 구축 웹 서버로 사용할 컴퓨터에 웹 서버 소프트웨어 설치 웹 페이지, 동영상, 이미지 저장, 데이터베이스 설치 웹 서버 응용프로그램 개발 및 설치 웹 서버 소프트웨어(HTTPd) 검색 HTML 문서, 이미지, 동영상 등 DATABASE 회원관리 주문 지도 웹 서버 응용프로그램 웹 브라우저 요청 전송 웹 서버 컴퓨터 웹 클라이언트 로그인 웹 사이트

웹 서버 소프트웨어 웹 서버 소프트웨어 기능 웹 서버 소프트웨어 종류 웹 브라우저로부터 요청(웹 문서 혹은 검색) 해석 필요한 웹 서버 응용프로그램 작동시키기 웹 서버 응용프로그램의 실행 결과를 웹 브라우저로 전송 웹 서버 소프트웨어 종류 Apache 사에서 만든 Apache 마이크로소프트 사에서 만들고 Windows NT에서만 실행되는 IIS NGINX 사에서 만든 nginx 구글에서 만들고 구글 사이트에서 실행되는 GWS(Google Web Server)

웹 서버 응용프로그램 웹 사이트의 목적을 이행하는 서버 측 소프트웨어 웹 서버 응용프로그램 개발 언어 예) 검색 사이트 – 검색 웹 서버 응용프로그램 필요 예) 번역 사이트 – 번역 웹 서버 응용프로그램 필요 예) 회원 관리 사이트 – 회원 관리 웹 서버 응용프로그램 필요 웹 서버 응용프로그램 개발 언어 서버용 자바스크립트 JSP(Java Server Page) – Java의 스크립트 언어 Java – 자바 서블릿 C/C++ PHP, Perl, Python 등

웹 문서와 전자 문서 전자 문서 웹 문서 워드나 한글, 메모장 등으로 작성하고 볼 수 있는 문서 하나의 문서는 보통 하나의 파일로 저장 페이지 별로 파일에 저장하지 않음 텍스트 본문, 이미지, 오디오, 비디오 등을 모두 문서 내에 직접 저장 웹 문서 HTML 언어로 작성/웹 브라우저로 보기 웹 문서는 페이지 단위로 파일에 분할하여 저장 페이지 마다 하나의 파일에 나누어 작성되고 저장 – 웹 페이지 각 페이지는 하이퍼링크로 연결 웹 페이지 텍스트 만 저장 - 이미지, 그래픽, 동영상 등은 별도의 파일로 저장 웹 페이지에 이미지, 그래픽, 동영상 파일의 이름으로 연결 웹 페이지들의 연결 하이퍼링크(hyperlink) – 다른 웹 페이지의 주소를 가진 텍스트 정보 웹 페이지들은 하이퍼링크로 상호 연결됨 웹 문서를 읽는 순서는 사용자가 결정 웹 문서는 사용자가 하이퍼링크를 따라 웹 페이지 선택 – 네비게이션 전자 문서는 문서를 만드는 사람이 결정

한글 파일(전자 문서 사례) 웹 문서

웹 페이지의 주소, URL http://www.oracle.com:80/technetwork/java/index.html 프로토콜 서버주소 TCP/IP 포트번호 경로명 웹페이지 파일이름 프로토콜 : HTTP, https, file, ftp, telnet, mailto, news 등 서버주소 : 웹 페이지를 가진 컴퓨터의 인터넷 주소, IP 주소 TCP/IP 포트 번호 : 서버가 브라우저로부터 접속을 기다리는 TCP/IP 포트 번호. 프로토콜마다 다르며, HTTP의 경우 80, telnet은 23 경로명 : 웹 서버 내 웹 페이지 파일의 폴더 경로 파일이름 : 웹 페이지의 HTML 파일 이름

웹 브라우저와 웹 서버 사이의 통신, HTTP 웹 서버 oracle 웹 서버 1~5 사이의 과정 : HTTP 세션 http://www.oracle.com/index.html HTML 페이지, 이미지, 동영상 웹 서버 3. HTML 페이지(index.html) 요청 4. HTML 페이지 (index.html) 읽기 5. HTML 페이지(index.html) 전송 6. HTML 페이지 해독 및 출력 1. 웹 서버(www.oracle.com) 연결 요청 2. 웹 서버에 연결 수락 oracle 웹 서버 1~5 사이의 과정 : HTTP 세션

웹의 시작 Tim Berners-Lee의 아이디어에서 시작 1989년 웹 개념 제안 1990년 WorldWideWeb 프로젝트 시작 서버-클라이언트로 동작하는 HTTP 모델 창시 HTML 언어 개발, 하이퍼링크 개념 구현 세계 최초의 웹 서버와 웹 브라우저 개발

Tim Berners-Lee가 CERN에서 사용하던 NeXT 컴퓨터 최초의 웹 브라우저 WorldWideWeb를 개발하는데 이용 (참조 : https://en.wikipedia.org/wiki/World_Wide_Web)

웹의 성공 만들기 쉬운 웹 문서 효율적인 HTTP 통신 웹 서버와 웹 브라우저의 작업 분담 사용하기 쉬운 HTML 태그 언어, 단순하고 직관적 HTML 태그의 웹 페이지는 텍스트 문서 아무 텍스트 편집기로 편집 가능 효율적인 HTTP 통신 웹 브라우저가 웹 페이지를 모두 전송 받고 나면 웹 서버와의 접 속을 끊는 방식 웹 서버에 많은 웹 브라우저의 동시 접속에 따른 낮은 부담 웹 서버와 웹 브라우저의 작업 분담 웹 서버는 웹 브라우저로부터 요청 받은 자원 전송 담당 웹 문서를 출력하는 것은 브라우저의 몫 웹 서버의 낮은 부하로 많은 동시 접속자 지원

모든 곳에 웹이 있다. 웹은 오늘날 정보 통신의 기본 플랫폼 다양한 기기에 웹 서버 설치 웹은 장치를 제어하는 쉬운 방법 TV, 셋톱, 로봇, 장난감, 무선 공유기 등 웹은 장치를 제어하는 쉬운 방법 무선 공유기 사례 무선 공유기에는 키보드와 스크린 없음 무선 공유기에 웹 서버 설치 아무 브라우저를 이용하여 무선 공유기의 웹 서버와 접속 브라우저를 이용하여 무선 공유기 내의 설정 관리

웹 페이지 구성 웹 페이지 구성 3 요소 웹 페이지는 3 요소를 분리하여 개발 웹 페이지의 구조와 내용 - HTML 웹 페이지의 모양 - CSS(Cascading Style Sheet) 웹 페이지의 행동 및 응용 프로그램 – Javascript 웹 페이지는 3 요소를 분리하여 개발

HTML, CSS, Javascript로 분리된 웹 페이지 만들기 <!DOCTYPE html> <html> <head> <title>웹 페이지의 구성 요소</title> </head> <body> <h3>Elvis Presley</h3> <hr> He was an American singer and actor. In November 1956, he made his film debut in <span>Love Me Tender</span>. He is often referred to as "<span>the King of Rock and Roll</span>". </body> </html> HTML 태그로 구조와 내용만 있는 웹 페이지

HTML,CSS,Javascript로 분리된 웹 페이지 만들기 <!DOCTYPE html> <html> <head> <title>웹 페이지의 구성 요소</title> <style> body { background-color : linen; color : green; margin-left : 40px; margin-right : 40px;} h3 { text-align : center; color : darkred;} hr { height : 5px; border : solid grey; background-color : grey } span { color: blue; font-size: 20px; } </style> </head> <body> <h3>Elvis Presley</h3> <hr> He was an American singer and actor. In November 1956, he made his film debut in <span>Love Me Tender</span>. He is often referred to as "<span>the King of Rock and Roll</span>". </body> </html> CSS로 문서의 모양(스타일) 코딩

3. Javascript 코드로 사용자 인터페이스 처리 <!DOCTYPE html> <html> <head> <title>웹 페이지의 구성 요소</title> <style> body { background-color : linen; color : green; margin-left : 40px; margin-right : 40px;} h3 { text-align : center; color : darkred;} hr { height : 5px; border : solid grey; background-color : grey } span { color: blue; font-size: 20px; } </style> <script> function show() { // <img>에 이미지 달기 document.getElementById("fig").src = "ElvisPresley.png" } function hide() { // <img>에 이미지 제거 document.getElementById("fig").src= ""; </script> </head> <body> <h3 onmouseover="show()" onmouseout="hide()"> Elvis Presley</h3> <hr> <div><img id="fig" src=""></div> He was an American singer and actor. In November 1956, he made his film debut in <span>Love Me Tender</span>. He is often referred to as "<span>the King of Rock and Roll</span>". </body> </html> 자바스크립크 코드 추가 텍스트에 마우스를 올리면 show() 함수 호출 텍스트에 마우스를 올리면 엘비스 이미지 출력. 내리면 없어짐

HTML5 HTML 언어의 역사 HTML, CSS, Javascript, 웹 브라우저의 타임 라인 1990년 물리학자인 Tim Berners-Lee가 정의 표준화된 태그로 웹 페이지를 작성하는 언어 <img>, <hr>, <table>, <li> 등 HTML, CSS, Javascript, 웹 브라우저의 타임 라인 다음 슬라이드

HTML CSS Javascript Web Browser 1990 HTTP HTML 2.0 1993 1994 Netscape 1995 Internet Explorer 1996 Opera 1998 2002 Mozilla Firefox 2003 Safari 2008 Chrome 2015 Microsoft Edge HTML 3.0 1997 HTML 3.2 HTML 4.0 HTML 5 시작 2007 2014 HTML 5 CSS 1 CSS 2 2012 CSS 3 Javascript 1.0/1.1 Javascript 1.2 Javascript 1.3/1.4 2000 Javascript 1.5 2005 Javascript 1.6 2006 Javascript 1.7 Javascript 1.8 HTML CSS Javascript Web Browser 1991 HTML 1.0

HTML5 출현 배경 1. 비표준 기술의 혼재, 웹 브라우저의 비 호환성 2. 인터넷 기기의 다양화 Active-X나 플러그인, 플래시 등 비표준 기술 난립 브라우저 사이에 HTML 문서와 웹 자원에 대한 심각한 비호환성 2. 인터넷 기기의 다양화 PC, 모바일 단말기 등에서 모두 웹 사용 기존의 웹 페이지가 모바일 기기에서 작동하지 않음 3. 새로운 범용 웹 표준의 필요성 비표준 기술에 의존하는 PC 위주의 기존 웹 방식의 한계 모바일 기기(스마트 폰과 태블릿 장치 등)를 수용할 수 없음 모바일과 PC에서 동시에 사용할 수 있도록 하는 범용 웹 표준 필 요성 대두 새로운 웹 표준 -> HTML5

인터넷 접속 가능한 다양한 기기 모바일 기기 태블릿 PC 스마트 TV, 게임기 등 다양한 기기 Galaxy Bada iPhone Blackberry Window Phone 태블릿 PC 스마트 TV, 게임기 등 다양한 기기 Gear VR Play Station

HTML5 표준과 의의 HTML5 표준 제정 표준에 담긴 내용 W3C와 하이퍼텍스트 워킹 그룹 (WHAT WG, Web Hypertext Application Technology WorkingGroup) 표준에 담긴 내용 웹 페이지의 구조는 HTML5 태그로, 웹 페이지의 모양은 CSS3로, 웹 페이지의 행동은 javascript로 분리 개발 HTML 태그에서 문서의 모양과 관계된 태그나 속성 폐기 웹 페이지의 플랫폼이나 장치 의존성 제거 HTML5로 개발된 웹 페이지나 웹 애플리케이션은 PC/모바일 등의 기기나, 운영체제에 관계없이 동일한 실행 확보 Active-X, 플래시 필요 없음 문서 작성의 개념을 넘어 웹 애플리케이션 작성을 지원하는 자바 스크립트 API 표준화

HTML5 이전의 웹과 HTML5를 도입한 웹의 비교 기존 웹 페이지 웹 브라우저 Active-X/플래시여러 플러그인 게임 애니메이션 동영상 HTML5로 만든 웹 페이지 HTML5를 지원하는 PC 에서만 지원 태블릿/스마튼폰/PC에 관계없이 지원 (a) HTML5 이전의 웹 (b) HTML5를 도입한 웹 필요없음

HTML5의 기능 HTML5 전체 기능 HTML5 기능 요약 웹 문서 작성을 위한 HTML 태그 셋 웹 애플리케이션 작성을 위한 API HTML5 기능 요약 웹 폼(Web Form) 오디오, 비디오 Canvas SVG(Scalable Vector Graphic) 웹 스토리지(Web Storage) 웹 SQL 데이터베이스(Web SQL Database) 인덱스 데이터베이스(Indexed Database API) 파일 입출력(File I/O) 위치 정보 API(Geolocation API) 웹 워커(Web Worker) 웹 소켓(Web Socket) 오프라인 웹 애플리케이션(Offline Web Application)

HTML5 문서 편집 HTML5 문서 편집기 텍스트 편집기 메모장, 한글, 워드 등 아무 텍스트 편집기 가능 .html인 텍스트 파일로 저장 텍스트의 기본 문자셋 – UTF-8 HTML 파일이나 CSS3, 자바스크립트 파일 모두 UTF-8 코드로 저장되어야 함 WYSIWYG(What You See Is What You Get) 편집기 Adobe의 Dreamweaver, CoffeeCup, FCKeditor 등 HTML5 태그 정보 제공 출력되는 모습을 보면서 작성 가능 간단한 오류 체크

HTML5 문서 편집기 사례 : 서브라임 텍스트

HTML5 태그 검사 태그 오류

CSS3 스타일 시트 검사 ‘:’ 위치에 ‘=‘ 를 잘못 사용한 오류

오류 라인은 1 = 에 오류 있음

디버깅을 위한 개발자 도구 열기(크롬 브라우저 사례) 이 메뉴를 클릭하면 개발자 도구를 연다.

‘개발자 도구’에서 ‘Sources’ 메뉴로 소스 보기

라인 18에 중단점(break point)를 설정하여 자바스크립트의 실행을 멈춘 화면 한 라인씩 실행 버튼 마우스로 클릭하면 break point 설정