Web Browser #

정의 #

웹 브라우저(Web Browser, 문화어: 열람기)는 웹 서버에서 쌍방향 통신하는 HTML 문서나 파일과 연동하고 출력하는 응용 소프트웨어이다. 웹 브라우저는 대표적인 HTTP 사용자 에이전트의 하나이기도 하다.

주요 웹 브라우저로는 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러/마이크로소프트 엣지, 오페라, 사파리가 있다.

역사 #

최초의 웹 브라우저는 1990년에 팀 버너스 리가 발명하였다. 버너스 리는 W3C의 감독자로서 웹의 지속적인 발전을 감독하며, 월드 와이드 웹 재단의 설립자이기도 하다. 그의 브라우저는 월드와이드웹으로 불리다가 넥서스(Nexus)로 이름이 바뀌었다.

그래픽 사용자 인터페이스를 갖추면서 대중이 사용할 수 있었던 최초의 웹 브라우저는 Erwise이다. Erwise의 개발은 로버트 카이유가 시작하였다.

주요기능 #

불러오기 #

• 불러오기는 HTTP 모듈 또는 파일시스템으로 전달받은 리소스 스트림(resource stream)을 읽는 과정
• 로더(loader)가 아 역할을 맡고있음. HTML파서는 말그대로 HTML문서를 파싱하는데 사용되고, XML파서는 XML형식을 따르는 SVG, MathML 등을 처리하는데 사용함

렌더링 트리(Rendering tree)만들기 #

• 파싱으로 생성된 DOM tree는 HTML문서의 내용을 tree화 한 것
• html문서의 , , 태그와 CSS의 "display" 속성 값이 none인 태그 등은 화면에 표시될 필요가 없기 때문에 렌더링 트리에 추가되지 않음.

CSS 스타일(style)결정 #

• CSS는 HTML의 문서에서 내용과 별도로 표현을 나타내기 위해 만들어졌음.
• CSS 스타일은 셀렉터의 정의에 따라 적용되는 태그가 다를 수 있어서, 모든 CSS 스타일을 부석하여 최종적으로 어떤 스타일 규칙이 적용되는지를 결정해야 함.

레이아웃 #

• 렌더링 트리가 생성될 때, 각 렌더 객체는 위치나 크기를 가지고 있지 않음.
• 각 렌더 객체가 위치와 크가를 갖게되는 과정을 레이아웃이라고 함.

그리기 #

• 그리기 단계는 렌더링 트리를 탐색하면서 특정 메모리 공간에 RGB값을 채우는 과정. 마치 그럴 대상을 적은 카드 뭉치에서 맨 윗장부터 하나씩 꺼내어 적힌 대상을 빈 종이에 그린 것돠 비슷하다고 볼 수 있음, 물론 카드에는 어느 위치에 어떤 크기로 그릴지 어떤 색깔로 그릴지 자세히 적어놓음.

종류 #

인터넷 익스프롤러(IE) #

1990년대 중반 인터넷 대중화를 이끈 넷스케이프와이 경쟁에서 승리를 거둔 마이크로소프트사의 익스프롤러 .

사파리 #

애플이 오픈 소스의 웹킷 프로젝트와 공통 연구를 통해 선보임.

오페라 #

1994년에 선보여 17년 동안 끊임없이 진화하며 다른 웹브라우저들에도 영향을 끼침.

크롬 #

구글이 빠른 속도를 목적으로 웹킷을 바탕으로 선보임.

파이어폭스 #

오픈 소스 개발자들이 구성한 모질라 재단에서 선임.

그 외 모바일용 브라우저들 (크롬, 오페라, 미렌,돌핀 등등) #

구성요소 #

사용자 인터페이스 #

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

브라우저 엔진 #

• 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.

렌더링 엔진 #

• 요청한 콘텐츠를 표시, 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.

통신 #

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

UI 백엔드 #

• 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

자바스크립트 해석기 #

• 자바스크립트 코드를 해석하고 실행.

자료 저장소 #

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

렌더링 엔진 #

렌더링 엔진 정의 #

레이아웃 엔진(layout engine) 또는 렌더링 엔진(rendering engine)은 웹 콘텐츠(HTML, XML, 그림 파일 등)와 포맷 정보(CSS, XML 등)를 가져 와서 화면에 해당 콘텐츠를 정리하여 보여 주는 소프트웨어를 말한다. 이 프로그램은 모니터나 프린터에 표시할 창의 콘텐츠 영역을 그린다. 레이아웃 엔진은 웹 브라우저, 이메일 클라이언트와 같은 웹 콘텐츠를 보여 주거나 편집하는 데 쓰이는 응용 프로그램에 사용된다.

브라우저별 사용된 렌더링 엔진의 종류 #

• IE - Trident
• Chrome - Webkit
• Firefox - Gecko
• Safari - Webkit
• Opera - Presto

출처 링크 #

1. 브라우저동작원리
2. 레이아웃 엔진
3. 웹을 배우는 첫 걸음! 웨버 스터디
4. 네이버 D2