🌐 웹개발/웹 개발
Web은 무엇인가 | 웹 브라우저에 URL을 입력했을 때 | 🌏웹웹웹🌏
두_두
2023. 4. 11. 21:36
🌏 월드 와이드 웹 (World Wide Web)
WWW 월드 와이드 웹은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 의미한다. 우리는 간단히 Web이라고 부른다!
🌏 웹을 구성하는 3대 요소
URL(Uniform Resource Locator)
URL은 웹에서 주어진 고유 리소스 주소로, 각각의 유효한 URL은 고유한 리소스를 가리킨다.
HTTP(HyperText Transfer Protocol)
HTTP는 웹을 통해 문서, 스타일시트, 스크립트, 이미지, 비디오, 글꼴 및 기타 리소스를 가져오고 웹 서버로 다시 보내기 위한 기본적인 인터넷 프로토콜이다.
HTML
HTML은 웹 페이지 표시를 위해 개발된 마크업 언어로, 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분 할 수 있도록 의미를 부여하고, 헤더인지, 콘텐츠 컬럼인지, 네비게이션 메뉴인지 알수 있도록 논리적인 영역으로 구조화 하고, 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 언어이다.
🌏 브라우저(browser)
브라우저는 컴퓨터에서 실행되는 크롬, 파이어폭스, 사파리, 엣지와 같은 프로그램으로, URL과 HTTP를 사용하여 서버에 요청을 보내고 서버에서 보낸 HTML을 가져와서 표시한다.
🌏 웹 브라우저에서 URL을 입력했을 때, 일어나는 일
- 웹 브라우저에 URL을 입력하고 Enter 키를 누름.
- 웹 브라우저가 도메인의 IP 주소를 조회. (먼저 캐시를 찾고, 그다음 DNS를 검색.)
- 웹 브라우저가 찾은 IP 주소를 기반으로 서버와의 TCP 연결 시작.
- 웹 브라우저가 HTTP 요청을 서버로 전송.
- 웹 서버가 요청을 처리하고 응답을 다시 웹 브라우저로 전송.
- 웹 브라우저가 전송 받은 콘텐츠를 렌더링.
🌏 랜더링 동작 과정
- 서버로부터 HTML, CSS, Javascript, 이미지, 폰트 등 렌더링에 필요한 리소스들을 응답받음.
- HTML과 CSS 파일을 파싱해서 CSSOM과 DOM을 생성한 후 결합하여 Rendering Tree를 만듦.
- 렌더링 트리를 기반으로 레이아웃을 계산함 ➡️ 각 노드의 위치와 크기를 계산
- 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하여 레이어로 만들고 HTML요소를 페인팅
- 레이어를 합성하여 실제 화면에 나타냄
728x90