본문 바로가기

JQuery3

제이쿼리 : 속성 선택자 제이쿼리 : 속성 선택자 JQuery는 html 요소와 관련된 기능구현이 많아, 그만큼 CSS와 매우 밀접한 관계가 있습니다. 오늘은 JQuery의 속성 선택자에 대하여 알아보도록 하겠습니다. 1. 속성 선택자 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 .. 2022. 8. 30.

제이쿼리 : 기본 선택자 제이쿼리 : 기본 선택자 JQuery는 html 요소와 관련된 기능구현이 많아, 그만큼 CSS와 매우 밀접한 관계가 있습니다. 오늘은 JQuery의 기본 선택자에 대하여 알아보도록 하겠습니다. 1. 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를 선택합니다.. 2022. 8. 30.

자바스크립트 슬라이드 효과 : 좌로 움직이는 유형 자바스크립트 슬라이드 효과 : 좌로 움직이는 유형 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 왼쪽으로 미끄러지듯이 이미지가 넘어가는 효과를 추가해준 유형입니다. HTML 소스 HTML로 뼈대를 먼저 잡아줍니다. section 태그 안에는 클래스명이 slider__wrap인 div 박스, 그 안에는 클래스명이 slider__img인 div 박스를 만들어 주고, 그 안에는 slider__inner 박스, 그 안 slider 박스 안에는 각각 이미지 5장을 삽입해 주었습니다. 각각의 div 박스의 용도는 CSS 소스에서 추가로 설명하도록 하겠습니다. 궁금하면 보시든가... CSS 소스 /* slider */ .slider__wrap { width.. 2022. 8. 29.

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바