lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webIntroJsChapter4Title

webIntroJsChapter1Title

webIntroJsChapter2Title

webIntroJsChapter3Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />

    <title>브라우저 동작 원리</title>
  </head>
  <body>
    <header>
      <h1>브라우저의 동작 원리</h1>
    </header>

    <main>
      <section>
        <h2>사용자의 요청</h2>
        <p>브라우저 주소창에 웹 주소를 입력하는 행위를 '요청'이라고 합니다.</p>
      </section>

      <section>
        <h2>서버로부터 데이터 받아오기</h2>
        <p>브라우저는 서버에 접속해서 웹 페이지의 내용을 가져옵니다.</p>
      </section>

      <section>
        <h2>렌더링 엔진</h2>
        <p>렌더링 엔진은 웹 페이지의 내용을 해석합니다.</p>
        <blockquote>
          <p style="color: blue; cursor: pointer;">클릭해 주세요!</p>
        </blockquote>
      </section>

      <section>
        <h2>자바스크립트 실행</h2>
        <p>자바스크립트 코드는 페이지의 동작을 결정합니다.</p>
      </section>

      <section>
        <h2>화면에 표시</h2>
        <p>모든 작업이 끝나면 브라우저 화면에 웹 페이지가 표시됩니다.</p>
      </section>
    </main>

    <footer>
      <p>코드프렌즈. All Rights Reserved.</p>
    </footer>

    <script src="script.js"></script>
  </body>
</html>

document.querySelector('blockquote p').onclick = function () {
  alert('메시지 변경하기');
};

# 브라우저란?

`브라우저`는 웹 페이지나 웹 애플리케이션을 보고 사용할 수 있게 해주는 프로그램입니다. 대표적인 브라우저로 Chrome, Firefox, Safari, Edge 등이 있습니다.

<br />

## 브라우저 동작 과정

브라우저의 동작 과정은 다음과 같습니다:

**1. 데이터 요청**: 사용자가 URL을 입력하면 브라우저는 웹 서버에 해당 페이지를 요청합니다.

**2. 데이터 수신**: 웹서버는 HTML, CSS, JavaScript 등 웹사이트를 표시하기 위한 파일을 브라우저에 보냅니다.

**3. 렌더링**: 브라우저는 받은 파일들을 해석(파싱)하여 화면에 보여줍니다.

<br />

## 브라우저 동작 원리

웹 페이지는 사실 긴 글씨와 코드가 나열된 것입니다.

브라우저가 이 긴 코드를 읽고 이해하는 과정을 `파싱(Parsing)`이라고 합니다.

브라우저는 코드를 이해한 결과를 나무(Tree) 모양의 구조로 만들고, 이 구조를 `DOM`(Document Object Model, 문서 객체 모델) 트리라고 합니다.

나무의 각 가지는 웹 페이지의 각 요소, 예를 들어 `제목(h)`이나 `이미지(img)`, `버튼(button)` 등을 나타냅니다.

DOM 트리를 통해 JavaScript는 웹 페이지의 각 요소에 접근하고, HTML 요소를 수정하거나 상호작용할 수 있습니다.

DOM 트리로 인해 웹사이트에 신경계가 구성되고, JavaScript가 **두뇌** 역할을 하며 웹사이트를 컨트롤한다고 생각하면 됩니다.

예를 들어 사용자가 버튼을 클릭하면 JavaScript는 DOM 트리에서 해당 버튼을 찾고, 버튼을 클릭했을 때 실행할 코드를 찾아 동작을 실행합니다.

DOM에 대해서는 다음 수업에서 더 자세히 알아보겠습니다.