JavaScript (98) 썸네일형 리스트형 17장 마무리 문제 1 DOCTYPE html> 마무리 문제 1 ul { list-style:none; } li{ font-size:20px; line-height:35px; } .check { color:#999; font-size:20px; margin-right:25px; } 할일 목록 ✓할일 1 ✓할일 2 ✓할일 3 ✓할일 4 ✓할일 5 var allcheck =document.querySelectorAll(".check"); for (let i=0; i 17장 예제 - DOM에서 노드 삭제하기 / 실습 3 - 삭제해야 할 노드가 있다면 반드시 부모 노드 먼저 찾아야 함 - 노드를 삭제하는 메서드와 부모노드를 찾는 프로퍼티 필요 1. parentNode 프로퍼티 - 현재 노드의 부모 노드에 접근해서 부모 노드의 요소 노드를 반환 - 노드.parentNode 2. removeChild() 메서드 - 자식 노드를 삭제하는 역할 - 부모노드.removeChild(자식 노드) -실습 3 - 입력한 항목을 클릭하여 삭제하기 DOCTYPE html> 입력한 항목을 클릭하여 삭제하기 * { box-sizing:border-box; } #container { width:500px; margin:20px auto; padding:20px; } input[type="text"] { width:370px; float:left;.. 17장 실습 2 DOCTYPE html> 텍스트 필드에 입력한 값을 화면에 표시하기 * { box-sizing:border-box; } #container { width:500px; margin:20px auto; padding:20px; } input[type="text"] { width:370px; float:left; height:30px; padding-left:30px; } button { width:90px; height:30px; float:right; background:#222; color:#fff; border:none; } hr {clear:both; display:none}; ul {list-style-type:none; padding-top:50px;} li { line-height:2.5; li.. 17장 예제 -DOM에서 노드 추가하기 1. 노드리스트 - DOM에 접근할 때 querySelectorAll()메서드를 사용하면 노드를 한꺼번에 여러 개 가져 올 수 있음 - 이때 노드 정보를 여러 개 저장한 것 => 노드리스트 - 배열과 비슷해서 인덱스 번호로 특정 위치의 노드에 접근할 수 있음 web Programing HTML CSS Javascript 2. 텍스트 노드를 사용하는 새로운 노드 추가하기 -createElement() 메서드 -요소 노드 만들기 -document.createElement(노드명); - createTextNode() 메서드 - 텍스트 노드 만들기 - document.createTextNode(텍스트); -appendChild() 메서드 -자식 노드 연결하기 -부모노드.appendChild(자식노드) - 링크를.. 17장 실습 DOCTYPE html> 라이트 박스 효과 만들기 .row { width:420px; margin:0 auto; } .row ul { list-style:none; margin:0; padding:0; } .row ul li{ display:inline-table; } #lightbox { position:fixed; width:100%; height:100%; background-color:rgba(0,0,0,0.7); top:0; /*시작 위치 -위쪽 끝*/ left:0; /*시작 위치- 왼쪽 끝*/ display:none; /*화면에서 감추기*/ } #lightbox img { position:absolute; /*top, left에 의해 위치지정*/ top:50%; /*위쪽에서 50% 부터 */ .. 17장 예제 - DOM에서 이벤트 처리하기 (2) 1. addEventListener() 메서드 - addEventListener()메서드와 event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 사용 가능 - addEventListener(이벤트, 함수, 캡처 여부); 1) 이벤트 - 이벤트의 유형을 지정 - 단, click과 keypress처럼 on을 붙이지 않고 씀 2) 함수 - 이벤트가 발생하면 실행할 명령이나 함수 지정 - 여기에서 함수를 정의할 때는 event 객체를 인수로 받음 3) 캡처 여부 - 기본값 false true와 false 중에서 선택가능 - true= 캡처링 = 부모 노드에서 자식 노드로 전달되는 것 - false=버블링= 자식 노드에서 부모 노드로 전달되는 것 - 마우스 포인터를 올리면 이미지 바꾸기 DOCTYPE.. 17장 예제 - DOM에서 이벤트 처리하기 (1) 1. DOM 요소에 함수 직접 연결하기 - 이벤트 처리기 함수가 간단하다면 DOM 요소에 직접 연결 가능 - 이미지를 클릭하면 알림 창 표시하기 DOCTYPE html> 이미지를 클릭하면 알림창 표시하기 #container { width:300px; margin:10px auto; } var cup = document.querySelector("#cup"); //id=cup 요소를 가져옴 cup.onclick = function(){ alert("이미지를 클릭했습니다"); } 2. 함수 이름을 사용해 연결하기 -이벤트가 발생했을 때 실행할 함수를 따로 정의해놓았다면 함수 이름을 사용해 연결할 수 있음 - 이 경우에는 함수 이름 다음에 괄호(())를 추가하지 않음 -이미지를 클릭하면 함수 실행하기 DOCT.. 17장 예제 - DOM 요소에 접근하고 속성 가져오기 (3) - setAttribute() 메서드 - 원하는 속성값으로 지정가능 - setAttribute("속성명","값") - 작은 이미지를 클릭하면 큰 이미지 자리에 표시하기 DOCTYPE html> 이미지 속성 가져오기 #container { width:600px; margin: 0 auto; } #prod-pic, #desc { float:left; /*왼쪽에 배치*/ } #prod-pic { margin:20px 20px auto 10px; padding:0; } #cup { box-shadow:1px 1px 2px #eee; /*수평,수직,흐림,색상*/ outline:1px dashed #ccc; /*border 바깥 부분에 테두리를 하나 더 두르는 부분 */ outline-offset:-7px; /*b.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 13 다음
