hyejeong 코딩

패럴렉스 이펙트 - 메뉴 효과 HTML Javascript Parallax Effect01 패럴렉스 이펙트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section01 늘 이걸 명심하라. 그 무엇보다 성공하겠다는 결의가 중요하다. 02 Section02 모든 진보는 안전 구역 밖에서 이루어진다. 03 Section03 성공이란 실패에 실패를 거듭하면서도 열의를 잃지 않는 것이다. 04 Section04 늘 이걸 명심하라. 그 무엇보다 성공하겠다는 결의가 중요하다. 05 Section05 더 열심히 일하면 할수록 운이 더 좋아진다는 것을 알게 된다. 06 Section06 더 나은 것을 위해 좋은 것을 포기하는 걸 두려워 하지 마라. 07 ..

버튼과 썸네일을 누르면 해당 이미지로 바뀌는 이미지 슬라이드를 만들었습니다. HTML Javascript Slider Effect07 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next hyejeong3283@gmail.com CSS SCRIPT let images = [ "./img/sliderEffect02-min.jpg", "./img/sliderEffect03-min.jpg", "./img/sliderEffect06-min.jpg", "./img/sliderEffect09-min.jpg", "./img/sliderEffect10-min.jpg" ]; images라는 변수에 각 이미지 파일 경로를 문자열로 표현하여 배열 형태로 저장했습니다. 함수 image..

움직이는 이미지 슬라이드에 양쪽에 버튼과 하단에 닷 메뉴를 넣었습니다. 양쪽 버튼을 누르면 방향따라 이미지가 넘어가고 하단의 점을 누르면 해당 순서의 이미지로 바뀝니다. HTML Javascript Slider Effect06 슬라이드 이펙트 : 이미지 슬라이드(버튼, 닷메뉴) 1 2 3 4 5 6 7 prev next CSS SCRIPT 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 ..

위로 연속적으로 이미지를 움직이는 슬라이드를 만들었습니다. 마지막 이미지가 나온 후 다시 첫번째 이미지부터 보여주기를 반복합니다. HTML Javascript Slider Effect05 슬라이드 이펙트 : 위로 움직이기(연속적으로) 1 2 3 4 5 6 hyejeong3283@gmail.com CSS 위로 움직이는 이미지 슬라이드를 만들기 위해 이미지 height(이미지 세로값)을 520px로 맞추었습니다. 모든 이미지가 들어갈 슬라이드 영역의 height(세로값)은 3120px로 맞추었습니다. SCRIPT 선택자 javascript HTML 코드에서 slider__wrap, slider__img, slider__inner, slider 클래스를 가진 요소들을 변수에 할당합니다. 그리고 이미지 변경 간..

좌측으로 연속적으로 이미지를 움직이는 슬라이드를 만들었습니다. 마지막 이미지가 나온 후 다시 첫번째 이미지부터 보여주기를 반복합니다. HTML Javascript Slider Effect04 슬라이드 이펙트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 hyejeong3283@gmail.com CSS SCRIPT 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역 const sli..

여러 이미지를 저장해 위로 움직여 이미지를 보여주는 페이지를 만들었습니다. HTML Javascript Slider Effect02 슬라이드 이펙트 : 위로 움직이기 1 2 3 4 5 6 hyejeong3283@gmail.com CSS SCRIPT 선택자 // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역 const slider = sliderWrap.querySelectorAll..

여러 이미지를 저장해 좌로 움직여 이미지를 보여주는 페이지를 만들었습니다. HTML Javascript Slider Effect02 슬라이드 이펙트 : 좌로 움직이기 1 2 3 4 5 6 hyejeong3283@gmail.com CSS script 선택자 // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역 const slider = sliderWrap.querySelectorAll..

여러 이미지를 저장해 슬라이드 형식으로 이미지를 보여주는 페이지를 만들었습니다. HTML Javascript Slider Effect01 슬라이드 이펙트 : 트랜지션 효과 1 2 3 4 5 6 hyejeong3283@gmail.com CSS SCRIPT 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = sliderWrap.querySelectorAll(".slider"); let currentIndex = 0; // 현재 보이는 이미지 let sliderCount = slider.length; // 이미지 갯..

추가내용 점수 나오는 모달창 추가 첫 모달창에 이름을 입력하면 수험자 이름영역에 출력하기 카운터되는 시간이 1자리 수가되면 앞에 0붙이기 완성 화면 HTML Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 제출하기 59분 10초 수험자 : 이혜정 전체 문제수 : 0문항 남은 문제수 : 0문항 기능사 시험 시작하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사..

완성 화면 HTML Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 제출하기 59분 10초 수험자 : 이혜정 전체 문제수 : 0문항 남은 문제수 : 0문항 기능사 시험 시작하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 2008년 2회 정보처리기능사 2008년 4회 정보처리기능사 2008년 5회 정보처리기능사 2009년 1회 정보처리기능사 2009년 5회..