06. 마우스 이펙트 : 텍스트 효과 마우스 이펙트는 마우스 커서 해당위치에 커서대신 다양한 효과를 주거나 요소에 위치에서 다양한 변화를 주는 효과입니다. CSS 중심에 글을 가운데를 기준으로 양쪽 부분만 남기고 겹치는 부분은 overflow:hidden을 사용하여 숨겼습니다. 왼쪽 글은 15deg정도 기울이고 색을 줬고 오른쪽은 -15deg로 기울여서 작업하였습니다. /* mouseType */ .mouse__wrap { color: #fff; width: 100%; height: 100vh; } .mouse__img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; } .mouse__text..
Effect
서치 프로그램5 서치 프로그램을 만들어보았습니다. 알파벳을 선택했을 떄 그에 알맞는 알파벳을 첫 글자로 시작하는 요소들을 출력하도록 하였습니다. 또한 출력되는 요소의 갯수도 출력되도록 하였습니다. HTML 별점을 담은 class="star"에 data값을 주어서 스크립트로 쓸 수 있도록 하였고 별점을 클릭하면 알맞은 값을 출력할 수 있도록 만들었습니다. css보기 filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 전체 속성 갯수 : 0 javascript listCSS를 문자열로 선언하고 for of문을 사용하여 cssProperty의 데이터 항목을 추가해 listCSS에 추가..
06. 패럴랙스 이펙트 - 텍스트 효과 페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다. javascript 이번 패럴랙스는 글자 하나씩 애니메이션에 딜레이를 줘서 출력되도록 하였습니다. 자바스크립트로 진행하였습니다. javascript document.querySelectorAll('.split').forEach((text) => { let splitText = text.innerText; let splitWrap = splitText.split('').join(''); splitWrap = "" + splitWrap + ""; text.innerHTML = splitWrap; text.setAttribute("aria-label", splitText); }); ..
서치 프로그램3 서치 프로그램을 만들어보았습니다. 알파벳을 선택했을 떄 그에 알맞는 알파벳을 첫 글자로 시작하는 요소들을 출력하도록 하였습니다. 또한 출력되는 요소의 갯수도 출력되도록 하였습니다. CSS CSS입니다. 이전과 동일한 css를 사용하였습니다. 새롭게 input박스가 추가되어 검색할 수 있도록 하였습니다. css보기 /* keyword box */ .search__info .keyword { text-align: center; margin-bottom: 10px; } .search__info .keyword span { border: 2px solid var(--htmlColor); border-radius: 50px; padding: 10px; display: inline-block; ma..
05. 마우스 이펙트 : 기울기 효과/ 반전효과 마우스 이펙트는 마우스 커서 해당위치에 커서대신 다양한 효과를 주거나 요소에 위치에서 다양한 변화를 주는 효과입니다. CSS 마우스의 위치에 따라 이미지에게 3D효과를 주며 움직이도록 하였습니다. 3d로 보이도록 만들었습니다. /* mouseType */ .mouse__wrap { display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; width: 100%; height: 100vh; overflow: hidden; cursor: none; } .mouse__img { transform: perspective(600px) rotateX(0..
마우스 이펙트04 : 이미지 효과 마우스 이펙트는 마우스 커서 해당위치에 커서대신 다양한 효과를 주거나 요소에 위치에서 다양한 변화를 주는 효과입니다. CSS css로 커서의 모양과 해당 요소 위에서 애니메이션을 주었습니다. body::after { background-color: rgba(0, 0, 0, 0.7); } /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; flex-direction: column; justify-content: center; color: #fff; overflow: hidden; } .mouse__wrap figure { width: 50vw; height..
마우스 이펙트03 : 조명 효과 마우스 이펙트는 마우스 커서 해당위치에 커서대신 다양한 효과를 주거나 요소에 위치에서 다양한 변화를 주는 효과입니다. CSS 이번 유형은 마우스 커서에 영역만 선명하게 보여서 강조되는 효과가 보이도록 작업하였습니다. 마우스 영역에 백그라운드를 배경과 같은 사진을 넣고 body::after { background-color: rgba(0,0,0,0.7); } /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; flex-direction: column; justify-content: center; color: #fff; overflow: hidden; curs..
마우스 유형02 이번 유형은 1번 유형과 동일하지만 Gsap를 사용하여 작업하였습니다. gsap는 자바스크립트 라이브러리로 복잡한 애니메이션을 만들때 주로 사용한다. 자바스크립트로 만들었을때 보다 부드러워지는 경향도 있어서 작업해 보았습니다. CSS 1번 유형과 차이점은 마우스 커서를 두가지를 만들어 동그라미 두개의 커서가 움직이도록 만들었습니다. 두가지 커서에 딜레이를 주어서 이중으로 움직이도록 하였습니다. /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; flex-direction: column; justify-content: center; color: #fff; overflow: ..
마우스 유형01 마우스 이펙트는 마우스 커서 해당위치에 커서대신 다양한 효과를 주거나 요소에 위치에서 다양한 변화를 주는 효과입니다. CSS css로 커서의 모양과 해당 요소 위에서 애니메이션을 주었습니다. /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; flex-direction: column; justify-content: center; color: #fff; overflow: hidden; cursor: none; } .mouse__wrap p { font-size: 2vw; line-height: 2; font-weight: 300; } .mouse__wrap p span { ..
패럴랙스 - 이질감효과 페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다. javascript 1. 자바스크립트를 사용하여 브라우저의 scrollTop의 값을 구했습니다. 2. content__item span의 scrollTop값을 section의 각 요소의 offsetTop값을 비교해서 offset변수에 대입합니다. 3. 대입했으면 gsap를 사용하여 x축과 y축으로 offset의 값 만큼 변화를 주도록합니다. 밑에 피그마를 보면서 다시 이해해 보도록하겠습니다. javascript function scroll() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop; document...
패럴랙스 - 나타나기 페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다. javascript (scrollTop값은 현재 자신의 스크롤 위치) scrollTop 속성을 이용해서 자신이 보고있는 window환경에서의 위치를 구합니다. content__item의 클래스가 들어있는 요소의 위치를 forEach문을 사용해서 탐색하고 조건문을 사용하여 제가 원하는 위치에서 동작하기 원하는 위치에서 show라는 class를 추가해주는 메서드를 사용합니다. 내가 있는 위치를 계속 탐색해야하기 떄문에 재귀함수를 사용하여 실행하였습니다. 하지만 너무많이 탐색하면 메모리에 과부하가 올 수 있기 떄문에 requestAnimationFrame 메서드를 사용하여 1분에 60번만 하도록 제한..
패럴랙스 사이드메뉴 페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다. info 사이드에 있는 스크롤 바에 버튼을 클릭했을 때 이동하도록 a의 인자값을 불러왔습니다. 하지만 저희는 부드럽게 이동시키기 위해서 a의 역할을 해지시키도록 preventDefault 메서드를 사용하여 억제하였고 href 속성에 부드럽게 이동하는 behavior 속성을 사용하여 보내주었습니다. 메뉴바 이동을 부드럽게 해주기 //스크롤이동 document.querySelectorAll("#parallax__dot a").forEach(el => { el.addEventListener("click", e => { e.preventDefault(); console.log(e) document.que..
패럴랙스 효과 페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다. scollTop scrollTop 속성을 이용해서 자신이 보고있는 window환경에서의 위치를 구합니다. scrollTop보기 window.addEventListener("scroll", () => { // let scrollTop = window.pageYOffset; // let scrollTop = window.scrollY; // let scrollTop = document.documentElement.scrollTop; let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; //한번에 ..
퀴즈 이펙트 - 객관식 (여러문제 슬라이드) 결과 확인하기 자바스크립트를 이용해 다중문제가 나오도록 설정하였고 for문, forEach문을 사용해 코드를 효과적으로 사용하였습니다 또한 문제를 풀고 정답 확인 버튼을 누르면 맞은 문제 갯수와 틀린문제 갯수를 출력하도록 하였습니다. 문제 출력하기 템플릿 리터럴을 사용하여 ${}속에 변수를 지정하였습니다. . 또한 각각 칸에 알맞게 변수명을 집어넣어 정보를 입력하였습니다. 문제출력코드 //문제출력 const quizQuestion = document.querySelector(".quiz__question"); //문제 번호, 질문 const quizSelects = document.querySelector(".quiz__selects") const quizTy..
퀴즈 이펙트 - 객관식 (여러문제) 슬라이드 확인하기 자바스크립트를 이용해 다중문제가 나오도록 설정하였고 for문, forEach문을 사용해 코드를 효과적으로 사용하였습니다 또한 문제를 풀고 정답 확인 버튼을 누르면 맞은 문제 갯수와 틀린문제 갯수를 출력하도록 하였습니다. 문제 출력하기 강아지의 구성요소 입니다. 문제와 함께 같이 출력되는 강아지를 구성하였습니다. 문제출력코드 정답입니다! 틀렸습니다! Next! 출력하기 문제정보를 각각 변수명을 지정해 객체 속에 저장하였습니다. 60문제로 구성되었습니다. 문제정보 // 문제정보 const quizInfo = [ { answerType: "웹디자인 기능사 2012년 4회", answerNum: "1", answerAsk: "커뮤니케이션 디자인에 대한 설명으..
서치 프로그램3 서치 프로그램을 만들어보았습니다. 알파벳을 선택했을 떄 그에 알맞는 알파벳을 첫 글자로 시작하는 요소들을 출력하도록 하였습니다. 또한 출력되는 요소의 갯수도 출력되도록 하였습니다. CSS CSS입니다. 이전과 동일한 css를 사용하였습니다. header, main, footer로 나누어서 작업하였습니다. css보기 :root { --htmlColor : #223547; --cssColor : #472222; --javascriptColor : #224736; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'NexonLv1Gothic'; color: var(--htmlColor); } *, *:before, *:afte..
서치 프로그램2 서치 프로그램을 만들어보았습니다. 이번 프로그램에서는 검색 하였을 때 각각 유형별로 출력할 수 있도록 만들었습니다. includes()메서드를 사용하여 작업하였습니다. CSS CSS입니다. 이전과 동일한 css를 사용하였습니다. header, main, footer로 나누어서 작업하였습니다. css보기 :root { --htmlColor : #223547; --cssColor : #472222; --javascriptColor : #224736; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'NexonLv1Gothic'; color: var(--htmlColor); } *, *:before, *:after { box..
서치 프로그램 서치 프로그램을 만들어보았습니다. CSS, JAVASCRIPT, HTML 페이지를 각각 만들어서 서치할 수 있도록 하였습니다. CSS CSS입니다. header, main, footer로 나누어서 작업하였습니다. css보기 :root { --htmlColor : #223547; --cssColor : #472222; --javascriptColor : #224736; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'NexonLv1Gothic'; color: var(--htmlColor); } *, *:before, *:after { box-sizing:border-box; } a { color: var(--htmlCol..
퀴즈 프로그램 객관식문제 자바스크립트를 이용해 다중문제가 나오도록 설정하였고 for문, forEach문을 사용해 코드를 효과적으로 사용하였습니다 자바스크립트 객관식문제 ▶우선 선택자를 정합니다.(각각 선택자가 무엇을 출력할지 정해주고 알맞는 이름을 써줘서 변수에 넣어준다.). ▶문제의 정보를 가져와서 각각의 정보들을 quizInfo 변수에 대입해서 넣어줍니다. ▶문제 출력을 담당하는 메서드와 보기를 출력하는 반복문을 updateQuiz라는 함수를 만들어서로 묶어주고 실행문을 적습니다. (한눈에 보기 쉽기 때문에 묶어줍니다.) ▶이전에는 사용자의 정답과 문제의 정답만 비교해서 확인하면 되었는데 객관식에서는 사용자가 선택한 답을 문제에 답과 비교해 주어야합니다. 위에서 quiz__selects 클래스를 만들..
퀴즈 프로그램 다중문제 표현 자바스크립트를 이용해 다중문제가 나오도록 설정하였고 for문, forEach문을 사용해 코드를 효과적으로 사용하였습니다 자바스크립트 다중문제 ▶우선 선택자를 정합니다.(각각 선택자가 무엇을 출력할지 정해주고 알맞는 이름을 써줘서 변수에 넣어준다.). ▶문제의 정보를 가져와서 각각의 정보들을 quizInfo 변수에 대입해서 넣어줍니다. ▶css로 틀을 만들고 각각 틀에 알맞은 정보를 넣기위해 textContent, innerText 함수를 사용해 quizInfo변수 안에 정보를 출력합니다.(이때 for문과 forEach문을 사용해서 효과적으로 출력하였습니다.) ▶사용자가 정답을 입력하기 전에 정답은 나타나있으면 안되기 때문에 quizResult[i].style.display =..
퀴즈 프로그램 웹디자인기능사 자격증을 준비하면서 퀴즈가 나오는 프로그램를 구현하였습니다. 자바스크립트-주관식 2번 문제입니다. 주관식으로 구성하였습니다. 빈칸에 알맞은 답을 입력하면 강아지얼굴이 웃으면서 정답입니다! 표시가 뜨도록 구성하였고 답이 틀리면 오답입니다! 표시가 뜨고 강아지 얼굴이 슬퍼지도록 하였습니다. JS //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 ..
퀴즈 프로그램 웹디자인기능사 자격증을 준비하면서 퀴즈가 나오는 프로그램를 구현하였습니다. 자바스크립트-객관식 "정답 확인하기" 버튼을 누르면 답이 나오도록 구성하였습니다. js //선택자 const quizType = document.querySelector( ".quiz__type" ); //퀴즈종류 const quizNumber = document.querySelector( ".quiz__question .number"); //퀴즈번호 const quizAsk = document.querySelector( ".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector( ".quiz__answer .confirm") //정답확인버..
