0. 부트스트랩틀을 가져온다. 1. 데이터에 해당하는 키값을 (가격,상품명등)을 자바스크립트로 조작해줌 2. 배열안에 객체가 있는 경우에는, 배열안에서 그 객체의 순서를 먼저 찾고, 키를 찾는다 products[i]['title'] Card title 가격 : 70000 주문하기 Card title 가격 : 70000 주문하기 Card title 가격 : 70000 주문하기
Javascript
이벤트 버블링이란? 이벤트 전파 라고도 하며, 하위태그를 누르면 상위태그까지 이벤트가 전파되는 현상 마치, 겹친 종이의 가장 가운데를 누른것처럼 1. 이벤트 버블링은 항상 일어남 2. 이벤트 관련 기능들을 사용해서 해결할 수 있음 다양한 이벤트함수들 document.querySelector('.black-bg').addEventListener('click', function(e){ e.target; //실제 클릭한 요소 알려줌 (이벤트 발생한 곳) e.currentTarget; //지금 이벤트리스너가 달린 곳 알려줌 (참고로 this라고 써도 똑같음) e.preventDefault(); //실행하면 이벤트 기본 동작을 막아줌 e.stopPropagation(); //실행하면 내 상위요소로의 이벤트 버블링..
헤드 안에 스크립트로 부트스트랩 깔아주고, 적당하게 탭기능 틀을 만들어주었다 원하는 것은 탭버튼을 눌렀을때 그에 해당하는 콘텐츠div가 등장하는것 Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping 차곡차곡 한글로 쓴뒤 코드로 번역해준다 //0번째 tab-button부터 기능개발 해보자 /*버튼 0 누르면 (코드를 한줄한줄 읽으니까 제거먼저 하고 추가해주는 센스~) - 모든버튼에 붙은 orange 클래스명 제거 - 버튼 0에 orange 클래스명 추가 - 모든 div에 붙은 show 클래스명 제거 - div0에 show 클래스명 추가 */ $('.tab-button').eq(0).on('click',fu..
//스크롤바 100px 이상 내리면 로고폰트사이즈 줄이기, 단 100px 미만이면 다시 키우기 window.addEventListener('scroll',function(){ if(window.scrollY > 100){ $('.navbar-brand').css('font-size','15px'); }else{ $('.navbar-brand').css('font-size','25px'); } }); 상자박스의 스크롤을 다 내렸을때, 알림을 띄우려면? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptas voluptatum minus praesentium fugit debitis at, laborum ipsa itaque place..
이미지 슬라이드 만드는 순서는 다음과 같다. 1. 먼저 html 과 css로 이미지를 만들어준다. 2. 자바스크립트로 버튼을 누르면 화면이 옮겨지는 기능을 추가한다 참고로, 아래 기능은 화면이 흘러넘칠때 자동으로 생기는 스크롤을 없애준다 -html 1 2 3 -javascript css 에서 클래스를 탈부착하는 방식으로 화면을 이동시킬수도 있지만, 이동시키는 값 ( 'translateX(-100vw)' => 굵은글씨)을 항상 변화시키려고 하기 때문에 자바스크립트를 사용해보겠다 100vw는 현재브라우저 화면이 꽉찬 폭이다. 따라서 -100vw 면 현재 화면 폭만큼 왼쪽으로 이동한다는 의미이다 //1번 버튼 클릭시 1번사진이 보이는 transform 기능을 추가해주세요 $(".slide-1").on('cli..
/정규식/.test(정규식으로 검사해볼문자) /abc/.test('abcdef') 아무 문자나 뒤에 .test() 붙일 수 있습니다. 그럼 문자에 찾을 단어가 들어있는지 검사해주고 있으면 true / 없으면 false 남겨줍니다. $('form').on('submit',function(e){ var 입력한값 = document.getElementById('email').value; if ( /\S+@\S+\.\S+/.test(입력한값) ){ alert('이메일형식아님') e.preventDefault(); } }); 1. 제출버튼을 눌렀을때 변화가 생기도록 2. 입력한 값을 먼저 변수에 담아주고 3. 입력한 값을 test()에 담아 검증 4. 알림창띄움 5. 다음페이지로 넘어가기 방지 문제: 폼 전송시 ..
(힌트) 5라는 문자만 5 이걸로 감싸면 html 조작하기 쉬워집니다. 변수 초기값을 먼저 밖에 선언하고, 변수가 얼마씩 줄어들지 알려줌 변수가 0보다 클때까지 카운트 다운 선언 setInterval() 함수는 몇초마다 변화를 일으킬때 자주 쓰임! 5초 이내 구매시 사은품 증정 (참고) 타이머를 삭제하고 싶으면 var 타이머 = setInterval(어쩌구); 이렇게 변수에 저장해둔 다음 타이머 삭제하고 싶을 때 clearTimeout(타이머) 이 코드 실행하면 됩니다.
Hello, world! // //1. html,css 로 미리 디자인 //2. 버튼 누르면 보여주셈
