kebab00's

- 위의 페이지처럼 시간이 지나면 사진이 좌우로 바뀌는 스크립트입니다. - 하지만 저번에 했던 것과 다른 점이 있는데 그건 바로 첫번째 것으로 돌아가는 것이 아니라 마지막 사진 뒤에 첫번째 사진을 복사해두어서 끊김이 없게 한다는 것입니다. - 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다. - 스크립트 코드를 같이 보시죠 선택자 - 이번에도 필요한 선택자와 전역변수들을 하나로 모아놨습니다. - 오랜만에 보는 것이 있다면 요소의 width 값을 가져오는 clientWidth가 있겠습니다. - 그리고 let sliderClone = sliderInner.firstElementChild.cloneNode(true); 를 사용해서 첫번째 이미지를 복사해주었습니다. Ja..

- 위의 페이지처럼 시간이 지나면 사진이 상하로 바뀌는 스크립트입니다. - 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다. - 스크립트 코드를 같이 보시죠 - 아 이번에는 css에서 바뀐 점이 하나 있는데 바로 사진들을 가로가 아닌 세로로 세워놔야한다는 것입니다. - 그래서 display:flex를 주지 않았습니다. 선택자 - 선택자와 전역변수들을 하나로 모아놨습니다. Javascript - 먼저 javascript입니다. - 전에 했던 것과 거의 비슷합니다. 이번엔 X축이 아니라 Y축으로 사진의 높이 만큼이동해주면 됩니다. - setInterval 함수를 사용해서 정해진 시간마다 함수가 실행되게 해주었습니다. - currentIndex = (currentInd..

- 위의 페이지처럼 시간이 지나면 사진이 좌우로 바뀌는 스크립트입니다. - 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다. - 스크립트 코드를 같이 보시죠 선택자 - 선택자와 전역변수들을 하나로 모아놨습니다. Javascript - 먼저 javascript입니다. - setInterval 함수를 사용해서 정해진 시간마다 함수가 실행되게 해주었습니다. - currentIndex = (currentIndex + 1) % sliderCount;으로 이미지의 인덱스 값을 구해서, sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)" },sliderInterval);로 sliderInner에게 ..

- 위의 페이지처럼 시간이 지나면 사진이 바뀌는 스크립트입니다. - javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다. - 스크립트 코드를 같이 보시죠 Javascript - 먼저 javascript입니다. - setInterval 함수는 정해진 시간마다 함수를 실행시키는 방법입니다. sliderInterval 변수에 3000이라는 값을 주고 3초마다 함수가 실행되어 다음 이미지가 보이도록 합니다. - let nextIndex = (currentIndex + 1) % sliderCount;으로 다음 이미지의 인덱스 값을 구해서, 투명도를 설정하는 opacity 를 이용해서 slider[currentIndex] (현재 보이는 이미지)를 투명도를 0으로 만들어서 안 보이게 합니..

- 자 오늘도 어제와 같은 페이지를 진행을 해보겠습니다. - 숙제로 추가한 부분들을 볼 건데요 일단 시간이 가는데 그 시간이 초가 1의 자리일 때 0이 들어가서 자리 수를 맞춰주는 것과 - 점수를 매겨주는 것 - 이름을 입력했을 때 이름 값을 가져오는 3가지를 했습니다. - 코드를 같이 보시죠 // 입력한 이름을 가져오기 -- 시작버튼을 누르면 작동되는 함수 안에 추가 cbtName.innerText = `${yourName.value}`; // 점수 표시 ------------------------------ // 전역변수 추가 let quizScore = 0; //제출하기 창을 누르면 작동되는 함수 안에 추가 // 정답을 맞추었을 때 quizScore더해주기 반복문 안의 if문에 추가 if(numbe..

- 자 오늘도 어제하던 것을 마저 해봅시다. - 오늘은 추가한 것들은 바로 omr과 문제보기의 value값을 통일시켜서 하나를 눌러도 양쪽에서 표시가나게 해주었고, 문제를 하나씩 풀 때마다 남은 문제의 수가 하나씩 줄어들게 해주었습니다. 그리고 창이 켜졌을 때 문제풀기 버튼을 띄워주는 것등을 하였습니다. - 추가된 코드를 같이 보시죠 기능사 시험 시작하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 200..