javascript110 마우스 이펙트 4 마우스 효과 만들기 4 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 이미지 효과 마우스를 올리면 이미지가 조금씩 움직이고, 커지며 이질감을 주는 효과입니다. 저번에 패럴랙스에서 이질감을 주었던 효과와 비슷하다고 생각하시면 됩니다! HTML 코드 이번에는 기본 마우스 커서를 대신할 요소로 .mouse__cursor 를 만들어 줍니다. 그리고 p태그에 명언을 적어주는 것까지는 저번 유형과 비슷하나, 이번에는 이미지를 넣었기 때문에 figure태그를 사용하였으며 커서의 위치값을 확인할 수 있도록 .mouse__info를 추가하였습니다. The most difficult thing i.. 2022. 9. 22. 마우스 이펙트 3 마우스 효과 만들기 3 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 조명 효과 이번 효과는 어두운 배경 이미지가 있고, 마우스 커서가 가리키는 곳은 밝은 것처럼 보이는 효과입니다. 실제로 밝아지는 것은 아니고, 그렇게 보이도록 착시를 일으키는 효과입니다. 어떻게 하는건지 알아볼까요? HTML 코드 이번에는 기본 마우스 커서를 대신할 요소로 .mouse__cursor 를 만들어 줍니다. mouse__wrap 안에는 p태그로 명언을 적었습니다. Learn as if you will live forever, live like you will tomorrow. 영원히 살 것처럼 배우고.. 2022. 9. 22. 패럴랙스 이펙트05 패럴랙스 이펙트 5 이번 패럴랙스 효과는 스크롤이 내려가면 사진과 텍스트가 스크롤과 달리 움직이며 이질감을 주는 효과입니다. 이질감을 주는 방법을 알아볼까요? HTML 코드 이번 패럴랙스는 메뉴 없이 컨텐츠로만 구성하였으며, scrollTop 정보를 볼 수 있는 info를 추가해주었습니다. HTML 보기 01 section1 질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다. . . . scrollTop : 0px CSS 코드 이번 패럴랙스는 gsap를 활용하여 애니메이션을 주었기 때문에, 트랜지션 속성은 주석처리 해주었습니다. CSS 보기 /* parallax__cont */ #parallax__cont { max-width: 1600px; width: 98%; margin: 0 auto; /* ba.. 2022. 9. 20. 마우스 이펙트 2 마우스 효과 만들기 2 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 마우스 따라다니기(GSAP) 이번 효과는 저번 유형과 비슷하지만 GSAP를 이용해 작성하여, 커서의 움직임이 더 부드러운 효과입니다. HTML 코드 이번에는 기본 마우스 커서를 대신할 요소에 각 mouse__cursor, mouse__cursor2 클래스를 주어 두개 만들어 줍니다. mouse__wrap 안에는 p태그로 명언을 적고, span태그로 특정 단어를 감싸 강조해 주었습니다. The future depends on what We do in present. 미래는 현재 우리가 무엇을 하는가에 달려있다. .. 2022. 9. 18. 마우스 이펙트 1 마우스 효과 만들기 1 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 마우스 따라다니기 이번 효과는 마우스를 따라다니는 원이 마우스 커서를 대신하며, 노란색 텍스트 위에 커서를 올리면 원의 모양이 변하거나 색이 변하는 효과입니다. HTML 코드 기본 마우스 커서를 대신할 요소는 mouse__cursor 클래스를 주었습니다. mouse__wrap 안에는 p태그로 명언을 적고, span태그로 특정 단어를 감싸 강조해 주었습니다. mouse__info는 커서의 위치에 대한 정보를 나타낼 예정입니다. Resolve to perform what your ought, perform with.. 2022. 9. 18. 슬라이드 이펙트 4 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 이미지 슬라이드(버튼) 이번 슬라이드 효과는 버튼을 누르면 이전이미지, 다음 이미지로 넘어가도록 스크립트를 작성하였습니다. 많이 사용되는 효과이므로 잘 알아두엇다가 활용하도록 합시다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길 버튼이 필요하기 때문에, slider__img 클래스의 형제 요소로 slider__btn 클래스의 div박스를 만들어 각각의 클래스가 p.. 2022. 9. 18. 패럴랙스 이펙트04 패럴랙스 이펙트 4 이번 패럴랙스 효과는 스크롤이 내려가면 콘텐츠가 애니메이션과 함께 나타납니다. 애니메이션을 어뗗게 주느냐에 따라 느낌이 달라지니, 잘 알아두었다가 활용해 봅시다! HTML 코드 이번 패럴랙스는 메뉴 없이 컨텐츠로만 구성하였습니다. HTML 보기 01 section1 질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다. . . . CSS 코드 이번 패럴랙스는 회전이나 위치 이동을 통해 나타나는 애니메이션을 주었습니다. CSS 보기 /* 한번에 나타나기 */ /* #contents > section { opacity: 0; transition: all 1s; } #contents > section.show { opacity: 1; } */ /* 개별적으로 나타나기 */ #contents .. 2022. 9. 18. 패럴랙스 이펙트03 패럴랙스 이펙트 3 이번 패럴랙스 이펙트는 스크롤이 내려감에 따라, 사이드 메뉴의 점 모양에 변화가 생기는 효과입니다. 화면이 섹션에 들어가게 되면, 해당 섹션의 점이 활성상태가 됩니다. 또한, 점을 클릭하면 해당하는 섹션으로 스크롤을 이동할 수 있습니다. HTML 코드 이번 패럴랙스 이펙트의 핵심이 되는 HTML의 부분입니다. 메뉴는 패럴랙스 01번 유형과 같지만, 스크롤 값이 맨 아래에 다다르면 Top버튼이 나타나도록 하기 위해, #parallax__top을 만들어 주었습니다. HTML 보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 스크립트 요약 1. 메뉴를 클릭했을 때 해당 섹션으로 이동합니다. 2. 스크롤을 내릴 때엔 메뉴가 사라지고, 스크롤을 올리면 메뉴가 나타납니.. 2022. 9. 10. 패럴랙스 이펙트02 패럴랙스 이펙트 2 이번 패럴랙스 이펙트는 스크롤이 내려감에 따라, 사이드 메뉴의 점 모양에 변화가 생기는 효과입니다. 화면이 섹션에 들어가게 되면, 해당 섹션의 점이 활성상태가 됩니다. 또한, 점을 클릭하면 해당하는 섹션으로 스크롤을 이동할 수 있습니다. HTML 코드 이번 패럴랙스 이펙트의 핵심이 되는 HTML의 부분입니다. 메뉴 글씨는 안보이게 처리하고, 점으로 표현하기 위해, 글씨는 span 태그로 감싸주었습니다. HTML 보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 스크립트 요약 1. 메뉴를 클릭했을 때 해당 섹션으로 이동하기 위해 기본 클릭 이벤트 효과를 없애주고, 스크롤 이동 스크립트를 작성합니다. 2. 스크롤 이벤트를 발생시키고 현재의 스크롤 값을 불러옵니다. 3... 2022. 9. 10. 패럴랙스 이펙트01 패럴랙스 이펙트 패럴랙스 이펙트는 페이지에서 스크롤을 내림에따라 이미지가 보여지거나 애니메이션이 실행되는 등, 스크롤 값을 이용한 효과입니다. HTML 코드 패럴랙스 이펙트와 관련된 HTML 부분입니다. HTML 보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다. 02 section2 지혜는 듣는 데서 오고 후회는 말하는 데서 온다. 03 section3 모든 날 중 가장 완전히 잃어버린 날은 웃지 않는 날이다. 04 section4 열의 없이 성취 된 위업이란 아직 하나도 없다. 05 section5 절제는 모든 진주 고리를 이어주는 비단의 실이다. 06 section6 기회는 새와 같은 것 날아가기 전에 꼭 .. 2022. 9. 6. 이벤트 메서드 알아보기 : mouseenter / mouseover 이벤트 메서드 mouseenter/mouseover 비교하기 이벤트 메서드인 addEventListener()의 이벤트로 사용되는 mouseenter와 mouseover는 요소 위에 마우스가 위치한 경우의 이벤트를 의미합니다. 두가지 이벤트의 특징을 알아보고 공톰점과 차이점을 비교해보도록 하겠습니다! > 이벤트 메서드 : addEventListener("mouseenter") mouseenter는 요소 위에 포인터가 위치해 있을 때의 이벤트를 의미합니다. mouseover와의 차이점은 mouseenter는 메서드가 적용된 요소 자신에게만 이벤트가 발생한다는 점입니다. > 이벤트 메서드 : addEventListener("mouseover") 요소 위에 포인터가 위치해 있을 때의 이벤트를 의미합니다. mo.. 2022. 9. 6. jQuery 알아보기 : 스타일 관련 메서드 jQuery 스타일 관련 메서드 알아보기 제이쿼리의 메서드 중에서 스타일과 관련된 메서드들을 알아봅니다. 스타일 관련 메서드에는 css() 메서드가 있으며, width/height 관련 메서드와 위치 관련 메서드도 알아보겠습니다. > css() 메서드 css() 메서드는 요소의 css 속성을 취득, 생성, 변경할 수 있습니다. 실행 분류 형식 예시 예제 취득 $("요소").css("css 속성"); $("div").css("width"); 보러 가기 생성 $("요소").css("css 속성", "값"); $("div").css("color", "white").css("padding", "10px"); 변경 $("요소").css({기존 css 속성: "값", 바꿀 css 속성: "값"}); $("div").. 2022. 9. 3. jQuery 알아보기 : 속성 관련 메서드 jQuery 속성 관련 메서드 알아보기 제이쿼리의 메서드 중에서 속성과 관련된 메서드 들을 알아봅니다. 속성 관련 메서드에는 attr(), prop() 메서드가 있습니다. > attr() 메서드 attr() 메서드는 html의 속성(attribute)에 관련된 메서드이며, 선택한 요소의 속성을 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 예시 예제 취득 $("요소").attr("속성"); $("a").attr("href"); 보러 가기 생성 $("요소").attr("속성","내용"); $("a").attr("href","#").attr("target","_blank"); 변경 $("요소").attr({기존 속성: "내용", 바꿀 속성: "내용"}); $("a").attr({a: "#", targe.. 2022. 9. 3. jQuery 알아보기 : 클래스 관련 메서드 jQuery 클래스 관련 메서드 알아보기 제이쿼리의 메서드 중에서 클래스(Class)와 관련된 메서드 들을 알아봅니다. 클래스 관련 메서드에는 addClass(), removeClass(), toggleClass(), hasClass() 메서드가 있습니다. > addClass() 메서드 addClass() 메서드는 요소에 class 속성을 추가합니다. 실행 분류 형식 예시 예제 추가 $("요소").addClass("클래스명"); $("div").addClass("text"); 보러 가기 콜백 함수 $("요소").addClass(function(index, className) { return "class 속성"; ⇒ 각 '요소'에 class 속성을 추가합니다. }); ⇒ index는 각 '요소'의 inde.. 2022. 9. 3. 문자열 결합과 템플릿 문자열 문자열 : 문자열 결합 / 템플릿 문자열 문자열 결합과 템플릿 문자열에 대해 알아봅니다. 기본적인 문자열 결합 방법은 매우 간단합니다! > 템플릿 문자열과 결합 템플릿 문자열은 내장된 표현식을 허용하는 문자열입니다. 내장된 표현식을 허용한다는 것은 변수에 저장된 내용을 문자열에 작업할 수 있다는 뜻입니다. //01 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리"; document.querySelector(".sample01_M1").innerHTML = "문자.. 2022. 9. 1. 문자열 메서드 : split() 문자열 메서드 : split() 문자열 메서드를 활용하면 문자열에서 원하는 값을 추출할 수 있습니다. > split() 메서드 split() 메서드는 문자열에서 원하는 값을 추출하여 배열로 반환합니다. // "문자열".split(구분자); // "문자열".split(정규식 표현); // "문자열".split(구분자, 갯수); const str1 = "javascript reference"; const currentStr1 = str1.split(''); // ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', ' ', 'r', 'e', 'f', 'e', 'r', 'e', 'n', 'c', 'e'] const currentStr2 = str1.split(' '); /.. 2022. 9. 1. 문자열 메서드 : 대문자 / 소문자 / 공백 문자열 메서드 : 소문자/대문자/공백 문자열 메서드를 활용하면 문자를 소문자/대문자로 변환할 수 있으며, 문자 사이의 공백을 없앨 수도 있습니다. > toUpperCase()/ toLowerCase() 메서드 toUpperCase()는 문자열의 소문자를 대문자로, toLowerCase()는 대문자로 소문자로 바꿉니다. "문자열".charAt(숫자); const str1 = "javascript"; const curentStr1 = str1.toUpperCase(); document.querySelector(".sample02_N1").innerHTML = "1"; document.querySelector(".sample02_Q1").innerHTML = "javascript"; document.query.. 2022. 9. 1. 슬라이드 이펙트 3 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 좌로 움직이기(연속적으로) 슬라이드 효과는 다수의 이미지가 있을 때, 시간이 지날 때 한장씩 슬라이드 되며 보여지도록 한 효과입니다. 이번 슬라이드 효과는 이미지가 좌우로 연속적으로 넘어가며 보여집니다. 이전에 배운 방법보다 더욱 자연스러운 느낌이 나는 효과입니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. CSS 코드 1번 이미지가 복사되어 맨 뒤에 하나 생성되는 구조이기 때문에, .slider:nth-child(6.. 2022. 9. 1. 메서드 / 속성 알아보기 : 크기 또는 위치 위치 및 크기를 표현하는 속성 및 메서드 요소의 위치 및 크기를 표현하는 속성 및 메서드를 알아봅시다! 속성 / 메서드 설명 비고 element.clientWidth 요소의 가로값 마진/보더 미포함 element.clientHeight 요소의 높이값 마진/보더 미포함 element.clientTop 요소의 Y축값 부모 기준 element.clientLeft 요소의 X축값 부모 기준 element.offsetWidth 요소의 가로값 보더/패딩 포함 element.offsetHeight 요소의 높이값 보더/패딩 포함 element.offsetTop 요소의 Y축값 문서 기준 element.offsetLeft 요소의 X축값 문서 기준 element.getBoundingClientRect() top, left, .. 2022. 9. 1. jQuery 알아보기 : 탐색 선택자 jQuery 탐색 선택자 알아보기 jQuery 탐색 선택자 분류 선택자 종류 설명 예제 기본 탐색 선택자 children() $("div").children() div 요소의 자식 요소를 선택합니다. 보러 가기 parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모 요소가 되는 모든 div 요소를 선택합니다. closest() $("p").closest("div") p 요소의 부모 요소가 되는 첫 번째 div 요소를 찾습니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을 모두 선.. 2022. 9. 1. jQuery 알아보기 : 필터 선택자 jQuery 필터 선택자 알아보기 jQuery 필터 선택자 분류 선택자 종류 설명 예제 필터 선택자 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. 보러 가기 :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 td 요소를 선택합니다. :header $(":header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. index는 0번이 첫 번째 요소입니다. :gt() $("li:gt(0)") index가 0보다 큰 li 요소들을 선택합니다. :lt() $("li:lt(2)") inde.. 2022. 9. 1. jQuery 알아보기 : 속성 선택자 jQuery 속성 선택자 알아보기 jQuery 속성 선택자 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되나 'bg_abc'는 선택되지 않습니다. 요소[속성*='값'].. 2022. 9. 1. jQuery 알아보기 : 기본 선택자 jQuery 기본 선택자 알아보기 jQuery 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p요소를 선택합니다. id 선택자 $("#gnb") #gnb요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual의 다음에 오는 #content 요소를 선택합니다. 형제 선택자 $("#visual ~ #footer") #visual의 형제 요소 #footer를 선택합니다. 종속 선택자 $("div.unit") div.. 2022. 9. 1. 슬라이드 이펙트 2 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 좌로 움직이기 슬라이드 효과는 다수의 이미지가 있을 때, 시간이 지날 때 한장씩 슬라이드 되며 보여지도록 한 효과입니다. 이번 슬라이드 효과는 이미지가 좌우로 넘어가며 보여집니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. CSS 코드 각 이미지에 바로 위 부모요소를 기준으로 포지션을 주어, 위치를 이동시킬 수 있도록 하였습니다. 또한 이미지가 순서대로 위치할 수 있도록 z-index로 z축 상의 위치를 조정해주었습니.. 2022. 8. 29. 슬라이드 이펙트 1 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 트랜지션 효과 슬라이드 효과는 다수의 이미지가 있을 때, 시간이 지날 때 한장씩 슬라이드 되며 보여지도록 한 효과입니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__img와 또 한번 감싼 slider__wrap을 만들었습니다. CSS 코드 각 이미지에 바로 위 부모요소를 기준으로 포지션을 주어, 위치를 이동시킬 수 있도록 하였습니다. 또한 이미지가 순서대로 위치할 수 있도록 z-index로 z축 상의 위치를 조정해주었습니다. .slider__wrap { width: 100%; height: 100vh; displa.. 2022. 8. 29. jQuery 알아보기 : 기본 jQuery 알아보기 자바스크립트 애니메이션을 쉽게 작성할 수 있는 jQuery에 대해 알아봅시다! jQuery란? jQuery는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 애니메이션 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델과 이벤트에 관한 처리를 쉽게 구현할 수 있으며, Ajax 응용 프로그램 및 플러그인도 빠르게 개발할 수 있습니다. jQuery 공식 사이트 방문하기 jQuery의 장점과 단점 * 장점 * 1. 대부분의 브라우저에서 지원 2. HTML 문서 객체 모델(DOM)을 쉽게 조작 가능 3. CSS 스타일을 간단히 적용 가능 4. 다양한 플러그인과 많은 참고 문서 5. 보다 짧고 간단한 코드 6. 오픈라이선스 * 단점 * 점점 사용하지 .. 2022. 8. 29. GSAP 알아보기 GSAP 알아보기 CSS 애니메이션을 쉽게 작성할 수 있는 GSAP에 대해 알아봅시다! GSAP란? GSAP는 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. 복잡한 애니메이션을 구현하려면, CSS나 일반적인 자바스크립트로 작성으로는 너무 복잡하고 한계가 느껴지기 마련입니다. 이런 상황에서 보다 쉽게 애니메이션을 만들 수 있도록 만들어주는 도구가 바로 GSAP입니다. GSAP 공식 사이트 방문하기 GSAP 사용하기 * 1. gsap cdn 연결하기 * * 2. gsap.to() 작성하기 * gsap.to("대상", { 속성1, 속성2, 속성3, … }); * gsap.to의 주요 속성과 예시 * x : x축으로 해당 값만큼 이동 ( x: 200 ) y : y축으로 해당 값만큼 이동 (.. 2022. 8. 29. 퀴즈 이펙트 6 퀴즈 이펙트 퀴즈를 풀 수 있는 페이지를 구성할 때에, 퀴즈의 유형에 맞는 다양한 이펙트를 사용하면 단조롭지 않은 생동감 넘치는 페이지를 만들 수 있습니다. 객관식(여러문제) 유형 : 슬라이드 객관식 여러문제를 나타내는 효과입니다. 객관식 문제의 보기를 고르면, 보기가 체크되어 있는지 확인한 후 보기와 정답이 같은지 확인합니다. 정답이라면 "정답" 알림을, 오답이라면 "오답" 알림을 띄웁니다. 또한, 정답 갯수를 확인하여 합격, 불합격 여부를 나타냅니다. 원본 소스 보기 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. -객관식 문제의 정보를 배열 속 객체를 활용하여 저장하였습니다. -문제를 나타내는 html코드를 자바스크립트를 이용해 넣었습니다. -자바스크립트를 이용해 문제의 각 정보를 요.. 2022. 8. 24. 퀴즈 이펙트 5 퀴즈 이펙트 퀴즈를 풀 수 있는 페이지를 구성할 때에, 퀴즈의 유형에 맞는 다양한 이펙트를 사용하면 단조롭지 않은 생동감 넘치는 페이지를 만들 수 있습니다. 객관식(여러문제) 유형 : 점수 객관식 여러문제를 나타내는 효과입니다. 객관식 문제의 보기를 고르면, 보기가 체크되어 있는지 확인한 후 보기와 정답이 같은지 확인합니다. 정답이라면 "정답" 알림을, 오답이라면 "오답" 알림을 띄웁니다. 또한, 정답 갯수를 확인하여 합격, 불합격 여부를 나타냅니다. 원본 소스 보기 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. -객관식 문제의 정보를 배열 속 객체를 활용하여 저장하였습니다. -문제를 나타내는 html코드를 자바스크립트를 이용해 넣었습니다. -자바스크립트를 이용해 문제의 각 정보를 요소에.. 2022. 8. 24. 검색 효과 3 검색 이펙트 페이지에 리스트를 만들고, input박스를 만들어 사용자가 리스트의 내용을 검색할 수 있게 한 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저 검색영역(사용자가 검색하고 싶은 내용을 입력하는 곳)과, 목록리스트를 선택하는 선택자를 지정합니다. 이후 사용자가 입력한 키워드를 변수에 저장한 후, 리스트의 데이터 값에 사용자 키워드가 포함되는지 확인하며 리스트를 숨기고 보이게 합니다. 또한 사용자가 키워드 버튼을 눌러 특정 알파벳으로 시작하는 속성만 볼 수 있도록 하였습니다. 리스트의 테이터 값에 사용자 키워드가 포함되는지는, 문자열 메서드의 하나인 indexOf() / search() 메서드를 사용합니다. > 선택자.. 2022. 8. 22. 이전 1 2 3 4 다음 728x90
