웹(Web)과 웹 브라우저(Web Browser)

 

1. 인터넷(Internet)

전 세계의 컴퓨터와 네트워크를 연결하여 이메일, 파일 전송, 온라인 활동 등의 데이터 통신 서비스를 주고받도록 해 주는 컴퓨터 네트워크 시스템이다. 각 장치는 컴퓨터의 주소라고 할 수 있는 고유한 IP 주소를 가지고 있으며 IP 주소를 통해 네트워크 통신을 주고받는다.

 

2. 웹(World Wide Web)

• 월드 와이드 웹(World Wide Web)의 줄임말로 인터넷 상에서 사용자끼리 정보를 공유할 수 있게 해 주는 시스템이다. 여러 웹 사이트와 웹 페이지들이 서로 연결되어 있는 거대한 네트워크이며 주소(URL)를 입력하거나 링크를 클릭하여 인터넷 상의 다양한 정보를 효과적으로 탐색할 수 있다.

 

• HTTP 프로토콜(Protocol)
  • 요청(Request)과 응답(Response)의 형태로 이루어진 웹(Web) 통신 규약
  • 클라이언트와 웹 서버(Client & Web Server)
    
    • 클라이언트(사용자): 웹 브라우저가 웹 페이지를 서버에 요청
    • 웹 서버: 웹 페이지가 저장된 서버이며 브라우저가 요청한 웹 페이지 파일(HTML, CSS 등)을 보내주며 응답

 

3. 웹 브라우저(Web Browser)

• HTML로 작성된 웹 페이지를 해석하여 사용자에게 보여준다.
• Chrome, Internet Explorer, Firefox, Safari 등

 

4. 웹 프로그래밍

웹 페이지를 구축하기 위해 HTML, CSS, JavaScript 세 가지 언어를 사용한다.

• HTML: 마크업 언어로서 Content를 정의하고 표시하는 역할을 한다.
• CSS: 스타일 시트 언어로 디자인을 구성하는 데 주로 사용한다.
• JS: 사용자와의 동적 상호작용을 위한 내용을 구성하는 데 사용한다.

 

5. VS Code 설치하기

웹 프로그래밍 연습 및 구현은 VS Code를 사용해 진행할 것이다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

• 에밋(emmet): HTML, CSS 코드를 효율적이고 빠르게 작성할 수 있도록 도와주는 코드 확장기 즉 코드 자동 완성 기능
  • ! + Tab (or Enter) : html 문서 기본 구조를 생성해줌
  • div>ul>li*n : div, ul, li(n개) 순서대로 자식 태그를 생성해줌
  • div>p + ul : div 자식 태그로 p 와 ul 형제 태그를 생성해줌
  • div#container : id가 container인 div를 생성해줌
  • div.main : class가 main인 div를 생성해줌
  • ul>li*5>{$}: $안에 li의 개수 만큼 숫자를 순서대로 나열(넘버링)하여 내용을 생성해줌
• Extensions: 사람들이 다양한 언어 등의 오픈 소스를 올려 놓은 곳
  • 사용 시 유용한 익스텐션
    • Live Server
    • Auto Rename Tag

 

6. 웹 프로그래밍 하면서 알아두면 좋은 사이트

• https://developer.mozilla.org/
  : 표준화된 html, css, 자바 스크립트에 대한 설명이 잘 정리되어 있는 사이트
• https://developer.mozilla.org/ko/docs/Web/HTML/Element
  : html 태그 참고
• https://www.w3schools.com/
  : 다양한 언어들 정리되어있는 사이트

 

 

- 작성 시 참고한 자료: 웹과 인터넷 개념, HTML 이란?