본문 바로가기

EFFECT33

[EFFECT] 슬라이드 효과 - 이미지 슬라이드(버튼, dot메뉴, 무한, 자동플레이 정지버튼, 자동플레이 버튼) 슬라이드 이펙트 - 이미지 슬라이드(버튼, dot메뉴, 무한으로 움직이기, 자동플레이 정지버튼, 자동플레이 버튼) 이번 시간에는 지금까지 했던 슬라이드 실습을 모두 응용한 최종적인 슬라이드를 구현해보겠습니다. 🥹 모두 고생많으셨습니다! 🫠🫠🔥 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. 또한 버튼 아래 닷메뉴와 재생정지버튼 구조는 스크립트로 구현할 것이므로 주석처리를 해줍니다. ✏️ HTML 스크립트 보기 이미지1 이미지2 이미지3 이미지4 이미지5 prev next ! CSS TIP ! 1. 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 over.. 2022. 10. 24.

[EFFECT]슬라이드 효과 - 이미지 슬라이드(버튼, dot메뉴, 무한) 슬라이드 이펙트 - 이미지 슬라이드(버튼, dot메뉴, 무한으로 움직이기) 이번 시간에는 이미지가 끊기지 않고 계속 이어져서 나오는 무한 슬라이드와 닷메뉴 버튼으로 움직이는 슬라이드를 구현해보겠습니다! 🥹 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. 또한 버튼 아래 닷메뉴 구조를 추가해주었습니다. 닷 메뉴는 스크립트로 구현할 것이므로 주석처리를 해줍니다. ✏️ HTML 스크립트 보기 이미지1 이미지2 이미지3 이미지4 이미지5 prev next ! CSS TIP ! 1. 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을.. 2022. 10. 24.

[EFFECT] 게임 이펙트01 : 레트로 st 구성하기 🎮 게임 효과 01 : 뮤직 플레이어 이번 시간에는 게임 효과 1번째 중 뮤직플레이어를 구현하는 실습을 진행하도록 하겠습니다! #1. HTML / CSS 설정하기 ! HTML TIP ! 플레이어의 구조를 작성합니다. 또한 스크립트로 작성할 부분들은 주석처리를 해줍니다. ✏️ HTML 스크립트 보기 * MUSIC PlAYER * BACK ON TOP (feat.Griff) - HONNE YOUTUBE MUSIC 0:00 4:00 MUSIC LIST ! CSS TIP ! 원하는 느낌의 게임 배경과 플레이어 스타일을 지정해주시면 됩니다. 또한 주석처리된 버튼도 위치를 조정하여 스트립트 작성 시 문제가 생기지 않도록 합니다. ✏️ CSS 스크립트 보기 /* music */ .music__wrap .music_i.. 2022. 10. 24.

[EFFECT] 검색 효과06 : Search Game 🔍 검색 효과 : 검색 게임 만들기 이번 시간에는 지금까지 배웠던 내용을 응용하여 단어 게임을 만들어보겠습니다! #1. HTML / CSS 설정하기 ✏️ HTML 스크립트 보기 CSS 속성 검색 이벤트 2분 동안 CSS 속성 검색하기 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 속성이 기억나지 않으면, 힌트 보기를 1회 이용할 수 있습니다. 2:00 검색하기 버튼을 누르면 게임이 시작됩니다. 전체 속성 개수 : 0 맞힌 개수 : 0 다시 도전하기 ! CSS TIP ! 원하는 스타일애 맞춰 지정해주시면 됩니다! 아래의 코드는 참고용으로 봐주세요! ✏️ CSS 스크립트 보기 :root { --htmlColor: #223547; } .searchGame { display: none; z-inde.. 2022. 10. 24.

슬라이드 효과 - 이미지 슬라이드(버튼, dot메뉴) 슬라이드 이펙트 - 이미지 슬라이드(버튼, dot메뉴) 이번 시간에는 자동으로 넘어가지 않고 버튼과 닷 메뉴를 클릭했을 때 해당 순서로 이미지가 넘어가도록 구현해보겠습니다! 🥹 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. 또한 버튼 아래 닷메뉴 구조를 추가해주었습니다. 닷 메뉴는 스크립트로 구현할 것이므로 주석처리를 해줍니다. ✏️ HTML 스크립트 보기 prev next ! CSS TIP ! 1. 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다. 2. 이미지가 연속적으로 움직일 수 있도록 첫번째 이미지를.. 2022. 10. 24.

[EFFECT] 페럴렉스 효과07 : 텍스트 효과 🖱 페럴렉스 효과 : 텍스트 효과 🖱 페럴랙스(parallax)란 의미로 사용자가 스크롤링을 할 때 발생하는 이벤트(배경과 요소마다 속도 및 크기의 차이를 주어 입체적으로 느껴지게 하는 효과 등)를 말합니다. 이번 시간에는 스크롤을 내릴 때 텍스트를 쪼개어 각각 하나의 요소로 만들어 준 뒤 css의 딜레이 속성을 통해 글씨가 하나씩 움직이도록 실습해보겠습니다! 🫠🫠🫠 #1. HTML / CSS 설정하기 ✏️ HTML 보기 01 section1 미래는 현재 우리가 무엇을 하는가에 달려 있다. 02 section2 어제로 돌아갈 수 없다. 왜냐하면 나는 어제와는 다른 사람이 되었기 때문이다. 03 section3 언제나 현재에 집중할수 있다면 행복할것이다. 04 section4 먼저 핀 꽃은 먼저진다 남보다.. 2022. 10. 21.

[EFFECT] 검색 효과05 : sort(), reverse()를 이용하여 정렬하기 🔍 검색 효과 : sort(), reverse()를 이용하여 정렬하기 이번 시간에는 sort(), reverse() 메서드를 통해 클릭할 경우 해당 조건으로 속성을 정렬하는 실습을 해보겠습니다. + 추가로 랜덤으로 속성이 정렬되는 실습도 해보겠습니다......... 🥲 #1. HTML / CSS 설정하기 ! HTML TIP ! search__click에서 li 요소에게 data-데이터명="데이터 값"을 설정합니다. => 추후 스크립트에 사용하기 위함! (클릭이벤트, 숫자 치환) ✏️ HTML 스크립트 보기 sort(), reverse()를 이용하여 정렬하기 CSS 속성 검색하기 반대로 정렬 내림차순 정렬 오름차순 정렬 알파벳순(a-z) 알파벳순(z-a) 랜덤 정렬 CSS 전체 속성 : 0 ! CSS TI.. 2022. 10. 17.

[EFFECT] 검색 효과 05 : filter()메서드를 통해 중요도 순으로 검색하기 🔍 검색 효과 : filter()를 이용하여 속성 중요도 순으로 검색하기 이번 시간에는 filter 통해 중요도 순으로 클릭할 경우 속성이 나타나는 실습을 해보겠습니다. + 추가로 중요도(별)이 몇개 이상일 경우 해당 속성이 나오는 실습도 해보겠습니다......... 🥲 #1. HTML / CSS 설정하기 ! HTML TIP ! search__click에서 li 요소에게 data-데이터명="데이터 값"을 설정합니다. => 추후 스크립트에 사용하기 위함! (클릭이벤트, 숫자 치환) ✏️ HTML 스크립트 보기 filter()를 이용하여 속성 클릭 시 중요도 순으로 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 CSS.. 2022. 9. 30.

[EFFECT] 페럴렉스 효과06 : 텍스트 효과 🖱 페럴렉스 효과 : 텍스트 효과 🖱 페럴랙스(parallax)란 의미로 사용자가 스크롤링을 할 때 발생하는 이벤트(배경과 요소마다 속도 및 크기의 차이를 주어 입체적으로 느껴지게 하는 효과 등)를 말합니다. 이번 시간에는 스크롤을 내릴 때 텍스트를 쪼개어 각각 하나의 요소로 만들어 준 뒤 css의 딜레이 속성을 통해 글씨가 하나씩 움직이도록 실습해보겠습니다! 🫠🫠🫠 #1. HTML / CSS 설정하기 ✏️ HTML 보기 01 section1 미래는 현재 우리가 무엇을 하는가에 달려 있다. 02 section2 어제로 돌아갈 수 없다. 왜냐하면 나는 어제와는 다른 사람이 되었기 때문이다. 03 section3 언제나 현재에 집중할수 있다면 행복할것이다. 04 section4 먼저 핀 꽃은 먼저진다 남보다.. 2022. 9. 30.

[EFFECT] 검색 유형04 : map / find()를 통해 검색값 가져오기 🔍 검색 효과 : find()를 이용하여 속성을 검색하기 이번 시간에는 find를 통해 속성을 검색할 경우 해당 속성 설명이 나타나는 효과를 실습해보겠습니다 + 추가로 속성 버튼을 클릭한 경우에도 해당 속성의 설명이 나타나도록 작업해보겠습니다! 🥲 #1. HTML / CSS 설정하기 ! HTML TIP ! input의 텍스트 타입은 텍스트를 입력할 수 있는 요소가 생성됩니다. 또한 input의 placeholder 속성은 요소안에 사용자에게 입력 전 문구를 보이도록 해줍니다. ✏️ HTML 스크립트 보기 find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 나타납니다. CSS 전체 속성 : 0 ! CSS TIP ! 이전 검색 이펙트와 스타일이 동일하.. 2022. 9. 29.

[EFFECT] 마우스 효과 05 : 기울기 효과 / 글씨 반전 효과 🖱 마우스 효과 : 기울기 효과 / 글씨 반전 효과 🖱 이번 시간에는 이미지와 텍스트에게 3d효과를 준 뒤 마우스가 움직일 때 함께 기울어지는 효과를 설정해보겠습니다. 또한 마우스 영역이 이미지에 오버되었을 때 색이 반전되는 효과도 설정해보겠습니다! ㅠㅠ 점점 어려워지네용,,,🫠 #1. HTML / CSS 설정하기 ! HTML TIP ! figure는 이미지나 그래프 등의 도표를 문서에 삽입할 경우 사용하는 시멘틱 태그입니다. figure를 통해 이미지의 영역을 잡아줍니다! figcaption은 figure의 설명을 도와주는 시멘틱 태그라 볼 수 있습니다. figcaption을 통해 텍스트의 영역을 잡아줍니다~! ✏️ HTML 스크립트 보기 The way get started is to quit talk.. 2022. 9. 29.

[EFFECT] 마우스 효과 04 : 이미지 효과 🖱 마우스 효과 : 이미지효과 🖱 이번 시간에는 이미지 영역안에 커서가 들어갈 경우 스타일이 바뀜과 동시에 이미지도 커서 반대 방향으로 움직이는 효과를 주도록 해보겠습니다. #1. HTML / CSS 설정하기 ! HTML TIP ! figure는 이미지나 그래프 등의 도표를 문서에 삽입할 경우 사용하는 시멘틱 태그입니다. figure를 통해 이미지의 영역을 잡아줍니다! figcaption은 figure의 설명을 도와주는 시멘틱 태그라 볼 수 있습니다. figcaption을 통해 텍스트의 영역을 잡아줍니다~! ✏️ HTML 스크립트 보기 The way get started is to quit talking and begin doing. 무언가를 시작하려면 말하는 것을 멈추고 행동으로 옮겨야 한다. mous.. 2022. 9. 23.

[EFFECT] 마우스 효과 03 : 조명 효과 🖱 마우스 효과 : 조명효과 🖱 이번 시간에는 커서에게 조명효과를 주도록 해보겠습니다.😆 배경 이미지를 어둡게한 상태에서 커서 영역에 똑같은 이미지를 넣어주면 그 부분만 밝아 보여 마지 조명을 비춘 듯 한 효과를 볼 수 있답니다~~ 신가하죠~?! 그럼 함께 실습해봅시다~! #1. HTML / CSS 설정하기 ! HTML TIP ! 페이지 섹션과 마우스 인포(커서 위치값 박스)를 각각 나누어 구조에 맞게 레이아웃을 짠 뒤 스크립트를 위한 선택자를 각각 부여합니다. ✏️ HTML 스크립트 보기 Energy and persistence conquer all things 기운과 끈기는 모든 것을 이겨낸다. ! CSS TIP ! position: absolute; : 기존의 마우스 커서를 따라다니도록 포지션을 정.. 2022. 9. 23.

[EFFECT] 페럴렉스 효과05 : 이질감 효과 🖱 페럴렉스 효과 : 이질감 효과 🖱 페럴랙스(parallax)란 의미로 사용자가 스크롤링을 할 때 발생하는 이벤트(배경과 요소마다 속도 및 크기의 차이를 주어 입체적으로 느껴지게 하는 효과 등)를 말합니다. 이번 시간에는 스크롤을 내릴 때 넘버, 이미지, 텍스트의 각 위치값에 오차를 주어서 다르게 주어 이질감을 주는 효과를 실습해보겠습니다.🤩 추가로 필요한 소스는 GSAP로 스크롤 이벤트를 부드럽게 작동하기 위해서 입니다~! 그럼 실습하러 고고릥~ 🚗 💨 #1. HTML / CSS 설정하기 ✏️ HTML 보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 미래는 현재 우리가 무엇을 하는가에 달려 있다. 02 section2 어제로 돌아갈 수 없다. 왜냐하면 나는 .. 2022. 9. 21.

[EFFECT] 슬라이드 효과 04 : 버튼으로 이미지 이동시키기! 이미지 슬라이드 : 버튼을 통해 슬라이드 움직이기 (왼쪽 오른쪽 모두 동작) 이번 시간에는 자동으로 넘어가지 않고 버튼을 클릭했을 때 해당 순서로 이미지가 넘어가도록 구현해보겠습니다! 🥹 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. 구조는 지난 시간과 똑같으나 slider__img 밑에 형제 요쇼로 버튼 영역을 선언해주었습니다! ✏️ HTML 스크립트 보기 prev next ! CSS TIP ! 1. 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다. 2. 이미지가 연속적으로 움직일 수 있도록 첫번째 이미지.. 2022. 9. 19.

[EFFECT] 마우스 효과 02 : 커서 따라다니기 🖱 마우스 효과 : 마우스 커서 따라다니기 🖱 이번 시간에는 해당 영역에 커서가 닿았을 때 이벤트가 발생하는 효과에 이어서 커서를 따라다니는 요소를 구현해보겠습니다 😆 #1. HTML / CSS 설정하기 ! HTML TIP ! 페이지 섹션과 마우스 인포(커서 위치값 박스)를 각각 나누어 구조에 맞게 레이아웃을 짠 뒤 스크립트를 위한 선택자를 각각 부여합니다. 또한 텍스트에서 스타일 변경 및 이벤트를 발생시키고 싶은 곳에 각각 선택자를 선언합니다. ✏️ HTML 스크립트 보기 Javascript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기(GSAP) 1 2 3 4 5 6 7 Energy and persistence conquer all things 기운과 끈기는 모든 것을 이겨낸다. ! .. 2022. 9. 19.

[EFFECT] 페럴렉스 효과 04 : 나타내기 효과 🖱 페럴렉스 효과 : 스크롤을 내릴 때 요소 나타내기🖱 페럴랙스(parallax) 시차란 의미로 사용자가 스크롤링을 할 때 배경과 요소마다 속도 및 크기의 차이를 주어 입체적으로 느껴지게 하는 효과를 말합니다. 이번 시간에는 스크롤을 내릴 때 각 섹션의 요소들이 개별적으로 에니메이션 동작을 하도록 실습해보겠습니다~!🤩 #1. HTML / CSS 설정하기 ✏️ HTML 보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 미래는 현재 우리가 무엇을 하는가에 달려 있다. 02 section2 어제로 돌아갈 수 없다. 왜냐하면 나는 어제와는 다른 사람이 되었기 때문이다. 03 section3 언제나 현재에 집중할수 있다면 행복할것이다. 04 section4 먼저 핀 꽃은 .. 2022. 9. 19.

[EFFECT] 페럴렉스 효과 03 : top버튼 구현과 메뉴 숨김 효과 🖱 페럴렉스 효과 : top 버튼 구현하기🖱 페럴랙스(parallax) 시차란 의미로 사용자가 스크롤링을 할 때 배경과 요소마다 속도 및 크기의 차이를 주어 입체적으로 느껴지게 하는 효과를 말합니다. 이번 시간에는 top버튼을 누를 때 스크롤이 최상단으로 부드럽게 이동하는 효과를 실습해보겠습니다. 추가로 버튼이 가장 하단에서만 보이게 하고 메뉴 버튼도 스크롤을 내릴 시 보이지 않도록 구현해보겠습니다 😆 #1. HTML / CSS 설정하기 ✏️ HTML 보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 미래는 현재 우리가 무엇을 하는가에 달려 있다. 02 section2 어제로 돌아갈 수 없다. 왜냐하면 나는 어제와는 다른 사람이 되었기 때문이다. 03 se.. 2022. 9. 14.

[EFFECT] 페럴렉스 효과02 : 스무스~한 버튼 이동 🖱 페럴렉스 효과 : 사이드 메뉴 이동 효과🖱 페럴랙스(parallax) 시차란 의미로 사용자가 스크롤링을 할 때 배경과 요소마다 속도 및 크기의 차이를 주어 입체적으로 느껴지게 하는 효과를 말합니다. 이번 시간에는 사이트 메뉴 버튼을 눌렀을 때(active) 해당 화면으로 스크롤이 부드럽게 이동하는 효과를 실습해보겠습니다. 😆 #1. HTML / CSS 설정하기 ✏️ HTML 보기 메뉴 1 메뉴 2 메뉴 3 메뉴 4 메뉴 5 메뉴 6 메뉴 7 메뉴 8 메뉴 9 01 section1 미래는 현재 우리가 무엇을 하는가에 달려 있다. 02 section2 어제로 돌아갈 수 없다. 왜냐하면 나는 어제와는 다른 사람이 되었기 때문이다. 03 section3 언제나 현재에 집중할수 있다면 행복할것이다. 04 se.. 2022. 9. 14.

[EFFCET] 페럴렉스(parallax) 효과 : 메뉴 이동 🖱 페럴렉스 효과 : 메뉴 스크롤링 효과 🖱 페럴랙스(parallax) 시차란 의미로 사용자가 스크롤링을 할 때 배경과 요소마다 속도 및 크기의 차이를 주어 입체적으로 느껴지게 하는 효과를 말합니다. 이번 시간에는 버튼을 눌렀을 때(active) 해당 화면으로 스크롤이 부드럽게 이동하는 효과와 스크롤을 내릴 때 해당 버튼이 강조되는 효과를 실습해보겠습니다. 😆 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 섹션 별로 구조를 설정합니다. 이 때 큰 틀부터 구조를 설정하는 것이 중요한 포인트 입니다! 구조는 먼저 크게 nav : 메뉴 | main : 메인 콘텐츠(이미지, 텍스트) | aside : 스크롤의 위치값으로 나누어 줍니다. 세부적인 구조는 아래의 코드를 참고하시기 바랍니다! ✏️ H.. 2022. 9. 7.

[EFFECT] 마우스 효과 01 : 커서 따라다니기 🖱 마우스 효과 : 마우스 포인터 따라다니기 🖱 이번 시간에는 마우스 커서를 움직임에 따라 해당 영역에 커서가 닿았을 때 이벤트가 발생하는 효과를 실습해보겠습니다 😆 #1. HTML / CSS 설정하기 ! HTML TIP ! 페이지 섹션과 마우스 인포(커서 위치값 박스)를 각각 나누어 구조에 맞게 레이아웃을 짠 뒤 스크립트를 위한 선택자를 각각 부여합니다. 또한 텍스트에서 스타일 변경 및 이벤트를 발생시키고 싶은 곳에 각각 선택자를 선언합니다. ✏️ HTML 스크립트 보기 The future depends on what we do in the present 미래는 현재 우리가 무엇을 하는가에 달려 있다. clientX : 0px clientY : 0px offsetX: 0px offsetY: 0px pa.. 2022. 9. 6.

[EFFCET] 이미지 : 슬라이드 유형03 이미지 슬라이드 : 연속적으로 움직이기 지난 시간에는 슬라이드가 좌측으로 이동하는 타입으로 마지막에서 슈루룩~ 첫번째로 돌아갔다면 이번 시간에는 이미지가 자연스럽게 넘어가도록 2초 지날 때마다 이미지가 연속적으로 바뀌는 슬라이드 형식의 페이지를 작업해보겠습니다.😀 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. ✏️ HTML 스크립트 보기 ! CSS TIP ! 1. 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다. 2. 이미지가 연속적으로 움직일 수 있도록 첫번째 이미지를 6번째에 추가로 넣습니다. (애니메이.. 2022. 9. 2.

[EFFCET] 이미지 : 슬라이드 유형02 이미지 슬라이드 : 좌측으로 움직이기 이번 시간에는 2초 지날 때마다 좌측으로 이미지가 바뀌는 슬라이드 형식의 페이지를 작업해보겠습니다.😀 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. ✏️ HTML 스크립트 보기 ! CSS TIP ! 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다. ✏️ CSS 스크립트 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: c.. 2022. 8. 30.

[EFFECT] 이미지 : 슬라이드 유형01 이미지 슬라이드 : 트렌지션 효과 주기 이번 시간에는 2초 지날 때마다 이미지가 바뀌는 슬라이드 형식의 페이지를 작업해보겠습니다.😀 #1. HTML / CSS 설정하기 ! HTML TIP ! 각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다. ✏️ HTML 스크립트 보기 ! CSS TIP ! 이미지가 겹쳐있기때문에 마지막 이미지만 보이게 됩니다. 때문에 :nth-child()과 z-index를 통해 이미지의 순서를 바꿔줍니다. * z-index() : 레이어처럼 각 순서를 정해줍니다. ✏️ CSS 스크립트 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; jus.. 2022. 8. 30.

[QUIZ] 퀴즈 만들기06 : 슬라이드 형식 퀴즈 객관식 유형 : 슬라이드 형식 이번 시간에는 퀴즈를 슬라이드 형식으로 제작해봅시다! 그 뒤 정답 갯수와 문제의 총 갯수, 총 점수를 구하는 식을 만들어 봅시다. ! 미리 보기 ! #1. 퀴즈 인포 (문제 모음) 만들기 데이터 저장 타입인 배열안 객체를 통해 각각의 퀴즈 문제를 키와 값으로 데이터화 시켜 저장해줍니다. 지난 퀴즈와 달리 객체안에 또 배열을 만들어서 저장해줍니다. const quizInfo = [ { answerType : "웹디자인기능사 2015년 01회", answerNum : "1", answerAsk : "웹 디자인에 대한 설명으로 거리가 먼 것은?", answerChoice : [ "웹 페이지를 디자인하고 제작하는 것을 의미한다.", "웹 디자인은 개인용 홈페이지 이외에 기업용.. 2022. 8. 25.

[QUIZ] 퀴즈 만들기05 : 객관식 60문제 퀴즈 객관식 유형 : 60문제 이번 시간에는 자바스크립트를 통해 문제 텍스트들을 직접 해당 란에 넣어서 제작해봅시다! 그 뒤 조건문을 통해 정답 갯수와 문제의 총 갯수를 구하는 식을 만들어 봅시다. ! 미리 보기 ! 원본 소스 보기 원본 페이지 보기 #1. 퀴즈 인포 (문제 모음) 만들기 데이터 저장 타입인 배열안 객체를 통해 각각의 퀴즈 문제를 키와 값으로 데이터화 시켜 저장해줍니다. const quizInfo = [ { answerType : "웹디자인기능사 2015년 01회", answerNum : "1", answerAsk : "웹 디자인에 대한 설명으로 거리가 먼 것은?", answerChoice : { 1: "웹 페이지를 디자인하고 제작하는 것을 의미한다.", 2: "웹 디자인은 개인용 홈페이.. 2022. 8. 25.

[Search] 검색 유형 사이트 만들기03 charAt()을 통해 검색 사이트 제작하기 이번 시간에는 문자열 메서드 중 하나인 charAt() 메서드를 통해 알파벳과 css속성의 첫글자가 동일한 것만 나오는 검색 사이트를 제작해보겠습니다! 먼저 charAt() 메서드에 대한 이해를 높이기 위해 전 게시글을 보고 오시는 것이 좋습니다 ;) #1. HTML : 구조 짜기 ! point ! 버튼을 위한 알파벳 마크업을 작업해줍니다. 스크립트와 css속성을 위해 인포 안에 keyword 부모 요소를 만들어 줍니다. ✏️코드 보기 a b c d e f g h i j k l n m o p q r s t u v w x y z CSS 속성 갯수 : 0 알파벳 버튼 작업이 끝나면 속성 리스트를 작업해줍니다. ✏️ 리스트 보기 accent-color : accen.. 2022. 8. 23.

[Search] 검색 유형 사이트 만들기02 includes()를 통해 검색 사이트 제작하기 이번 시간에는 문자열 메서드 중 하나인 includes() 메서드를 통해 검색 사이트를 제작해보겠습니다! 먼저 includes() 메서드에 대해 짧게 알아보고 사이트 실습에 들어가보겠습니다! #1. includes() includes() 메서드는 대소문자를 구분하며 문자열 내에서 검색할 문자의 포함 여부에 따라 불린(true, false)을 반환합니다. ✏️예제 코드 const str1 = "javascript reference"; const currentStr1 = str1.includes("javascript"); // true const currentStr2= str1.includes("j"); // true const currentStr3= str1.. 2022. 8. 17.

[Search] 검색 유형 사이트 만들기01 indexOf()를 통해 검색 사이트 제작하기 지난 시간에는 indexOf()에 대해 알아보았습니다. 이번 시간에는 심화과정으로 문자열 메서드 중 하나인 indexOf() 메서드를 통해 검색 사이트를 제작해볼까요?! 먼저 indexOf() 메서드에 대해 짧게 알아보고 사이트 실습에 들어가보겠습니다! #1. indexOf() indexOf() 메서드는 문자열에서 특정 문자의 위치(index)를 찾은 후 숫자로 반환합니다. ✏️코드 보기 const str1 = "javascript reference" const currentStr1 = str1.indexOf("javascript"); // 0 const currentStr2 = str1.indexOf("reference"); // 11 (11번째 자리 : .. 2022. 8. 17.

퀴즈 문제 만들기04 퀴즈 객관식 유형 자바스크립트를 이용하여 웹디자인기능사 필기문제를 객관식 유형 퀴즈로 여러개 제작해보기 하나의 객관식 문제를 자바스크립트를 이용하여 만들어보자! #1. 선택자 자바스크립트 소스 상수에게 해당명칭(ex: quizType)을 선언해주고 쿼리셀랙터(태그, 아이디, 클래스를 선택할 수 있는 것)로 선택한 요소를 찾아서 넣어보자! //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask".. 2022. 8. 8.

이전 1 2 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바