coding with cong

star " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스      DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta http-equiv="X-UA-Compatible" content="IE=edge">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,G..

DOM_event : document영역에서 사용되는 이벤트를 정의 마우스, 키보드, 실행 등 이벤트의 종류는 매우 다양 웹에서 사용하는 이벤트를 기준으로 학습하는 것을 추천 사용 시) addEventListener ( 'eventName',callback Function ) 메서드를 사용하여 구현 권장 addEventListener를 권장하는 이유 : 같은 엘리먼트에 여러 이벤트를 중복 부여 가능, 적용된 이벤트를 선택적 제거가능 메서드를 태그 속성이나, 엘리먼트에 직접 부여하는 방식도 있음 == 마우스 이벤트 == 종류 click(), focus(), blur(), input(), change(), mouseover(), mouseout(), select(), scroll(), load(), drag..

classList속성 element.classList : class 속성의 값은 여러개가 올 수 있으므로 list의 형태로 리턴받음 리턴 타입은 TokenList(리스트의 개수) 즉, 객체이기 때문에 별도의 메소드 사용이 가능! 대표적인 메서드 : add(), contains(), toggle(), remove().. 다른 메서드들은 사용도가 낮음 == 사용 == li1 li2 li3 const ul = document.getElementsByTagName('ul'); console.log(ul); //HTMLCollection(1) console.log(ul[0]); // console.log(ul[0].classList); //DOMTokenList(3) -> ul, list, iter console..

Element의 attribute(속성) 1. 태그의 속성 1. 태그가 갖는 속성이기 때문에 속성명을 그대로 사용 tagName.id , tagName.src 2. class 처럼 여러개의 값을 가질 수 있는 경우, 별도의 속성명을 사용 tagName.classLIst const imgTag = document.getElementById('imgTag'); //img태그의 속성들 id, src, alt, classList 콘솔에 찍어보기 console.log(imgTag.id); //imgTag console.log(imgTag.src); //http://127.0.0.1:5500/image/%ED%86%A0%ED%86%A0%EB%9D%BC.png // 이름이 한글이라 깨짐 = 영어로 저장하는 것을 추천..

가격 : 원 할인율 : % 할인가격 계산 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스    DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta http-equiv="X-UA-Compatible" content="IE=edge">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>할인율title>head>body>    form action="">        가격 : input type="text" id="price"> 원 br>   ..

1. button 안에 onclick을 사용하는 방법 창 열기 function openWindow(){ myWindow = window.open("","mywindow", "width=400, height=500"); // myWindow = open("","mywindow", "width=400, height=500"); //window. 이 없어도 사용은 가능 } 2. document.getElementById('id').addEventListener('click',()=>{ }) document.getElementById('back').addEventListener('click',()=>{ history.back(); }) 3. document.getElementById('id').addEventL..

querySelector() , querySelectorAll() : HTML 노드 (관리객체)로 리턴하는 메서드 getElement**() : HTML Collection으로 리턴 name, id 속성으로 접근 가능 속성 접근시 더 유용, 더 빠르고 많은 지원 받기 가능 element = document.getElementById(id); id를 통해 엘리먼트를 반환한다. 만약 document에 구체적인 ID의 엘리먼트가 없다면 null을 반환한다. querySelector() , querySelectorAll() : NodeList 형태로 리턴 배열, classList 등 여러개의 값 가져오기 사용시 많이 사용 index번호처럼 [0] 번지로 접근 가능 더 구체적인 엘리먼트를 선택하고 싶은 경우 1...