Hello world Hello world

문제 1) 이미지 CSS left: 0 , -100%, -200%, -300% 배열 제이 쿼리 작성 이미지 //슬라이드 가로로 배열 - .each()를 사용해서, 각가의 이미지에 left 값 0%, 100%, 200%, 300% 값을 넣어준다 - indicatorHtml +=''+(i+1)+''; 은 html의 값을 넣어준다 //슬라이드 이동 함수 - .animate 값으로 슬라이드를 이동할 수 있게 해준다 - index의 값을 currentIndex에 저장한다 - updateNav() 는 뒤에 슬라이드 이동버튼을 작성하며 만들 예정인 함수이다 - updateNav() 역할은 슬라이드 이동 버튼의 맨 처음과 맨 끝을 사라지게 하는 기능을 한다 2) 좌우 슬라이드 버튼 구현 3) 아래 흰점 구현(클릭시 해..

문제 - 4개의 이미지가 3.5초마다 변경되어 화면에 출력 된다 jQuery - 자동으로 3.5초마다 이미지 변경 var timer = undefined; //타이머의 값을 undefined(지정되어 있지 않다)라고 지정합니다. >> undefined; 저장하지 않고 실행하게 되면 3.5초 처럼보이다가 이미지가 빠르게 넘어가게 된다 - 마우스를 이미지에 올렸을 때 정지, mouseleave 다시 이미지 3.5초마다 변경

제이쿼리 문제 제이 쿼리 css로 구현 css 구현 VS 제이쿼리 구현 방식 - css의 transition은 GPU를 사용 - 제이쿼리는 CPU를 사용 >> 구형 스마트폰 구현시 css작성을 선호

자주 사용하는 실행 시점 - 특정 요소에 마우스 포인터를 올려 놓은 시점 - 특정 요소에 마우스 포인터가 벗어나는 시점 - 특정요소를 클릭하는 시점 - 마우스를 움직이는 시점 - 창 크기가 바뀌는 시점 - 스크롤 시점 실행 지점 제어 - event종류 - mouseover 마우스가 올라왔을 때 - on메서드, bind('click'... → .on .off >> bind는 사용하지 않는 추세, on메서드 사용 $('선택자').on('이벤트 종류‘ 할 일); - 할 일 → 임의 함수 → function( ){ } - $('선택자‘).on('mouseover' function( ){ }); - hover처럼 마우스가 밖으로 나가도 변경되지 않는다 - 따라서 별도로 마우스가 나가도 변경되도록 한다 (mouse..

시작 code.jquery.com - jQuery 3.x와 jQuery 2.x는 익플로러9에서 작동을 안함 (2018년 기준) - jQuery 1.x버전 선택 - 위에 내용을 모드 로드한 후에 jQuery가 잃을 수 있도록 한다 $(‘h1').css({’color':'red'}); - h1에 모든({ }) css속성 color을 red로 변경 하겠다({ }는 하나 이상의 선택,모두,전부 뜻) 결과 확인 jquery 선택자 CSS 변경하기 - css( )라는 명령은 JavaScript에 정의도어 있지 않은 jQuery의 명령 ※ jQuery의 js 파일안에 css( )라는 명령이 정의되어 있고, 해당 명령을 main.js에서 이용한다 이러한 jQuery 명령을 jQuery 메서드 라고 한다 - 명령 대상:..