게임이펙트-메모리게임 메모리게임 만들기 원본 소스 보기 원본 사이트 html 앞에 보일 이미지와 뒤에 보일 이미지를 넣어줍니다. 코드보기 js01 선택자, 함수 생성 const memoryWrap = document.querySelector(".memory__wrap"); const memoryCards = memoryWrap.querySelectorAll(".cards li"); let cardOne, cardTwo; let disableDeck = false; let matchedCard = 0; let sound = [ "../assets/audio/match.mp3", "../assets/audio/unmatch.mp3", "../assets/audio/success.mp3", ]; let sou..
게임이펙트-뮤직플레이어 게임이펙트의의 초기 설정과 뮤직플레이어 원본 소스 보기 원본 사이트 js01 아이콘들의 드래그가 가능하도록 jquery를 사용하였습니다. draggable메서드를 활용하여 드래그를 진행하고 그에 따른 마우스의 변경을 위한 attr메서드를 사용하였습니다. 시간에 대한 변경을 printTime() 함수 내에서 진행합니다. 연도는 getFullYear(), 월은 getMonth(), 일은 getDate()를 이용합니다. getMonth()는 0~11로 1을 더해줘야 현재의 달에 대한 정보가 출력됩니다. 시간은 getHours(), 분은 getMinutes(), 초는 getSeconds()를 이용합니다. setTimeout를 이용해서 1초 단위로 업데이트 되도록 했습니다. 이후 사용자의 ..
슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이) 지금까지의 슬라이더를 모두 다룹니다. 원본 소스 보기 원본 사이트 html slider__btn에 prev, next 버튼을 만들어 줍니다. 닷 메뉴 추가를 위해서 slider__dot을 추가합니다. 개별적인 이미지에 slider 클래스를 부여했습니다. 코드보기 이미지1 이미지2 이미지3 이미지4 이미지5 prev next css 생성한 버튼과 닷 메뉴에 대한 css를 진행합니다. 코드보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .s..
searchEffect07 2분 동안 CSS 속성 검색하기 원본 소스 보기 원본 사이트 HTML 검색을 진행하는 동안에 진행 될 음악, 진행 시에 사용되는 타이머 등의 필요한 구조를 구성합니다. 코드보기 CSS 속성 검색 이벤트 2분 동안 CSS 속성 검색하기 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 힌트보기는 한번 이용할 수 있습니다. 2:00 검색하기 버튼을 누르면 게임이 시작됩니다. 전체 속성 갯수 : 0 현재 맞춘 갯수 : 0 다시 도전하기 CSS css 구조를 구성합니다 코드보기 #header { display: flex; justify-content: space-between; } #header nav { margin: 10px; } #header nav li { positi..
searchEffect06 sort(), reverse()를 이용하여 정렬하기 원본 소스 보기 원본 사이트 HTML 속성별로 클릭 가능하게 코드보기 sort(), reverse()를 이용하여 정렬하기 CSS 속성 정렬하기 반대로 정렬하기 오름차순 정렬하기 내림차순 정렬하기 알파벳순 (a~z) 알파벳순 (z~a) 랜덤 정렬하기 전체 속성 갯수 : 0 CSS css 구조 코드보기 /* header */ #header { display: flex; justify-content: space-between; } #header nav { margin: 10px; } #header nav li { position: relative; display: inline; } #header nav li a { width: 30..
슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) 이전에 방식인 버튼과 닷메뉴 방식에서 지속적으로 페이지가 넘어가는 방식을 추가하였습니다. 원본 소스 보기 원본 사이트 html slider__btn에 prev, next 버튼을 만들어 줍니다. 닷 메뉴 추가를 위해서 slider__dot을 추가합니다. 개별적인 이미지에 slider 클래스를 부여했습니다. 코드보기 이미지1 이미지2 이미지3 이미지4 이미지5 prev next css 생성한 버튼과 닷 메뉴에 대한 css를 진행합니다. 코드보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center..
슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴) 버튼을 눌러서 이전과 다음 이미지로 슬라이드 되며, 닷 메뉴로도 이미지의 전환을 하는 슬라이드 효과를 만들어봅시다. 원본 소스 보기 원본 사이트 html slider__btn에 prev, next 버튼을 만들어 줍니다. 닷 메뉴 추가를 위해서 slider__dot을 추가합니다. 코드보기 prev next css 생성한 버튼과 닷 메뉴에 대한 css를 진행합니다. 코드보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position..
패럴렉스 이펙트 - 리빌 효과 스크롤 하면서 가려져있던 사진과 글이 보이는 효과 원본 소스 보기 원본 사이트 html 효과를 부여하기 위해서, 효과가 나타나기를 원하는 content__item__imgWrap, content__item__desc에 reveal클래스를 부여합니다. 코드보기 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다. 02 section2 지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진 물이다. 03 section3 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. 04 section4 실수할 자유가 없는 자유란 가치가 없다. 05 section5 끝까지 해보기 전까지는 늘 불가능해 보입니다. 06 section6 고통은 잠깐이다. 포기는..
패럴렉스 이펙트 - 텍스트 효과 텍스트가 스크롤하며 한글자씩 나오는 방식 원본 소스 보기 원본 사이트 html 글씨를 쪼개기 위해서 클래스 content__item__desc 옆에 split 추가 코드보기 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다. 02 section2 지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진 물이다. 03 section3 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. 04 section4 실수할 자유가 없는 자유란 가치가 없다. 05 section5 끝까지 해보기 전까지는 늘 불가능해 보입니다. 06 section6 고통은 잠깐이다. 포기는 영원히 남는다. 07 section7 희망을 품지 않은 자는 절망도 할 수 없다. ..
마우스 이펙트 - 텍스트 효과 마우스의 움직임에 따라 글자가 움직이고 마우스를 텍스트 위에 올리면 마우스 커서에 효과가 나타납니다. 원본 소스 보기 원본 사이트 html 글자를 왼쪽, 오른쪽에 같은 단어가 겹치면서 효과가 발생하기에 그에 따른 틀을 잡아줍니다. 코드보기 Pain Past Pain Past is pleasure is pleasure 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. css transform: skew();를 이용하여 글자에 기울기 효과를 부여합니다. mix-blend-mode: difference;를 이용하여 커서가 올라갔을 때의 배경색과의 반전을 줍니다. 코드보기 /* mouseType */ .mouse__wrap { color: #fff; width: 100%; heig..
searchEffect05 filter()를 이용하여 속성의 중요도 보여주기 원본 소스 보기 원본 사이트 HTML 중요도에 따라서 확인하기 위한 .search__click 속성 갯수 보여주는 .search__info 속성 리스트 .search__list 코드보기 filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 전체 속성 갯수 : 0 CSS 마우스 hover시의 색상 변화 등 코드보기 /* header */ #header { display: flex; justify-content: space-between; } #header nav { margin: 10px; } #header..
searchEffect04 find()를 이용하여 속성을 검색하면 설명 보여주기 원본 소스 보기 원본 사이트 HTML 검색을 하거나 키워드를 누르면 결과를 보여주기 위한 틀을 잡아 줍니다. find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시 됩니다. 전체 속성 갯수 : 0 CSS 검색 결과를 보여주는 css에 대한 수정 :root { --htmlColor: #223547; --cssColor: #472222; --javascriptColor: #224736; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "NexonLv1Gothic"; color: var(--htmlCol..
마우스 이펙트 - 기울기 효과 / 글씨 반전 효과 마우스의 움직임에 따라 기울기가 변동되고 글씨도 움직이는 효과를 만들어줍니다. 원본 소스 보기 원본 사이트 html mouse__info를 추가하여 위치를 확인할 수 있게했습니다. 코드보기 Think like a man of action, act like a man of thought. 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. mousePageX : 0px mousePageY : 0px centerPageX : 0px centerPageY : 0px maxPageX : 0px maxPageY : 0px anglePageX : 0px anglePageY : 0px css figure::before에 그림자 효과를 넣어주고, figcaptio..
마우스 이펙트 - 이미지효과 마우스의 움직임에 따라서 안에 중앙에 있는 이미지가 미세하게 움직이는 효과를 만들어봅시다. 원본 소스 보기 원본 사이트 html 중앙에 떠있을 이미지를 넣어줍니다. figcaption으로 이미지 안에 글자를 넣어줍니다. 마우스의 위치 값들이 나타나도록 mouse__info를 넣어줍니다. 코드보기 Only I can change my life. No one can do it for me. 나만이 내 인생을 바꿀 수 있다. 아무도 날 대신할 수 없다. mousePageX : 0px mousePageY : 0px centerPageX : 0px centerPageY : 0px css 마우스 오버시의 효과를 만들어줍니다. 코드보기 /* mouseType */ .mouse__wrap ..
마우스 이펙트 - 조명효과 마우스가 움직이면서, 뒤에 있는 어두운 배경에 밝게 조명을 비추는 듯한 효과를 만들어봅시다. 원본 소스 보기 원본 사이트 html 커서 하나가 움직이면서 커서가 위치하는 곳을 밝게 보이는 것처럼 효과를 주기 위해서 mouse__cursor 커서를 만들어줍니다. 코드보기 The gratification comes in the doing, not in the results. 만족은 결과가 아니라 과정에서 온다. css 커서의 움직임에 따른 효과를 주는 작업을 진행합니다. 커서 안에 뒤의 배경 이미지와 같은 이미지를 넣어줍니다. background-size: cover;, background-position: center;를 사용하여 이미지의 위치를 잡아줍니다. background-..
패럴렉스 이펙트 - 이질감 효과 이질감 효과를 만들어봅시다. 원본 소스 보기 원본 사이트 html parallax__info를 추가합니다. 코드보기 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다. 02 section2 지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진 물이다. 03 section3 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. 04 section4 실수할 자유가 없는 자유란 가치가 없다. 05 section5 끝까지 해보기 전까지는 늘 불가능해 보입니다. 06 section6 고통은 잠깐이다. 포기는 영원히 남는다. 07 section7 희망을 품지 않은 자는 절망도 할 수 없다. 08 section8 뭔가를 위해 시도조차하려는 용기가 없..
슬라이드 이펙트 - 이미지 슬라이드(버튼) 버튼을 눌러서 이전과 다음 이미지로 슬라이드 되는 효과를 만들어봅시다. 원본 소스 보기 원본 사이트 html slider__btn에 prev, next 버튼을 만들어 줍니다. 코드보기 prev next css 생성한 버튼에 대한 css를 진행합니다. 코드보기 /* slider */ .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_..
패럴렉스 이펙트 - 나타나기 스크롤하면서 섹션이 효과와 함께 나타납니다. 원본 소스 보기 원본 사이트 html 섹션들만 남겨둡니다. 코드보기 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다. 02 section2 지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진 물이다. 03 section3 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. 04 section4 실수할 자유가 없는 자유란 가치가 없다. 05 section5 끝까지 해보기 전까지는 늘 불가능해 보입니다. 06 section6 고통은 잠깐이다. 포기는 영원히 남는다. 07 section7 희망을 품지 않은 자는 절망도 할 수 없다. 08 section8 뭔가를 위해 시도조차하려는 용기가 없다면 삶..
마우스 이펙트 - 마우스 따라다니기 (GSAP) 포인터의 좌표값에 따라서 마우스의 움직임과 효과가 있는 마우스 이펙트를 GSAP를 이용하여 만들어 봅시다. (GSAP 라이브러리를 스크립트에 추가해서 진행합니다.) 원본 소스 보기 원본 사이트 html 두개의 원을 만들어줄것이기에, mouse__cursor, mouse__cursor2를 생성합니다. 코드보기 Victory belongs to the most persevering. 승리는 가장 끈기있는 자에게 돌아간다. css 커서의 크기와 효과 등을 부여. pointer-events: none = 요소가 포인터 이벤트의 대상이 되지 않습니다. user-select: none = 사용자가 텍스트를 선택할 수 없게 지정합니다. 코드보기 /* mouseType ..
패럴렉스 이펙트 - 숨김 메뉴 / 탑 버튼 메뉴를 아래로 스크롤하면 안보이게 하고, 위로 올리면 나타나게 하였습니다. 페이지의 제일 하단에 도달하면 TOP버튼이 나타나서 위로 상단으로 올라가게 하였습니다. 원본 소스 보기 원본 사이트 html TOP버튼을 추가하기 위해서, 이전의 방식에서 parallax__top를 추가해줍니다. 코드보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다. 02 section2 지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진 물이다. 03 section3 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. 04 section4 실수할 자유가 없는 자유란 가치가..
패럴렉스 이펙트 - 사이드 메뉴 메뉴를 사이드로 배치하여 봅시다. 원본 소스 보기 원본 사이트 html 이전의 방식에서 parallax__nav이었던 것을 parallax__dot으로 변경해줍니다. 클릭하면 각 섹션으로 이동할 수 있도록 링크를 부여해 줍니다. 코드보기 Javascript Parallax Effect02 패럴렉스 이펙트 - 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다. 02 section2 지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진 물이다. 03 section3 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. 04 section4 ..
패럴렉스 이펙트 - 메뉴 이동 메뉴에 맞는 페이지로 이동되는 패럴렉스를 만들어 봅시다. 원본 소스 보기 원본 사이트 이미지로 설명 html Javascript Parallax Effect01 패럴렉스 이펙트 - 메뉴 이동 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다. 02 section2 지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진 물이다. 03 section3 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. 04 section4 실수할 자유가 없는 자유란 가치가 없다. 05 section5 끝까지 해보기 전까지는 늘 불가능해 보입니다. 06 section6 고..
마우스 이펙트 - 마우스 따라다니기 포인터의 좌표값에 따라서 마우스의 움직임과 효과가 있는 마우스 이펙트를 만들어 봅시다. 원본 소스 보기 원본 사이트 html Only those who dare to fail greatly can ever achieve greatly. 크게 실패할 용기있는 자만이 크게 이룰 수 있다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px css /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-con..
슬라이드 이펙트 - 좌로 움직이기(연속적으로) 연속적으로 이미지가 좌로 변동되는 것을 만들어 보았습니다. 원본 소스 보기 원본 사이트 html css /* slider */ .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 { /* 이미지를 감싸고 있는 부모 : 움직이는 부분 */ display: flex; flex-wrap: wrap; width: 4800px..
슬라이드 이펙트 - 트랜지션 효과 일정 시간을 기준으로 이미지가 변동되는 것을 만들어 보았습니다. 원본 소스 보기 원본 사이트 html css /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { position: relative; width: 800px; height: 450px; } .slider { position: absolute; left: 0; top: 0; } .slider::before { position: absolute; left: 5px; top: 5px; background: rgba(0,0,0,0..
슬라이드 이펙트 - 좌로 움직이기 이미지가 좌로 움직이는 유형입니다. 애니메이션 효과를 넣었습니다. 원본 소스 보기 원본 사이트 Javascript const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역 const slider = document.querySelectorAll(".slider"); //이미지 let currentIndex = 0; sliderInner.style.transition = "all 0.6s" setInterval(() => { currentIndex = (currentIndex + 1) % slider.length; sliderInner.style.transform = "translateX("+ -800..
객관식(여러문제) 확인하기 : 점수 스크립트를 통해서 객관식문제의 전체문제 중에 몇 문제를 맞았는지 확인해봅시다. 원본 소스 보기 원본 사이트 html javascript를 통해 소스를 넣어주기 위해서, quiz__wrap안에 내용이 있었으나 지워줍니다. 코드 확인 문제 정보 여러개의 문제를 배열 속에 객체에 저장하여 활용합니다. 객관식 문제는 객체에 저장 코드 확인 //문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2011년 1회", answerNum: "1", answerAsk: "건강 이미지의 웹사이트를 구성하려고 한다. 가장 적합한 컬러는?", answerChoice: { 1: "빨강색", 2: "노랑색", 3: "검정색", 4: "녹색", }, answer..
객관식(여러문제) 확인하기 : 슬라이드 형식 스크립트를 통해서 객관식 여러문제를 한문제씩 출력하여, 정답과 해설을 확인합시다. 원본 소스 보기 원본 사이트 html 기본틀은 그대로 두면서 변동되는 부분만 주석처리 해둡니다. 코드 확인 정답입니다! 틀렸습니다! 다음 문제 보기 문제 정보 여러개의 문제를 배열 속에 객체에 저장하여 활용합니다. 객관식 보기의 내용은 배열[]을 이용합니다 코드 확인 //문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2011년 1회", answerNum: "1", answerAsk: "건강 이미지의 웹사이트를 구성하려고 한다. 가장 적합한 컬러는?", answerChoice: [ "빨강색", "노랑색", "검정색", "녹색", ], answ..
searchEffect03 charAt()를 이용하여 속성 첫글자 검색하기. 원본 소스 보기 원본 사이트 HTML keyword 별로 검색이 가능하도록 span 태그를 사용하여 알파벳별로 검색이 가능하도록 만듭니다. charAt()를 이용하여 검색하기 CSS 속성 첫글자 검색하기 a b c d e f g h i j k l m n o p q r s t u v w x y z 전체 속성 갯수 : 0 accent-color : 일부 요소가 생성하는 사용자 인터페이스 컨트롤의 강조색을 지정합니다. CSS keyword와 span에 대한 css내용을 추가합니다. .search__info .keyword { text-align: center; margin-bottom: 10px; } .search__info .key..
