JavaScript131 jQuery - 속성 선택자 속성 선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 속성 선택자 종류 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class 가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class 가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class 가 'abc'를 포함하는 요소를 선택합니다. 'abc'앞뒤로 연결된 문자가 없어야 합니다. 요소[속성.. 2022. 9. 1. jQuery - 기본 선택자 기본 선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택 합니다. id 선택자 $("#gnb") #gnb 요소를 선택 합니다. class 선택자 $(".gnb") .gnb 요소를 선택 합니다. 자식 선택자 $("#gnb > ul > li") #gnb 요소의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb 요소의 하위에있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#gnb + #logo") #gnb 다음에 오는 #logo 요소를 선택합니다. 형제 선택자 $("#gnb ~ #logo") #gnb 의 형제 요소인 #logo 요소를 선택합니다. 종속 선.. 2022. 9. 1. jQuery 란? jQuery Query가 기본적으로 가진 철학은 "write less, do more"로 적게 쓰고 많이 쓰자입니다. 개발자의 언어로 번역하면 "적은 코드로 많은 일을 하자"가 가장 어울리는 해석이라고 생각됩니다. jQuery는 다음과 같은 기능을 제공합니다. DOM과 관련된 처리를 쉽게 구현 할 수 있다. - 규칙성을 가지고 이벤트를 처리 할 수 있다. - 애니메이션 효과를 쉽게 만들 수 있다. - AJAX 처리 방식을 편리하게 사용 할 수 있다. 그 밖에도 jQuery는 작은 양의 코드로도 많은 일을 할 수 있게 설계되어 있어 프로그래머가 아니어도 꽤 이해하기가 쉬운 구문을 가지고 있습니다. Javascript와 jQuery의 차이점을 보기 위해 예시를 작성해보았습니다. javascript let t.. 2022. 8. 29. GSAP 란 GSAP GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다. 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다. 하지만 사용자의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나이다. GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋고 사용법도 간단하다고 주장한다. 설치 공식 사이트 에서 받거나 CDN , 혹은 npm install gsap로 설치할 수 있다. cnd에서 라이브러리 가져오기 CDN이란 Contents Delivery Network의 약자로, 데이터를 분산된 서버에서 받아오는 .. 2022. 8. 29. 슬라이더 이펙트 두번째 - 좌우로 보여주기 이미지 좌우로 움직이기 이번 슬라이더 이펙트는 slider__inner 클래스 div 을 만들어서 img의 width * 갯수 로하여서 전체 width값을 잡아줍니다. 또한 상위 slider__img 를 이용해 overflow: hidden; 을 주어서 넘치는 영역을 안보이게합니다. js를 이용하여 sliderInner.style.transition = "all 0.6s" 을 주어서 애니메이션 효과를 넣고 setInterval 이용하여 slider__inner 의 위치를 img의 width 값에 맞게 변경해줍니다. 또한 Gasp 와 jquery 를이용하여 만들어봤으니 자세한 내용은 아래에있는 소스보기를 통하여 봐주시면되겠습니다. 원본 소스 보기 원본 사이트 보기 2022. 8. 29. 슬라이드 이펙트 첫번째 - 이미지 보여주기 슬라이더 이펙트 이번 슬라이더 이펙트는 img 파일의 스타일을 opacity 1 과 opacity 0 을 이용하여 하나씩 봅니다. 선택 자를 이용하여 slider__wrap, slider__img, slider 을 불러와 slider 의 마지막 이 올경우 다시 첫번째 이미지를 보여주게됩니다. 마지막으로 화면안에 소스보기를 통한 소스를 볼수있습니다. 원본 소스 보기 원본 사이트 보기 2022. 8. 29. 이전 1 ··· 11 12 13 14 15 16 17 ··· 22 다음 728x90 반응형
