From e0c467178b256f45dbb3f67b7325f439db10d6eb Mon Sep 17 00:00:00 2001
From: GainJung <kitten200466@gmail.com>
Date: Fri, 15 Aug 2025 21:43:05 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[5=EC=A3=BC=EC=B0=A8]=20=EC=A0=95=EA=B0=80?=
 =?UTF-8?q?=EC=9D=B8=20=ED=95=99=EC=8A=B5=20PR=20=EC=A0=9C=EC=B6=9C?=
 =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...31\354\212\265\354\240\225\353\246\254.md" | 107 ++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 "week05/\354\240\225\352\260\200\354\235\270/\355\225\231\354\212\265\354\240\225\353\246\254.md"

diff --git "a/week05/\354\240\225\352\260\200\354\235\270/\355\225\231\354\212\265\354\240\225\353\246\254.md" "b/week05/\354\240\225\352\260\200\354\235\270/\355\225\231\354\212\265\354\240\225\353\246\254.md"
new file mode 100644
index 0000000..3fdad43
--- /dev/null
+++ "b/week05/\354\240\225\352\260\200\354\235\270/\355\225\231\354\212\265\354\240\225\353\246\254.md"
@@ -0,0 +1,107 @@
+5주차 JS
+JS로 HTML과 DOM 제작하기
+
+**1. 브라우저 렌더링 과정을 이해한다.**
+  브라우저 렌더링 과정
+  1) HTML파싱
+    서버로 부터 HTML문서를 전달받으면 브라우저 엔진은 위에서 아래로 순차적으로 파싱한다. 
+    이때 발견한 태그와 속성을을 트리 형태로 변환되어 메모리에 저장하는데 이를 DOM트리라 한다. 
+  2) CSS파싱
+    HTML 파싱 중 CSS링크나 스타일 태그를 만났을 경우에는 이를 파싱할때 CSSOM트리로 변환한다. 
+    페인트 전 CSSOM이 필요한데 렌더링이 CSS에 의해 블로킹 되지 않게 주의해야함
+  3) DOM, CSSOM결합
+    문서의 파싱이 완료되면 DOM과 CSSOM트리를 결합하여 렌더 트리를 생성함 
+    이 렌더 트리는 브라우저 상에서 요소의 위치와 크기를 결정하는 리플로우 과정을 거침
+  4) 스타일 계산
+    DOM의 각 노드에 대해 매칭되는 CSS 규칙을 찾은 후 개스케이딩을 적용해 스타일을 만든다.
+  5) 렌더 트리
+    보이는 노드를 조합하여 렌더 트리를 생성한다.
+  6) 레이아웃 및 페인트
+    렌더 트리를 순회해서 각 박스의 크기 및 위치를 계산한다. 
+    마지막으로 요소의 색상 경계선 등의 시각적 요소를 그리는 페인팅 과정이 진행
+    배경, 테두리, 텍스트 등 그릴 항목의 경우 페인트 기록으로 만든다. 
+  7) 합성 
+    각 레이어를 타일로 래스터화 된후 컴포지터 스레드가 레이어를 합성함. 
+// JS로 DOM을 수정하면 레이아웃이랑 페인트가 다시 일어나서 성능이 떨어질 수 있음
+// 가능하면 DOM조작은 모아서 한 번에 하는 것이 좋음
+
+
+**2. DOM 조작을 자바스크립트로 어떻게 하는지를 확인한다.**
+  DOM은 HTML을 객체처럼 다룰 수 있게 만든 구조이다. 
+  자바스크립트가 DOM을 조작하는 방법을 알아야 웹 페이지를 보다 동적으로 만들 수 있음. 
+
+  <요소 선택>_JS
+  document.getElementById("myId");  //단일 요소 
+  document.querySelector(".myClass");
+  document.getElementsByClassName("myClass");  //여러 요소 
+  document.querySelectorAll("div");
+
+  <내용 변경>_JS
+  const title = document.getElementById("title");
+  title.textContent = "새 제목";  // HTML 태그 해석 안 함
+  title.innerHTML = "두번째 제목"; // HTML 태그 해석
+  // innerHTML의 경우 XSS 보안 위험이 있으니 외부 데이터를 넣을 때 주의해야함
+
+  <속성 변경>_JS
+  const img = document.querySelector("img");
+  img.src = "새 이미지.jpg";
+  img.alt = "새 이미지";
+
+  <스타일 변경>_JS
+  title.style.color = "purple";
+  title.style.fontSize = "32px";
+  // 스타일이 많을 경우 CSS클래스를 추가하는 방법이 깔끔
+
+  <요소 추가 및 삭제>_JS
+  const newItem = document.createElement("li");
+  newItem.textContent = "새 항목";
+  document.querySelector("ul").appendChild(newItem);
+  
+  newItem.remove(); //삭제
+
+  // 선택자는 querySelector 하나로 거의 다 처리 가능
+
+**3. 직접 자바스크립트로 계산기를 만들어본다.**
+  계산기_HTML로 뼈대
+  <div class="calculator">
+  <input type="text" id="display" disabled>
+
+  <div class="buttons">
+    <button onclick="appendValue('1')">1</button>
+    <button onclick="appendValue('2')">2</button>
+    <button onclick="appendValue('3')">3</button>
+    <button onclick="appendValue('4')">4</button>
+    <button onclick="appendValue('5')">5</button>
+    <button onclick="appendValue('6')">6</button>
+    <button onclick="appendValue('7')">7</button>
+    <button onclick="appendValue('8')">8</button>
+    <button onclick="appendValue('9')">9</button>
+    <button onclick="appendValue('0')">0</button>
+
+    <button onclick="clearDisplay()">C</button>
+    <button onclick="calculate()">=</button>
+    <button onclick="appendValue('+')">+</button>
+    <button onclick="appendValue('-')">-</button>
+    <button onclick="appendValue('*')">×</button>
+    <button onclick="appendValue('/')">÷</button>
+  </div>
+</div>
+
+  계산기_JS
+  let display = document.getElementById("display");
+
+  function appendValue(value) {
+  display.value += value; // 버튼의 값을 현재 화면에 추가
+}
+
+  function clearDisplay() {
+  display.value = ""; // 화면 지우기
+}
+
+  function calculate() {
+  try {
+    display.value = eval(display.value); 
+  } catch {
+    display.value = "오류"; 
+  }
+}

From 9ab6374ccfd191cfa685e04714baac2642a0b256 Mon Sep 17 00:00:00 2001
From: GainJung <kitten200466@gmail.com>
Date: Mon, 18 Aug 2025 21:49:29 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[5=EC=A3=BC=EC=B0=A8]=20=EC=A0=95=EA=B0=80?=
 =?UTF-8?q?=EC=9D=B8=20=ED=95=99=EC=8A=B5=20PR=20=EC=A0=9C=EC=B6=9C?=
 =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4.=20(=EC=88=98=EC=A0=95=EB=B3=B8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...31\354\212\265\354\240\225\353\246\254.md" | 135 +++++++++++++-----
 1 file changed, 97 insertions(+), 38 deletions(-)

diff --git "a/week05/\354\240\225\352\260\200\354\235\270/\355\225\231\354\212\265\354\240\225\353\246\254.md" "b/week05/\354\240\225\352\260\200\354\235\270/\355\225\231\354\212\265\354\240\225\353\246\254.md"
index 3fdad43..e19e84b 100644
--- "a/week05/\354\240\225\352\260\200\354\235\270/\355\225\231\354\212\265\354\240\225\353\246\254.md"
+++ "b/week05/\354\240\225\352\260\200\354\235\270/\355\225\231\354\212\265\354\240\225\353\246\254.md"
@@ -62,46 +62,105 @@ JS로 HTML과 DOM 제작하기
   // 선택자는 querySelector 하나로 거의 다 처리 가능
 
 **3. 직접 자바스크립트로 계산기를 만들어본다.**
-  계산기_HTML로 뼈대
-  <div class="calculator">
-  <input type="text" id="display" disabled>
-
-  <div class="buttons">
-    <button onclick="appendValue('1')">1</button>
-    <button onclick="appendValue('2')">2</button>
-    <button onclick="appendValue('3')">3</button>
-    <button onclick="appendValue('4')">4</button>
-    <button onclick="appendValue('5')">5</button>
-    <button onclick="appendValue('6')">6</button>
-    <button onclick="appendValue('7')">7</button>
-    <button onclick="appendValue('8')">8</button>
-    <button onclick="appendValue('9')">9</button>
-    <button onclick="appendValue('0')">0</button>
-
-    <button onclick="clearDisplay()">C</button>
-    <button onclick="calculate()">=</button>
-    <button onclick="appendValue('+')">+</button>
-    <button onclick="appendValue('-')">-</button>
-    <button onclick="appendValue('*')">×</button>
-    <button onclick="appendValue('/')">÷</button>
-  </div>
-</div>
-
-  계산기_JS
-  let display = document.getElementById("display");
-
-  function appendValue(value) {
-  display.value += value; // 버튼의 값을 현재 화면에 추가
+**계산기.HTML**
+  <!DOCTYPE html>
+<html lang="kr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>계산기_정가인</title>
+    <link rel="stylesheet" href="스타일.css" />
+  </head>
+  <body>
+    <script src="계산.js"></script>
+    <h1>계산기</h1>
+    <div class="calculator">
+      <input type="text" id="display" disabled />
+      <div class="buttons">
+        <button onclick="appendValue('1')">1</button>
+        <button onclick="appendValue('2')">2</button>
+        <button onclick="appendValue('3')">3</button>
+        <button onclick="appendValue('4')">4</button>
+        <button onclick="appendValue('5')">5</button>
+        <button onclick="appendValue('6')">6</button>
+        <button onclick="appendValue('7')">7</button>
+        <button onclick="appendValue('8')">8</button>
+        <button onclick="appendValue('9')">9</button>
+        <button onclick="appendValue('0')">0</button>
+
+        <button onclick="clearDisplay()">C</button>
+        <button onclick="calculate()">=</button>
+        <button onclick="appendValue('+')">+</button>
+        <button onclick="appendValue('-')">-</button>
+        <button onclick="appendValue('*')">×</button>
+        <button onclick="appendValue('/')">÷</button>
+      </div>
+    </div>
+  </body>
+</html>
+
+**계산.JS**
+window.onload = function () {
+  let display = document.getElementById('display');
+
+  window.appendValue = function (value) {
+    display.value += value;
+  };
+
+  window.clearDisplay = function () {
+    display.value = '';
+  };
+
+  window.calculate = function () {
+    try {
+      display.value = eval(display.value);
+    } catch {
+      display.value = '오류';
+    }
+  };
+};
+
+**스타일.CSS**
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background: #bef0ff;
+  flex-direction: column;
 }
 
-  function clearDisplay() {
-  display.value = ""; // 화면 지우기
+.calculator {
+  width: 240px;
+  background: white;
+  padding: 20px;
+  border-radius: 15px;
 }
 
-  function calculate() {
-  try {
-    display.value = eval(display.value); 
-  } catch {
-    display.value = "오류"; 
-  }
+#display {
+  width: 95%;
+  height: 50px;
+  font-size: 20px;
+  margin-bottom: 15px;
+  text-align: right;
+  padding: 5px;
+  border-radius: 10px;
+  border: 1px solid white;
 }
+
+.buttons {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+button {
+  padding: 15px;
+  font-size: 18px;
+  border-radius: 8px;
+  background: gray;
+  color: white;
+  transition: background 0.3s;
+}
+