zim's growth dairy

a.textContet를 사용하여 a의 텍스트를 변경해주었다. b.value를 사용하여 value 값을 변경해주었다. var a = document.querySelector('#responsive-nav > .navbar-nav > .active + li >a'); console.log(a); a.textContent="cold"; var b = document.querySelector('.header-search .input-select +.input'); console.log(b); b.value = "123"; var c = document.querySelector('.logo img'); console.log(c); 로고의 이미지를 클릭할때마다 변경하고자 했다. 클릭하면 number의 숫자가 커지..

addEventListener 종류 addEventListener는 웹 페이지가 사용자의 행동에 동적으로 반응하도록 하거나, 특정 조건에서 특정 코드를 실행하려는 경우로 주로 사용한다. 지정한 이벤트가 발생하면 addEventListner에 등록된 함수가 실행된다. 객체.addEventListener('이벤트',함수); click 마우스 클릭 했을 때 dbclick 더블 클릭 했을 때 mousedown 마우스 버튼을 누르고 있을 때 mouseup 마우스 버튼을 눌렀다 놓았을 때 dragdrop 마우스 버튼을 누른 상태에서 움직일 때 mouseover 마우스 커서가 지정영역 위로 올라올 때 mouseout 마우스 커서가 지정영역을 벗어났을 때 mousemove 마우스를 움직일 때 load 브라우저에서 문서..

셀렉터의 종류 getElementById ID를 기반으로 HTML 요소를 선택한다. 하나의 특정 요소만을 선택할 수 있다. (ID는 HTML 내에서 유일하기때문) getElementsByClassName 클래스 이름을 기반으로 HTMl 요소들을 선택한다. 같은 클래시 이름을 가진 모든 요소를 선택 getElementsByClassName 태그 이름을 기반으로 HTML 요소들을 선택한다. 같은 태그 이름을 가진 모든 요소를 선택할 수 있다. qeurySelector CSS 셀렉터를 기반으로 선택. 선택 가능한 첫번 째 요소를 선택 qyertSelectorAll CSS 셀렉터를 기반으로 선택 가능한 모든 요소를 선택한다. (배열로저장됨) 노드(Node) : DOM(Document Object Modle)에서..

https://themewagon.com/themes/ministore/ https://themewagon.github.io/MiniStore/ Ministore 100% secure payment Rem Lopsum dolor sit amet, consectetur adipi elit. themewagon.github.io HTML HOME SERVICES PRODUCTS WATCHES SALE BLOG PAGES ▼ ABOUT BLOG SHOP CART CHECKOUT SINGLE POST SINGLE PTODUCT CONTACT TECHNOLOGY HACK YOU WON'T GET SHOP PRODUCT FREE DELIVERY Consectetur adipi elit lorem ipsum dolo..

HTML grocery bud submit clear items CSS /* =============== Fonts =============== */ @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); /* =============== Variables =============== */ :root { /* dark shades of primary color*/ --clr-primary-1: hsl(205, 86%, 17%); --clr-primary-2: hsl(205, 77%, 27%); --clr-primary-3: hsl(205, 72%, 37%); --clr-primary-4: hs..

요소 삭제 설명 및 특징 removeChild() 요소를 제거해 주는 메서드이다. 부무요소.removeChild(자식 요소) 속성 추가 및 제거 설명 및 특징 getAttribute() 요소의 속성 값을 취득할 수 있다. setAttribute() 요소의 속성을 설정할 수 있다. removeAttribute() 요소의 속성 값을 제거할 수 있다. HTML 요소생성 1. 요소생성 버튼 클릭 전 요소생성 버튼을 클릭하면 html 구문을 추가하도록 구성하였다. 하지만 요소 생성 버튼을 클릭 하기 전에는 html 구문이 추가되지 않은 것을 볼 수 있다. 2. 요소생성 버튼 클릭 후 요소생성 버튼을 클릭하면 html구문이 추가된 것을 볼 수 있다. 속성은 태그 안에 들어가는 것이다. ex) * text는 속성이 ..

HTML 여행 준비물 점검 목록 추가 JS var itemlist=[]; var addbtn = document.querySelector('#add'); //#add 버튼 클릭하면 이벤트 발생 addbtn.addEventListener("click",addlist); /*추가 */ function addlist(){ var item = document.querySelector('#item').value; //input 안의 값이 item 변수에 넣음 (=.value) // console.log(item); item변수에 값이 잘 들어갔는지 확인 if(item != null){ /*입력 받은 변수의 값이 있는지 없는지 검사 : 유효성검사*/ itemlist.push(item); //배열에 변수의 값을 추가..

3.1 긱본형식 및 적용방법 적용 방법 위치 태그 설명 및 특징 문서 내부 JavaScript function test(){ var encodeStr='자바스크립트'; console.log(encodeURIComponent(encodeStr)); //인코딩한걸 콘솔에 출력 var decodeStr=encodeURIComponent(encodeStr); //인코딩한것을 변수에 담음 console.log(decodeURIComponent(decodeStr)); //변수에 담긴 인코딩된 데이터를 디코딩을 사용하여 원상태로 복구해 콘솔 출력 var num1='숫자'; if (!isNaN(num1)){ console.log('숫자'); } else{ console.log('숫자아님'); } var num2=1/0..