coding with cong

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...

HTML 삽입 미리보기할 수 없는 소스 DOCTYPE html> 여행준비물 점검 목록 @font-face { font-family: 'KCCChassam'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCCChassam.woff2') format('woff2'); font-weight: normal; font-style: normal; } body{ font-family: 'KCCChassam'; } form{ width: 500px; margin: auto; margin-bottom: 0; text-align: center; } h1{ text-align: center; } /* 입력받는 부분 */ div>form{ p..

history 객체 브라우저의 저장소를 기반으로 하기 떄문에! 보안이쓔로 접근방어 해놓는 경우, 작동하지 않을 수도 있음 history.back() : 이전 방문 페이지로 이동 back document.getElementById('back').addEventListener('click',()=>{ history.back(); }) history.forword() : 다음 방문한 페이지로 이동 forword document.getElementById('forword').addEventListener('click',()=>{ history.forward(); }) history.go(number) : number번째 페이지로 이동 history.go(-2) : 이전페이지로 이동 back forword go(..

DOM ( Document Object Model ) : 문서(html) 객체 모델 '' 하위 태그 : 각각의 기능(Method), 속성(properties)를 갖고 있는 문서 객체 특징 getElements로 가져오는 객체는 우선적으로 HTMLCollection의 index를 선택해야 함 = 배열처럼 사용 == 엘리먼트 가져오기 == tag의 값을 element로 가져오는 메서드 = byId, byClassName, byTagName document.getElementById( 'idName' ) :단일 엘리먼트 리턴 (id는 한개뿐임으로) h1 const h1 = document.getElementById('h1'); console.log(h1); document.getElementByClassNam..

location 객체 : 브라우저의 주소표시줄 입력에 관련된 객체 location.href = 'url' ; : 해당 url로 이동 히스토리 객체에 이동 정보를 저장함 = 뒤로가기 가능 href 사용 이동 (네이버) document.getElementById('href').addEventListener('click',()=>{ location.href='https://www.naver.com/'; }) location.replace('url'); : 해당 url로 이동 히스토리 객체에 이동 정보를 저장하지 않음 = 뒤로가기 불가능 replace 사용 이동 (다음) document.getElementById('replace').addEventListener('click',function(){ locatio..

setInterval ( callback function, interval duration ) : duration(mullisecond)를 주기로 지속적으로 callback function 호출 clearInterval(할당받은 객체)로 중지 DOCTYPE html> setInterval method h1{ background-color: brown; color: white; } 시작 끝 냠냠 let intervalObj; //함수반복 실행 setInterval function flashColor(){ intervalObj = setInterval(changeColor, 1000); } //함수 반복 해제 clearInterval function stopColor(){ clearInterval(inter..

setTimeout ( callback function , duration ); : duration 시간 후에 callback function 실행 setTimeout을 할당한 객체를 clearTimeout(할당한 객체)로 취소가 가능 사용 - 버튼을 누리면 3초 후에 나타나는 setTimeout 설정 1초 = 1000 millisecond / 3초 = 3000 시작 끝 3초후 글자 등장 let timeObj; //timeout을 설정할 객체 //글자를 변경하는 함수 function myFun(){ document.getElementById('result').innerText = "등장했다. 3초뒤. 글자"; } //시작 (setTimeout) document.getElementById('start')...