본문 바로가기

728x90

Javascript54

GSAP ⭐️ GSAP ⭐️ GSAP란? GSAP (GreenSock Animation Platform)은 자바스크립트 애니메이션 라이브러리를 의미합니다. 자주 사용되지만 일일히 구현하기 불편하고 까다로운 자바스크립트 코드의 특정 기능을 기성품으로 만들어 놓은 패키지라고 생각하시면 됩니다. GSAP는 세밀한 움직임과 동작의 연속성을 간편하게 설정할 수 있도록 돕습니다. GSAP 사용 방법 01. CDN 라이브러리 CDN (Contents Delivery Network)는 데이터를 분산된 서버에서 받아오는 것을 의미합니다. // CDN 에서 주소를 불러옴 02. 공식 문서 라이브러리는 공식 문서(Docs) 또는 명세서(Specification)을 공식 웹사이트에 공유하고 있습니다. 라이브러리의 기초 지식, 사용법,.. 2022. 8. 29.

슬라이드 이펙트 (2) ⭐️ 슬라이드 이펙트 02 ⭐️ 01. 에 작성하기 const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySelector(".slider__inner"); // 움직이는 영역 const slider = document.querySelectorAll(".slider"); // 이미지 let currentIndex = 0; // 현재 보이는 이미지 let sliderCount = slider.length; // 이미지 갯수 sliderInner.style.transition = "all 0.6s" // 부드럽게 넘어가도록 애니메이션 주기 // sliderInn.. 2022. 8. 29.

슬라이드 이펙트 (1) ⭐️ 슬라이드 이펙트 01 ⭐️ 01. 에 작성하기 // 가운데 이미지 슬라이드 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // sliderWrap 안에서 찾으라고 document 대신에 sliderWrap 을 적어줌 const slider = sliderWrap.querySelectorAll(".slider"); let currentIndex = 0; // 현재 보이는 이미지 let sliderCount = slider.length; // 이미지 갯수 setInterval(() => { // console.log(.. 2022. 8. 29.

퀴즈 만들기 (6) 객관식 슬라이드 유형 ⭐️ 객관식 다수 문항 (정답 갯수 / 합격 여부 확인) ⭐️ 01. 만드는 순서 1) 출력할 내용이 들어있는 요소 선택하기 2) 질문과 정답 내용, 필요한 값 입력하기 3) 질문 내용 출력하기 4) 정답 내용 숨겨놓기 5) 정답 확인 및 결과값 설정하기 6) 정답 버튼의 동작 설정하기 02. 에 작성하기 // 문제 정보 const quizInfo = [ { answerType: "웹 디자인 기능사 (2014년 01회)", answerNum: "1", answerAsk: "다음의 디자인 원리 중 리듬에 해당되지 않는 것은?", answerChoice: [ "점이", "강조", "균일", "점증", ], answerResult: "균일", answerEx: "균일 // '리듬(율동)'은.. 2022. 8. 25.

search Effect (3) ⭐️ 키워드 만들기 ⭐️ 01. 에 작성하기 // 선택자 const searchKeyword = document.querySelectorAll(".search__info .keyword span"); // 알파벳 키워드 const searchList = document.querySelectorAll(".search__list ul li") // 목록 리스트 const searchInfo = document.querySelector(".search__info .num") // 전체 갯수 const searchInfo2 = document.querySelector(".search__info .num2"); // 찾은 갯수 // 찾은 갯수 설정하기 searchInfo.textContent .. 2022. 8. 23.

search / march / charAt 메서드 ⭐️ 문자열 객체 ( search / march / charAt 메서드 ) ⭐️ 01. 표준 내장 객체의 종류 : 문자열 객체 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 말하며, 다른 객체의 기초가 되는 핵심적인 객체 입니다. 내장 객체의 종류에는 Object, Fuction, String, Array, Math, Number, Event, Boolean, Data, RegExp 등이 있습니다. 그 중에서 문자열 객체(String Object)는 문자열을 저장/관리하기 위해 사용하는 객체를 의미합니다. ___ 참고하기 ___ `1 문자열을 생성할 때는 ''"" 따옴표를 사용하거나, new 키워드를 이용합니다. `2 문자열 객체는 불변성이.. 2022. 8. 23.

함수의 유형 ⭐️ 함수의 유형 ⭐️ 01. 함수와 매개변수를 이용한 형태 function func(num, str1, str2){ document.write("(" + num + ") " + str1 + "가 " + str2 + "되었습니다.") } func("13-1", "함수", "실행"); func("13-2", "자바스크립트", "추가"); func("13-3", "제이쿼리", "삭제"); 결과 보기 (13-1) 함수가 실행되었습니다.(13-2) 자바스크립트가 추가되었습니다.(13-3) 제이쿼리가 삭제되었습니다. 02. 함수와 변수를 이용한 형태 const mynum1 = 14*1; const mynum2 = 14*2; const mynum3 = 14*3; const mystr1 = "함수"; const my.. 2022. 8. 23.

search Effect (2) ⭐️ 검색창 만들기 ⭐️ 01. 에 작성하기 //선택자 const searchBox = document.querySelector(".search__box input"); // input 박스 , 검색 영역 const searchList = document.querySelectorAll(".search__list ul li") // 목록 리스트 //속성 갯수 설정하기 for(i=1; i { el.classList.add("show") }); // searchBox.addEventListener("keyup", () => { const searchWord = searchBox.value; // 사용자가 입력한 키워드 searchList.forEach(el => { const cssName.. 2022. 8. 18.

search Effect (1) ⭐️ 검색창 만들기 ⭐️ 01. 에 작성하기 //선택자 const searchBox = document.querySelector(".search__box input"); // input 박스 , 검색 영역 const searchList = document.querySelectorAll(".search__list ul li") // 목록 리스트 const searchInfo = document.querySelector(".search__info .num") // 전체 갯수 // 전체 갯수 구하기 searchInfo.textContent = searchList.length; // 검색 영역 searchBox.addEventListener("keyup", () => { const searc.. 2022. 8. 18.

문자열 객체 (9) includes 메서드 ⭐️ 문자열 객체 ( includes 메서드 ) ⭐️ 01. 표준 내장 객체의 종류 : 문자열 객체 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 말하며, 다른 객체의 기초가 되는 핵심적인 객체 입니다. 내장 객체의 종류에는 Object, Fuction, String, Array, Math, Number, Event, Boolean, Data, RegExp 등이 있습니다. 그 중에서 문자열 객체(String Object)는 문자열을 저장/관리하기 위해 사용하는 객체를 의미합니다. ___ 참고하기 ___ `1 문자열을 생성할 때는 ''"" 따옴표를 사용하거나, new 키워드를 이용합니다. `2 문자열 객체는 불변성이 있으며, 이로써 메모리 공.. 2022. 8. 18.

문자열 객체 (8) indexOf / lastindexOf 메서드 ⭐️ 문자열 객체 ( indexOf / lastindexOf 메서드 ) ⭐️ 01. 표준 내장 객체의 종류 : 문자열 객체 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 말하며, 다른 객체의 기초가 되는 핵심적인 객체 입니다. 내장 객체의 종류에는 Object, Fuction, String, Array, Math, Number, Event, Boolean, Data, RegExp 등이 있습니다. 그 중에서 문자열 객체(String Object)는 문자열을 저장/관리하기 위해 사용하는 객체를 의미합니다. ___ 참고하기 ___ `1 문자열을 생성할 때는 ''"" 따옴표를 사용하거나, new 키워드를 이용합니다. `2 문자열 객체는 불변성이 있.. 2022. 8. 18.

문자열 객체 (7) padStart / padEnd 메서드 ⭐️ 문자열 객체 ( padStart / padEnd 메서드 ) ⭐️ 01. 표준 내장 객체의 종류 : 문자열 객체 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 말하며, 다른 객체의 기초가 되는 핵심적인 객체 입니다. 내장 객체의 종류에는 Object, Fuction, String, Array, Math, Number, Event, Boolean, Data, RegExp 등이 있습니다. 그 중에서 문자열 객체(String Object)는 문자열을 저장/관리하기 위해 사용하는 객체를 의미합니다. ___ 참고하기 ___ `1 문자열을 생성할 때는 ''"" 따옴표를 사용하거나, new 키워드를 이용합니다. `2 문자열 객체는 불변성이 있으며, .. 2022. 8. 18.

문자열 객체 (6) concat / repeat 메서드 ⭐️ 문자열 객체 ( concat / repeat 메서드 ) ⭐️ 01. 표준 내장 객체의 종류 : 문자열 객체 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 말하며, 다른 객체의 기초가 되는 핵심적인 객체 입니다. 내장 객체의 종류에는 Object, Fuction, String, Array, Math, Number, Event, Boolean, Data, RegExp 등이 있습니다. 그 중에서 문자열 객체(String Object)는 문자열을 저장/관리하기 위해 사용하는 객체를 의미합니다. ___ 참고하기 ___ `1 문자열을 생성할 때는 ''"" 따옴표를 사용하거나, new 키워드를 이용합니다. `2 문자열 객체는 불변성이 있으며, 이로.. 2022. 8. 18.

문자열 객체 (5) replace / replaceAll 메서드 ⭐️ 문자열 객체 ( replace / replaceAll 메서드 ) ⭐️ 01. 표준 내장 객체의 종류 : 문자열 객체 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 말하며, 다른 객체의 기초가 되는 핵심적인 객체 입니다. 내장 객체의 종류에는 Object, Fuction, String, Array, Math, Number, Event, Boolean, Data, RegExp 등이 있습니다. 그 중에서 문자열 객체(String Object)는 문자열을 저장/관리하기 위해 사용하는 객체를 의미합니다. ___ 참고하기 ___ `1 문자열을 생성할 때는 ''"" 따옴표를 사용하거나, new 키워드를 이용합니다. `2 문자열 객체는 불변성이 있으.. 2022. 8. 18.

문자열 객체 (4) split 메서드 ⭐️ 문자열 객체 ( split 메서드 ) ⭐️ 01. 표준 내장 객체의 종류 : 문자열 객체 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 말하며, 다른 객체의 기초가 되는 핵심적인 객체 입니다. 내장 객체의 종류에는 Object, Fuction, String, Array, Math, Number, Event, Boolean, Data, RegExp 등이 있습니다. 그 중에서 문자열 객체(String Object)는 문자열을 저장/관리하기 위해 사용하는 객체를 의미합니다. ___ 참고하기 ___ `1 문자열을 생성할 때는 ''"" 따옴표를 사용하거나, new 키워드를 이용합니다. `2 문자열 객체는 불변성이 있으며, 이로써 메모리 공간의 .. 2022. 8. 18.

문자열 객체 (3) slice / substring / substr 메서드 ⭐️ 문자열 객체 ( slice / substring / substr 메서드 ) ⭐️ 01. 표준 내장 객체의 종류 : 문자열 객체 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 말하며, 다른 객체의 기초가 되는 핵심적인 객체 입니다. 내장 객체의 종류에는 Object, Fuction, String, Array, Math, Number, Event, Boolean, Data, RegExp 등이 있습니다. 그 중에서 문자열 객체(String Object)는 문자열을 저장/관리하기 위해 사용하는 객체를 의미합니다. ___ 참고하기 ___ `1 문자열을 생성할 때는 ''"" 따옴표를 사용하거나, new 키워드를 이용합니다. `2 문자열 객체는 불.. 2022. 8. 18.

문자열 객체 (2) toUpperCase / toLowerCase / trim / trimStart / trimEnd 메서드 ⭐️ 문자열 객체 ( toUpperCase / toLowerCase / trim / trimStart / trimEnd 메서드 ) ⭐️ 01. 표준 내장 객체의 종류 : 문자열 객체 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 말하며, 다른 객체의 기초가 되는 핵심적인 객체 입니다. 내장 객체의 종류에는 Object, Fuction, String, Array, Math, Number, Event, Boolean, Data, RegExp 등이 있습니다. 그 중에서 문자열 객체(String Object)는 문자열을 저장/관리하기 위해 사용하는 객체를 의미합니다. ___ 참고하기 ___ `1 문자열을 생성할 때는 ''"" 따옴표를 사용하거나, .. 2022. 8. 18.

정규 표현식 ⭐️ 정규 표현식 ⭐️ 01. 정규 표현식 (regex)이란? 정규 표현식 (Regular Expression)은 어떠한 텍스트 내에서 특정한 규칙을 가진 문자열(패턴)을 검색하고 치환하기 위해 사용하는 형식 언어를 말합니다. 정규 표현식은 검색 엔진, 워드 프로세서와 문서 편집기의 찾아 바꾸기 대화상자, 그리고 sed, AWK와 같은 문자 처리 유틸리티, 어휘 분석에 사용되고 있습니다. [1] 정규 표현식의 형태 / regex / i / 슬래시 / 안에 찾고자 하는 패턴 regex 을 작성합니다. 어떤 옵션에 의해서 검색할 것인지를 나타내는 플래그 i 를 활용할 수 있습니다. ___ 참고하기 ___ `1 플래그(Expression Flags)의 종류는 global, multiline, case inse.. 2022. 8. 17.

문자열 객체 (1) 문자열 결합 / 템플릿 문자열 ⭐️ 문자열 객체 ( 문자열 결합 / 템플릿 문자열 ) ⭐️ 01. 표준 내장 객체의 종류 : 문자열 객체 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 말하며, 다른 객체의 기초가 되는 핵심적인 객체 입니다. 내장 객체의 종류에는 Object, Fuction, String, Array, Math, Number, Event, Boolean, Data, RegExp 등이 있습니다. 그 중에서 문자열 객체(String Object)는 문자열을 저장/관리하기 위해 사용하는 객체를 의미합니다. ___ 참고하기 ___ `1 문자열을 생성할 때는 ''"" 따옴표를 사용하거나, new 키워드를 이용합니다. `2 문자열 객체는 불변성이 있으며, 이로써 메.. 2022. 8. 17.

퀴즈 만들기 (5) 객관식 다수 문항 ⭐️ 객관식 다수 문항 (정답 오답 확인) ⭐️ 01. 만드는 순서 1) 출력할 내용이 들어있는 요소 선택하기 2) 질문과 정답 내용, 필요한 값 입력하기 3) 질문 내용 출력하기 4) 정답 내용 숨겨놓기 5) 정답 확인 및 결과값 설정하기 6) 정답 버튼의 동작 설정하기 02. 에 작성하기 // 문제 정보 const quizInfo = [ { answerType: "웹 디자인 기능사 (2014년 01회)", answerNum: "1", answerAsk: "다음의 디자인 원리 중 리듬에 해당되지 않는 것은?", answerChoice: { 1: "점이", 2: "강조", 3: "균일", 4: "점증", }, answerResult: "3", answerEx: "3번 // '리듬(율동.. 2022. 8. 16.

이전 1 2 3 다음

728x90

티스토리툴바