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

cse 23·2024년 4월 3일
0

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()로 제출 막기

0개의 댓글