Lecture 01: 웹프로그램과 HTML5 Kwang-Man Ko kkmam@sangji.ac.kr, compiler.sangji.ac.kr Department of Computer Engineering Sang Ji University 2019 1
2 강의목표 1. 웹의기본개념과구조를이해한다. 2. 웹서버와웹브라우저의상호관계를이해한다. 3. 웹문서와기존의전자문서와의차이점을이해한다. 4. 웹페이지를구성하는 HTML, CSS, 자바스크립트의 3 요소를이해한다. 5. HTML5의목적과기능을안다. 6. HTML5로웹페이지를작성하는과정을알고필요한도구를안다.
웹의기본목적과구성 3 웹의기본목적 다른여러컴퓨터에서문서를공유하거나보는목적 웹에서다루는문서를웹문서라고부름 웹의구조 인터넷을활용하여거미줄처럼연결된정보소통망, World Wide Web 웹문서를인터넷상의컴퓨터들끼리주고받는네트워크시스템
4 웹의구성 웹서버 웹사이트를탑재하는컴퓨터. 구글 (www.google.com), 네이버 (www.naver.com) 등 웹문서, 이미지. 동영상등의데이터저장관리 웹클라이언트의요청을받아웹문서전송 웹서버로작동하도록하는소프트웨어실행 웹클라이언트 사용자인터페이스담당 웹서버에웹문서를요청하고받아사용자에게출력
웹서버와웹클라이언트로이루어진웹 5 아마존웹서버 웹서버 웹클라이언트 HTML 문서, 이미지, 동영상 HTML 문서, 이미지, 동영상 웹서버 HTML 문서, 이미지, 동영상 웹서버 인터넷 HTML 문서, 이미지, 동영상 구글웹서버 웹서버 웹클라이언트 웹클라이언트 HTML 문서, 이미지, 동영상 HTML 문서, 이미지, 동영상
웹서버와웹클라이언트의작동 6 웹문서요청 웹문서전송 HTML 문서, 이미지, 동영상 웹클라이언트 웹서버
인터넷과웹은다르다! 7 인터넷 웹의개념이나오기전부터만들어진컴퓨터연결네트워크 1969 년미국방성고등연구계획국 (ARPA) 여러대학들과계약업체사이의컴퓨터연결 컴퓨터마다고유한주소 (IP 주소, 113.198.80.208) 를부여하여컴퓨터구분 인터넷을활용하는응용서비스사례 전자우편 (e-mail) 파일전송 (ftp) 채팅 (Internet Relay Chat) 메신저 (Messenger) P2P(Peer to Peer) 스트리밍서비스 (Streaming Service) 인터넷전화기 (Internet Phone) 월드와이드웹 (World Wide Web)
8 월드와이드웹, 웹 (WWW) 인터넷을활용하는응용서비스중의하나 웹서버와웹브라우저로구성되는정보전달및공유서비스 인터넷이고속도로라면웹은고속도로망을이용한물류산업
웹브라우저의종류 9 인터넷익스플로러 오페라 파이어폭스 크롬
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 10 2018
여러웹브라우저의특징 11 Netscape Navigator 일반인도쉽게사용하도록 GUI를갖춘최초의브라우저 1993년 Marc Andreessen 개발, Netscape사창업 Internet Explorer 1995 년마이크로소프트에서개발 윈도우운영체제에끼워배포하여순식간에 Netscape 잠식 Opera 1994 년오페라소프트웨어에서개발, 1996 년에출시 프로그램크기작고, 렌더링속도빠름, 사용미미
12 Safari 2003 년애플에서개발, Mac OS 와모바일 ios 에서실행 Mozilla Firefox 2002 년 Mozilla 재단에서개발 W3C 의표준안에가장충실 Mozilla 재단은 Netscape 사가브라우저소스를공개하고만든재단
13 Google Chrome 2008년구글에서개발 새로운강자 현재가장많이사용되고있음 Microsoft Edge 2015 년마이크로소프트에서개발 Internet Explorer 업그레이드중단
웹브라우저의시장점유율 14 (a) 데스크톱브라우저점유율비교
15 (b) 모바일 / 태블릿브라우저점유율비교
웹사이트구축 16 웹사이트구축 웹서버로사용할컴퓨터에웹서버소프트웨어설치 웹페이지, 동영상, 이미지저장, 데이터베이스설치 웹서버응용프로그램개발및설치 웹서버응용프로그램 로그인 검색 웹브라우저 요청 전송 웹서버소프트웨어 (HTTPd) 회원관리 DATABASE 웹클라이언트 주문 지도 HTML 문서, 이미지, 동영상등 웹서버컴퓨터 웹사이트
웹서버소프트웨어 17 웹서버소프트웨어기능 웹브라우저로부터요청 ( 웹문서혹은검색 ) 해석 필요한웹서버응용프로그램작동 웹서버응용프로그램의실행결과를클라이언트브라우저로전송 웹서버소프트웨어종류 Apache 사에서만든 Apache 마이크로소프트사에서만들고 Windows NT 에서만실행되는 IIS NGINX 사에서만든 nginx 구글에서만들고구글사이트에서실행되는 GWS(Google Web Server)
웹서버응용프로그램 18 웹사이트의목적을실행하는서버측소프트웨어 검색사이트 검색웹서버응용프로그램필요 번역사이트 번역웹서버응용프로그램필요 회원관리사이트 회원관리웹서버응용프로그램필요 웹서버응용프로그램개발언어 서버용자바스크립트 JSP(Java Server Page) Java의스크립트언어 Java 자바서블릿 C/C++ PHP, Perl, Python 등
웹문서와전자문서 19 전자문서 워드나한글, 메모장등으로작성하고볼수있는문서 하나의문서는보통하나의파일로저장 페이지별로파일에저장하지않음 텍스트본문, 이미지, 오디오, 비디오등을모두문서내에직접저장
20 웹문서 HTML 언어로작성 / 웹브라우저로보기 페이지단위로파일에분할하여저장 페이지마다하나의파일에나누어작성되고저장 웹페이지 각페이지는하이퍼링크로연결 웹페이지 텍스트만저장 - 이미지, 그래픽, 동영상등은별도의파일로저장 웹페이지에이미지, 그래픽, 동영상파일의이름으로연결 웹페이지들의연결 hyperlink 다른웹페이지의주소를가진텍스트정보 웹페이지들은하이퍼링크로상호연결됨 웹문서를읽는순서는사용자가결정 웹문서는사용자가하이퍼링크를따라웹페이지선택 내비게이션 전자문서는문서를만드는사람이결정
21
웹페이지의주소, URL 22 프로토콜 서버주소 TCP/IP 포트번호 경로명 웹페이지파일이름 http://www.oracle.com:80/technetwork/java/index.html 프로토콜 : HTTP, https, file, ftp, telnet, mailto, news 등 서버주소 : 웹페이지를가진컴퓨터의인터넷주소, IP 주소 TCP/IP 포트번호 : 서버가브라우저로부터접속을기다리는 TCP/IP 포트번호. 프로토콜마다다르며, HTTP의경우 80, telnet은 23 경로명 : 웹서버내웹페이지파일의폴더경로 파일이름 : 웹페이지의 HTML 파일이름
웹브라우저와웹서버사이의통신, HTTP 23 HTML 페이지, 이미지, 동영상 http://www.oracle.com/index.html 1. 웹서버 (www.oracle.com) 연결요청 2. 웹서버에연결수락 4. HTML 페이지 (index.html) 읽기 3. HTML 페이지 (index.html) 요청 5. HTML 페이지 (index.html) 전송 웹서버 6. HTML 페이지해독및출력 oracle 웹서버
웹의시작 24 Tim Berners-Lee의아이디어에서시작 1989년웹개념제안 1990년 WorldWideWeb 프로젝트시작 서버-클라이언트로동작하는 HTTP 모델창시 HTML 언어개발, 하이퍼링크개념구현 세계최초의웹서버와웹브라우저개발
25 Tim Berners-Lee 가 CERN 에서사용하던 NeXT 컴퓨터 Tim Berners-Lee 가 CERN 에서최초로개발한웹서버소프트웨어를설치하고운용한 NeXT 컴퓨터최초의웹브라우저 WorldWideWeb 를개발하는데이용 ( 참조 : https://en.wikipedia.org/wiki/world_wide_web)
웹의성공 26 만들기쉬운웹문서 사용하기쉬운 HTML 태그언어, 단순하고직관적 HTML 태그의웹페이지는텍스트문서 텍스트편집기로편집가능효율적인 HTTP 통신 웹브라우저가웹페이지를모두전송받고나면웹서버와의접속을끊는방식 웹서버에많은웹브라우저의동시접속에따른낮은부담
27 웹서버와웹브라우저의작업분담 웹서버는웹브라우저로부터요청받은자원전송담당 웹문서를출력하는것은브라우저의몫 웹서버의낮은부하로많은동시접속자지원
모든곳에웹이있다. 28 웹은오늘날정보통신의기본플랫폼 다양한기기에웹서버설치 TV, 셋톱, 로봇, 장난감, 무선공유기등 웹은장치를제어하는쉬운방법 무선공유기사례 무선공유기에는키보드와스크린없음 무선공유기에웹서버설치 아무브라우저를이용하여무선공유기의웹서버와접속 브라우저를이용하여무선공유기내의설정관리
웹페이지구성 29 웹페이지구성 3 요소 웹페이지의구조와내용 - HTML 웹페이지의모양 - CSS(Cascading Style Sheet) 웹페이지의행동및응용프로그램 Javascript 웹페이지는 3 요소를분리하여개발
HTML, CSS, Javascript 로분리된웹페이지 30 1. HTML 태그로문서의구조와내용만들기 <!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 태그로구조와내용만있는웹페이지
31 2. CSS 코드로문서모양만들기 <!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> CSS 로문서의모양 ( 스타일 ) 코딩 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>
32 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> 자바스크립크코드추가 텍스트에마우스를올리면 show() 함수호출 <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> 텍스트에마우스를올리면엘비스이미지출력. 내리면없어짐
HTML5 33 HTML 언어의역사 1990년물리학자인 Tim Berners-Lee가정의 표준화된태그로웹페이지를작성하는언어 <img>, <hr>, <table>, <li> 등 HTML, CSS, Javascript, 웹브라우저의타임라인 다음슬라이드
1990 HTTP 1991 HTML 1.0 HTML CSS Javascript Web Browser 1993 1994 HTML 2.0 Netscape 1995 HTML 3.0 Internet Explorer 1996 CSS 1 Javascript 1.0/1.1 Opera 1997 HTML 3.2 Javascript 1.2 1998 HTML 4.0 CSS 2 Javascript 1.3/1.4 2000 Javascript 1.5 2002 Mozilla Firefox 2003 Safari 2005 Javascript 1.6 2006 Javascript 1.7 2007 HTML 5 시작 Javascript 1.8 2008 Chrome 2012 CSS 3 2014 HTML 5 34 2015 Microsoft Edge 2018
HTML5 출현배경 35 1. 비표준기술의혼재, 웹브라우저의비호환성 Active-X나플러그인, 플래시등비표준기술난립 브라우저사이에 HTML 문서와웹자원에대한심각한비호환성 2. 인터넷기기의다양화 PC, 모바일단말기등에서모두웹사용 기존의웹페이지가모바일기기에서작동하지않음 3. 새로운범용웹표준의필요성 비표준기술에의존하는 PC 위주의기존웹방식의한계 모바일기기 ( 스마트폰과태블릿장치등 ) 를수용할수없음 모바일과 PC 에서동시에사용할수있도록하는범용웹표준필요성대두
인터넷접속가능한다양한기기 36 모바일기기 Galaxy Bada iphone Blackberry Window Phone 태블릿 PC 스마트 TV, 게임기등다양한기기 Gear VR Play Station
HTML5 표준과의의 37 HTML5 표준제정 W3C 와하이퍼텍스트워킹그룹 표준에담긴내용 웹페이지구조 : HTML5 태그 웹페이지모양 : CSS3 웹페이지행동 : javascript로분리개발
38 표준의효과 HTML 태그에서문서의모양과관계된태그. 속성폐기 웹페이지의플랫폼이나장치의존성제거 HTML5 로개발된웹페이지나웹애플리케이션은 PC/ 모바일등의기기나, 운영체제에관계없이동일한실행확보 Active-X, 플래시필요없음 문서작성의개념을넘어웹애플리케이션작성을지원하는자바스크립트 API 표준화
HTML5 이전웹과 HTML5 를도입웹의비교 기존웹페이지 HTML5 로만든웹페이지 웹브라우저 HTML5 를지원하는웹브라우저 Active-X/ 플래시여러플러그인 필요없음 동영상 게임 애니메이션 동영상 게임 애니메이션 39 PC 에서만지원 (a) HTML5 이전의웹 태블릿 / 스마튼폰 /PC 에관계없이지원 (b) HTML5 를도입한웹
HTML5 의기능 40 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 문서편집 41 HTML5 문서편집기 텍스트편집기 메모장, 한글, 워드등아무텍스트편집기가능 Atom, Eclipse, Sublime Text 등.html인텍스트파일로저장 텍스트의기본문자셋 UTF-8 HTML 파일이나 CSS3, 자바스크립트파일모두 UTF-8 코드로저장되어야함 WYSIWYG(What You See Is What You Get) 편집기 Adobe의 Dreamweaver, CoffeeCup, FCKeditor 등 HTML5 태그정보제공 출력되는모습을보면서작성가능 간단한오류체크
HTML5 문서편집기사례 : 서브라임텍스트 42
서브라임텍스트로 HTML 문서작성 (1) 43 서브라임텍스트설치 https://www.sublimetext.com 서브라임텍스트실행및문서작성
서브라임텍스트로 HTML 문서작성 (2) 44 문서저장
서브라임텍스트로 HTML 문서작성 (3) 45 브라우저에서 HTML 문서출력 더블클릭
HTML5 태그검사 태그오류 46
CSS3 스타일시트검사 : 위치에 = 를잘못사용한오류 47
오류라인은 1 = 에오류있음 48
디버깅을위한개발자도구열기 ( 크롬브라우저사례 ) 이메뉴를클릭하면개발자도구를연다. 49
50 개발자도구 에서 Sources 메뉴로소스보기
라인 18 에중단점 (break point) 를설정하여자바스크립트의실행을멈춘화면 한라인씩실행버튼 마우스로클릭하면 break point 설정 51