Download presentation
Presentation is loading. Please wait.
1
CHAPTER 1. 기초 사항
2
인터넷 (QUIZ) 지난 30년 동안 가장 혁신적인 발명품은? 인터넷 PC 휴대전화 리그 오브 레전드 …
3
WWW WWW(World Wide Web): 세계를 뒤덮는 거미줄
초기 인터넷에서는 텔넷, FTP, 전자 메일, 유즈넷 등의 문자 위주 서비스 WWW은 인터넷을 사용하기 쉽도록 하이퍼 텍스트와 그림을 통하여 모든 서비스를 이용할 수 있도록 만든 것
4
WWW의 동작원리
5
클라이언트와 서버 2가지의 기본 프로토콜 특정한 파일을 요청하는 HTTP Request
찾은 파일을 돌려주는 HTTP Response
6
HTML HTML(Hyper Text Markup Language)은 웹 페이지를 기술하기 위한 마크업(markup) 언어
마크업 언어는 텍스트에 태그를 붙여서 텍스트가 문서의 어디에 해당하는지를 기술한 것
7
웹브라우저 HTML 문서를 읽어서 눈에 보이는 웹 페이지를 만든다.
8
HTML의 역사 팀 버너스리(Tim Berners-Lee)에 의하여 개발
1989년 팀 버너스리는 CERN의 연구자들이 문서를 공유할 수 있는 월드 와이드 웹의 하이퍼텍스트 시스템을 고안하여 개발했다. 1990년 최초의 하이퍼텍스트 브라우저와 편집기를 개발 인터넷의 아버지 URL, HTTP, HTML 최초 설계 차세대 웹 기술인 시맨틱 웹 기술의 표준화 작업중
9
W3C W3C란 World Wide Web Consortium의 약자
중립적인 기구로서 참여기관들이 협력하여 웹 표준을 개발하는 국제 컨소시엄 팀 버너스 리를 중심으로 1994년에 설립 웹의 프로토콜과 가이드라인을 개발 홈페이지는
10
HTML 버전 Version Year HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997
1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013
11
HTML5 HTML5는 HTML의 새로운 표준 완전한 CSS3 지원 비디오와 오디오 지원 2D/3D 그래픽 지원
로컬 저장소 지원 로컬 SQL 데이터베이스 지원 웹 애플리케이션 지원
12
HTML5 현황
13
웹 앱과 네이티브 앱 Native App. Web App. 실행속도 빠름 일반적으로 느림 플랫폼 플랫폼마다 제작하여야 함
하나의 버전으로 모든 플랫폼에서 실행 가능 배포 앱 마켓을 통한 배포 배포할 필요가 없음 버전 업데이트 상당한 시간이 걸림 즉시 반영된다. 오프라인시 사용가능 약간의 기능 사용 가능
14
웹 앱과 네이티브 앱
15
HTML5+CSS3+Javascript 웹 페이지의 내용은 HTML5로 작성 웹 페이지의 스타일은 CSS3로 지정
웹 페이지의 상호작용은 자바스크립트로 작성
16
멀티미디어 지원 웹 브라우저에서 비디오나 오디오를 재생 예전 방법: 어도비의 플래시
HTML5: <audio>, <video> 태그를 이용해서 지원 그래픽을 위한 캔버스 요소 지원 벡터 그래픽스를 지원하는 SVG(Scalable Vector Graphics) WebGL 3D를 이용하여 3차원 그래픽 지원
17
HTML5의 신기능 오프라인 웹 애플리케이션 – 네트워크가 연결되지 않은 상태에서도 실행 가능
드래그 앤 드롭(Drag-and-drop) - 요소들을 마우스로 끌어서 넣을 수 있음 웹 스토리지(Web Storage) - 쿠키를 대체할 수 있는 웹 저장소 기능 제공 위치 정보(Geolocation) 제공 - 지도 기능 웹 SQL 데이터베이스(Web SQL Database) 파일 API 지원 – 파일 업로드와 파일 관리 기능 제공 웹소켓(WebSocket) API 제공 – 서버와 브라우저 간의 양방향 통신 기능 제공
18
웹브라우저
19
HTML5 지원 여부
20
HTML 편집기 메모장 VS 2012 express for web
21
메모장을 이용한 HTML 작성 메모장을 실행하여서 다음과 같이 입력한다.
22
메모장을 이용한 HTML 작성 입력된 HTML 코드를 [파일]->[다른 이름으로 저장] 메뉴를 사용하여서 파일에 저장한다.
![메모장을 이용한 HTML 작성 입력된 HTML 코드를 [파일]->[다른 이름으로 저장] 메뉴를 사용하여서 파일에 저장한다.](http://slidesplayer.org/slide/14020904/86/images/22/%EB%A9%94%EB%AA%A8%EC%9E%A5%EC%9D%84+%EC%9D%B4%EC%9A%A9%ED%95%9C+HTML+%EC%9E%91%EC%84%B1+%EC%9E%85%EB%A0%A5%EB%90%9C+HTML+%EC%BD%94%EB%93%9C%EB%A5%BC+%5B%ED%8C%8C%EC%9D%BC%5D-%3E%5B%EB%8B%A4%EB%A5%B8+%EC%9D%B4%EB%A6%84%EC%9C%BC%EB%A1%9C+%EC%A0%80%EC%9E%A5%5D+%EB%A9%94%EB%89%B4%EB%A5%BC+%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC%EC%84%9C+%ED%8C%8C%EC%9D%BC%EC%97%90+%EC%A0%80%EC%9E%A5%ED%95%9C%EB%8B%A4..jpg "메모장을 이용한 HTML 작성 입력된 HTML 코드를 [파일]->[다른 이름으로 저장] 메뉴를 사용하여서 파일에 저장한다.")
23
HTML 파일 실행 저장된 HTML 파일을 더블클릭하여 실행한다.
24
HTML 소스 보기 마우스 오른쪽 버튼을 누르고 [소스보기] 메뉴를 선택하면 현재 페이지의 HTML 소스를 볼 수 있다.
![HTML 소스 보기 마우스 오른쪽 버튼을 누르고 [소스보기] 메뉴를 선택하면 현재 페이지의 HTML 소스를 볼 수 있다.](http://slidesplayer.org/slide/14020904/86/images/24/HTML+%EC%86%8C%EC%8A%A4+%EB%B3%B4%EA%B8%B0+%EB%A7%88%EC%9A%B0%EC%8A%A4+%EC%98%A4%EB%A5%B8%EC%AA%BD+%EB%B2%84%ED%8A%BC%EC%9D%84+%EB%88%84%EB%A5%B4%EA%B3%A0+%5B%EC%86%8C%EC%8A%A4%EB%B3%B4%EA%B8%B0%5D+%EB%A9%94%EB%89%B4%EB%A5%BC+%EC%84%A0%ED%83%9D%ED%95%98%EB%A9%B4+%ED%98%84%EC%9E%AC+%ED%8E%98%EC%9D%B4%EC%A7%80%EC%9D%98+HTML+%EC%86%8C%EC%8A%A4%EB%A5%BC+%EB%B3%BC+%EC%88%98+%EC%9E%88%EB%8B%A4..jpg "HTML 소스 보기 마우스 오른쪽 버튼을 누르고 [소스보기] 메뉴를 선택하면 현재 페이지의 HTML 소스를 볼 수 있다.")
25
VS 2012 for Web 1. [파일]->[새파일]을 선택한다.
![VS 2012 for Web 1. [파일]->[새파일]을 선택한다.](http://slidesplayer.org/slide/14020904/86/images/25/VS+2012+for+Web+1.+%5B%ED%8C%8C%EC%9D%BC%5D-%3E%5B%EC%83%88%ED%8C%8C%EC%9D%BC%5D%EC%9D%84+%EC%84%A0%ED%83%9D%ED%95%9C%EB%8B%A4..jpg "VS 2012 for Web 1. [파일]->[새파일]을 선택한다.")
26
VS 2012 for Web 2. 대화 상자에서 HTML Page를 선택
27
VS 2012 for Web 소스 변경
28
VS 2012 for Web 실행
29
HTML 문서의 기본 구조 <!DOCTYPE html> <html> <head> <title>나의 웹페이지</title> </head> <body> <p>Hello Web Programming World!</p> </body> </html>
30
요소(element) 시작태그와 종료태그로 이루어진 문서의 구성 요소 요소 = (시작 태그 + 콘텐츠 + 종료 태그)
31
속성 속성은 요소에 대한 추가적인 정보를 제공 속성은 항상 시작태그에 이름=“값” 형태로 기술된다.
32
HTML 주석 주석(comment)은 HTML 코드를 설명하는 글 코드를 설명하는 글
<!--여기에 주석을 표시합니다. --> <!DOCTYPE html> <html> ...
33
<!DOCTYPE> 선언 웹페이지에 사용된 HTML의 종류와 버전을 지정
34
HTML 맛보기 <html> <head> <title>Web Programming</title> </head> <body> <h1>Welcome to the Web Programming!</h1> <img src="coffee.gif"> <p> 언제든지 오셔서 질문이 있으시면 올려주세요! <em>여러분을 환영합니다</em>. </p> <h2>내용</h2> HTML5, CSS, Javascript, jQuery, SQL, JSP, ... </body> </html>
35
Q & A
Similar presentations
![임직원 APP 설치 가이드 2013. 8. 경영전략처 정보기획 TF 팀. 임직원 App- 운영체제 구분 안드로이드 갤럭시, 갤럭시노트, 갤럭시 S4 [ 삼성전자 ] 옵티머스 [LG 전자 ] 베가 [ 팬텍 모토로이 [ 모토롤라 ] ios 아이폰 [ 애플.](/40/11046069/big_thumb.jpg "임직원 APP 설치 가이드 2013. 8. 경영전략처 정보기획 TF 팀. 임직원 App- 운영체제 구분 안드로이드 갤럭시, 갤럭시노트, 갤럭시 S4 [ 삼성전자 ] 옵티머스 [LG 전자 ] 베가 [ 팬텍 모토로이 [ 모토롤라 ] ios 아이폰 [ 애플.>")
