브라우저❓
웹 브라우저는 인터넷을 통해 웹 페이지를 표시하는 소프트웨어이며 사용자가 URL을 입력하거나 링크를 클릭하면, 브라우저는 해당 웹 페이지의 내용을 가져와 화면에 표시한다. 이 과정은 네트워킹, HTML/CSS 파싱, 자바스크립트 실행 등 다양한 단계를 거쳐 이루어진다.
- 사용자 인터페이스: 브라우저의 주요 요소는 주소 표시줄, 뒤로/앞으로 버튼, 북마크 등으로 사용자가 웹을 더 편리하게 탐색할 수 있다.
- 렌더링 엔진: 웹 페이지의 내용을 해석하고 표시하는 데 사용되는 엔진이며 이 엔진은 HTML 및 CSS 문서를 파싱하고 렌더링하여 화면에 표시한다. Chromium의 Blink, Firefox의 Gecko, Safari의 WebKit 등이 대표적인 렌더링 엔진이다.
- 네트워킹: 브라우저는 HTTP 프로토콜을 통해 서버와 통신하여 웹 페이지의 리소스를 요청하고 응답을 받아온다.
- HTML 파서: HTML 문서를 파싱하여 문서 구조를 이해하고 DOM(Document Object Model)을 생성한다. 이 DOM은 웹 페이지의 구조를 프로그래밍적으로 조작할 수 있게 한다.
- CSS 파서: CSS 스타일 규칙을 해석하여 어떻게 요소를 스타일링할지 결정하고 이로써 웹 페이지의 디자인이 구성된다.
- 렌더 트리 구축: DOM과 CSS 규칙을 결합하여 실제 화면에 어떻게 표시될지 계산하는 과정이다.
- 렌더링: 렌더 트리를 기반으로 브라우저 화면에 실제 콘텐츠를 표시한다.
브라우저 종류:
- Google Chrome: Blink 엔진 기반의 브라우저로, 성능과 안정성을 중요시하는 사용자에게 인기가 있다.
- Mozilla Firefox: Gecko 엔진을 사용하는 오픈 소스 브라우저로, 개인 정보 보호와 사용자 정의 기능을 강조한다.
- Apple Safari: WebKit 엔진을 사용하는 Mac 및 iOS 기기용 브라우저로, Apple 생태계와 긴밀한 통합을 제공한다.
- Microsoft Edge: 이전에는 Trident 엔진을 사용했으나 Chromium 엔진으로 변경되어 크로스 플랫폼 지원과 최적화를 강화했다.
부가개념:
- 자바스크립트 엔진: 브라우저 내에서 자바스크립트 코드를 실행하는 엔진으로, V8, SpiderMonkey 등이 있다.
- 쿠키와 세션: 브라우저는 웹 사이트와 상호 작용 시 쿠키를 저장하여 세션 관리 및 사용자 추적에 활용한다.
- 웹 저장소: 로컬 스토리지와 세션 스토리지를 이용해 클라이언트 측에서 데이터를 임시 또는 영구적으로 저장한다.
- DOM (Document Object Model): 웹 페이지의 구조를 객체 모델로 표현하여 프로그래밍으로 조작할 수 있는 인터페이스를 제공한다.
- CSS (Cascading Style Sheets): 웹 페이지의 디자인과 스타일을 지정하는 스타일 시트 언어이다.
- HTTP (Hypertext Transfer Protocol): 웹 브라우저와 웹 서버 간의 데이터 전송을 위한 표준 프로토콜
- URL (Uniform Resource Locator): 웹 리소스의 위치를 가리키는 주소
- V8: 구글이 개발한 고성능 자바스크립트 엔진으로, 주로 크롬 브라우저에서 사용
+
파싱
파싱(Parsing)은 컴퓨터 프로그래밍에서 텍스트나 다른 입력 데이터를 분석하고 원하는 정보를 추출하는 과정을 말한다. 일반적으로 파싱은 구문 분석(Syntax Analysis)이라고도 불리며, 컴퓨터 프로그램이 입력 데이터를 이해하고 처리할 수 있도록 데이터의 구조와 의미를 해석하는 단계이다.
웹 브라우저의 경우, HTML이나 CSS 같은 마크업 언어를 파싱하여 문서의 구조와 스타일 정보를 추출하고, 자바스크립트 코드를 파싱하여 실행 가능한 형태로 변환한다.
이를 통해 브라우저는 웹 페이지를 정확하게 해석하고 적절하게 표시할 수 있게 된다.
파싱 과정은 다양한 단계를 포함하며, 문법 규칙에 따라 텍스트를 토큰(Token)으로 분해하고 이를 이용하여 구문을 분석하거나 추상 구문 트리(Abstract Syntax Tree)를 생성한다. 이렇게 생성된 구문 분석 결과는 프로그램이나 시스템이 이후 처리할 수 있는 형태로 변환된다.
간단한 html 문서 예시
<!DOCTYPE html>
<html>
<head>
<title>HTML 문서 예시</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>이것은 간단한 HTML 문서의 예시입니다.</p>
<a href="https://www.example.com">예시 링크</a>
</body>
</html>- <!DOCTYPE html>: 이 문서가 HTML5 형식의 문서임을 나타냅니다. 브라우저에게 현재 문서의 버전과 유형을 알려준다.
- <html>: HTML 문서의 루트 요소이며 모든 HTML 요소는 이 요소 내에 위치한다.
- <head>: 문서의 메타 정보와 관련된 요소들을 포함하는 부분이다. 일반적으로 웹 페이지의 제목, 스타일 시트, 스크립트 등이 여기에 포함된다.
- <title>: 브라우저의 제목 표시줄이나 탭에 표시될 문서의 제목을 정의한다. 사용자에게 문서의 주제를 알리는 역할을 한다.
- <body>: 실제 컨텐츠가 들어가는 부분이며 화면에 표시되는 내용은 여기에 작성된다.
- <h1>: 제목(Heading) 요소, 1단계의 제목을 나타내며, 문서 구조를 나타내는 역할을 한다.
- <p>: 문단(Paragraph) 요소, 텍스트를 문단 단위로 구분하여 표시하고자 할 때 사용된다.
- <a>: 앵커(Anchor) 요소로, 하이퍼링크를 생성하는 역할을 하며, href 속성에 링크의 주소를 지정한다.
- href="https://www.example.com": 앵커 요소의 href 속성에는 링크의 실제 주소를 지정하며 이 예시에서는 "https://www.example.com" 주소로 링크가 걸린다.
- 텍스트 내용: 각 요소 안에 있는 텍스트는 해당 요소의 내용으로 화면에 표시된다.
웹 브라우저의 개념부터 원리, 다양한 종류, 코드 예시까지 살펴보았다.
웹 브라우저는 인터넷 활동의 핵심이며, 그 동작 원리를 이해하는 것은 웹 개발 및 사용자 경험을 향상시키는 중요한 요소이다.
'Web' 카테고리의 다른 글
| [웹] ajax? 알아볼게요 ( with. 설정, 코드 ) (0) | 2023.08.23 |
|---|---|
| [웹] 세션 타임아웃 (0) | 2023.08.22 |
| [웹] 세션, 쿠키? 알아볼게요( with . python, javascript) (1) | 2023.08.18 |
| [웹] 다양한 jwt 토큰 우회 방법 ( with. python ) (0) | 2023.08.16 |
| [웹] 꼭 알아야 하는 jwt 토큰 개념 (0) | 2023.08.16 |
