JAVASCRIPT 47

set()을 이용해 중복없이 랜덤으로 로또 번호 생성하기 문제풀이

※set()을 이용해 중복없이 랜덤으로 로또 번호 생성하기 전체 소스 로또 번호 생성기 번호 생성 javascript ·우선 그곳에 값을 가져오거나 넣기위해 선택자를 만들어 줍니다. ·addEventListener()의 이벤트함수를 이용해 lottoBtn을 클릭했을때 함수가 실행 되도록 하였습니다. · set 변수하나를 만들어 new Set() 저장해준후 for문을 이용하여 변수안에 45개의 번호를 랜덤으로 6개 넣어줍니다.(이때 Set() 에 의해서 중복되는 값은 나오지 않게 됩니다.) ·randomNum 변수를 하나 더 만들어 Array.from()을 이용해 set을 배열로 변환하여 저장 해줍니다. ·randomNum를 forEach()함수로 실행해서 값(num)과 인덱스값(i)을 가져옵니다. ·조건..

JAVASCRIPT 2023.04.16

10초마다 json에 담긴 명언 하나를 랜덤으로 가져오기 문제풀이

※10초마다 json에 담긴 명언 하나를 랜덤으로 가져오기 전체 소스 명언 모음집 명언 - javascript ·텍스트를 넣을 곳을 querySelector을 이용하여 선택자로 만들어 가져옵니다. ·datawisesaying함수를 만들어 fetch를 통해 josn의 파일을 가져오고 then을 통해 파일을 res로변경후 res.json()으로 자바스크립트의 객체로 변경하고 dtas로 이름을 변경하여 쓸 수 있게 해줍니다. ·그후 그 안에 필요한 데이터를 가져와 변수로 저장을 해주었습니다. ·명언을 랜덤으로 보여주기위해 Math를 이용하여 데이터의 갯수만큼 랜덤 숫자가 나오게 저장해 주었습니다. ·데이터를 랜덤으로 가져오게 wisesaying[Random]를 변수로 저장해 주었습니다. ·이제 json에서 가..

JAVASCRIPT 2023.04.15

슬라이드 이펙트7 버튼, 썸네일을 알아 봅시다.

슬라이드 이펙트1 기본유형 보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 전체소스 보러가기 Javascript Slider Effect07 슬라이드 이펙트 : 버튼,썸네일 1 2 3 4 5 6 7 prev next ghkddn132@naver.com slider__img와 slider__thumb에 이미지는 자바스크립트를 통해 넣어 주기 때문에 비워주시고,슬라이드 이펙트 6에서 사용했던 slider__btn을 사용하였습니다. 그후 각 영역의 간격을 정해줍니다. let images = [ "img/sliderEffect01-min.jpg", "im..

JAVASCRIPT 2023.04.14

슬라이드 이펙트6 버튼, 닷메뉴를 알아 봅시다.

슬라이드 이펙트1 기본유형 보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트 6 버튼, 닷메뉴 전체소스 보러가기 .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지 움직이는 ..

JAVASCRIPT 2023.04.13

슬라이드 이펙트5 세로유형(연속)을 알아 봅시다.

슬라이드 이펙트1 기본유형 보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트5 세로유형 (연속) 전체소스 보러가기 Javascript Slider Effect05 슬라이드 이펙트 : 위로 움직이기 (연속적으로) 1 2 3 4 5 6 ghkddn132@naver.com 슬라이드 이펙트4 가로유형(연속)에서 slider__inner의 width값을 주어 이미지들이 제대로 가로로 정렬 할수 있게 해주었지만 세로유형(연속)에서는 원래 세로정렬 되어있던 이미지들을 slider__inner에 display: flex, flex-wrap: wrap을 ..

JAVASCRIPT 2023.04.12

슬라이드 이펙트4 가로유형(연속)을 알아 봅시다.

슬라이드 이펙트1 기본유형 보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트4 가로유형 (연속) 슬라이드 이펙트2의 가로유형처럼 다시돌아가는것이 아닌 자연스럽게 슬라이드 되게 하였습니다. 전체소스 보러가기 Javascript Slider Effect04 슬라이드 이펙트 : 좌로 움직이기 (연속적으로) 1 2 3 4 5 6 ghkddn132@naver.com .slider__inner 의 width 값을 첫번째의 이미지를 복사하여 나온거 까지 포함하여 4800으로 해줍니다. ※JAVASCRIPT 우선 GSAP 의 라이브러리를 가져옵니다. ..

JAVASCRIPT 2023.04.11

슬라이드 이펙트3 세로유형을 알아 봅시다.

슬라이드 이펙트1 기본유형보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트3 세로유형 전체소스 보러가기 슬라이드 이펙트 가로 유형에서 가져와서 /* display: flex; */ /* flex-wrap: wrap; */ /* width: 4000px; */을 주석 처리 해주어서 가로에서 세로로 변경 하였습니다. ※JAVASCRIPT 가로유형에서 처럼 똑같이 setInterval함수를 쓰고 sliderInterval의 주기만큼 반복 하도록 하게 하였습니다. 그후 transfrom을 이용하여 이미지의 높이만큼 translateY의 ..

JAVASCRIPT 2023.04.11

슬라이드 이펙트2 가로유형을 알아 봅시다.

슬라이드 이펙트1 기본유형보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트2 가로유형 전체 소스 보러가기 Javascript Slider Effect02 슬라이드 이펙트 : 좌로 움직이기 1 2 3 4 5 6 ghkddn132@naver.com 우선 사진을 가로로 정렬 해주어야 하기 때문에 display: flex;를 사용해 이미지를 가로로 해줍니다. 그리고 overflow: hidden;을 이용해 잘리는 이미지는 안보이게 해줍니다. ※JAVASCRIPT GSAP를 사용하기위해 라이브러리를 가져오고 정해준 시간주기로 반복하고 변수..

JAVASCRIPT 2023.04.10

슬라이드 이펙트1 기본유형을 알아 봅시다.

슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이더 이펙트1 기본유형 전체소스 보러가기 Javascript Slider Effect01 슬라이드 이펙트 1 2 3 4 5 6 ghkddn132@naver.com 우선 html을 만들어 준후 css로 꾸며 줍니다. .slider:nth-child(1)::before {content: '이미지1';} .slider:nth-child(2)::before {content: '이미지2';} .slider:nth-child(3)::before {content: '이미지3';}..

JAVASCRIPT 2023.04.10

퀴즈 이펙트 CBT 확인 유형 (추가)

전체 소스 보러가기 HTML 2020년 1회 정보처리기능사 기출문제 남은 시간 답안지 제출하기 수험자 : 전체 문제수 : 0문항 남은 문제수 : 0문항 기능사 시험 도전하기 정보처리기능사 2008년 4회 정보처리기능사 2008년 5회 정보처리기능사 2009년 1회 정보처리기능사 2009년 5회 정보처리기능사 2010년 2회 정보처리기능사 2010년 5회 정보처리기능사 2011년 1회 정보처리기능사 2011년 2회 정보처리기능사 2011년 4회 정보처리기능사 2011년 5회 웹디자인기능사 2013년 5회 웹디자인기능사 2014년 1회 웹디자인기능사 2014년 4회 웹디자인기능사 2014년 5회 웹디자인기능사 2015년 1회 웹디자인기능사 2015년 3회 웹디자인기능사 2015년 4회 웹디자인기능사 2015..

JAVASCRIPT 2023.04.05