코딩 자율학습 HTML + CSS + 자바스크립트 12~13장

12장. 문서 객체 모델과 이벤트 다루기

12.1 DOM 이해

• DOM(Document Object Model): 트리 구조 형태의 문서 구조 표현 방식

• 노드 타입

  • 문서 노드: document
  • 요소 노드: <h1>, <p> 등
  • 속성 노드: href, src
  • 텍스트 노드: 태그 안의 텍스트
  • 주석 노드: <!-- 주석 -->

노드 선택 메서드

• getElementById(), getElementsByClassName(), getElementsByTagName()
• querySelector(), querySelectorAll() (CSS 선택자 기반)

---

12.3 노드 조작

• 내용 변경

  • textContent: 모든 텍스트 접근
  • innerText: 화면에 표시되는 텍스트
  • innerHTML: 태그 포함한 HTML 구조

• 스타일 변경

  요소.style.color = "red";

• 데이터 속성 조작

  • data-* 속성 사용 (element.dataset.속성명)

---

12.4 노드 추가/삭제

• 노드 삭제

  부모.removeChild(자식);

---

12.5 폼 조작

• document.forms → 모든 <form> 요소 접근
• 체크박스, 라디오 버튼, 콤보박스, 파일 업로드 등

---

12.6 이벤트 다루기

• 종류:

  • 마우스, 키보드, 포커스, 폼, 리소스 등

• 등록 방법

  • 인라인 방식: <button>

  • 프로퍼티 리스너: element.onclick = 함수

  • 메서드 방식:

    element.addEventListener("click", 함수);

---

12.7 이벤트 객체 & this

• 이벤트 객체: 이벤트 발생 시 자동 전달됨

  element.addEventListener("click", function(e) {
    console.log(e.target);
  });

• 기본 동작 취소

  event.preventDefault();

• this 사용

  • 이벤트 핸들러 안에서 this는 해당 이벤트가 발생한 요소를 가리킴

---

13장. HTML + CSS + JS 프로젝트

13.2 헤더 영역

• 실제 검은 배경이 아닌, 메인 영역 때문에 어두워 보이는 경우 있음

13.3 메인 영역

• 각자 기준에 따라 구성 가능

---

13.4 ~ 13.5 섹션 구성

• About Me, What I Do: 제목 + 본문
• display: flex 등으로 수평 3분할 가능

---

13.6 배경 영역

<div class="bg"></div>

---

13.7 ~ 13.8 포트폴리오 & 연락 섹션

• section 태그로 각 영역 구성
• 연락 영역은 form, input, button 등 활용

---

13.9 반응형 코드

• 미디어 쿼리 사용

  @media (max-width: 768px) {
    /* 작은 화면용 CSS */
  }

---

13.10 자바스크립트 적용

• 텍스트 삭제 효과

  let text = "Hello";
  let index = text.length;
  
  const interval = setInterval(() => {
    document.querySelector("#target").textContent = text.substring(0, index--);
    if (index < 0) clearInterval(interval);
  }, 200);

---

13.11 유효성 검사

• form 제출 시 유효성 조건 체크
• 조건 불충족 시 alert 또는 preventDefault()로 제출 막기