TIL 6일차 - 웹의 이해, HTML/CSS/Javascript 간단 소개

1. 웹의 이해

인터넷(International Network)이란?

전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미

 

웹이란?

인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간이다.

www(World Wide Web) = w3 = 웹이라 줄여서 말하고있음

전자메일 과 같이인터넷 상에서 동작하는 하나의 서비스일 뿐이다.

 

인터넷 !== 웹 

 

웹이 가장 처음 만들어졌을 때의 사이트는 그림도 없고 글자밖에 없었다. 

웹의 특징:정보를 하이퍼텍스트 형식으로 표현하여, 하이퍼텍스트(링크)를 따라 이동하며 다양한 정보/문서들을 연결,제공합니다.

(*하이퍼텍스트hypertext: 단순히 글자가 아닌 그 이상의 기능을 가지 텍스트/ 주로 링크,참조의 역할을 하는 기술)

 

웹 페이지 vs 웹 사이트

웹 페이지 - 페이지 하나하나

웹 사이트 - 웹 페이지들의 모음

 

웹 페이지 링크를 타고 다른 웹 페이지로 이동하는 것 = 웹 서핑을 한다 = 웹 브라우징을 한다

 

웹 브라우저(Web browser)란?

어떤 것(=웹 페이지 또는 웹 상의 데이터)을 찾거나 읽을 때 사용하는 것을 웹 브라우저라고 부른다.

ex) Safari, Chrome, FireFox 등

 

---

2. 웹의 구조

클라이언트와 서버

• 클라이언트(Client): 서비스를 이용하는 (요청하는) 컴퓨터
• 서버(Server): 서비스를 제공하는 컴퓨터

(*현실 세계의 클라이언트와 서버 의미와 동일하다)

 

클라이언트와 서버가 서로 어떻게 통신하나?

프로토콜?

서로 데이터를 주고 받을 때에 지켜야하는 약속(틀,규칙)이 존재하고 이 약속을 지켜서 통신해야한다. 이 약속을 프로토콜이라 한다.

 

인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP(HyperText Transfer Protocol)를 사용하여 데이터를 주고 받는다.

 

---

웹 개발 직무

프론트엔드

- 웹 서비스(웹 사이트)에서 사용자의 측면(Client-side)의 그래픽 사용자 인터페이스(GUI, 화면)로, 사용자와 상호작용(글자 입력, 버튼 클릭, 화면 출력 등)을 담당한다

 

 

백엔드 

- 웹 서비스(웹 사이트)에서 사용자의 눈에 보이지 않는 서버 측(Server-side)에서 프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과를 전달한다.

- 인터넷이 전해준 요청을 처리하고 그에 맞는 반응/대응을 한다.

---

 

HTML, CSS, Javascript 

IDE(Integrated Development Environment, 통합 개발 환경) - 웹 개발을 할 수 있는 툴

ex)visual studio code, Eclipse, IntelliJ IDEA

 

HTML - 웹 구성

HyperText Markup Language

하이퍼텍스트 즉, 웹 페이지를 연결하는 기능을 가진 텍스트이자 웹 페이지의 구조를 명시하는 언어이다.

프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 한다.

 

https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML

HTML 소개 - Web 개발 학습하기 | MDN

 

CSS - 웹 꾸미기

Cascading Stylesheets

 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나 여러 열로 분할하거나 애니메이션 및 기타 장식 기능을 추가하는 등의 웹 페이지 스타일 및 레이아웃에 사용된다.

https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/What_is_CSS

CSS 란 무엇인가? - Web 개발 학습하기 | MDN

 

Javascript - 동적인 클라이언트 사이드 스크립트 언어

동적으로 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고, 이미지에 애니메이션을 적용하는 등 거의 모든 작업을 수행할 수 있는 스크립팅 언어이다.

https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript

JavaScript가 뭔가요? - Web 개발 학습하기 | MDN