728x90 반응형 JS26 [JS] Select 태그 다루기 Select 태그 는 이랑 동일 선택지를 드랍다운 메뉴로 제공하는 HTML 상품선택 모자 셔츠 95 100 CSS /* 11) Select 인풋 다루기 */ .form-hide { display: none; } 미리 숨겨두기 유저가 셔츠선택하면 form-hide 제거해서 숨겨뒀던 95, 100 보이게 하기. if 문 사용 ( ~ 하면) if (유저가 선택한거 == '셔츠') { $('.form-select').eq(1).removeClass('form-hide'); } $('.form-select').eq(1) 이것 과 동일한 것 95 100 유저가 에서 뭐 선택했는지 아는 방법 document.getElementById('인풋태그찾고').value 인풋태그에서 사용했을 때, 제이쿼리셀렉트 쓰려면 $(".. 2024. 4. 2. [JS] array 와 object 자료형 & 데이터바인딩 (2) 준비물 데이터 바인딩 - 데이터와 화면을 연결 - ex) 가격표 실시간 변경 첫째 상품명(Blossom Dress)을 뽑기 - console.log 로 먼저 찍음 console.log(products); 다음과 같이 나온다 시작기호 보기 [ 시작 - array 그 다음 { - object 3개 HTML에 클래스 부여 Card title 이렇게 셀렉터가 html 요소를 찾기 쉽게 하기위해 클래스를 부여. 또는 document.querySelectorAll(".card-body h5")[0] 이렇게도 쓸 수 있다. document.querySelector(".card-title").innerHTML = products[0]["title"]; 인덱스 (array) 먼저 써주고 순차적으로 이름 (object) .. 2024. 4. 1. [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문 관련 메모 (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. [JS / CSS] 햄버거 언더 메뉴바 만들기 (2) CSS 완성 후 할일 ☆ CSS 작성완료 후 숨겨놨다가 - 숨겨둔 모달을 보여주는 클래스 하나 생성 - 또는 버튼 클릭하면 숨겨둔 모달 보이게 하기. ☆ JS 를 통해서 햄버거모양을 누르면 보이게 해야함. 1) CSS 로 언더바메뉴 숨겨놓기 .under-menu { background-color: #fccf4b; display: none; } 2) 숨겨둔 모달 보여주는 클래스 생성 .show-under { display: block; } 3) 클래스를 떼었다 붙이는 토글 기능을 사용해서 자바스크립트로 작성. document.getElementById("menu-icon").addEventListener("click", function () { document .getElementsByClassName(.. 2024. 3. 26. [JS / CSS] 캐러셀 만들기 (다음 버튼) [JS / CSS] 캐러셀 만들기 (버튼 클릭) (tistory.com) [JS / CSS] 캐러셀 만들기 (버튼 클릭) 캐러셀 만들기 - 버튼 클릭으로 이동 HTML 1 2 3 CSS /* 6) 캐러셀 만들기 이미지 사이즈 일정하게 만들기 */ .slide-box img { width: 100%; height: 300px; } .slide-box { width: 100vw; float: left; } .slide-container { width: 300vw jamongsoda.tistory.com 참고 자료 다음버튼 만들기 1. 다음버튼 누르면 - 다음 버튼을 먼저 찾는다. 2. 지금보이는 사진이 1이면 2번사진 보여주세요 - if 문 활용 3. 지금보이는 사진이 2면 3번사진 보여주세요 지금 보이는 .. 2024. 3. 24. [JS / CSS] 캐러셀 만들기 (숫자 버튼) 캐러셀 만들기 - 버튼 클릭으로 이동 HTML 1 2 3 CSS /* 6) 캐러셀 만들기 이미지 사이즈 일정하게 만들기 */ .slide-box img { width: 100%; height: 300px; } .slide-box { width: 100vw; float: left; } .slide-container { width: 300vw; transition: all 1s; } .slide-box img { width: 100%; } 이미지 사이즈 일정하게 만들기 이미지 브라우저에 꽉 차게 만듦 .slide-box { width: 100vw; float: left; } .slide-container 너비를 300vw로 설정함으로써, 이 컨테이너는 뷰포트의 세 배 너비를 가지게 됩니다. 이는 세 개의 슬.. 2024. 3. 24. 이전 1 2 3 다음 728x90 반응형
