728x90 분류 전체보기427 [JS] 셀렉터에 대한 글 셀렉터 document -> 문서인데 여기선 html 웹문서 마침표 -> ~의 getElementById('어쩌구') -> 아이디가 '어쩌구'인 html 요소 (일명 element) 를 찾으라는 의미 html 요소를 찾아주는 셀렉터 = getElementById() getElementsByClassName() querySelector document.querySelector => $ (제이쿼리) 2024. 4. 1. [JS] 까먹은 이벤트 버블링과 이벤트 함수들 이벤트 버블링 어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상 이벤트리스너 안에서 쓰는 이벤트 함수들 이벤트 버블링 막거나 이벤트가 이상하게 동작하는걸 막을 수 있다 document.querySelector('.black-bg').addEventListener('click', function(e){ e.target; e.currentTarget; e.preventDefault(); e.stopPropagation(); }) 이벤트리스너의 콜백함수에 파라미터 아무거나 추가하면 이벤트관련 유용한 함수들을 사용가능 e.target e.target은 실제 클릭한 요소 알려줌 (이벤트 발생한 곳) - 유저가 실제로 누른거 그 클릭한 요소를 알려 줌. e.currentTarge.. 2024. 3. 31. [JS] for문 관련 메모 (2) for 반복문 for (횟수){ 복붙할 코드 } 3회 반복 // 횟수 3회 반복 for (var i = 0; i < 3; i++) { console.log("안녕"); } // i를 0부터 시작해서 / i에 1씩 더해가면서 복붙해라 / 근데 i < 3 까지 0, 1, 2 이렇게 3회 반복 3 - 0 = 3 으로 계산해도 됨. 3 되기 전에 끝내기 for 반복문으로 탭기능 코드 줄여보기 $(".tab-button") .eq(0) .on("click", function () { $(".tab-button").removeClass("orange"); $(".tab-button").eq(0).addClass("orange"); $("tab-content").removeClass("show"); $("tab-co.. 2024. 3. 31. [JS] for문 관련 메모 (1) 준비물 HTML Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping CSS .navbar { position: fixed; width: 100%; z-index: 5; } .navbar-brand { font-size: 30px; transition: all 1s; } /* detail.html */ ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc; } ul.list::after { content: ""; display: block; clear: both; } .tab-button { display:.. 2024. 3. 31. [JS] 스크롤 이벤트 메모 window.addEventListener('scroll', function(){ console.log('안녕') }); 스크롤바를 조작하면 scroll 이벤트가 발생 스크롤바 만질 때 마다 '안녕' 출력 유저가 스크롤 얼마나 했는 지 알아보기 JS - window.scrollY (전체 페이지 스크롤 양) window.addEventListener('scroll', function(){ console.log( window.scrollY ) }); 현재 페이지를 얼마나 위에서 부터 스크롤했는지 px 단위준다.(Y축 기준이니까) window.scrollX 는 가로로 얼마나 스크롤했는지 알려줌 (X축 기준) 현재 페이지를 얼만큼 스크롤했는 지를 알고싶으면 - scrollY 일반 div 박스일 경우에는 .scr.. 2024. 3. 31. [CSS] 마우스 커서 바꾸기 (img) 마우스 커서 바꾸기 (img) body { cursor: url("banner/mcdonaldslogo\ 60.png"), default; } 64x64 이내의 이미지로 설정 바디 태그에 적용. 2024. 3. 29. 이전 1 ··· 28 29 30 31 32 33 34 ··· 72 다음 728x90
