letsgoddud

안녕하세요! 오늘은 저번에 배워본 DOM 요소에 노드 추가하는 방법으로 참가자 신청 명단 프로그램을 만들고, 노드 순서 변경 및 삭제하는 방법을 배워보겠습니다. 1. 참가자 신청 명단 프로그램 만들기 참가자 신청 명단 프로그램 만들기 순서 1. [신청] 버튼에 이벤트 함수 지정하기 2. 이벤트 함수 정의하기 3. 화면에 나타내기 0단계 HTML, CSS 기본세팅 HTML 삽입 미리보기할 수 없는 소스 1단계 [신청] 버튼에 이벤트 함수 지정하기 신청 button 태그에 click 이벤트가 발생했을 때 실행할 newRegister() 함수를 지정합니다. * return false는 입력 내용을 서버로 전송하는 기능을 사용하지 않겠다는 뜻입니다. 2단계 이벤트 함수 정의하기 function newRegist..

안녕하세요! 오늘은 DOM으로 스타일 수정하는 방법과 DOM에 요소 추가하는 방법을 배워보겠습니다. 1. 웹 요소의 스타일 가져와서 수정하기 자바스크립트를 사용하여 스타일 속성 값을 가져오거나 원하는 값으로 수정할 수 있습니다. 그 중에서도 화면에 표시하고 감추는 방법을 풀어보겠습니다. [완성본 미리보기] 웹 요소를 화면에 표시하기 / 감추기 1. [상세 설명 보기] 버튼 만들기 2. [상세 설명 닫기] 버튼 만들기 0단계 HTML, CSS 기본 세팅 1단계 [상세 설명 보기] 버튼 만들기 #view는 [상세 설명 보기] 링크 부분이고, #detail은 상품 상세 정보 입니다. 상품 상세 정보는 처음부터 화면에 가려져 있는 display = none 상태 입니다. view.addEventListener(..

안녕하세요! 오늘은 DOM 요소 예제 문제 풀이와 이벤트 처리하는 방법을 배워보겠습니다. 1. DOM 요소 예제 풀이 - 선택한 상품 이미지 표시하기 선택한 상품 이미지 표시하기 예제 풀이 순서 1. querySelector(),querySelectorAll() 함수를 사용하여 큰 이미지와 작은 이미지 가져오기 2. for문을 사용하여 작은 이미지를 클릭할 때 큰 이미지로 나타나게 실행하기 3. 큰 이미지의 파일 경로 바꾸기 0단계 HTML, CSS 기본 셋팅 1단계 querySelector(),querySelectorAll() 함수를 사용하여 큰 이미지와 작은 이미지 가져오기 큰 이미지는 id="cup", 작은 이미지는 class="small"의 값을 주었습니다. bigPic이라는 변수에 querySe..

문서 객체 모델(DOM) 정의 및 DOM 트리 설명과 DOM 요소 접근 방법 및 수정 방법, 이벤트 처리방법을 배워보겠습니다. 1. 문서 객체 모델(DOM) 이란? 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법입니다. DOM 트리 DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분하기 때문에 이 구조 모습이 나무처럼 생겼다고 해서 DOM 트리라고 불립니다. DOM 트리는 가지와 노드로 표현합니다. 노드(Node)는 그림에서 body, div와 같은 네모상자를 가르키고, 가지는 말 그대로 그림에 보여지는 얇은 선을 가리키며 노드와 노드 사이의 연결 관계를 나타냅니다. div는 h1의 부모 노드이고, h1은 body의 자식 노드 입니다. DOM 트리..