EtoC

HTML과 HTTP 본문

FrontEnd/HTML5

HTML과 HTTP

게리드 2023. 7. 31. 08:13

1. HTML(HyperText Markup Language)란?

HTML이란 하이퍼텍스트를 활용하여 네트워크가 연결된 웹페이지에서 문서를 작성하고 읽거나 공유하기 위해 만들어진 체계이다.

HyperText?

웹 페이지 등 다른 대상의 링크가 들어있는텍스트르 말하는데, HTML은 이 하이퍼텍스트를 활용하여 다른 사이트로 이동한다.

그렇다면 어떻게 다른 페이지로 이동할까?
그 답은 Markup Languague에 있다.

Markup Languague?

이름 그대로 표시(markup)하는 언어를 뜻하며, 텍스트와 구분할수 있는 마크를 추가하는 언어이다.
쉽게 말하면 학교에 과제를 냈을때 선생님 또는 교수님이 어떻게 하면 좋겠다라고 색깔펜으로 표시해 주셨는데 컴퓨터에서 무언가를 하라고 지시하는 것이다.

웹 서버는 URL로 HTML문서를 전송한다.
URL은 일정한 구조를 따르는 텍스트 문자열이다.

URL?

URL은 일정한 구조를 가진 텍스트 문자열이다.
아래의 표를 보면 URL은 스킴,호스트,경로의 3가지로 구분된다.

스킴(scheme) 호스트 경로
https www.absdefg.com /12345
  • 스킴(secheme)은 통신 매커니즘을 말하며 현재는 bitcoin, tv 등 계속 늘어나고 있다.
  • 호스트는 통신하려는 서버를 말한다. IP주소일 수도 있고 도메인 이름일 수도 있다.
  • 경로의 /1234는 문서가 추출되는 경로를 말한다.

 

2. HTTP(HyperText Transfer Protocol)란?

HTTP(HyperText Transfer Protocol)?

  • HTTP는 HTML 문서같은 리소스를 가져올수 있게 해주는 프로토콜로, 클라이언트-서버의 통신 프트로콜이다.
    클라이언트-서버 프로토콜이란 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미하며, HTML문서는 HTTP를 통해 전송된다.
    클라이언트는 요청을보내는 쪽으로 브라우저를 의미한다.
    서버는 요청을 받는 쪽으로 데이터를 보내주는 컴퓨터를 의미한다.

HTTPS(HyperText Transfer Porotocol Secure)?

  • https는 HTTP의 정보 암호화를 사용한 안전한 하이퍼 텍스트 전송 프로토콜로, 네트워크 상에서 제3자가 정보를 볼수 없도록 암호화한 것이다.

 

3.HTTP의 통신은 어떻게 이루어지는가?

HTTP의 통신은 요청(Request)와 응답(Response)로 이루어진다.

HTTP통신은 클라이언트(웹)가 서버에 요청을 보내면 서버가 응답하고, 응답받은 결과를 사용자에게 보여주는 것이다. 이는 서버에 요청을 보내고 필요한 파일을 받는것자체로 통신이 종료되기때문에 기본적으로 연결이 되어있지 않다.
HTTP는 계속 연결되어 있지 않다는게 특징이다.

1.URL 입력.
2.DNS(Domain Name System) server 를 통한 호스트의 IP주소를 캐싱하고 IP주소 정보로 HTTP 요청.
3.URL과 IP 주소를 HTTP 프로토콜을 사용하여 HTTP Request Message 생성.
4.내 컴퓨터에서 공유기, 모델, ISP를 통해 요청한 IP주소의 웹서버에 진입.
5.HTTP 응답

 

4. 브라우저

(1) 브라우저란?

브라우저란 우리가 인터넷에 접속할때 사용하는 크롬,사파리,인터넷익스플로러를 말한다.

(2) 브라우저 렌더링 동작 과정

  1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)
  2. 두 Tree를 결합하여 Rendering Tree를 만든다. (Style)
  3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
  4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
  5. 레이어를 합성하여 실제 화면에 나타낸다. (Composite)

Parsing?

Parsing은 HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다.
파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행한다.

Style

Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성한다.

Render Tree는 실제로 화면에 그려질 Tree이다.

Layout

Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산한다.

Paint

Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다. 이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.

Composite

Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다. 우리는 화면에서 웹 페이지를 볼 수 있다.

'FrontEnd/HTML5' Related Articles more