Background - Web(1st stage) : Web의 기본

<웹>

인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스

여기서 정보를 제공하는 주체를 웹 서버(Web Server), 정보를 받는 이용자를 웹 클라이언트(Web Client)라고 함.

 

<웹 서비스, 프론트엔드와 백엔드>

이용자의 요청을 받는 부분 : 프론트엔드(Front-end)

요청을 처리하는 부분 : 백엔드(Back-end)

*프론트엔드는 이용자에게 직접 보여지는 부분으로, 웹 리소스(Web Resource)으로 구성됨. 페이지가 보여주고 있는 정보들은 모두 웹 리소스에 명시되어 있음. 페이지에 담기는 글, 글자들의 색깔과 모양, 배경 색상, 이미지의 크기나 투명도 등이 관련 언어로 적혀있음. 

 

<웹 리소스>

웹에 갖춰진 정보 자산. 웹 브라우저의 주소창에 http://dreamhack.io/index.html 주소를 입력하면 dreamhack.io 에 존재하는 /index.html  경로의 리소스를 가져오라는 의미. 모든 웹 리소스는 고유의 Uniform Resource Identifier (URI)를 가지며, 이를 이용하여 식별됨. 웹의 프론트엔드를 구성하는 대표적인 웹 리소스들은 다음과 같음.

- Hyper Text Markup Language (HTML)

 

웹 문서의 뼈와 살을 담당. 태그와 속성을 통한 구조화된 문서 작성을 지원.

 

- Cascading Style Sheets (CSS)

웹 문서의 생김새를 지정. 웹 리소스들의 시각화 방법을 기재한 스타일 시트. 글자의 색깔이나 모양, 배경 색상, 이미지의 크기나 위치 등을 CSS로 지정. 브라우저는 이를 참고하여 웹 문서를 시각화.

 

- JavaScript (JS)

웹 문서의 동작을 정의. 이용자가 버튼을 클릭했을 때, 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS로 구현할 수 있음. JS는 이용자의 브라우저에서 실행되는데, 클라이언트가 실행하는 코드라고 하여 Client-Side Script라고도 불림.

<웹 클라이언트와 서버의 통신>

웹 서비스의 통신 과정 간략화

#출처 : 드림핵