목록Blog/Front-end (3)
가능세계
웹의 창시자 팀 버너스 리(Tim Berners-Lee)는 다음과 같이 말했습니다. "웹의 힘은 그 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있는 것은 중요한 측면이다." 이번 포스팅에서는 웹의 보편성을 지키기 위한 핵심 개념인 웹 표준, 웹 접근성, 웹 호환성에 대해 알아봅시다. 1. 웹 표준(Web Standards) 1-1. 웹 표준이란? 웹 표준이란 간단히 말해 "웹에서 표준적으로 사용되는 기술이나 규칙"을 말합니다. 국제 표준화 기구인 W3C(World Wide Consortium)가 권고한 표준안에 따라 HTML, CSS, JavaScript 등에 대한 규정을 담고 있습니다. 1-2. 웹 표준을 준수하는 이유 웹 표준의 궁극적인 목적은 어떠한 운영체제나 브라우저를 사용하더라도 ..
브라우저의 주요 기능은 웹 페이지의 콘텐츠를 표시하는 것입니다. 이 작업은 브라우저의 렌더링 엔진을 통해 이루어집니다. 렌더링 엔진은 HTML, CSS, JavaScript, 이미지 등 웹 페이지에 포함된 모든 요소를 화면에 보여주는 역할을 합니다. 렌더링 과정을 자세히 살펴봅시다. 1. 렌더링 과정 설명 렌더링 과정은 Parsing -> Style -> Layout -> Paint -> Composite 순서로 진행됩니다. 1-1. Parsing 렌더링 엔진은 HTML 문서와 CSS 파일을 파싱하여 브라우저가 이해할 수 있는 계층적 구조인 DOM 트리와 CSSOM 트리를 생성합니다. 1-2. Style 렌더링 엔진은 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 만듭니다. 렌더 트리는 화면에 표..
웹 브라우저에 URL을 입력하고 Enter 키를 입력하면 어떻게 될까요? 단계별로 살펴봅시다. 1. 웹 브라우저는 캐싱된 DNS 기록을 확인해 도메인에 대응되는 IP 주소가 있는지 검색합니다. 있다면 캐싱된 IP 주소를 반환합니다. 2. 캐싱된 IP 주소가 없다면, 브라우저는 DNS 서버를 조회하여 도메인 명에 해당하는 서버의 IP 주소를 찾습니다. 3. IP 주소가 확인되면 브라우저는 서버와의 TCP/IP 연결을 시작합니다. 이때, 신뢰할 수 있는 3-way handshake 과정을 거칩니다. 4. TCP/IP 연결이 이루어지면, 웹 브라우저가 서버에게 웹 사이트의 콘텐츠를 보내달라는 HTTP 요청을 전송합니다. 5. 메시지를 받은 서버는 요청을 처리하고 클라이언트에게 전송할 응답을 생성합니다. 6. ..