본문 바로가기

LIBRARY9

스타일 관련 메서드 스타일 관련 메서드 이번 시간에는 스타일 관련 메서드를 알아보겠습니다. css() 메서드 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px"); $("div").css({"background-color: "red", padding: "10px"}); 콜백 함수 $("div").attr("width", function(index, w) { // index는 각 div 요소의 index 0, 1, 2 // w는 각 div 요소의 width 값 return css 속성 // 각 div 요소의 css 속성을 생성 및 변경합니다. }); .... 내용 내용 내용 See the Pe.. 2022. 9. 4.
속성 관련 메서드 속성 관련 메서드 이번 시간에는 속성 관련 메서드를 알아보겠습니다. attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({href: "http://icoxpublish.com", target: "_blank"}); 콜백 함수 $("a").attr("href", function(index, h) { // index는 각 a 요소의 index 0, 1, 2 // h는 각 a 요소 href 속성 return attribute(속성) // 각 a 요.. 2022. 9. 4.
클래스 관련 메서드 클래스 속성 메서드 이번 시간에는 클래스 속성 메서드를 알아보겠습니다. addClass() 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className) { // index는 각 div 요소의 index 0, 1, 2 // className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. }); .... 내용1 내용2 내용3 See the Pen addClass() 메서드 by KDB6 (@kdb6) on CodePen. removeClass() 메서드 요소에 class 속성을 제거합니다. 실행 분류 형식.. 2022. 9. 4.
탐색 선택자 jQuery 탐색 선택자 기본 탐색 선택자 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closet() $("p").closet("div") p 요소의 부모가 되는 첫 번째 div 요소를 찾습니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다 nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을 모두 선택합니다. nextUntil() $("div.m").nextUntil(".. 2022. 8. 31.
필터 선택자 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)") .. 2022. 8. 31.
속성 선택자 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'는 선택되지 않습니다. 요소[속성*='값'] $("span[clas.. 2022. 8. 31.
기본 선택자 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,util") div 요소 중 class가 util.. 2022. 8. 31.
jQuery jQuery 제이쿼리란, 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다. 장점 1. 페이지 내부 요소에 접근하기 쉽다. 2. 페이지의 보여지는 모습을 변경하기 쉽다. 3. 상호작용 처리가 쉽고 애니메이션을 사용할 수 있다. 4. AJAX의 사용이 쉽다. 기본 형식 jQuery는 기본적으로 $(document) .readt()로 시작하며, ready()는 jQuery 이벤트로 앞에서 학습한 자바스크립트의 load 이벤트와 유사한 기능을 가지고 있다. 기본 형식과 축약 형식 두 가지가 있습니다. 코드 보기 // 기본 형식 // 축약 형식 선택자 jQuery.. 2022. 8. 29.
GSAP GSAP GSAP란, GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery) 사용으로 구현하는 것이 일반적이지만, GSAP 위 두 개에 비해 사용하기 편하며 퍼포먼스도 좋습니다. 사용 방법 사용 방법은 GASP에서 gsap.min.js를 가져와서 사용할 수 있습니다. 결과물 GASP를 이용해 슬라이드 애니메이션을 만든 결과물입니다. 2022. 8. 29.

INFORMATION

javascript

css

html