들어가기에 앞서
HTML, CSS, JavaScript 요약
- HTML
웹문서를 만들기 위해 사용하는 마크업 언어
웹페이지의 뼈대가 되는 부분 - CSS
마크업 언어의 스타일을 지정해주어 컨텐츠 구조를 꾸며주는 정적 언어
웹의 시각적인 표현을 담당 - JavaScript
웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어
웹 페이지에 기능을 더해 HTML 웹 페이지를 동적이게 만들어줌
CSS의 경우 HTML 문서의 head 영역 안에서
<link>태그를 통해 연결하거나
<style>태그를 통해 직접 스타일 정보를 정의합니다.<link href="main.css" rel="stylesheet">JavaScript의 경우 HTML 문서의 body영역 내에
<script>태그를 사용하여 스크립트 코드를 요소 내부에 직접 명시하거나
src 속성을 사용하여 css파일처럼 외부 스크립트 파일을 참조할 수 있습니다.<script src="JSscript.js">
브라우저란?
브라우저는 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어
우리가 인터넷에 접속하기 위해 사용하는 크롬, 사파리, 엣지 파이어폭스 등을 브라우저 혹은 웹 브라우저라고 합니다.
브라우저의 주요 기능
브라우저는 서버로부터 데이터를 전송받고, 렌더링 엔진을 사용해 이를 텍스트 및 이미지 등으로 변환을 해줍니다. 해당 데이터는 HTML 코드로 작성되어 있으며, 브라우저는 이러한 HTML코드를 읽고 최종화면을 사용자에게 표시하는 역할을 합니다.
사용자가 선택한 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있습니다.
자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해집니다.
브라우저의 기본 구조
1. 사용자 인터페이스
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
2. 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
3. 렌더링 엔진
요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
4. 통신
HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
5. UI 백엔드
콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
6. 자바스크립트 해석기
자바스크립트 코드를 해석하고 실행.
7. 자료 저장소
이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.
렌더링 엔진
렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일을 합니다.
브라우저 마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있습니다.
렌더링 과정
렌더링이란 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가
브라우저에서 시각적으로 출력되는 과정을 말합니다.
브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행합니다.
- 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등
렌더링에 필요한 리소스를 요청하고 서버로부터 응답받는다. - 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여
DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. - 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여
AST(Abstract Syntax Tree)를 생성하고, 바이트코드로 변환하여 실행한다. - 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고
브라우저 화면에 HTML 요소를 페인팅한다.
*파싱이란?
프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해
텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여
트리 구조의 자료 구조인 파스 트리를 생성하는 일련의 과정을 말한다.
📌출처
