COW-edu · junghyeak · Aug 15, 2025 · Aug 18, 2025
diff --git a/week05/박중혁/브라우저 랜더링, 돔 조작, 계산기.md b/week05/박중혁/브라우저 랜더링, 돔 조작, 계산기.md
@@ -0,0 +1,167 @@
+//브라우저 렌더링(브라우저가 HTML, CSS, JS를 해석해 화면에 그리는 과정)
+
+//HTML 파싱 → DOM 생성 {TML 코드를 읽어 각 요소를 객체(Node)로 변환해 DOM Tree 생성}
+
+//CSS 파싱 → CSSOM 생성 {CSS 코드 해석 후 스타일 정보 트리(CSSOM) 생성}
+
+//DOM + CSSOM 결합 → Render Tree 생성
+
+//Layout(Reflow) (각 요소의 크기와 위치 계산)
+
+//Paint(픽셀로 화면에 그리기)
+
+//Composite(합쳐 최종 화면 완성)
+
+/<body>
+
+  <h1>브라우저 렌더링</h1>
+  <p>과정 이해하기</p>
+</body>
+
+//DOM 조작 (JavaScript)
+
+//요소 선택
+const title = document.getElementById('title'); // ID로 선택
+const items = document.getElementsByClassName('item'); // 클래스
+const paragraphs = document.getElementsByTagName('p'); // 태그
+const header = document.querySelector('#title'); // CSS 선택자 (첫 번째)
+const allItems = document.querySelectorAll('.item'); // CSS 선택자 (전체)
+
+//내용 변경
+title.textContent = '새 제목';
+title.innerHTML = '<span style="color:red">빨간 제목</span>';
+
+//속성 변경
+title.setAttribute('data-info', 'example');
+
+//스타일 변경
+title.style.color = 'blue';
+title.style.fontSize = '20px';
+
+//요소 생성 & 추가
+const newItem = document.createElement('li');
+newItem.textContent = '추가된 아이템';
+document.querySelector('ul').appendChild(newItem);
+
+//요소 삭제
+title.remove();
+
+//계산기 만들기
+
+<div id="calculator">
+  <input type="number" id="num1" placeholder="숫자 1">
+  <input type="number" id="num2" placeholder="숫자 2">
+  <button id="add"></button>
+  <button id="subtract"></button>
+  <button id="multiply"></button>
+  <button id="divide"></button>
+  <p id="result"></p>
+</div>
+
+const num1 = document.getElementById('num1');
+const num2 = document.getElementById('num2');
+const result = document.getElementById('result');
+
+document.getElementById('add').addEventListener('click', () => {
+result.textContent = '결과: ' + (Number(num1.value) + Number(num2.value));
+});
+
+document.getElementById('subtract').addEventListener('click', () => {
+result.textContent = '결과: ' + (Number(num1.value) - Number(num2.value));
+});
+
+document.getElementById('multiply').addEventListener('click', () => {
+result.textContent = '결과: ' + (Number(num1.value) \* Number(num2.value));
+});
+
+document.getElementById('divide').addEventListener('click', () => {
+if (Number(num2.value) === 0) {
+result.textContent = '0으로 나눌 수 없습니다.';
+} else {
+result.textContent = '결과: ' + (Number(num1.value) / Number(num2.value));
+}
+});
+
+//브라우저 렌더링: HTML → DOM / CSS → CSSOM → Render Tree → Layout → Paint → Composite
+//DOM 조작: 요소 선택 → 내용/속성/스타일 변경 → 추가/삭제
+//계산기: DOM에서 값 가져오기 → 연산 → 결과 표시
+
+//간단 계산기 만들어보기
+
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>간단 계산기</title>
+  <style>
+    body {
+      font-family: sans-serif;
+      text-align: center;
+      margin-top: 50px;
+    }
+
+    #calculator {
+      border: 1px solid #ccc;
+      padding: 20px;
+      display: inline-block;
+      border-radius: 8px;
+    }
+
+    input {
+      margin: 5px;
+      padding: 5px;
+      width: 100px;
+    }
+
+    button {
+      margin: 5px;
+      padding: 10px 15px;
+      font-size: 16px;
+    }
+
+    #result {
+      margin-top: 10px;
+      font-weight: bold;
+    }
+
+  </style>
+</head>
+<body>
+  <div id="calculator">
+    <h2>계산기</h2>
+    <input type="number" id="num1" placeholder="숫자 1">
+    <input type="number" id="num2" placeholder="숫자 2"><br>
+    <button id="add">+</button>
+    <button id="subtract">-</button>
+    <button id="multiply">×</button>
+    <button id="divide">÷</button>
+    <p id="result">결과: </p>
+  </div>
+
+  <script>
+    const num1 = document.getElementById('num1');
+    const num2 = document.getElementById('num2');
+    const result = document.getElementById('result');
+
+    document.getElementById('add').addEventListener('click', () => {
+      result.textContent = '결과: ' + (Number(num1.value) + Number(num2.value));
+    });
+
+    document.getElementById('subtract').addEventListener('click', () => {
+      result.textContent = '결과: ' + (Number(num1.value) - Number(num2.value));
+    });
+
+    document.getElementById('multiply').addEventListener('click', () => {
+      result.textContent = '결과: ' + (Number(num1.value) * Number(num2.value));
+    });
+
+    document.getElementById('divide').addEventListener('click', () => {
+      if (Number(num2.value) === 0) {
+        result.textContent = '0으로 나눌 수 없습니다.';
+      } else {
+        result.textContent = '결과: ' + (Number(num1.value) / Number(num2.value));
+      }
+    });
+  </script>
+</body>
+</html>