웹 프로그래밍과 HTML5의 개요

( 목 차 )

1. 웹의 기본 목적과 구성
2. 웹 브라우저의 종류
3. 웹 페이지의 주소, URL
4. 웹 페이지 구성 3요소(HTML, CSS, JS)
5. 요약

---

1. 웹의 기본 목적과 구성

- 웹의 기본 목적은 한 컴퓨터에서 만든 문서를 다른 컴퓨터에서 쉽게 볼 수 있도록 하는 것이다.

(이러한 문서를 웹 문서라고 부른다.)

 

- 웹은 컴퓨터의 기능을 "서버"와 "클라이언트"로 나누었다.

 

• 웹 서버 : 문서, 이미지, 동영상 등의 데이터를 저장
• 웹 클라이언트 : 웹 서버로부터 데이터를 다운받아서 사용자에게 보여주거나 사용자 데이터를 웹 서버에 업로드하는 사용자 인터페이스의 역할

※  "월드 와이드 웹"이란?

- 월드 와이드 웹이라고 불리는 웹(WWW)은 여러 인터넷 서비스 중 하나로, 문서를 서버 컴퓨터에 올려놓고 인터넷을 통해 클라이언트 컴퓨터에서 읽거나 쉽게 주고받을 수 있도록 만든 서비스이다.

- 쉽게 말해 아래와 같다.

 

• 나라 전역에 펼쳐진 고속도로 = 인터넷
• 고속도로망을 이용한 물류 산업 = 웹

2. 웹 브라우저의 종류

- 웹 브라우저는 웹 서버에 접속해서 웹 페이지, 이미지, 동영상, 음악 등 다양한 데이터를 다운받아 보여주는 소프트웨어

- 웹 브라우저의 종류는 크게 7가지로 나뉜다.

 

◎ 넷스케이프 내비게이터(Netscape Navigator)

- 1993년 마크 앤드리슨은 NCSA(잔미 슈퍼컴퓨터 응용 연구소)에서 일반인도 사용학 쉽도록 GUI 환경을 갖춘 "모자익"이라는 웹 브라우저를 발표했다.

- 이후 "넷스케이이프"사를 창업하고 1994년 "넷스케이프 내비게이터"를 세상에 내놓아 순식간에 세계에서 가장 많이 사용되는 웹 브라우저로 주목받았다.

- 1990년 초기, 대학이나 연구소의 컴푸터 전문가들만 사용하였던 인터넷을 대중에게 보급함으로써 오늘날 인터넷 세상을 여는데 지대한 공헌을 하였다.

 

◎ 인터넷 익스플로러(Internet Explorer)

- 1995년 마이크로소프트가 출시

- 인터넷 익스플로러를 윈도우 운영체제에 끼워 배포하였기 때문에 2000년대 초반까지 세계 시장의 90% 이상을 점유하면서 웹을 지배하였다.

- 현재는 2022년 6월 기준으로 지원이 종료되었다.

 

◎ 오페라(Opera)

- 1994년부터 오페라 소프트웨어사에 의해 개발이 시작되어 1996년에 출시

- 프로그램 크기가 작고 화면 출력 속도가 빠르다고 알려져 있지만, 사용자는 많지 않다. 

 

◎ 사파리(Safari)

- 스티브잡스가 출시한 독자적인 웹 브라우저

- 2003년 7월 Mac OS에서만 실행되며, 2007년 아이폰 출시와 함께 모바일 운영체제인 Ios에도 사파리를 도입하였다.

 

◎ 모질라 파이어폭스(Mozilla Firefox)

- 넷스케이프가 만든 모질라 재단(오픈 소스를 관리)이 2002년에 출시한 제품

- 파이어폭스는 W3C(World Wide Web Consortium)의 표준 권고안을 가장 충실히 따라 만들어진 것으로 알려져 있다.

 

◎ 구글 크롬(Google Chrome)

- 2008년 구글이 출시한 무료 웹 브라우저

- PC, 데스크톱, 모바일 기기 등 세계 시장에서 빠르게 점유율을 높여가고 있다.(현재 가장 많이 사용됨)

 

◎ 마이크로소프트 엣지(Microsoft Edge)

- 2015년 인터넷 익스플로러의 업그레이드를 멈추고, 윈도우 10부터 새로 개발한 웹 브라우저

 

+ https://gs.statcounter.com/os-market-share - 해당 사이트에서 웹 브라우저의 세계 시장 점유율을 확인할 수 있다.

 

 

3. 웹 페이지의 주소, URL

- 웹 브라우저가 웹 사이트에 접속하면 웹 사이트는 대표 웹 페이지를 웹 브라우저에게 보낸다.(이를 디폴트 웹 페이지라고도 부른다.)

- 대표 웹 페이지는 index.html, default.html 등이 주로 사용된다.

- 웹 페이지의 이름이나 주소는 웹 서버의 주소와 웹 페이지의 파일의 경로 명으로 구성되는데 이를 URL로 표현하며 예시로는 아래의 이미지를 들 수 있다.

 

Figma를 활용한 웹 페이지 주소 URL 구성

 

- URL의 각 요소를 간단히 설명하면 다음과 같다.

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

+ 웹 페이지를 액세스 하기 위해서는 보통 http나 https 프로토콜에 80 포트를 사용한다.(디폴트가 80이므로 생략 가능)

 

4. 웹 페이지 구성 3요소(HTML, CSS, JS)

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

- 웹 문서에는 제목, 본문이 있고 본문은 1장, 2장 등으로 구성되며 각 장은 다시 1절, 2절 등으로 구분된다. 본문은 여러 문단으로 나뉘며 문단은 텍스트, 이미지, 표 등을 포함하게 된다. 이러한 것들은 모두 HTML 태그로 작성하게 된다.

 

- 웹 페이지의 제목, 장, 절의 글자 크기와 색, 배경색 등을 지정하고, 중요한 부분에는 밑줄을 치고, 글꼴을 성정하는 등 웹 페이지가 브라우저 창에 출력되는 모양을 표현하는 부분으로 CSS 언어로 작성된다.

 

- 웹 페이지가 출력된 브라우저 화면에 사용자의 마우스 클릭이나 키 입력 등을 처리하는 코드 또는 특정 계산이나 차트, 게임, 지도, 서비스 등의 다양한 종류의 응용 프로그램을 다루게 되고 이러한 것들은 자바스크립트(Javascript) 언어로 작성된다.

 

 

5. 요 약

• 웹(web)은 사전적으로 거미줄이라는 의미를 내포하고 있다. 거미줄처럼 정보를 서로 교환한다는 뜻
• WWW(World Wide Web)은 "세상의 전체 컴퓨터를 연결하는 거미줄"이다.
• "인터넷"은 전 세게의 모든 컴퓨터가 IP주소로 불리는 인터넷 주소를 가지고 상대에게 데이터를 전송할 수 있도록 만든 기본 통신망
• "웹"은 인터넷의 통신망 위에서 웹 서버에  다수의 클라이언트 컴퓨터가 연결하여 상호 정보를 교류하는 시스템
• 웹 페이지를 만드는 방법은 아래와 같다.
  1. 웹 페이지의 구조와 내용은 HTML5 태그를 사용
  2. 출력되는 모양은 CSS3 스타일 시트로 작성
  3. 사용자 입력을 처리하거나 웹 애플리케이션을 작성하는 것은 자바스크립트(JS)로 제작

 

 

★ 해당 게시글은 "HTML5+CSS3+Javascript 웹 프로그래밍"을 참고하여 작성하였습니다! ★