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..e19e84b --- /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,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** + + + + + 계산기_정가인 + + + + +

계산기

+
+ +
+ + + + + + + + + + + + + + + + + +
+
+ + + +**계산.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; +} +