COW-edu · kitten466 · Aug 15, 2025 · Aug 18, 2025
diff --git a/week05/정가인/학습정리.md b/week05/정가인/학습정리.md
@@ -0,0 +1,166 @@
+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**
+  <!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;
+}
+
+.calculator {
+  width: 240px;
+  background: white;
+  padding: 20px;
+  border-radius: 15px;
+}
+
+#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;
+}
+