웹 프로그래밍과 HTML5개요

웹의 기본 목적과 구성

웹의 기본 목적

• 다른 여러 컴퓨터에서 문서를 공유하거나 보는 목적
• 웹에서 다루는 문서를 웹 문서라고 부름

웹의 구조

• 인터넷을 활용하여 거미줄처럼 연결된 정보 소통망, World Wide Web

웹의 구성

웹 서버와 웹 클라이언트 컴퓨터들로 구성

웹서버

• 웹 사이트를 탑재하는 컴퓨터. 구글,네이버 등
• 웹 문서, 이미지, 동영상 등의 데이터 저장 관리
• 웹 클라이언트의 요청을 받아 웹 문서 전송
• 웹 서버로 작동하도록 하는 소프트웨어 실행

웹 클라이언트

• 사용자 인터페이스 담당
• 웹 서버에 웹 문서를 요청하고 받아 사용자에게 출력
  
  

인터넷과 웹은 다르다

인터넷

웹의 개념이 나오기 전부터 만들어진 컴퓨터 연결 네트워크

컴퓨터마다 고유한 주소(ip)를 부여하여 컴퓨터 구분

인터넷을 활용한 응용 서비스 사례

• 전자우편(e-mail)
• 뉴스(news)
• 메신저(Messenger)
  등등

월드 와이드 웹, 웹(WWW)

인터넷을 활용하는 응용 서비스 중의 하나

웹 서버와 웹 브라우저로 구성되는 정보 전달 및 공유 서비스

인터넷이 고속도로라면 웹은 고속도로 망을 이용한 물류산업

웹 사이트 구축

웹 사이트 구축

• 웹 서버로 사용할 컴퓨터에 웹 서버 소프트웨어 설치
• 웹 페이지, 동영상, 이미지 저장, 데이터베이스 설치
• 웹 서버 응용프로그램 개발 및 설치

웹 서버 소프트웨어

웹 서버 소프트웨어 기능

• 웹 브라우저로부터 요청(웹 문서 혹은 검색) 해석
• 필요한 웹 서버 응용프로그램 작동시키기
• 웹 서버 응용프로그램의 실행 결과를 웹 브라우저로 전송
  

웹 서버 소프트웨어 종류

• Apache 사에서 만든 Apache
• 마이크로소프트 사에서 만들고 Windows NT에서만 실행되는 IIS
• NGINX 사에서 만든 nginx
• 구글에서 만들고 구글 사이트에서 실행되는 GWS(Google Web Server)

웹 서버 응용프로그램

웹 사이트의 목적을 이행하는 서버 측 소프트웨어

• 예) 검색사이트 - 검색 웹 서버 응용프로그램 필요
• 예) 번역사이트 - 번역 웹 서버 응용프로그램 필요
• 예) 회원 관리 사이트 - 회원 관리 웹 서버 응용프로그램 필요

웹 서버 응용프로그램 개발 언어

• 서버용 자바스크립트
• JSP(Java Server Pge) - Java의 스크립트 언어
• Java - 자바 서블릿
• C/C++
• PHP,Perl,Python 등

웹 문서와 전자 문서

전자문서

• 워드나 한글 메모장 등으로 작성하고 볼 수 있는 문서
• 하나의 문서는 보통 하나의 파일로 저장
  1) 페이지 별로 파일에 저장하지 않음
  2) 텍스트 본문, 이미지, 오디오, 비디오 등을 모두 문서 내에 직접 저장

웹문서

• HTML 언어로 작성/웹 브라우저로 보기
• 웹 문서는 페이지 단위로 파일에 분할하여 저장
  1) 페이지 마다 하나의 파일에 나누어 작성되고 저장- 웹 페이지
  2) 각 페이지는 하이퍼링크로 연결
• 웹 페이지
  1) 텍스트 만 저장 - 이미지,그래픽,동영상 등은 별도의 파일로 저장
  2) 웹 페이지에 이미지,그래픽,동영상 파일의 이름으로 연결
• 웹 페이지들의 연결
  1) 하이퍼링크(HYPERLINK)-다른 웹 페이지의 주소를 가진 텍스트 정보
  2) 웹 페이지들은 하이퍼링크로 상호 연결됨
• 웹 문서를 읽는 순서는 사용자가 결정
  

웹 페이지의 주소, URL

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

웹 브라우저와 웹 서버 사이의 통신,HTTP

HTML5

HTML 언어의 역사

• 1990년 물리학자인 Tim Berners-Lee가 정의
• 표준화된 태그로 웹 페이지를 작성하는 언어

HTML5 출현 배경

비표준 기술의 혼재, 웹 브라우저의 비 호환성

• Active-X나 플러그인, 플래시 등 비표준 기술 난립
• 브라우저 사이에 HTML문서와 웹 자원에 대한 심각한 비호환성

인터넷 기기의 다양화

• PC,모바일 단말기 등에서 모두 웹 사용
• 기존의 웹 페이지가 모바일 기기에서 작동하지 않음

새로운 범용 웹 표준의 필요성

• 비표준 기술에 의존하는 PC위주의 기존 웹 방식의 한계
• 모바일과 PC에서 동시에 사용할 수 있도록 범용 웹 표준 필요성 대두

새로운 웹 표준 -> HTML5

HTML5 표준과 의의

HTML5 표준 제정

• W3C와 하이퍼 텍스트 워킹 그룹(WHAT WG, WEB Hypertext Application Technology WorkingGroup)

표준에 담긴 내용

• 웹 페이지의 구조는 HTML5태그로, 웹 페이지 모양은 CSS3로, 웹 페이지의 행동은 javascript로 분리 개발
• HTML 태그에서 문서의 모양과 관계된 태그나 속성 폐기
• 웹 피이지의 플랫폼이나 장치 의존성 제거
• 문서 작성의 개념을 넘어 웹 애플리케이션 작성을 지원하는 자바스크립트 API표준화

HTML5의 기능

HTML5 전체 기능

• 웹 문서 작성을 위한 HTML 태그 셋
  1) HTML5는 이전 HTML 태그를 계승하였지만, 문서의 모양을 표현하는 HTML태그와 속성들은 과감히 청산함.
  2) 문서의 구조를 명확히 표현하는 시맨틱 태그를 추가함

웹 애플리케이션 작성을 위한 API

• 웹 문서 시대에서 웹 애플리케이션의 시대로의 변화
• HTML5 웹 브라우저는 웹 애플리캐이션을 개발할 수 있는 자바스크립트 API를 표준화함

HTML5 세부 기능

• 웹폼, 오디오,비디오, 캔버스, SVG, 웹 스토리지, 웹 SQL 데이터베이스, 인덱스 데이터베이스, 파일입출력, 위치 정보API, 웹 워커, 웹 소켓, 오프라인 웹 애플리케이션

HTML5 문서 편집

텍스트 편집기

• 메모장,한글,워드 등 아무 텍스트 편집기 가능
• .html인 텍스트 파일로 저장
• 텍스트의 기본 문자셋 - UTF-8(유니코드) (HTML 파일이나 CSS3, 자바스크립트 파일 모두 UTF-8코드로 저장되어야 함)

WYSIWYG(What You See ls What You Get) 편집기

• Adboe의 Dreamweaver, CoffeeCup, FEKeditor 등
• HTML5 태그 정보 제공
• 출력되는 모습을 보면서 작성 가능
• 간단한 오류 체크