낭고의 개발노트

Slideshow 🙾 slidesCount = slides.length - 각 슬라이드 갯수 변수 지정 🙾 슬라이드를 이동 할 때는 함수가 필요 🙾 JS 내용 생성 - 대상.innerText = '내용' - 대상.innerHTML = '내용' 🙾 크로스브라우징 (modernizr.com) ▏상단메뉴 고정 - 대상.offsetLeft - 대상.offsetTop (상단에서의 거리) - 스크롤양 확인 : window.document.documentElment.scrollTop; window.pageYOffset; // deplicated window.scrollY; ▏scroll menu - 스크롤양 확인 : 대상.scrollTo(0,0) 대상.scrollTo({ left:0, top:0, behavior:'..

Accordion (아코디언) //.panel-question let question = document.querySelectorAll('.panel-question'); /* question을 클릭하면 모든 question에서 active를 제거하고 클릭한 그 요소에만 클래스명 active을 추가 */ question.forEach(item=>{ item.addEventListener('click',(e)=>{ for(let list of question){ list.classList.remove('active'); } e.currentTarget.classList.add('active'); }) }); //변수명 closeBtn에 collapse all을 지정하고 closeBtn을 클릭하면 모두 접는..

event (이벤트) 🙾 대상.addEventListener('이벤트종류', 할 일) 🙾 이벤트 종류 - mouseover, mouseout, mouseenter, mouseleave - click - scroll - change (= input, select, radio, checout을 변경 할 때) 🙾 사이에 ex) 변수 mypara에 p태그 mouseover시 배경색 silver로 저장(할당) var mypara = document.querySelector('.container p'); mypara.addEventListener('mouseenter', function(){ console.log('이벤트 발생'); mypara.style.backgroundColor = 'silver'; }); m..

Selector (선택자) 🙾 selector의 스타일 변경하는 방법 - 대상.style.css속성명 = '값'; ▏Id명 선택하는 방법 - document.getElementById('아이디명') /* 선택하는 방법(아이디명) document.getElementById('아이디명') */ //list1 -> 글씨색 blue document.getElementById('list1').style.color = 'blue'; ▏Tag명 선택하는 방법 - document.getElementsByTagName('태그명') - JS에서 무조건 복수로 인식되어 배열로 잡히기 때문에 인덱스 필수 (= 유사배열) /* 선택하는 방법(태그명) document.getElementsByTagName('태그명') */ Bas..