자바스크립트 라이브러리9 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. 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. 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. 이전 1 다음 728x90
