봉보로봉봉

컨텐츠의 갯수를 변수화 01 02 03 04 05 let num = 0; let inter, delta; let count = $('.con').length; // 컨텐츠의 갯수를 변수화 $(window).on('mousewheel', function (e) { delta = e.originalEvent.wheelDelta; clearTimeout(inter); inter = setTimeout(function () { if (delta < 0) { if (num != count-1) num++; // 페이지가 더 넘어가지 않게 하는 조건에 변수 사용 } else { if (num != 0) num--; } $('main').css({ transform: `translateY(-${100 * num}vh..

배울 내용 event (touch, scroll, wheel, drag) > 이런 이벤트들은 api를 활용할 수 있음 디바이스 최적화가 돼서 아주 잘 나오기 때문에 쓰는 것을 추천 string 제어 > 기본이 됨! form 제어할 때 도움이 됨 form 제어 > id pw 체크 storage matchMedia(반응형) ajax(xml, json) canvas .on 여러 이벤트에 걸쳐서 사용 동적인 이벤트에 사용함 $(window).on('mousewheel',function(){ // 마우스 휠을 돌리면 console.log('yup') // 콘솔에 해당 내용을 출력 }); mousewheel scroll하면 페이지가 맞춰서 넘어가게 하기 01 02 03 04 05 main{ color: #d1beb..

브라우저 콘솔에 location.href 를 하면 URL이 나옴 문자열 함수 let num = '1234'; num.length; // 문자열의 길이를 알아낼 때 사용 num.charAt(index); // 문자열의 index번째 문자를 가져옴 num.substr(index, 문자수), // 문자열에서 특정 부분 글자와 문자열의 길이 num.substring(index, index), // 문자열에서 특정 부분만 잘라낼 때 사용하는 메소드 > index부터 index까지 + 문자열 함수 정리 charAt() 문자열.charAt(index) 문자열에서 인자로 넘긴 index의 글자를 반환 let Example = "Hello"; let result = Example.charAt(1); // result는 ..

사용자 속성 data- Tab HOME COMPANY SERVICE HOME PAGE SERVICE PAGE COMPANY PAGE + 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적 데이터 속성의 장점 > 이전과 같이 hidden으로 태그를 숨여두고 데이터를 저장할 필요가 없다는 점 어느 엘리먼트에서나 data-로 시작하는 속성은 무엇이든 사용할 수 있음 한 태그에 여러 데이터 속성을 넣을 수 있음 대소문자 여부에 상관없이 xml로 시작하면 안 됨 세미콜론 포함 안됨 대문자를 포함 안됨 .not() $('.fade div img').not(':first').hide(); // img중에서 첫번째를 제외하고 display:none; $('.fade div img').not(':last').hide(..

li p.active { /*자기 자신의 클래스를 가리킬 때*/ display: block; background-color: #f8e7ee; } li p .active { /*자식 요소의 클래스를 가리킬 때*/ display: block; background-color: #f8e7ee; } js 파일이 html 파일보다 먼저 읽혀서 원하는데로 실행이 안될 때 // 지금 많이 사용하지는 않지만 알고 있기 $(document).ready(function(){ // 문서가 로드된후에 실행 }); $(function(){ //간략하게 쓸 때 }); 안보였다 클릭하면 보이게 하기 .show(); 사용 // 안보였다 클릭하면 보이게 하기 $('.faq li').click(function(){ $(this).find..

좋아요 싫어요 버튼 만들기 증감or감소 0 좋아요 싫어요 좀 더 줄여서 쓰기 실행을 위한 조건문을 만들 때 차이점을 찾아서 그걸로 조건문을 만들기 ex : 컨텐츠의 내용이 다름, 인덱스 번호가 다름, 설정한 클래스 이름이 다름 등등 + num++로 처음하면 값이 이상하게 나오고 ++num해야 원하는 값이 나오더니 다시 num++로 바꾸면 원하는 값이 나온다... 왜지??? 사진 움직이기 //photo 이번엔 class 값 가져오기 let dis = 100; function move(bln) { bln ? dis+=100 : dis-=100; //100씩 움직이기 $('.e-photo figure').css({ transform: `translateX(${dis}px)` //transform을 사용해서 X..

2호선이 잠깐 멈춰서 3분 지각했다 ㅠㅠ 올 퍼펙트 출석하고 싶었는데.... 날짜 바꾸기 const elSetToday = document.querySelectorAll('.set-today li'); let setToday = new Date(); let oneDay = setToday.setDate( setToday.getDate() + 1 ); // 1일 뒤의 시간 setToday = new Date(); let threeHours = setToday.setHours( setToday.getHours() + 3 ); // 3시간 뒤의 시간 elSetToday[0].textContent = new Date(oneDay); // 0번째 에 들어감 elSetToday[1].textContent = new..

array(push, pop, slice, join, concat, splice, shift) date(날짜) +교재보고 훑어보기 number, string, array, object(객체) 열심히 공부~ 소수점 자르기 가위바위보 만들기 switch 문 //숫자 1,2,3에 맞춰서 가위,바위,보를 출력 if (comNum == 1) { comResult = '가위'; } if (comNum == 2) { comResult = '바위'; } if (comNum == 3) { comResult = '보'; } //이런 상황에서는 switch문이 더 가독성이 좋음 switch(comNum){ case 1 : comResult = '가위'; break; //switch문은 계속 실행하기때문에 끝내줘야함 case..