Javascript_Effect34 게임 이펙트 - 같은 그림 찾기 게임 효과 게임 이펙트 - 같은 그림 찾기 오늘은 같은그림찾기 게임을 만들어보겠습니다. 핑크색 메모리 문서를 클릭해보세요! 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 게임판을 만들 틀을 잡아줍니다. 같은사진을 앞뒤로 쓸것이기에 li태그 안에 div태그를 두개를 만들어줍시다. 소스 보기 같은그림찾기 1. 기회는 세번입니다. 2. 한번 맞출때 마다 1점씩 올라갑니다. 3. 제한시간은 없으니 천천히 푸시기 바랍니다. 4. 마음의 준비를 하신 뒤 시작버튼을 눌러주세요. 시작 틀린 횟수 : 0 맞힌 개수 : 0 개 게임 오버 다시 시작하기 게임 승리 틀린 개수 : 0개 CSS 작성 같은그림찾기 CSS 소스 보기 .memory__wrap { position: relative; } .memory__inne.. 2022. 10. 29. 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) 슬라이더 효과 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) 좌 우에 버튼을 만든 후 버튼을 누를때마다 다음 사진으로 넘어가는 효과와 아래쪽 닷버튼을 만들어 클릭시 넘어가는 효과입니다 사진은 무한정으로 있는듯한 느낌입니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 이전 5번예제와 같습니다. 소스 보기 prev next CSS 작성 이전 5번예제와 같습니다. 소스 보기 @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-cont.. 2022. 10. 20. 게임 이펙트 - 스피드 퀴즈 게임 효과 게임 이펙트 - CSS 스피드퀴즈 오늘은 audio태그를 이용해서 음악플레이어를 만들어보겠습니다. 빨간색 퀴즈게임 문서를 클릭해보세요! 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 전체 틀을 헤더와 메인 푸터로 잡아주고 음악플레이어틀을 잡아줍니다. 소스 보기 *** Music player *** Cottonmouth - YouTube Music 0:00 4:00 뮤직 리스트 CSS 작성 스피드 퀴즈 CSS 소스 보기 :root { --htmlColor: #223547; --cssColor: #472222; --javascriptColor: #224736; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "NexonL.. 2022. 10. 17. 게임 이펙트 - 뮤직 플레이어 게임 효과 게임 이펙트 - 음악플레이어 오늘은 audio태그를 이용해서 음악플레이어를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 전체 틀을 헤더와 메인 푸터로 잡아주고 음악플레이어틀을 잡아줍니다. 소스 보기 Game shop 음악듣기 음악듣기 음악듣기 음악듣기 음악듣기 음악듣기 *** Music player *** Cottonmouth - YouTube Music 0:00 4:00 뮤직 리스트 CSS 작성 헤더와 푸터, 소스보기 CSS 소스 보기 @import url("https://webfontworld.github.io/sandbox/SBAggro.css"); * { margin: 0; padding: 0; box-sizing: border-box; font-family:.. 2022. 10. 17. 서치 이펙트 - 정렬하기 Search Effect06 sort(), reverse(), random()를 이용하여 정렬하기 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 CSS 속성과 설명은 스크립트로 넣기 위해서 HTML에서 뻈습니다. 소스 보기 filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 CSS 속성 갯수 : 0 CSS 작성 버튼들만 디자인 해줍시다 소스 보기 :root { --htmlColor: #223547; --cssColor: #56c785; --javascriptColor: #7d56c7; } * { margin: 0; padding: 0; box-sizing: border-b.. 2022. 10. 17. 슬라이더 이펙트 - (버튼, 닷메뉴) 슬라이더 효과 슬라이드 이펙트 - 이미지 슬라이드(버튼) 좌 우에 버튼을 만든 후 버튼을 누를때마다 다음 사진으로 넘어가는 효과와 아래쪽 닷버튼을 만들어 클릭시 넘어가는 효과입니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 버튼과 배경사진 바뀌는 사진을 만들어줍니다. 소스 보기 prev next CSS 작성 CSS는 이전 예제와 크게 바뀐거 없이 버튼과, 닷버튼 만들어줍니다. 소스 보기 @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-.. 2022. 10. 14. 패럴랙스 이펙트 - 리빌 효과 패럴랙스 효과 패럴랙스 이펙트 - 리빌 효과 글씨위에 가상변수로 덮어씌어서 글씨가 리빌하는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 각각의 섹션을 만들어 줍니다. 소스 보기 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 자 밥솥을 열어라. 05 section5 그대 자신의 영혼을 탐구하라. 06 section6 돈이 없는 것은 죄다. 07 section7 무전 유죄, 유전 무죄 08 section8 내 주머니의 푼돈이 남 주머니에 있는 거금보다 낫다. 09 section9 최고에 도달하려면 최저에서.. 2022. 10. 6. 마우스 이펙트 - 텍스트 효과 마우스 효과 마우스 이펙트 - 텍스트 효과 마우스 커서를 따라서 글씨가 가운데에서 양옆으로 색상이 바뀌고 글씨에 마우스가 올라가면 크기가 커지면서 반전효과를 주어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 가운데 넣을 이미지와, 사용할 커서 각각 똑같은 글씨를 좌우로 넣도록 두개씩 만들어 봅시다. 소스 보기 I'm still hungry I'm still hungry bab jo jae bal bab jo jae bal 난 아직 배가고프다. 난 아직 배가고프다. 밥좀 주세요. 밥좀 주세요. CSS 작성 이미지를 가운데에 넣어주고, 커서를 20,20px로 조그마하게 원으로 만들었습니다. 커서에 active 클래스가 추가되면 마우스 반전과 크기가 5배로 커지도록 만들어줍니다.글씨는 가운.. 2022. 9. 29. 패럴랙스 이펙트 - 텍스트 효과 패럴랙스 효과 패럴랙스 이펙트 - 텍스트 효과 스크롤값에 따라서 텍스트가 하나 하나 씩 딜레이를 줘서 나타나게 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 각각의 섹션을 만들고 보기 편하게 하기 위해서 스크롤 탑값을 보여주는 태그를 만들어줍니다. 소스 보기 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 자 밥솥을 열어라. 05 section5 그대 자신의 영혼을 탐구하라. 06 section6 돈이 없는 것은 죄다. 07 section7 무전 유죄, 유전 무죄 08 section8 내 주머니의 푼돈이 남 주머.. 2022. 9. 29. Search Effect05 - filter()를 이용하여 속성의 중요도 보여주기 Search Effect05 filter()를 이용하여 속성의 중요도 보여주기 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 CSS 속성과 설명은 스크립트로 넣기 위해서 HTML에서 뻈습니다. 소스 보기 filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 CSS 속성 갯수 : 0 CSS 작성 버튼들만 디자인 해줍시다 소스 보기 :root { --htmlColor: #223547; --cssColor: #56c785; --javascriptColor: #7d56c7; } * { margin: 0; padding: 0; box-sizing: border-box; font-fa.. 2022. 9. 29. 마우스 이펙트 - 기울기 효과 글씨 반전 효과 마우스 효과 마우스 이펙트 - 기울기 효과 글씨 반전 효과 가운데 이미지를 넣어서 이미지와 설명은 기울이면서 3d효과가 나게 만들고 마우스 커서에 글씨를 가져다 대면 반전효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 가운데 넣을 이미지와, 사용할 커서, 마우스 위치 정보를 알려줄 박스를 만들어줍니다. 소스 보기 Don't cry for the dead Because he is resting. 죽은자를 위해 울지 말라. 그는 휴식을 취하고 있기 때문이다. pageX : 0px pageY : 0px centerPageX : 0px centerPageY : 0px maxPageX : 0px maxPageY : 0px anglePageX : 0px anglePageY : 0px .. 2022. 9. 28. Search Effect04 - find() 사용 Search Effect04 find()를 이용하여 속성을 검색하면 설명 보여주기 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 CSS 속성과 설명은 스크립트로 넣기 위해서 HTML에서 뻈습니다. 소스 보기 find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시됩니다.!!! CSS 속성 갯수 : 0 CSS 작성 전에 만들던 예제처럼 스타일을 꾸미고, 검색할 속성 박스만 디자인 해줍니다. 소스 보기 :root { --htmlColor: #223547; --cssColor: #56c785; --javascriptColor: #7d56c7; } * { margin: 0; padding: 0; box-sizing: border-box; font-.. 2022. 9. 28. 마우스 이펙트 - 이미지 효과 마우스 효과 마우스 이펙트 - 이미지 효과 가운데 이미지를 하나 더 넣어서 마우스 움직일때 가운데 이미지만 조금 움직여 이질감(?)이 느껴지는 효과를 넣어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 커서 한개와, 가운데 이미지를 넣을것이므로 figure태그를 만들어줍니다. 소스 보기 The present and the future are somehow connected. 현재와 미래는 어떻게든 연결되어 있다. CSS 작성 이미지를 정가운데에 만들어줍니다. 소스 보기 /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; fle.. 2022. 9. 22. 마우스 이펙트 - 조명 효과 마우스 효과 마우스 이펙트 - 조명 효과 오늘은 배경을 어둡게 만들고 마우스에 디자인을해서 마우스 영역이 조명이 들어가서 밝은 이미지가 나오는듯한 조명효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 커서는 한개만 만들것이므로 하나 만들어줍니다. 소스 보기 There is no masterpiece made by a lazy artist. 게으른 예술가가 만든 명작은 없다. CSS 작성 배경을 평소보다 좀더 어둡게 하고 마우스 커서에 이미지를 넣고 전체사이즈와 맞게 사이즈를 맞추고 고정시킨뒤 zindex 값을 -1을 넣어 보이지 않게 설정후 마우스를 돋보기 모양처럼 만들게 해서 그영역만 이미지가 보이게 합니다. 소스 보기 body::after { background: rgba.. 2022. 9. 22. 패럴랙스 이펙트 - 이질감 효과 패럴랙스 효과 패럴랙스 이펙트 - 이질감 효과 사진이나 글씨를 고정시키지 않고 스크롤 위치값에 따라서 위치가 살짝 변해 이질감을 주는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 각각의 섹션을 만들고 보기 편하게 하기 위해서 스크롤 탑값을 보여주는 태그를 만들어줍니다. 소스 보기 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 자 밥솥을 열어라. 05 section5 그대 자신의 영혼을 탐구하라. 06 section6 돈이 없는 것은 죄다. 07 section7 무전 유죄, 유전 무죄 08 section.. 2022. 9. 20. 슬라이드 이펙트 - 이미지 슬라이드(버튼) 슬라이더 효과 슬라이드 이펙트 - 이미지 슬라이드(버튼) 좌 우에 버튼을 만든 후 버튼을 누를때마다 다음 사진으로 넘어가는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 버튼과 배경사진 바뀌는 사진을 만들어줍니다. 소스 보기 prev next CSS 작성 CSS는 이전 예제와 크게 바뀐거 없이 버튼만 만들어줍니다. 소스 보기 @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slid.. 2022. 9. 18. 마우스 이펙트 - 마우스 따라다니기(GSAP) 마우스 효과 마우스 이펙트 - 마우스 따라다니기(GSAP) 오늘은 GSAP를 사용해서 마우스 커서를 부드럽게 따라다니는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 원 두개가 따라다니게 만들것이므로 커서1,커서2를 만들어주고 글이 나올 박스를 하나 만들어줍니다. 소스 보기 There is no masterpiece made by a lazy artist. 게으른 예술가가 만든 명작은 없다. CSS 작성 커서를 없앤 후 따라다닐 원을 만들어줍니다. 그리고 active1,2,3이 붙었을 때 변하는 모양을 디자인 해줍니다. 소스 보기 /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-.. 2022. 9. 18. 패럴랙스 이펙트 - 나타나기 패럴랙스 효과 패럴랙스 이펙트 - 나타나기 이번에는 사진들이 평소에 보이지 않다가, 화면을 스크롤해서 가운데쯤 나타났을때 사진이 나타나는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 메뉴바를 지워주고 각각의 섹션들만 만들어줍니다. 소스 보기 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 자 밥솥을 열어라. 05 section5 그대 자신의 영혼을 탐구하라. 06 section6 돈이 없는 것은 죄다. 07 section7 무전 유죄, 유전 무죄 08 section8 내 주머니의 푼돈이 남 주머니에 있는.. 2022. 9. 18. 마우스 이펙트 - 마우스 따라다니기 마우스 효과 마우스 이펙트 - 마우스 따라다니기 마우스 커서를 따라다니는 마우스에 효과주는법을 배워보도록 합시다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 배경에 사진을 넣도록 배경과, 글씨들 중간중간 중요한 단어들을 span으로 처리했습니다. 좌측 아래에 마우스커서의 위치를 나타내는 메서드들을 작성할 박스를 만들어줍니다. 소스 보기 I haven't failed. I've discovered 10,000 ways that don't work. 나는 실패한 게 아니다. 나는 잘 되지 않는 방법 1만 가지를 발견한 것이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px sc.. 2022. 9. 12. 패럴랙스 이펙트 - 숨김 메뉴 패럴랙스 효과 패럴랙스 이펙트 - 숨김 메뉴 평소에 메뉴바가 숨겨져 있다가, 아래쪽으로 진행할 때는 숨겨져 있고, 스크롤을 위로 올렸을때 메뉴가 나타나도록 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 상단의 메뉴바와, 맨 밑 가운데 top버튼(누르면 맨 위 상단으로 올라가는 버튼) 섹션으로 구조를 만들었습니다. 소스 보기 Top 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 자 밥솥을 열어라. 05 section5 그대 자신의 영혼을 탐구하라. 06 section6 돈이 없는 것은 죄다. 07 section7.. 2022. 9. 11. 패럴랙스 이펙트 - 사이드 메뉴 패럴랙스 효과 패럴랙스 이펙트 - 사이드 메뉴 이번에는 메뉴바를 오른쪽 사이드에 두고 반응형 효과를 주어서 이쁜 사이드 메뉴를 만들어 보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 HTML 구조는 예제1번과 같고, 상단에 있던 메뉴바를 사이드 메뉴로 만들었습니다. 소스 보기 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 자 밥솥을 열어라. 05 section5 그대 자신의 영혼을 탐구하라. 06 section6 돈이 없는 것은 죄다. 07 section7 무전 유죄, 유전 무죄 08 section8 내 주머니의 푼돈.. 2022. 9. 8. 패럴랙스 이펙트 - 메뉴 이동 패럴랙스 효과 패럴랙스 이펙트 - 메뉴 이동 오늘은 메뉴바를 누르면 해당 구역으로 이동하고, offsetTop값을 이용해 해당 영역에 가면 메뉴에 불이 들어오는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 HTML 구조는 예제1번을 나타내는 설명 nav와, 사진과 설명이 나오는 parallax__cont, offset메뉴바가 나오는 parallax__info 세개로 구성하였습니다. 소스 보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 .. 2022. 9. 6. 슬라이더 이펙트 - 좌로 움직이기(연속) 슬라이더 효과 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 이번에는 사진을 우에서 좌로 한칸씩 땡겨가면서 다음사진으로 넘어가고, 5개의 사진이 연속적으로 계속 나오는 슬라이드를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 CSS 작성 이미지 5번에서 1번으로 돌아갈때 부드럽게 넘어가기 위하여 가상변수6번도 이미지1번으로 만들어줍니다. @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .s.. 2022. 9. 1. 슬라이더 이펙트 - 좌로 움직이기 슬라이더 효과 슬라이드 이펙트 - 좌로 움직이기 이번에는 사진을 우에서 좌로 한칸씩 땡겨가면서 다음사진으로 넘어가는 효과를 줘보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 HTML 틀은 기존 틀과 동일하지만 slider 클래스에 slider__inner로 감싸주었습니다. CSS 작성 마찬가지로 전체적인 CSS는 동일하지만 slider을 감싸고있는 slider__inner에 flex를 사용해서 사진을 일열로 세운뒤, 이미지가 보일 영역에 overflow hidden을 줘서 나머지 사진들을 안보이게 설정했습니다. .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: ce.. 2022. 8. 29. 슬라이더 이펙트 - 트랜지션 효과 슬라이더 효과 슬라이드 이펙트 - 트랜지션 효과 오늘은 사진을 트랜지션 효과를 줘서 2초마다 사진이 바뀌는 사이트를 제작해보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 HTML 틀은 slider__wrap -> slider__img -> slider 클래스 순으로 구성했습니다. CSS 작성 이미지를 position: absolute로 한곳에 모아서 겹치게 만들어놓고, nth-child(n)를 사용해 사진 각각에 z-index값을 줘서 순서를 매겨놓았습니다. .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { positio.. 2022. 8. 29. 퀴즈만들기 - 객관식(여러문제)슬라이드 유형 퀴즈 효과 객관식(여러문제) 확인하기 : 슬라이드 형식 오늘은 화면에 한문제씩 나오면서 문제를 풀면 다음문제로 넘어가는 스크립트를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 문제번호와 문제, 보기는 공통요소이므로 HTML에서 지우고 스크립트로 넣어주겠습니다. 정답입니다! 틀렸습니다! 다음 문제 보기 CSS 작성 기존과 딱히 변화 없습니다. JS 작성 문제 번호를 클릭하면 문제의 정답 유무를 파악하고 다음문제로 넘어갈 수 있는 버튼을 보이게 설정하였으며, 마지막 문제를 풀었을 때 총 문제 수 중에 맞은 문제를 출력할 수 있도록 제작하였습니다. 펼쳐 보기 //선택자 const quizType = document.querySelector(".quiz__type") //유형 cons.. 2022. 8. 24. 퀴즈 만들기 - 객관식(여러문제)유형 퀴즈 효과 객관식(여러문제 유형) 오늘은 화면에 여러문제를 표현한뒤 마지막에 결과확인 버튼을 누르면 점수가 나오는 유형을 만들어보겠습니다. 또한 quizScore라는 변수를 0으로 설정하고 맞을때마다 quizScore++를 사용해 마지막 정답버튼을 눌렀을 때 총 맞은 개수가 나오게 출력하였습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 기존에 body태그에 있던 코드들은 script로 넣어줄것이므로 quiz__wrap만 빼고 전부 지워줍니다. CSS 작성 기존과 딱히 변화 없습니다. JS 작성 퀴즈 번호와 문제, 보기는 공통이므로 (``)템플릿 리터럴을 사용해 넣어줍니다. question(element)값을 입력해서 배열의 순서대로 값이 출력되게 만들었습니다. 펼쳐 보기 const quiz.. 2022. 8. 23. Search Effect 03 Search Effect03 검색기능 예제3번입니다. 일단 keyword 박스에 span태그로 알파벳들을 입력해 놓은뒤에 charAt 메서드를 이용해서 첫번째 자리수에 span태그에 만들어놓은 알파벳과 시작하는 알파벳이 동일하면 보이게 설정하고, 틀리면 hide를 add해 숨기는 스크립트를 제작했습니다. 원본 소스 보기 원본 사이트 보기 HTML 작성 1,2번 예제와는 다르게 검색 input박스를 없앤뒤에 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 align-color : align-color .. 2022. 8. 22. Search Effect02 Search Effect02 검색기능 예제2번입니다. indexOf로 만든 1번과는 다르게 includes()를 사용해서 제작하였습니다.includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다. 그래서 사용자가 입력한 값을 미리 만들어놓은 input박스의 요소를 포함하고 있다면 보이게, 없다면 숨겨서 제작하였습니다. 원본 소스 보기 원본 사이트 보기 HTML 작성 searchEffect01 번과 마찬가지로 사용자가 이용 하기 위한 input 박스를 만들어 줍니다. 검색 대상도 데이터 이름으로 설정해 둡니다. includes()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요! 전체 속성 갯수 : 0 align-colo.. 2022. 8. 17. Search Effect01 Search Effect 검색기능입니다. 쉽게 말해서 input박스를 만든 뒤에 input 박스에 사용자가 입력한 결과 값을 미리 만들어 놓은 리스트와 한글자씩 비교해 가면서 같은 단어들만 보이게 만드는 기능입니다. 원본 소스 보기 원본 사이트 보기 HTML 작성 사용자가 이용 하기 위한 input 박스를 만들어 줍니다. 검색 대상도 데이터 이름으로 설정해 둡니다. indexOf()를 이용하여 검색하기 HTML 태그 검색하기 검색하기 a : a 태그는 다른 페이지 이동을 설정합니다. abbr : abbr 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. acronym : acronym 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. address : address 태그는 웹 페이지의 연락처 정보를 .. 2022. 8. 16. 이전 1 2 다음
