jQuery

스크롤하면 애니메이션 효과와 함께 표시하는 라이브러리 / AOS

AOS AOS 라이브러리(Animate on scroll library)는 스크롤 하면 나타나기, 회전하기, 확대하기 등 다양한 효과를 제공합니다.세로로 긴 웹 페이지에서 요소가 화면을 벗어날 때 스크롤하면 밑에 있는 콘텐츠를 볼 수 있습니…

유튜브 동영상을 배경으로 보여주는 방법 유튜브에 있는 동영상을 배경화면으로 보여줄 수 있습니다. video 태그로 보여주는 방법과 유튜브에 동영상을 업로드하고 불러오는 방법이 있습니다. 유튜브를 이용하면 트래픽 비용을 줄일 수 있다는 장점이…

상단 고정 메뉴(Sticky Header Menu) 다음은 jQuery를 이용한 상단 고정 메뉴 예제입니다.

scrollTop() 맨 위로 스크롤 이동하는 방법 jQuery의 scrollTop()을 이용하면 맨 위로 부드럽게 올라가는 효과를 쉽게 만들 수 있습니다. 밑으로 내려가면 웹브라우저 아래 중간에 Top이라는 링크가 생기고,그 링크를 클릭하면…

체크박스 모두 선택, 모두 선택 해제 하는 방법 다음은 체크박스를 모두 선택하고 해제하는 간단한 예제입니다.

HTML 태그 바꾸는 방법 예를 들어 <h2> 를 <p> 로 바꾸고 싶다면 다음과 같이 합니다.

순서대로 요소를 나타내는 방법 .animate()를 이용하여 서서히 나타나게 만든 예제입니다.

CDN 이용하기 HTML에 다음 코드를 추가합니다.

자식 요소의 개수를 기준으로 부모 요소을 선택하기 위해서는 스크립트를 이용해야 합니다. 다음은 jQuery를 이용한 간단한 예제입니다.

:button :button은 type이 button인 요소를 선택하는 선택자입니다.

:contains() :contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다.

:empty :empty는 내용이 없는 빈 요소를 선택하는 선택자입니다.

:even :even은 짝수 인덱스 요소를 선택하는 선택자입니다.

:has() :has()는 특정 요소를 포함하는 요소를 선택할 때 사용하는 선택자입니다.

:nth-child() :nth-child()는 형제 요소 중 an+b번째 요소들을 선택하는 선택자입니다.

:odd :odd은 홀수 인덱스 요소를 선택하는 선택자입니다.

.add() .add()는 어떤 요소를 추가로 선택할 때 사용합니다.

.addBack() .addBack()은 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다.

.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다.

.after() .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있습니다.