1장 WEB 프로그래밍 기초 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다.

Presentation on theme: "1장 WEB 프로그래밍 기초 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다."— Presentation transcript:

1 1장 WEB 프로그래밍 기초 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다.
구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다.

2 인터넷 지난 30년동안 가장 혁신적인 발명품은? (2009년 미국 경제 전문지 포브스)
Internet, broadband, WWW (browser and html) PC/laptop computers Mobile phones DNA testing and sequencing/Human genome mapping Magnetic Resonance Imaging (MRI) Microprocessors Fiber optics Office software (spreadsheets, word processors) Non-invasive laser/robotic surgery (laparoscopy) Open source software and services (e.g., Linux, Wikipedia)

3 WWW란? World Wide Web: web은 거미줄
초기: 텔넷(telnet), , usenet 등을 이용하여 주로 텍스트 위주의 파일전송, 전자우편 서비스 www는 하이퍼텍스트, 이미지 등의 전송이 가능한 서비스

4 WWW의 동작 원리 웹서버에 저장되어 있는 HTML 문서를 클라이언트 컴퓨터에 전송

5 웹서버가 하는 일

6 HTML이란? Hyper Text Markup Language는 웹 페이지를 기술하기 위한 markup 언어

7 웹브라우저 웹브라우저는 HTML 문서를 읽어서 눈에 보이는 페이지를 만든다.

8 HTML의 개발자 1980년 물리학자 팀 버너스리(Tim Berners-Lee: 1955~)가 HTML의 원형인 ENQUIRE 개발 1990년 HTML과 브라우저, 서버 소프트웨어 작성

9 W3C? World Wide Web Consortium
중립적인 기구로서 참여기관들이 협력하여 웹 표준을 개발하는 국제 컨소시엄 팀 버너스 리를 중심으로 1994년에 설립 웹의 프로토콜과 가이드라인을 개발 홈페이지는

10 HTML의 역사-위키에서 확인 1989년~1995년 시기에는 버전 번호 없었음 1995년 HTML 2.0
2014년 10월 HTML5 was published as a W3C Recommendation 2016년 11월 HTML 5.1 was published as a W3C Recommendation

11 HTML4와의 차이점 요소 추가 구조적인 요소 - 구역을 나누는 블록 요소인 div 요소를 대신한다.
header nav article section aside footer 멀티미디어 요소 - 플러그인 없이 멀티미디어를 재생할 수 있게 한다. audio - 오디오를 재생한다. video - 비디오를 재생한다. canvas-그래픽으로 그림 그리기 가능

12 HTML5 HTML5는 HTML의 새로운 표준 완전한 CSS3 지원 비디오와 오디오 지원 2D/3D 그래픽 지원
로컬 저장소 지원 로컬 SQL 데이터베이스 지원 웹 애플리케이션 지원

13 HTML5의 신기능 오프라인 웹 애플리케이션 – 네트워크가 연결되지 않은 상태에서도 실행 가능
드래그 앤 드롭(Drag-and-drop) - 요소들을 마우스로 끌어서 넣을 수 있음 웹 스토리지(Web Storage) - 쿠키를 대체할 수 있는 웹 저장소 기능 제공 위치 정보(Geolocation) 제공 - 지도 기능 웹 SQL 데이터베이스(Web SQL Database) 파일 API 지원 – 파일 업로드와 파일 관리 기능 제공 웹소켓(WebSocket) API 제공 – 서버와 브라우저 간의 양방향 통신 기능 제공

14 웹브라우저 인터넷 익스플로러: 마이크로소프트 크롬: 구글 파이어폭스: 모질라(Mozilla) 재단이 관장하는 오픈소스
2008년 발표된 후 급성장 파이어폭스: 모질라(Mozilla) 재단이 관장하는 오픈소스 오페라: 오페라 소프트웨어서 개발

15 웹브라우저 전쟁

16 모자이크 미국 일리노이 공과 대학교의 연구 기관 NCSA 가 1993년에 발표 최초의 그래픽 유저 인터페이스 웹 브라우저

17 보조 웹 표준 기술

18 웹프로그래밍의 첫걸음-소스코드 입력 메모장을 실행하여 다음과 같이 입력한다.

19 웹프로그래밍의 첫걸음-소스코드 저장 파일형식은 “모든파일(*.*)”로 인코딩은 UTF-8로 지정

20 웹프로그래밍의 첫걸음-실행 탐색기에서 더블클릭 또는 웹브라우저로 drag-and-drop

21 Q&A Have a nice day!!!