---

🔍 브라우저

: 웹 서버에서 이동하며(navigate) 쌍방향으로 통신하고,
HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어

• 대표적인 HTTP 사용자 에이전트의 하나이기도 하다.

• EX. 파이어폭스, 구글 크롬, 인터넷 익스플로러, 오페라, 사파리

🗨 브라우저 주요 기능

: 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것

자원:

• 보통 HTML 문서, PDF나 이미지 또는 다른 형태일 수도 있다.
• 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.

-> HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데,
이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다.

최근에는 대부분의 브라우저가 표준 명세서를 따른다.

🗨 브라우저 기본 구조

1. 사용자 인터페이스:
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등.
요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.

2. 브라우저 엔진:
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.

3. 렌더링 엔진:
요청한 콘텐츠를 표시한다.
(EX. HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시한다.)

4. 통신:
HTTP 요청과 같은 네트워크 호출에 사용된다.
이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행된다.

5. UI 백엔드:
콤보 박스와 창 같은 기본적인 장치를 그린다.
플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.

6. 자바스크립트 해석기:
자바스크립트 코드를 해석하고 실행한다.

7. 자료 저장소:
이 부분은 자료를 저장하는 계층이다.
쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다.
HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

---

🔍 브라우저 동작 원리

1. 사용자 입력 및 URL 해석:
사용자가 주소 표시줄에 웹 페이지 주소(Uniform Resource Locator, URL)를 입력한다.
브라우저는 해당 URL을 해석하여 웹 서버의 주소와 연결할 준비를 한다.

2. 서버와의 통신:
브라우저는 웹 서버에 HTTP 요청을 보내서 웹 페이지의 리소스를 요청한다.
이 요청은 주로 HTML 파일, CSS 스타일 시트, JavaScript 파일, 이미지 등의 리소스를 포함한다.

3. HTML 파싱:
서버로부터 받아온 HTML 파일은 브라우저의 렌더링 엔진에 의해 파싱된다.
HTML 파싱은 문서 구조를 이해하고 DOM(문서 객체 모델)을 생성하는 과정이다.
DOM은 웹 페이지의 요소들을 트리 구조로 표현하는데, 이를 통해 각 요소의 관계와 위치를 알 수 있다.

4. CSS 파싱 및 스타일링:
브라우저는 HTML 파싱 후에 CSS 스타일 시트를 파싱하여 각 요소의 스타일 정보를 추출한다.
이 정보를 사용하여 각 요소의 레이아웃과 디자인을 결정한다.

5. 렌더 트리 생성:
DOM과 CSS 스타일 정보를 결합하여 렌더 트리(Render Tree)라는 새로운 트리 구조를 생성한다.
렌더 트리는 실제로 화면에 표시되는 요소들을 포함하며, 레이아웃과 시각적인 속성을 반영한다.

6. 렌더링:
브라우저는 렌더 트리를 기반으로 웹 페이지를 화면에 그린다.
각 요소의 위치, 크기, 색상 등을 고려하여 사용자에게 최종적으로 시각적으로 표시된다.

7. 자바스크립트 해석 및 실행:
웹 페이지가 자바스크립트를 포함하고 있다면, 브라우저는 해당 자바스크립트 코드를 해석하고 실행한다.
이를 통해 동적인 기능이나 사용자와의 상호작용을 가능하게 한다.

8. 이벤트 처리:
사용자의 입력이나 웹 페이지의 상태 변화에 따라 브라우저는 이벤트를 감지하고 처리한다.
이벤트는 클릭, 키보드 입력, 마우스 움직임 등 다양한 상호작용을 포함한다.

9. 브라우저 업데이트:
브라우저는 웹 페이지를 계속 모니터링하며 변경 사항이 있을 때마다 화면을 업데이트한다.
이는 실시간으로 변하는 웹 애플리케이션과 상호작용할 때 중요한 역할을 한다.