웹브라우저란?
HTML은 웹 페이지의 구조를 정의하는 데 사용되는 마크업 언어이고, CSS는 페이지에 시각적 스타일을 추가하는 데 사용되는 스타일시트 언어이며, JavaScript는 HTML 요소를 조작하고 동적 콘텐츠를 만드는 데 사용되는 프로그래밍 언어입니다.
DOM(문서 객체 모델)은 웹페이지에서 HTML 요소를 조작할 수 있는 방법을 제공하는 API입니다. HTML 요소를 나타내는 노드가 있는 계층적 트리와 같은 구조로, 적절한 라이브러리가 있는 모든 언어를 사용하여 조작할 수 있지만 자바스크립트는 이러한 용도로 가장 일반적으로 사용되는 언어입니다.
웹 브라우저는 웹 서버로부터 HTML, CSS, JavaScript, 이미지, 텍스트 등의 웹 리소스를 받아 그래픽 사용자 인터페이스를 통해 사용자에게 표시하는 소프트웨어 애플리케이션입니다. 일반적으로 사용되는 웹 브라우저로는 Chrome, Firefox, Safari, Opera, Internet Explorer 등이 있습니다.
브라우저는 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 네트워킹 계층, UI 백엔드 계층, JavaScript 인터프리터, 데이터 저장 계층 등 여러 계층으로 구성됩니다.
브라우저에서 HTML 파일을 로드하는 과정에는 파일과 헤드 섹션에서 요청한 추가 리소스를 다운로드하고, HTML을 DOM 트리로 구문 분석하고, DOM과 CSSOM을 결합하여 렌더 트리를 생성하고, 렌더 트리를 레이아웃하고, 마지막으로 화면에 노드를 페인팅하는 작업이 포함됩니다.
렌더링 엔진은 브라우저마다 다르게 작동하지만 기본적인 흐름은 비슷합니다. 렌더링 엔진은 사용자에게 웹페이지를 빠르게 제공하기 위해 모든 HTML 요소가 파싱될 때까지 기다리지 않고 레이아웃 및 페인팅 프로세스를 시작합니다.
전반적으로 웹 개발의 구조와 프로세스를 이해하면 효과적이고 효율적인 웹 사이트를 만드는 데 도움이 될 수 있습니다.
웹브라우저의 동작 원리
인터넷은 사용자가 클라이언트와 서버를 통해 웹 콘텐츠에 액세스할 수 있도록 하는 상호 연결된 장치로 구성된 방대한 네트워크입니다. 클라이언트는 컴퓨터, 휴대폰 등 일반적인 웹 사용자가 사용하는 장치와 웹 브라우저 등 웹에 액세스하는 데 사용하는 소프트웨어입니다. 반면에 서버는 웹페이지, 사이트, 앱 등의 웹 콘텐츠를 저장하는 컴퓨터입니다. 클라이언트가 웹페이지에 액세스하려는 경우 웹페이지의 사본이 서버에서 클라이언트의 장치로 다운로드되어 사용자의 웹 브라우저에 표시됩니다.
하지만 이 프로세스에 관여하는 구성 요소는 클라이언트와 서버만이 아닙니다. 다른 중요한 구성 요소로는 웹에서 데이터를 주고받을 수 있도록 하는 인터넷 연결과 데이터가 웹을 통해 이동하는 방식을 정의하는 TCP/IP가 있습니다. 또한 DNS 서버는 웹사이트의 주소록 역할을 하여 브라우저가 요청된 웹페이지에 맞는 올바른 서버를 찾을 수 있도록 합니다. HTTP는 클라이언트와 서버 간의 통신에 사용되는 언어이며, 웹사이트는 이미지, 음악, 동영상, 문서와 같은 리소스뿐만 아니라 HTML, CSS, JavaScript와 같은 코드 파일을 포함한 다양한 파일로 구성됩니다.
사용자가 브라우저에 웹 주소를 입력하면 브라우저는 먼저 DNS 서버에 연결하여 웹사이트가 호스팅되는 서버의 실제 위치를 찾습니다. 그런 다음 HTTP 요청 메시지를 서버로 전송하여 TCP/IP 연결을 통해 웹 사이트의 사본을 클라이언트에 전송하도록 요청합니다. 서버는 요청을 승인하고 클라이언트에 “200 OK” 메시지를 전송한 후 웹사이트 파일을 작은 데이터 패킷으로 전송합니다. 그러면 브라우저는 이러한 패킷을 조합하여 전체 웹사이트를 표시합니다.
웹 주소는 일반적으로 기억하기 쉬운 문자열이지만, 실제로는 웹의 특정 위치에 해당하는 숫자 IP 주소를 나타냅니다. DNS 서버는 웹 주소를 웹사이트의 실제 IP 주소와 일치시켜 사용자가 웹 콘텐츠에 더 쉽게 액세스할 수 있도록 합니다. 그러나 IP 주소로 웹사이트에 직접 액세스할 수도 있으며, IP 확인기와 같은 도구를 사용하여 찾을 수 있습니다.
