이펙트 만들기27 페럴렉스 이팩트 02 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 02 - 사이드 메뉴 패럴랙스 01과 동일한 효과이지만 매뉴를 사이드에 적용하는 방법입니다. ▶ 화면 구성 형태 이번 효과는 패럴랙스 이펙트 01의 메뉴바를 사이드로 만들고 CSS를 이용해 지정된 부분을 강조하는 원을 그려야 합니다. (사이드 이미지) //HTML 파트 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 사이드 메뉴는 패럴랙스 이펙트 01의 메뉴와 만드는 방법이 동일합니다. 하지만 텍스트를 가려야 하기 때문에 일단 안에 텍스를 넣었습니다. //CSS 파트 CSS로 와 태그에 동일한 크기의 원을 그리고 태그에 position: absolute를 적용해 겹치게 합니다. 이 때 모습은 원이 겹쳐있어.. 2022. 9. 14. 패럴랙스 이펙트 만들기 01 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 01 - 메뉴 이동 따라다니기 스크롤의 위치에 따라 메뉴에 효과를 주거나 메뉴 클릭시 해당 위치로 자연스럽게 이동하는 효과입니다. ▶ HTML 및 CSS 파트 //CSS //HTML 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라. 03 section3 1퍼센트의 가능성, 그것이 나의 길이다. 04 section4 꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다. 05 section5 눈물과 더불어 빵을 먹어 보지 않은 자는 인생의 참다운 맛을 모른다. 06 section6 폼은 일시적이지.. 2022. 9. 6. 마우스 이펙트 만들기 01 마우스 이펙트 자바스크립트를 이용한 마우스 효과 만들기 입니다. 마우스 이펙트 01 - 마우스 따라다니기 마우스 커서에 따라 위치를 지정하거나 효과를 주는 방법입니다. ▶ HTML 파트 What we have to do is to be forever curiously testing new opinions and courting new impressions. 우리가 해야할 일은 끊임없이 호기심을 갖고 새로운 생각을 시험해보고 새로운 인상을 받는 것이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px ▶ CSS 파트 /* mouseType */ #mouseType.. 2022. 9. 6. 슬라이드 이펙트 - 로테이션 효과 01 슬라이더 이펙트 자바스크립트를 이용한 슬라이드 효과 만들기 입니다. 슬라이더 이펙트 02 - 좌로 이동하는 효과 일정 시간 간격으로 이미지가 좌측으로 이동해 자동으로 바꿔 출력해주는 효과입니다. 슬라이더 이펙트 01은 이쪽에서 볼 수 있습니다. 이번 효과는 자바스크립트와 GSAP를 활용한 2가지 방식이 있습니다. ▶ HTML 파트 01 유형과 같지만 이번 유형은 사진 전체가 좌측으로 이동해야 하기 때문에 한번 더 블록을 만들어 이동하는 파트를 주었습니다. ▶ CSS 파트 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img.. 2022. 8. 29. 슬라이드 이펙트 - 트랜지션 효과 슬라이더 이펙트 자바스크립트를 이용한 슬라이드 효과 만들기 입니다. 슬라이더 이펙트 01 - 트랜지션 효과 일정 시간 간격으로 이미지를 자동으로 바꿔 출력해주는 효과입니다. ▶ HTML 파트 5장의 이미지가 일정 간격으로 바뀌므로 우선 5장의 이미지를 img 태그를 활용해서 추가합니다. ▶ CSS 파트 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { position: relative; width: 800px; height: 600px; } .slider { position: absolute; left: 0; top.. 2022. 8. 29. 퀴즈 이펙트 만들기 06 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 퀴즈 만들기 06 이번 퀴즈는 객관식 슬라이드 유형입니다. 이번 유형은 보기를 선택시 바로 정답 여부를 알려주고 다음 화면으로 넘어가도록 하는 슬라이드 유형입니다. 1. 문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2009년 05회", answerNum: "1", answerAsk: "다음 중 커뮤니케이션 디자인의 설명으로 틀린 것은?" , answerChoice: [ "라틴어 'Communicare'를 어원으로 한다.", "두 개 이상의 개체가 기호를 매개로 무언가를 공유하는 것이다.", "운동과 시선을 중시하는 디자인이다.", "사람과 사람사이에 기호에 의해서 의미를 전달하는 과정이다.", ], an.. 2022. 8. 25. 퀴즈 이펙트 만들기 05 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 퀴즈 만들기 05 이번 퀴즈는 퀴즈 유형04의 심화 버전으로 여러개의 객관식 문항 만들기 입니다. 이번 유형은 모든 문제를 html이 아닌 스크립트로 출력하고 추가로 전체 문제 수와 정답인 문제 수를 알려주는 방식이 추가됩니다. 1. 문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2009년 05회", answerNum: "1", answerAsk: "다음 중 커뮤니케이션 디자인의 설명으로 틀린 것은?" , answerChoice: { 1: "라틴어 'Communicare'를 어원으로 한다.", 2: "두 개 이상의 개체가 기호를 매개로 무언가를 공유하는 것이다.", 3: "운동과 시선을 중시하는 디자인이다.. 2022. 8. 25. 서치 이펙트 03 서치 이펙트 자바스크립트를 이용해서 CSS 속성 요소를 검색하는 효과 만들기입니다. 서치 이펙트 03 charAt( ) 메소드를 이용해서 CSS 속성 요소를 검색하는 효과입니다. 1. 검색 목록 만들기 //SCRIPT 파트 //선택자 const searchKeyword = document.querySelectorAll(".search__info .keyword span"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트 const searchInfo = document.querySelector(".search__info .num"); //전체 갯수 //속성 갯수 구하기 searchInfo.textC.. 2022. 8. 23. 서치 이펙트 02 서치 이펙트 자바스크립트를 이용해서 CSS 속성 요소를 검색하는 효과 만들기입니다. 서치 이펙트 02 includes( ) 메소드를 이용해서 CSS 속성 요소를 검색하는 효과입니다. indexOf( ) 메소드를 사용해 만든 서치 이펙트 01과 똑같지만 이번엔 includes( ) 메소드를\ 이용한다는 차이점이 있습니다. \ includes( ) 메소드에 대한 자세한 설명은 이 곳에서 보실 수 있습니다. 1. 검색 목록 만들기 //SCRIPT 파트 //선택자 const searchBox = document.querySelector(".search__box input"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li");.. 2022. 8. 18. 서치 이펙트 01 서치 이펙트 자바스크립트를 이용해서 HTML과 CSS, JAVASCRIPT의 요소를 검색하는 효과 만들기입니다. 서치 이펙트 01 indexOf( ) 메소드를 이용해서 HTML 태그를 검색하는 효과입니다. 서치 효과는 문자열에서 특정 문자의 위치를 찾고 숫자를 반환해주는 indexOf( ) 메소드를 사용해 사용자의 검색 키워드와 일치하는 문자를 간추려서 보여주도록 합니다. indexOf( ) 메소드에 대한 자세한 설명은 이 곳에서 보실 수 있습니다. 1. 검색 목록 만들기 //CSS //JAVASCRIPT 마지막으로 검색 데이터 키워드와 검색 목록의 값을 비교해서 선택적으로 출력해주는 작업입니다. if문을 사용해서 키워드가 일치하지 않으면 hide class를 추가해 숨기고 일치한 것은 hide clas.. 2022. 8. 16. 웹디자인기능사 기출 2009년 05회 웹디자인기능사 필기 2009.09.27 2009년 05회 기출문제입니다. 2022. 8. 15. 퀴즈 이펙트 만들기 04 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 퀴즈 만들기 04 이번 퀴즈는 객관식 유형으로 사용자가 선택한 답안을 정답과 비교하여 출력해주는 방식입니다. 이번 퀴즈는 객관식이기 때문에 사용자가 선택하기 위한 보기 문항과 체크 방식을 만들고 보기 문항에 선택자를 지정해야합니다. 요소 매서드와 이벤트 매서드 역시 사용자가 선택한 문항을 매치하여 결과를 출력하는 방식으로 만들어야 합니다. ○ 보기 문항 만들기 //CSS .quiz__selects { margin: 5px 0; } .quiz__selects label { display: flex; } .quiz__selects label input { position: absolute; left: -9999px; } .quiz__selects .. 2022. 8. 9. 이전 1 2 3 다음
