오즈코딩스쿨 초격차캠프 백엔드 9일차

✅ 1. 브라우저가 웹 페이지에서 렌더링 되는 과정

웹 브라우저가 웹 페이지를 렌더링하는 과정은 여러 단계로 이루어집니다:

1. HTML 파싱:

   • 브라우저는 웹 페이지의 HTML 내용을 가져옵니다.
   • HTML 파서는 HTML 코드를 읽고 문서 객체 모델(DOM) 트리를 생성합니다. 이 트리는 웹 페이지의 구조를 나타냅니다.

2. CSS 파싱과 스타일링:

   • 브라우저는 웹 페이지와 관련된 CSS 스타일 시트를 가져옵니다.
   • CSS 파서가 스타일 시트를 처리하고 CSS 객체 모델(CSSOM)을 생성합니다.
   • DOM 트리와 CSSOM이 결합되어 렌더 트리를 생성합니다. 여기서 각 노드는 가시적인 요소와 해당 스타일 정보를 나타냅니다.

3. 레이아웃:

   • 브라우저는 렌더 트리의 정보를 기반으로 각 요소의 위치와 크기를 결정합니다.
   • 이 과정은 "레이아웃" 또는 "리플로우"라고 불립니다.

4. 페인팅:

   • 브라우저는 레이아웃과 스타일 정보에 따라 화면에 픽셀을 그립니다.
   • 이 과정은 "페인팅" 또는 "렌더링"이라고 불립니다.

5. 합성:

   • 여러 레이어가 있는 경우(예: 요소들이 겹치는 경우), 브라우저는 이러한 레이어를 합성하여 최종 시각적 출력물을 생성합니다.
   • 이 과정은 "합성"이라고 불립니다.

이러한 과정 동안 브라우저는 비동기 작업(추가 리소스 가져오기, 스크립트 실행 등)도 처리할 수 있습니다. 현대의 브라우저는 매우 최적화되어 있으며, 렌더링 과정의 일부 단계는 동시에 발생하거나 성능을 위해 최적화될 수 있습니다. 목표는 사용자에게 효율적이고 빠른 웹 페이지를 제공하는 것입니다.

- The process by which a browser is rendered on a web page

The process by which a browser renders a web page involves several steps:

1. HTML Parsing:

   • The browser fetches the HTML content of the web page.
   • The HTML parser reads the HTML code and creates a Document Object Model (DOM) tree, representing the structure of the web page.

2. CSS Parsing and Styling:

   • The browser fetches the CSS stylesheets associated with the web page.
   • The CSS parser processes the stylesheets and creates a CSS Object Model (CSSOM).
   • The DOM tree and CSSOM are combined to create a Render Tree, where each node represents a visible element along with its styling information.

3. Layout:

   • The browser determines the position and size of each element on the web page based on the information in the Render Tree.
   • This process is often referred to as the "layout" or "reflow."

4. Painting:

   • The browser paints the pixels on the screen according to the layout and styling information.
   • This process is often referred to as "painting" or "rendering."

5. Compositing:

   • If there are multiple layers (for example, due to overlapping elements), the browser combines these layers to create the final visual output.
   • This process is called "compositing."

During this entire process, the browser may also handle asynchronous tasks, such as fetching additional resources (images, scripts) or handling user interactions.

It's important to note that modern browsers are highly optimized, and some steps in the rendering process may happen concurrently or be optimized for performance. The goal is to efficiently and quickly render the web page for the user.

✅ 2. Reset.css vs Normalize.css

Reset.css와 Normalize.css는 둘 다 웹 브라우저 간의 스타일 차이를 보완하고, 일관된 시작점을 제공하는 목적으로 사용되는 스타일 시트입니다. 그러나 두 가지의 접근 방식에는 차이가 있습니다.

1. Reset.css:

   • 목적: 브라우저 간의 스타일 차이를 제거하고 모든 요소의 기본 스타일을 제로로 초기화합니다.
   • 특징:
     • 모든 마진, 패딩, 테두리 등을 제거하고, 특정 태그의 기본 스타일을 제로로 만듭니다.
     • 개발자가 완전한 컨트롤을 가지게 하기 위해 사용됩니다.
     • 스타일을 처음부터 다시 작성해야 하기 때문에 초기 설정이 필요한 부분이 많습니다.

   /* 예시 Reset.css */
   body, h1, p {
     margin: 0;
     padding: 0;
   }

2. Normalize.css:

   • 목적: 브라우저 간의 스타일 차이를 최소화하고, 유용한 기본 스타일을 유지하면서 일관성을 제공합니다.
   • 특징:
     • 일부 기본 스타일을 유지하면서 브라우저 간의 차이를 최소화합니다.
     • HTML5 요소에 대한 스타일을 추가하고, 몇 가지 표준화된 스타일을 제공합니다.
     • 개발자가 일관된 기본 스타일을 가지고 시작할 수 있도록 도와줍니다.

   /* 예시 Normalize.css */
   body {
     margin: 0;
     font-family: 'Arial', sans-serif;
   }

어떤 것을 선택할지는 프로젝트의 요구사항과 개발자의 선호도에 따라 다릅니다. 만약 완전한 컨트롤을 원하고 모든 스타일을 직접 설정하려는 경우에는 Reset.css가 적합할 수 있습니다. 하지만 초기 설정에 대한 부담을 덜고 브라우저 간의 차이를 최소화하면서도 기본 스타일을 유지하려면 Normalize.css가 유용할 수 있습니다.

- Reset.css vs Normalize.css

Reset.css and Normalize.css are both stylesheets used to address differences in styles across web browsers and provide a consistent starting point. However, they differ in their approaches.

1. Reset.css:

   • Purpose: It aims to eliminate differences in default styles across browsers by resetting all elements to a baseline.
   • Features:
     • It removes margins, paddings, borders, and sets certain tag styles to zero.
     • It is used to give developers complete control, but it requires the developer to redefine styles from scratch.

   /* Example Reset.css */
   body, h1, p {
     margin: 0;
     padding: 0;
   }

2. Normalize.css:

   • Purpose: It seeks to minimize differences across browsers while maintaining useful default styles for a more consistent look.
   • Features:
     • It minimizes browser inconsistencies while retaining some default styles.
     • It includes styles for HTML5 elements and provides a baseline of normalized styles.
     • It helps developers start with a consistent set of default styles.

   /* Example Normalize.css */
   body {
     margin: 0;
     font-family: 'Arial', sans-serif;
   }

The choice between them depends on project requirements and developer preferences. If you want complete control and are willing to redefine all styles, Reset.css might be suitable. However, if you want to minimize the initial setup and reduce the burden of handling browser differences while maintaining some default styles, Normalize.css can be helpful.

✅ 3. URL과 URN을 포함하는 URI

통합 자원 식별자 (URI)는 특정 자원을 식별하기 위한 문자열입니다. 이는 두 가지 유형인 통합 자원 위치자 (URL)와 통합 자원 이름 (URN)으로 나뉩니다.

1. URL (통합 자원 위치자):

   • URL은 인터넷 상의 자원의 위치를 식별하는 특정한 유형의 URI입니다. 이는 프로토콜 (예: HTTP, HTTPS), 도메인 이름 및 경로와 같은 정보를 제공하여 자원에 액세스하는 방법을 지정합니다.
   • 예시 URL: https://www.example.com/index.html

2. URN (통합 자원 이름):

   • URN은 특정한 이름 공간에서 자원을 고유하게 식별하기 위한 다른 유형의 URI입니다. URL과는 달리 URN은 자원의 위치가 시간이 지남에 따라 변경되더라도 자원을 지속적으로 식별하는 데 사용됩니다.
   • 예시 URN: urn:isbn:0451450523

URI는 URL과 URN을 모두 포함할 수 있으며, 특히 자원의 위치와 이름이 모두 관련이 있는 경우에 사용됩니다. 예를 들어:

uri:example:url/https://www.example.com/resource,urn:example:urn/urn:isbn:0451450523

이 예에서 URI는 URL (https://www.example.com/resource)과 URN (urn:isbn:0451450523)을 모두 포함하고 있습니다. 각 부분은 자원을 식별하는 데 다른 목적으로 사용됩니다.

- URI containing URL and URN

A Uniform Resource Identifier (URI) is a string of characters that identifies a particular resource. It can be further categorized into two types: Uniform Resource Locator (URL) and Uniform Resource Name (URN).

1. URL (Uniform Resource Locator):

   • A URL is a specific type of URI that identifies the location of a resource on the internet. It specifies how to access the resource by providing information such as the protocol (e.g., HTTP, HTTPS), domain name, and path.
   • Example URL: https://www.example.com/index.html

2. URN (Uniform Resource Name):

   • A URN is another type of URI that is used to uniquely identify a resource by name in a particular namespace. Unlike URLs, URNs are intended to persistently identify resources even if their location changes over time.
   • Example URN: urn:isbn:0451450523

A URI can contain both a URL and a URN, especially in scenarios where both the location and the name of a resource are relevant. For example:

uri:example:url/https://www.example.com/resource,urn:example:urn/urn:isbn:0451450523

In this example, the URI contains both a URL (https://www.example.com/resource) and a URN (urn:isbn:0451450523). Each part serves a different purpose in identifying the resource.