본문 바로가기

Javascript Effect33

자바스크립트 : 게임 효과 : 메모리 게임 자바스크립트 : 게임 효과 : 메모리 게임 이번에는 같은 그림 찾기 메모리 게임을 만들어 보도록 하겠습니다. 0. HTML HTML 소스는 아래를 참고해 주세요. HTML 소스 보기 Memory Game START Memory Game 점수 : 0 / 16 남은 기회 : 3 다시하기 1. 선택자 작업하기 const memoryWrap = document.querySelector(".memory__wrap"); const memoryCard = memoryWrap.querySelectorAll(".cards li"); let cardOne, cardTwo; // 뒤집는 카드 let disableDeck = false; let matchedCard = 0; // 점수 let endCardGame = 3; /.. 2022. 10. 29.

자바스크립트 : 검색 효과 : 검색 게임 자바스크립트 : 검색 효과 : 검색 게임 지금까지 다양한 메서드를 활용하여 검색 효과를 작업해 보았습니다. 이번에는 CSS 속성을 직접 타이핑하여 제한 시간 안에 맞히는 검색 게임을 만들어 보도록 하겠습니다. 1. 선택자 작업하기 const searchTime = document.querySelector(".time span"); const searchList = document.querySelector(".search__list"); const searchAnswers = document.querySelector(".search__answers"); const searchMissAnswers = document.querySelector(".search__missAnswers"); const search.. 2022. 10. 24.

자바스크립트 : 슬라이드 효과 : 버튼, 닷메뉴 자바스크립트 슬라이드 효과 : 버튼, 닷메뉴 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 이전 버튼, 다음 버튼을 클릭하면 이전 이미지, 다음 이미지로 슬라이드하는 유형입니다. 1. 선택자 및 변수 만들기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySelector(".slider__inner"); // 움직이는 영역 const slider = document.querySelectorAll(".sli.. 2022. 10. 18.

자바스크립트 : 게임 효과 : 뮤직 플레이어 자바스크립트 : 게임 효과 : 뮤직 플레이어 이번에는 게임 효과입니다. 첫번째 유형으로는 뮤직 플레이어를 작업할 예정입니다. 1. 사전 작업 1-1. 마우스 커서 만들기 const cursor = document.querySelector(".mouse__cursor"); window.addEventListener("mousemove", (e) => { cursor.style.left = e.clientX + "px"; cursor.style.top = e.clientY + "px"; }); 귀여운 이미지로 마우스 커서를 바꾸어 줍니다. 이 정도는 껌이죠. 1-2. 시간 출력하기 function printTime() { const clock = document.querySelector(".time"); c.. 2022. 10. 18.

자바스크립트 : 검색 효과 : sort(), reverse() 자바스크립트 : 검색 효과 : sort(), reverse() 자바스크립트의 다양한 효과들 중, 검색 효과입니다. 이번에는 sort(), reverse() 메서드를 사용하여, 오름차순, 내림차순, 알파벳순 등 속성들이 다양한 방법으로 정렬되도록 작업해 보겠습니다. 1. 속성 작성하기 const cssProperty = [ { num: 1, name: "accent-color", desc: " 요소의 강조 색상을 지정합니다. " }, { num: 2, name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스'의 교차축 또는 그리드의 블록 축을 따라 배치하는 방식을 결정합니다." }, { num: 3, name: "align-items", desc: " 교차축.. 2022. 10. 18.

자바스크립트 패럴랙스 효과 : 리빌 효과 자바스크립트 : 패럴랙스 효과 : 리빌 효과 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 스크롤을 내릴 때마다 해당하는 섹션의 사진과 텍스트가 드러나도록 작업해 보도록 하겠습니다. 1. HTML 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 이번에 작업할 리빌 효과는 굉장히 복잡하며, HTML, CSS, JAVASCRIPT 세 가지 소스 모두가 절묘한 하모니를 이루고 있습니다. 그러므로 친절하게 HTML 소스를 삽입하니, 이것을 먼저 살펴보도록 합시다. 섹션은 같은 구조로 총 9가지를 만들어 주었습니다. 각각의 섹션은 번호, 이미지, 텍스트로 이루어집니다. 움직임 효과는 reveal 클래스에 작업해 주었습니다. 위와 같이 reveal(기본), reveal-TW.. 2022. 10. 9.

자바스크립트 검색 효과 : filter() 자바스크립트 : 검색 효과 : filter() 자바스크립트의 다양한 효과들 중, 해당하는 문자열을 찾을 수 있는 검색 효과입니다. 이번에는 filter() 메서드를 사용하여, 별점을 클릭하면 그 개수에 해당하는 속성들이 나타나도록 작업해 보겠습니다. 1. 속성 작성하기 const cssProperty = [ { star: 0, name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." }, { star: 1, name: "align-content", desc: "콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다." }, { star: 2, name: "align-items", desc: "콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다." }, { star: 3,.. 2022. 9. 29.

자바스크립트 패럴랙스 효과 : 텍스트 효과 자바스크립트 : 패럴랙스 효과 : 텍스트 효과 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 스크롤을 내릴 때마다 해당하는 섹션의 텍스트가 한 글자씩 나타나도록 작업해 보겠습니다. 1. 글씨 쪼개기 document.querySelectorAll(".split").forEach((text) => { let splitText = text.innerText; let splitWrap = splitText.split("").join(""); splitWrap = "" + splitWrap + ""; text.innerHTML = splitWrap; // p 태그(split)에 label 속성 추가 text.setAttribute("aria-label", splitText); }); 글자가 하나.. 2022. 9. 29.

자바스크립트 마우스 효과 : 텍스트 효과 자바스크립트 : 마우스 효과 : 텍스트 효과 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 이미지 위에 기울어진 형태의 텍스트를 만들고, 마우스를 움직일 때마다 텍스트가 움직이도록 텍스트 효과를 작업해 보도록 하겠습니다. 1. HTML 소스 1-1) 텍스트 상자 만들기 Pain Fast Pain Fast is pleasure. is pleasure. 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. 오늘은 HTML의 구조도 중요하기 때문에 함께 살펴보겠습니다. 텍스트 상자는 하나처럼 보이지만, 사실은 다른 각도로 기울어진 두 개의 상자가 있고, 두 상자가 만나는 지점 이후로는 overflow: hidden 속성을 사용하여 숨겨준 것입니다. 총 네 줄의 텍스트를 작성할 것이기 때문에 lin.. 2022. 9. 29.

자바스크립트 검색 효과 : find() 자바스크립트 : 검색 효과 : find() 자바스크립트의 다양한 효과들 중, 해당하는 문자열을 찾을 수 있는 검색 효과입니다. 이번에는 find() 메서드를 사용하여 속성을 검색하고, 검색하면 해당하는 설명이 나타나도록 작업해 보겠습니다. 1. 속성 출력하기 const cssProperty = [ { name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." }, { name: "align-content", desc: "콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다." }, { name: "align-items", desc: "콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다." }, { name: "align-self", desc: "개별적인 콘텐츠 아이템의 .. 2022. 9. 28.

자바스크립트 마우스 효과 : 기울기 효과 / 반전 효과 자바스크립트 : 마우스 효과 : 기울기 효과 / 반전 효과 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 이미지 위에 마우스를 오버하면 이미지가 기울어지고, 색상이 반전되는 효과가 나타나도록 작업해 주었습니다. 이펙트에 영향을 주는 주요 CSS 소스부터 먼저 살펴보도록 하겠습니다. 1. CSS 소스 1-1) 이미지 .mouse__img { transform: perspective(600px) rotateX(0deg) rotateY(0deg); transform-style: preserve-3d; will-change: transform; transition: all 0.3s; } 마우스를 오버했을 때, 움직일 이미지에 transform 속성을 부여해 줍니다. perspective 속성은 .. 2022. 9. 28.

자바스크립트 마우스 효과 : 이미지 효과 자바스크립트 : 마우스 효과 : 이미지 효과 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 이미지 위에 마우스를 오버하면 커서가 나타나고, 커서의 위치에 따라 이미지가 확대됨과 동시에 이동하는 효과를 작업해 보도록 하겠습니다. 1. 선택자 만들기 const cursor = document.querySelector(".mouse__cursor"); const cursorRect = document.querySelector(".mouse__cursor").getBoundingClientRect(); 커서에 대한 선택자를 먼저 만들어 줍니다. 두 번째 선택자는 마우스 효과 3번에서도 사용했던 속성으로, 너비와 높이 등을 객체로 한번에 출력할 수 있습니다. 2. 마우스 이벤트 만들기 docume.. 2022. 9. 22.

자바스크립트 마우스 효과 : 조명 효과 자바스크립트 : 마우스 효과 : 조명 효과 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 조명 효과를 작업해 보도록 하겠습니다. 조명 효과는 배경 이미지 위에 마우스를 올리면, 이미지가 선명하게 보이도록 하는 효과입니다. 1. CSS 소스 1-1) cursor 만들기 .mouse__cursor { position: absolute; left: 0; top: 0; width: 200px; height: 200px; z-index: -1; border-radius: 50%; background-image: url(../assets/img/effect_bg15@2x-min.jpg); background-size: cover; background-position: center center; ba.. 2022. 9. 22.

자바스크립트 패럴랙스 효과 : 이질감 효과 자바스크립트 : 패럴랙스 효과 : 이질감 효과 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 스크롤을 내릴 때마다 글자와 이미지에 애니메이션 효과를 주어, 약간의 이질감이 느껴지도록 작업해 보았습니다. 1. 스크롤 이벤트 만들어 주기 function scroll() { requestAnimationFrame(scroll); }; scroll(); 오늘 작업할 모든 함수들은, 재귀 함수인 scroll() 내에서 작업할 예정입니다. 패럴랙스 효과 3번에서도 설명했듯이, addEventListener를 사용하지 않는 이유는 버벅거림 현상을 피하기 위해서입니다. 2. 현재 스크롤의 높이값 구하기 let scrollTop = window.pageYOffset || document.document.. 2022. 9. 20.

자바스크립트 마우스 효과 : 마우스 따라다니기(GSAP) 자바스크립트 : 마우스 효과 : 마우스 따라다니기(GSAP) 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 GSAP를 활용하여 더 부드럽게 움직이는 커서를 작업해 보도록 하겠습니다. 1. HTML 소스 Only I can change my life, No one can do it for me 오직 나만이 내 인생을 바꿀 수 있다. 아무도 날 대신할 수는 없다 이번에는 커서를 두 개 작업해 주었습니다. HTML로 구조를 잡은 후, CSS로 스타일을 적용해 줍니다. 2. CSS 소스 .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; color: #fff; o.. 2022. 9. 18.

자바스크립트 슬라이드 효과 : 버튼 자바스크립트 슬라이드 효과 : 버튼 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 해당하는 버튼을 클릭하면 이전 이미지, 다음 이미지로 슬라이드하는 유형입니다. 1. CSS 소스 .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모(움직이는 부분) */ display: .. 2022. 9. 18.

자바스크립트 패럴랙스 효과 : 나타나기 자바스크립트 : 패럴랙스 효과 : 나타나기 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 패럴렉스 효과 1번과 같은 메뉴 디자인이지만, 스크롤의 위치에 따라 콘텐츠의 각 내용물들이 순차적으로 나타나는 유형을 작업해 보도록 하겠습니다. 1. JAVASCRIPT로 스크롤 이벤트 만들어 주기 2-1) addEventListener window.addEventListener("scroll", 함수명); 지금까지는 addEventListener로 스크롤 이벤트를 작업해 주었습니다. 그러나, 이 방법은 스크롤을 매번 감지하기 때문에 버벅거림 현상이 나타날 수 있습니다. 따라서 이번에는 재귀함수를 사용하여 작업을 하도록 하겠습니다. 2-2) 재귀함수(Recursion) function scroll(.. 2022. 9. 18.

자바스크립트 패럴랙스 효과 : 메뉴 숨김, TOP버튼 자바스크립트 : 패럴랙스 효과 : 메뉴 숨김 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 패럴렉스 효과 1번과 같은 메뉴 디자인이지만, 스크롤을 아래로 내리면 메뉴가 사라지고, 위로 올리면 메뉴가 나타나도록 작업해 주었습니다. 또, 스크롤이 최하단 부근에 위치하면 Top 버튼이 나타나고, Top 버튼을 클릭하면 최상단으로 올라갈 수 있는 기능을 추가해 주었습니다. 1. 스크롤 이벤트 만들어 주기 window.addEventListener("scroll", () => { /* 1) 스크롤의 높이값 구하기 */ let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; /* 2) in.. 2022. 9. 10.

자바스크립트 패럴랙스 효과 : 사이드 메뉴 자바스크립트 : 패럴랙스 효과 : 사이드 메뉴 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 상단 메뉴가 아닌 사이드 메뉴를 만들어 주고, 현재 위치한 스크롤값에 따라 메뉴에 애니메이션 효과를 추가해 주었습니다. HTML 소스 HTML은 먼저 nav, main, aside 세 파트로 나누어 주었습니다. nav에는 9개의 메뉴, main에는 9개의 콘텐츠, aside에는 스크롤의 위치값을 볼 수 있게끔 만들어 주었습니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 비가 온 다음에는 맑은 날씨가 된다. 03 section3 정직한 사람이 없다고 말하는 사람이야말로 가장 정직하지.. 2022. 9. 8.

자바스크립트 패럴랙스 효과 : 메뉴 이동 자바스크립트 : 패럴랙스 효과 : 메뉴 이동 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 스크롤의 위치에 따라 메뉴 탭의 클래스에 변화를 주고, 메뉴를 클릭하면 메뉴가 있는 곳으로 부드럽게 이동하게끔 작업해 보도록 하겠습니다. HTML 소스 HTML은 먼저 nav, main, aside 세 파트로 나누어 주었습니다. nav에는 9개의 메뉴, main에는 9개의 콘텐츠, aside에는 스크롤의 위치값 목록을 만들어 주었습니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 비가 온 다음에는 맑은 날씨가 된다. 03 section3 정직한 사람이 없다고 말하는 사람이야말로 가장 정직하지 .. 2022. 9. 6.

자바스크립트 마우스 효과 : 마우스 따라다니기 자바스크립트 : 마우스 효과 : 마우스 따라다니기 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 다양한 메서드를 활용하여 마우스의 위치값을 찾고, 위치값에 따라 커서가 이동하고 변화하게끔 작업해보도록 하겠습니다. HTML 소스 HTML로는 먼저 마우스의 커서를 만들어 주고, 명언이 들어갈 mouse__wrap 박스, 마우스의 위치값을 작성할 mouse__info 박스를 만들어 주었습니다. The future depends on what we do in the present 미래는 현재 우리가 무엇을 하는가에 달려있다 clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY .. 2022. 9. 6.

자바스크립트 슬라이드 효과 : 좌로 움직이는 유형(연속적) 자바스크립트 슬라이드 효과 : 좌로 움직이는 유형(연속적) 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 마지막 이미지에 도달해도, 처음 이미지로 돌아가지 않고 연속적으로 이미지가 나타나는 유형입니다. HTML 소스 HTML로 뼈대를 먼저 잡아줍니다. section 태그 안에는 클래스명이 slider__wrap인 div 박스, 그 안에는 클래스명이 slider__img인 div 박스를 만들어 주고, 그 안에는 slider__inner 박스, 그 안 slider 박스 안에는 각각 이미지 5장을 삽입해 주었습니다. 각각의 div 박스의 용도는 CSS 소스에서 추가로 설명하도록 하겠습니다. 궁금하면 보시든가... CSS 소스 /* slider */ .. 2022. 9. 1.

자바스크립트 슬라이드 효과 : 좌로 움직이는 유형 자바스크립트 슬라이드 효과 : 좌로 움직이는 유형 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 왼쪽으로 미끄러지듯이 이미지가 넘어가는 효과를 추가해준 유형입니다. HTML 소스 HTML로 뼈대를 먼저 잡아줍니다. section 태그 안에는 클래스명이 slider__wrap인 div 박스, 그 안에는 클래스명이 slider__img인 div 박스를 만들어 주고, 그 안에는 slider__inner 박스, 그 안 slider 박스 안에는 각각 이미지 5장을 삽입해 주었습니다. 각각의 div 박스의 용도는 CSS 소스에서 추가로 설명하도록 하겠습니다. 궁금하면 보시든가... CSS 소스 /* slider */ .slider__wrap { width.. 2022. 8. 29.

자바스크립트 슬라이드 효과 : transition 자바스크립트 : 슬라이드 효과 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. HTML 소스 HTML로 뼈대를 먼저 잡아줍니다. section 태그 안에는 클래스명이 slider__wrap인 div 박스, 그 안에는 클래스명이 slider__img인 div 박스를 만들어 주고, slider__img 박스 안에는 이미지 5장을 삽입해 주었습니다. CSS 소스 각각의 이미지가 담긴 slider 클래스에는 absolute와 z-index 속성을 부여함으로써 이미지를 층층이 쌓아, 한 장처럼 보이게끔 작업해 주었습니다. /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-item.. 2022. 8. 29.

자바스크립트 퀴즈 효과 : 객관식(여러 문제 유형) : 슬라이드 형식 자바스크립트 : 퀴즈 효과 : 슬라이드 형식 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 객관식 정답을 선택하고, '다음 문제' 버튼을 누르면 다음 문제로 이동하는 슬라이드 형식으로 퀴즈를 작업했습니다. 객관식(여러 문제) 유형 : 슬라이드 형식 예시는 웹디자인기능사의 필기 시험 문제입니다. 문제의 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다. 문제를 다 푼 뒤 '정답 확인하기' 버튼을 클릭하면 맞힌 문제의 갯수와 점수, 합/불합격 여부가 나타납니다. // 문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2013년 01회", a.. 2022. 8. 24.

자바스크립트 퀴즈 효과 : 객관식(여러 문제) 유형 : 웹디자인기능사 2013년 2회 기출 60문제 자바스크립트 : 퀴즈 효과 : 웹디자인기능사 2015년 2회 기출 문제 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 여러 개의 문제의 객관식 정답을 선택하는 퀴즈 유형을 작업해 보도록 하겠습니다. 객관식(여러 문제) 유형 예시는 웹디자인기능사의 필기 시험 문제입니다. 문제의 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다. 문제를 다 푼 뒤 '정답 확인하기' 버튼을 클릭하면 맞힌 문제의 갯수와 점수, 합/불합격 여부가 나타납니다. // 문제 정보 : 배열 안에 객체를 넣은 형태로 각 문제를 작성했습니다. const quizInfo = [ { answerType: "웹디.. 2022. 8. 24.

자바스크립트 검색 효과 : charAt() 자바스크립트 : 검색 효과 : charAt() 자바스크립트의 다양한 효과들 중, 해당하는 문자열을 찾을 수 있는 검색 효과입니다. 이번에는 charAt() 메서드를 이용하여 CSS의 다양한 속성을 검색할 수 있는 웹사이트를 작업해 보도록 하겠습니다. HTML 소스 HTML로 뼈대를 먼저 잡아주었습니다. 헤더 영역에는 내비게이션 메뉴를, 메인 영역에는 알파벳 선택창, 하위 목록들을 작성해 주었습니다. 각 알파벳이 쓰인 버튼을 클릭하면, 해당하는 알파벳으로 시작하는 속성들이 목록에 나타납니다. 아래 소스는 메인 영역의 HTML 소스로, 나머지 영역의 소스는 하단의 '원본 소스 보기' 버튼을 클릭하면 확인할 수 있습니다. charAt()를 이용하여 검색하기 CSS 속성 첫글자 검색하기 a b c d e f g.. 2022. 8. 22.

자바스크립트 검색 효과 : includes() 자바스크립트 : 검색 효과 : includes() 자바스크립트의 다양한 효과들 중, 해당하는 문자열을 찾을 수 있는 검색 효과입니다. 이번에는 includes() 메서드를 이용하여 CSS의 다양한 속성을 검색할 수 있는 웹사이트를 작업해 보도록 하겠습니다. HTML 소스 HTML로 뼈대를 먼저 잡아주었습니다. 헤더 영역에는 내비게이션 메뉴를, 메인 영역에는 검색창, 하위 목록들을 작성해 주었습니다. 각각의 하위 목록에는 data-type을 추가해 주어, 애니메이션, 보더 등의 유형 이름을 검색해도 결과값이 나타나도록 작업해 주었습니다. 아래 소스는 메인 영역의 HTML 소스로, 나머지 영역의 소스는 하단의 '원본 소스 보기' 버튼을 클릭하면 확인할 수 있습니다. includes()를 이용하여 검색하기 C.. 2022. 8. 17.

자바스크립트 검색 효과 : indexOf() 자바스크립트 : 검색 효과 : indexOf() 자바스크립트의 다양한 효과들 중, 해당하는 문자열을 찾을 수 있는 검색 효과입니다. indexOf() 메서드를 이용하여 CSS의 다양한 속성을 검색할 수 있는 웹사이트를 작업해 보도록 하겠습니다. HTML 소스 HTML로 뼈대를 먼저 잡아주었습니다. 헤더 영역에는 내비게이션 메뉴를, 메인 영역에는 검색창, 하위 목록들을 작성해 주었습니다. 아래 소스는 메인 영역의 HTML 소스로, 나머지 영역의 소스는 하단의 '원본 소스 보기' 버튼을 클릭하면 확인할 수 있습니다. indexOf()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 전체 속성 갯수 : align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘.. 2022. 8. 17.

자바스크립트 퀴즈 효과 : 객관식 유형 자바스크립트 : 퀴즈 효과 자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 객관식 정답을 선택하는 퀴즈 유형을 작업해 보도록 하겠습니다. 객관식 유형 예시는 웹디자인기능사의 필기 시험 문제입니다. 4지선다 문제의 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다. // 선택자 const quizType = document.querySelector(".quiz__type"); // 퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); // 퀴즈 번호 const quizAsk = document... 2022. 8. 8.

이전 1 2 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바