[HTML & CSS & JavaScript] 웹 개발의 시작 (1주차)

본 포스팅은 학교 수업을 듣고 정리한 내용입니다.

 

웹 개요

웹의 기본 목적과 구성

웹의 기본 목적

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

웹의 구조

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

 

인터넷과 웹은 다르다

인터넷

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

 

최초의 웹 브라우저, WorldWideWeb

• 웹 개념 창시자, Tim Berners-Lee가 개발
• 이후 Nexus로 개명

 

여러 웹 브라우저의 특징

Netscape Navigator

• 일반인도 쉽게 사용하도록 GUI를 갖춘 최초의 브라우저
• 1993년 Marc Andreessen 개발. 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 업그레이드 중단

 

웹 사이트 구축

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

 

웹 서버 소프트웨어

웹 서버 소프트웨어 기능

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

웹 서버 소프트웨어 종류

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

 

웹 서버 응용프로그램

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

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

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

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

 

웹 문서와 전자 문서

전자 문서

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

웹 문서

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

 

웹 페이지의 주소 URL

 

 

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

 

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

 

웹의 시작과 성공

웹의 시작

Tim Berners-Lee의 아이디어에서 시작

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

만들기 쉬운 웹 문서

• 사용하기 쉬운 HTML 태그 언어, 단순하고 직관적
• HTML 태그의 웹 페이지는 텍스트 문서
• 아무 텍스트 편집기로 편집 가능

효율적인 HTTP 통신

• 웹 브라우저가 웹 페이지를 모두 전송 받고 나면 웹 서버와의 접속을 끊는 방식
• 웹 서버에 많은 웹 브라우저의 동시 접속에 따른 낮은 부담

웹서버와 웹 브라우저의 작업 분담

• 웹 서버는 웹 브라우저로부터 요청 받은 자원 전송 담당
• 웹 문서를 출력하는 것은 브라우저의 몫
• 웹 서버의 낮은 부하로 많은 동시 접속자 지원

 

모든 곳에 웹이 있다.

웹은 오늘날 정보 통신의 기본 플랫폼

다양한 기기에 웹 서버 설치

• TV, 셋톱, 로봇, 장난감, 무선 공유기 등

 

웹 페이지의 구성

웹 페이지 구성 3요소

• 웹 페이지의 구조와 내용 - HTML
• 웹 페이지의 모양 - CSS(Cascading Style Sheet)
• 웹 페이지의 행동 및 응용 프로그램 - JavaScirpt

웹페이지는 3요소를 분리하여 개발

 

HTML5

HTML 언어의 역사

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

 

HTML5 출현 배경

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

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

인터넷 기기의 다양화

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

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

• 비표준 기술에 의존하는 PC 위주의 기존 웹 방식의 한계
  • 모바일 기기(스마트 폰과 태블릿 장치 등)를 수용할 수 없음.
• 모바일 PC에서 동시에 사용할 수 있도록 하는 범용 웹 표준 필요성 대두

새로운 웹 표준 -> HTML5

 

HTML5 표준과 의의

HTML5 표준 제정

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

 

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 문서 편집기

텍스트 편집기

• 메모장, 한글, 워드 등 아무 텍스트 편집기 가능
• 좋은 편집기 종류
  • Atom, Eclipse, Sublime Text 등
• html인 텍스트 파일로 저장
• 텍스트의 기본 문자셋 – UTF-8
  • HTML 파일이나 CSS3, 자바스크립트 파일 모두 UTF-8 코드로 저장되어야 함

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

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