jQuery by 강다영

제이쿼리란?

a01049479039 — 2024-07-17 22:31:48 UTC

=자바스크립트 라이브러리

=이벤트 기능 구현시 호환성 문제해결 편

=뛰어난 DOM구조 탐

라이브러리 & 프레임워크

둘 다 재사용 가능한 코드의 모음이며, 중요한 차이점으로는 제어 흐름의 권한이 어디에 부여되어 있느냐다

라이브러리

=도서관

=구현된 기능 대여

=ex) React, jQuery

프레임워크

=코드 재사용이 가능하지만 정해진 룰이 있음

=적은 자유도, 높은 완성도

=프레임워크에서 라이브러리 사용 가능

제이쿼리 기본 설정

a01049479039 — 2024-07-17 22:54:08 UTC

제이쿼리 사용 시 상단에 코어 파일 경로나 CDN 주소 삽입해줘야 적용 가능

제이쿼리 개념

a01049479039 — 2024-07-17 22:55:33 UTC

=제이쿼리 기호

=해당 돔 객체에 제이쿼리 사용 의미

$()

=제이쿼리 메서드

$(document).ready(function(){});

=자바스크립트의 windowd.onload

=제이쿼리 사용시 기본폼

선택자 사용

.메서드()

=단수형

=콤마 , 사용

.메서드({})

=복수형

= 콜론 : 사용

=속성을 문자열로 써도 되고, ' '없이 그냥 작성도 가능(다만, 카멜표기법 적용해야함)

ex)

$("#aaa").css('color','black');
=id aaa 폰트 색상 검정 변경
$("#aaa").css({color: 'black', background: 'yellow'});
=id aaa에 폰트 색상 검정, 배경색상 노랑 지정
$("ul").children().css({fontSize: 48px});
=ul의 모든 자식들에 폰트 크기 48px 부여

제이쿼리 선택자

a01049479039 — 2024-07-18 05:23:40 UTC

$("*")

=전체선택자

$("h3")

=요소명 선택자

$(".aaa")

=클래스 선택자

$("#aaa")

=아이디 선택자

$("#aaa>div")

=자식 선택자

$("#aaa div")

=하위 선택자

$("#aaa, h1, h2")

=그룹 선택자

$("h1.aaa")

=h1태그 중 클래스 aaa인 객체만 선택

$("#aaa+div")

=인접 형제 선택자

$("#aaa~div")

=모든 형제 선택자

$("table>tbody>tr")

=테이블 선택시 주의사항

=table에는 thead, tbody, tfoot이 있는데 이 중 tbody는 코딩하지 않아도 자동으로 붙기때문에 선택자 쓸때도 tbody를 고려해야한다

메서드 활용

.children()

=자식선택자

.parent()

=부모선택자

.siblings()

=형제선택자

위치필터 선택자

***필터 나오면 기본 기호 : 콜론***

짝수

:even

홀수

:odd

첫번째

:first

부모안에 모든 요소 중 첫번째 요소 선택

:first-child

마지막

:last

부모안에 모든 요소 중 마지막 요소 선택

:last-child

n번째 자식

:nth-child(n)

=주의해야할 점! 인덱스 번호와 다르게 nth는 1번부터 시작!!

인덱스 번호

:eq(n)

=.eq(n)

=$(안에 콜론을 붙여 eq입력할 수도 있지만) .eq(메서드를 활용할 수도 있다)

=주의할점 : 인덱스 번호는 배열과 같이 0번부터 시작!!!

=n자리에 -가 붙으면 뒤에서부터 계산한다

ex) eq(-1) = 뒤에서 첫번째 것, eq(-2) = 뒤에서 두번째 것

앞에서 셀때는 0번이 제일 처음 시작했으나 뒤에서 시작할때는 -1번이 제일 첫번째 시작

~미만 = less than

:lt(n)

~초과 = greter than

:gt(n)

제이쿼리 실습 오답노트1

a01049479039 — 2024-07-18 06:53:03 UTC

발발과정:

이미지 세개 중 마지막 이미지만 크기를 조절해야했음
:last-child를 적용했지만 변화 없음, 신기하게도 :last나 .eq(-1)은 적용이 됨
왜 :last-child는 작동되지 않았을까 하는 의문

해결과정:

이름에도 차이가 있듯이 last와 last-child는 다름

last

=해당 태그 내 마지막 '요소만'

last-child

=해당 태그가 여러개라면 그 모든 태그 안 last-child가 적용된 마지막 '요소들만'

(li*6>span*3 구조)

6개의 li안에 span이 각각 a, b, c라는 내용들 담고 3개씩 들어있을때

$("span:first")라면?

6번째 li의 a라는 내용을 포함한 span만 css 적용가능

$("span:first-child")라면?

모든 6개의 li들 중 a라는 내용을 포함한 span'들'만 css 적용가능

변수:

해당 지식을 갖고도 이해안되어, first-child적용해보니 얘는 적용이 됨;;

img 대신 p태그로 따로 해보니 이거 또한 last-child만 안됨

결과:

세상에 나같은 사람이 또 있었음

https://www.codeit.kr/community/questions/UXVlc3Rpb246NjA2YmYxN2Y1YjlmOTEwMTE5MmY3ZDUz

first-child는 되고 last-child는 안됐던 이유는?

-child

=해당 태그 뿐만 아니라 그 태그의 형제 요소 포함

형제요소를 잘 나타내준 예시

https://study-ihl.tistory.com/25

span:first-child

=해당 태그의 첫번째 형제 요소가 태그 본인 자신이기에 적용 가능!!

last-child

=해당 태그의 src, alt 등의 요소가 들어있기에 이미지 좌표 등이 대신 잡히는 것으로 추정

왜 다른 요소도 없는 p태그도 안되지?

=인라인 태그에만 적용되고, 블록 태그에는 적용이 안되는거 아닐까 추정

제이쿼리 메서드

a01049479039 — 2024-07-18 07:01:08 UTC

제이쿼리 메서드

$() = jQuery()

jQuery()가 길어서 $로 간단히 축약함

.filter('ex) :even')

=이름 그대로 해당하는 것만 고르는 필터작용

=기본 선택자로 $("li:even") 이런식으로 쓸 수도 있음

=배열과 관련된 DOM객체에서 특정 문서객체를 걸러내서 선택할때 사용

.eq(n)

=앞서 선택자 부문에서 설명했듯이 $("li:eq(n)") 이런식으로도 사용가능

.first()/.last()

=요소의 맨 처음과 맨 마지막 선택

.find()

=선택된 DOM객체의 후손 문서 객체 선택

=ex)

$('h3').find('span').css('color','pink');

h3태그 내에서 span태그를 찾아 폰트 색상을 분홍으로 지정하겠다

.is()

=주어진 매개변수와 하나라도 일치하면 true값 리턴

=ex)

$('h3,h4').children().is('span')

h3과 h4태그의 자식들 중 span태그가 있다면 true

.attr('추가할 속성','속성값')

=자바스크립트의 setAttribute

=선택한 요소의 css 속성값을 가져오거나 style 속성을 추가할 때는 .css()를 사용

.removeAttr(제거할 속성)

=속성 제거할때 사용

=attr의 반대

.has()

=주어진 매개변수에 태그가 일치하면 선택 후 적용

=ex)

$('div').css('color','lightgray').has('h6').css('color','orange');

div의 폰트 색상을 연회색으로 지정하고, div 태그에 h6태그가 들어있다면 그 h6의 폰트 색상을 주황색으로 하겠다

***실제로 첨부한 사진 속 fine메서드 - THREE도 h6태그로 만들었지만 div태그 내에 있는게 아니어서 주황색으로 변하지 않았다. 또한, div태그 내 p태그로 작성된 가나다라는 div 폰트 연회색 색상변환만 영향 받은 모습이다 ***

.addClass()

=해당 개체에 클래스 추가

=여러개의 클래스 추가시 , 콤마 없이 사용 가능

ex) .addClass(.aaa .bbb)

.removeClass()

=해당 개체에 적용된 클래스 삭제

=addClass로 추가한 클래스가 아닌 html에서 추가한 클래스도 삭제되는 모습을 보여줌

=ex)

$('h5').eq(1).removeClass('change_02');

2번째 h5태그에 적용된 .change_02 클래스 삭제

.html()

=선택된 DOM객체의 첫번째 요소 문자열만 반환

=ex 1)

var out = $('h3').html();
alert('html 메서드 : ' + out);


    나의 금기어
    
        "언젠가" "아마도" "만약에"

h3태그로 쓰인 문자열 두개 중 첫번째 요소인 '나의 금기어'만 alert되었다

=자바스크립트의 innerHTML처럼 html태그 연동 가능

=ex2)

$('div').eq(0).html('추가된 HTML
');

첫번째 div에 자식태그로 p태그가 폰트 색상 빨강으로 지정되어 '추가된 HTML'이라는 문자열이 생겼다

$('div').eq(0).text('추가된 HTML
');

반대로 .html() 자리에 .text()를 입력하면, .html()메서드와는 다르게 '

추가된 HTML

'이라는 HTML태그를 적용하지 못한 그 자체로 문자열이 생긴다는 것이 두 메서드의 차이다

*** 주의할점: 위에서 이미 .html()로 추가한 p태그가 있기에 밑에 실습에서 .html()로 p태그 자식태그로 p태그를 추가하려 했을때 위에서 만든 p태그 자식태그로도 p태그가 추가되어 총 두개가 생겨버림! html에서 작성한 것 말고 동적데이터로도 만들어낸 태그 고려 ***

.text()

=선택된 DOM객체의 모든 문자열 묶어서 반환

=ex)

var out = $('h3').text();
alert('html 메서드 : ' + out);


    나의 금기어
    
        "언젠가" "아마도" "만약에"

.html()과 같은 조건으로 메서드만 .text()로 변경했을때 .html()에서는 '나의 금기어'만 나왔다면 .text()는 '나의 금기어'와 '언젠가 아마도 만약에'까지 나온다

=자바스크립트의 innerText처럼 html태그 연동 불가능

.appendTo('HTML요소')

=매개변수의 맨 마지막 자식요소로 태그 생성

=ex)

$('Dead Poet Society
').css({color:'purple'}).appendTo('body');

다음과 같이 입력했을때 html에 h1 태그가 적용된 문자열이 css속성을 받아 .appendTo()로 인해 html의 body 태그 안에 들어가게 된다

이때, body 안에 이미 다른 태그들이 자리잡고 있다면 그 중 가장 마지막으로 출력된다

.remove(매개변수 없음)

=.removeClass()와 비슷함

=.removeClass()가 괄호 안 클래스를 삭제해버린다면 .remove()는 선택된 DOM객체 태그를 제거해버림

=객체 태그에 자식 태그가 딸려있었다면 객체 태그가 사라지며 자식 태그까지 제거됨

=ex)

$('div').remove();

div태그 삭제

.next()

=선택된 요소의 다음 객체 지정

ex)

<스크립트>
$('#acc>.header').click(function(){
                $(this).next().stop().slideToggle(400);
            });

=#acc 안의 .header를 클릭할때 작동하는 기능{클릭한거.다음.멈추고.말아올리듯 보이기/숨기기(속도 400 normal로)}라는 수식

=만일 this로 클릭한게 .header가 적용된 제목1이었다면 이때, .next()로 인해 그 형제태그인 p class.content 내용1이 지정된다

.stop()

=주로 애니메이션을 구성할때 사용

=이름 그대로 동적인 것을 멈춤

=.stop()의 특성을 잘 보여준 예시https://simfairy.tistory.com/113

.click()

=이벤트 연동할때 사용

=페이지 로드될때 선언된 요소에만 적용되므로, .appendTo() 등을 이용해 동적으로 추가한 요소에는 이벤트 적용 x

.on("이벤트 종류 ex. click", 핸들러 ex. function)

=이벤트 연동할때 주로 사용

=하나의 이벤트 핸들러에 여러 개의 이벤트 동시 연결 가능

=.click()보다 동적인 면이 있음

=페이지 로드 후 동적 추가한 요소도 적용 o

.on 적용법 예시

하나의 DOM요소에 여러개 이벤트 등록

$('h5').on('click',function(){
                alert('on이벤트 실행');
            });

여러개 이벤트 등록

$('h5').on({'mouseenter':function(){
                 alert('마우스엔터');
             },'mouseleave':function(){
                 alert('마우스리브');
             }});

.animate({속성명:속성값(숫자), 시간, 콜백함수})

=속성명이 숫자값으로 입력되는 속성들만 사용가능 (ex. width, height ...)

=무조건 있어야 하는 값 : 시간(ex. 'slow', 'normal', 'fast', 밀리초)

=css의 animation과 같은 속성

=속도 : swing(기본값) , linear(동일속도)

.delay(밀리초)

=설정된 밀리초 후에 애니메이션 실행

.mouseover()

=마우스가 선택된 DOM에 올려졌을때 작동

.mouseleave()

=마우스가 선택된 DOM을 벗어날때 작동

.hover(마우스 올라왔을때, 마우스 떠났을때)

=css의 hover와 비슷

=mouseover + mouseleave

=ex)

$('h5').hover(function(){
                 //mouseenter()시 이벤트 리스너 
                 alert('마우스엔터시');
             },function(){
                 //mouseleave()시 이벤트 리스너
                 alert('마우스리브시');
             });

.focus()

=웹 로드될때 최초 커서 위치 지정

.blur()

=커서가 없어졌을때를 의미하며 포커스의 반대

=포커스가 해제되었을때 수행하고 싶은 것 구현

.preventDefault()

=https://programming119.tistory.com/100

.scroll(핸들러) or .scroll({이벤트},핸들러)

=.on("scroll",핸들러)

=window가 객체의 선택자

=스크롤이 움직일때 발생

=https://blog.naver.com/how2frontend/222259401877

효과 메서드

.기본적 구조('fast or slow or normal')혹은(밀리초)

.show()

=DOM선택요소 보이기

=css에서 display: none 처리된 것도 .show() 적용가능

.hide()

=DOM선택요소 숨기기

.toggle()

=DOM선택요소 보이기/숨기기

.slideUp()

=DOM 선택요소 미끄러지듯 말아올리며 숨기기

.slideDown()

=DOM 선택요소 미끄러지듯 말아 내리며 보이기

.slideToggle()

=DOM 선택요소 미끄러지듯 말아 보이기/숨기기

.fadeIn()

=DOM 선택요소 천천히 나타냄

.fadeOut()

=DOM 선택요소 천천히 사라짐

.fadeToggle()

=DOM 선택요소 천천히 나타남/사라짐

제이쿼리 실습 오답노트2

a01049479039 — 2024-07-18 07:21:47 UTC

발발원인:

문제를 제대로 안읽고 .find()메서드 적용하려고 함
.is()메서드로 true값을 변수에 받아내 if문에 넣을 생각은 있었으나 .children()활용할 생각을 못함

해결:

var isChild = $('h3,h4').children().is('span');

해석 ) 변수명 isChild = h3과 h4의 자식들 중 span이 있다면 true

if(isChild가 true라면){ true일때 값 입력 alert('aa')}else{false일때 값 입력 alert('bb')};

제이쿼리 & 자바스크립트 활용

a01049479039 — 2024-07-19 06:09:32 UTC

3초마다 알람뜨게 하기

$(document).ready(function(){
            setInterval(function(){
                alert('aa'); 
            },3000);
        });

=제이쿼리 메서드 안에 자바스크립트 setInterval코드를 넣어 3초마다 문자열 aa라는 알람이 울리게 구성한 모습

자바스크립트 btn10을 클릭했을때 (경고창)자바스크립트 DOM2 이벤트


   

<스크립트>
            var btn10 = document.querySelector("#btn10");
            btn10.addEventListener("click",function(){
                alert('자바스크립트 DOM2 이벤트');
            });

querySelector() 메서드

=괄호 안 선택자와 일치하는 첫번째 요소 반납

=id의 #이나 class 선택자인 . 등 선택자 명을 확실하게 적어줘야함

querySelector() 메서드를 활용해 변수명 btn10에 #btn10을 연동
.addEventListener()로 클릭시 생기는 알람 기능 추가

제이쿼리 실습 오답노트3

a01049479039 — 2024-07-19 06:17:07 UTC

발발원인:

제이쿼리를 활용해 이미지가 계속 바뀌는 것 구현
그러나 계속 같은 곳에 머무르게 하는 법을 헷갈려 overflow:hidden으로 야매완성

해결과정:

position 중에서 relative만이 고정적인 hole을 가지고 있고, absolute는 구조 없이 유동적인 면을 활용

결과:

div에는 relative 그 자식 태그인 img에는 absolute를 넣는다
z-index까지 설정해 그 자리에 계속 다른 이미지가 중첩되어 쌓이는 유동적인 형식 완성

display 개념

a01049479039 — 2024-07-19 06:51:53 UTC

=화면에 어떻게 드러나게 할지를 결정하는 속성

display: none;

=화면에서 사라짐

=구조 차지하지 않음

display: block;

=none과 반대되는 값

=설정하지 않아도 div가 갖게되는 기본값

display: inline;

=컨텐츠를 감쌀 정도의 크기만 가지며 줄바꿈 x

display: inline-block;

=inline + block

=기본적인 Top-down구조에서 inline이 갖고있는 가로 나열 구조로 바뀜

=크기 조절 가능

=여러 박스에 inline-block적용 시 자동으로 박스 사이가 약간 벌어짐

부트스트랩

a01049479039 — 2024-07-19 07:16:55 UTC

일종의 ppt 템플릿과도 비슷한 개념

남들이 디자인해둔 것을 가져다 쓰는 형식

선생님의 수업화면과 내 화면이 폰트 크기나 이미지의 위치가 조금씩 달라 당황한 적이 있었는게 그 원인이 부트스트랩이었음

케밥표현법

-대쉬 붙은 표현법 = 케밥 표현법

-대쉬 나오면 부트스트랩 클래스구나 인식

ex) card-body

this 개념

a01049479039 — 2024-07-19 07:23:35 UTC

내가 클릭한 부분, 혹은 선택한 부분을 DOM객체로 지정하는 한마디로 무엇이든 될 수 있다

구조가 여러개 추가되어도 유동적으로 움직이는 장점을 가지고 있다

주의사항:

자바스크립트, 제이쿼리의 this = 위에 쓴대로 이벤트가 선택된 돔객체 자체

자바의 this는 다르니 혼동 주의

사진해석:

공통 클래스인 .clickTest를 .on() 메소드를 활용해 클릭했을때, $(내가 선택한 것).text('의 텍스트노드를 클릭되었습니다로 변경하겠다')

아코디언 메뉴

a01049479039 — 2024-07-19 07:46:37 UTC

아코디언 메뉴란?

여러 항목 중 하나의 항목이 확장되어 내용 표시되고, 다른 항목들은 축소되어 내용이 감추어지는 기능

ex) 웹사이트 특히 모바일 gnb 메뉴바에서 다른 카테고리를 선택할때 가끔 보던 것 같음

ex)faq 화면에서 심심찮게 볼 수 있는듯

card-body란?

부트스트랩 클래스로 카드, 즉 구조 컨테이너 내에 여백이 필요할때 사용한다

남이 설정해둔 여백을 템플릿 가져오듯 쓸 수 있게 만든 클래스

사진해석:

$('#acc>/content').hide();을 Top-down 형식으로 밑에 쓰인 content 부문을 펼치는 코드보다 먼저 작동하게 해 기본적으로 모든 .content가 가려지게 만듦
이후

$('#acc>.header').click(function(){ $(this).next().stop().slideToggle(400); }); 으로 클릭하는 부분만 미끄러지듯 나타남/숨기기가 적용된 모습

입력양식 선택자

a01049479039 — 2024-07-22 03:29:56 UTC

type 속성

사진과 같은 예제에서 선택된 DOM이 input type명인 것을 볼 수 있다

타입명을 선택자로 작성할때는 앞에 콜론 : 기호가 붙으며, 기호가 들어갈때는 . 클래스 기호나 # 아이디 기호를 썼을때처럼 앞 뒤에 ' ' or " "를 붙여 문자열로 만들어줘야한다

변수 개념

a01049479039 — 2024-07-22 03:35:17 UTC

제이쿼리 실습 오답노트 4

a01049479039 — 2024-07-22 03:40:56 UTC

발발원인 :

.css()가 아닌 .attr()로 속성 추가 시도
.attr('width', 100) 했던게 생각나 .attr('color','red') 시도 결과 안됨
.css()와 .attr()의 이해도 부족

해결과정:

.css()와 .attr()의 차이점

attr()은 요소의 속성값을 가져오거나 추가

css()는 요소의 css 속성값을 가져오거나 style 을 추가

참고 주소:

http://127.0.0.1:5500/300_jQuery/%E3%85%87.html

scrollTop 플러그인 활용한 부드러운 스크롤

a01049479039 — 2024-07-23 06:17:36 UTC

jquery.scrollTo.min.js

=효과 등에 관련된 것을 제작을 미리 해서 파일 형태로 제공

=마치 플러그를 꼽아쓰는 것과 같다해서 플러그인이라 부르며, scrollTo를 쓰고 싶다면 해당 js 파일이 있거나, cdn 주소를 연동해야 한다

부드러운 스크롤

$(document).ready(function(){
    /* scrollTo 플러그인 사용 = 부드러운 스크롤 */
    $('.gnb a').click(function(){
        /* scrollTo(링크될 # 또는 0(top), 애니메이션 시간) */
        $(window).scrollTo(this.hash||0,500);
    });

*** .scroll 메서드는 객체가 항상 window !!!!***

참고 주소: https://haeeeell.tistory.com/55

.scrollTo(링크될 # 또는 0(top), 애니메이션 시간)

=해당 플러그인이 있어야 사용 가능

=연동된 이벤트 클릭시 해당 내부 링크 페이지로 스크롤

.hash

=페이지의 내부 링크 목적 사용

=위치값이 지정되지 않은 경우 최상단으로 이동

위 1번 코드 같은 경우 .scrollTo(this.hash||0,500);로 일반적으로 this 자리에 a 링크 #아이디가 온다

예제에서는 코드가 길어지지 않게 this를 활용한 모습이다

||는 .hash에서 if의 else와 같은 뜻으로 경로가 지정되지 않은 것(a 링크)을 클릭했을시 어떻게 하겠다는 뜻으로, 예제에서는 top을 의미하는 숫자 0을 적어 링크가 걸려있지 않다면 페이지 최상단으로 보내겠다는 의미로 작성되었다

이후, 애니메이션 시간 500을 줘 스크롤이 한번에 뚝 끊기듯 이동되는게 아닌 부드럽게 이동될 수 있도록 했다

TOP버튼

 var sa = 100;
    $(window).on('scroll',function(){
        var num = $(window).scrollTop();
        console.log('스크롤 값 : ' + num);
        if(num>sa){
            $('aside div').stop().fadeIn('fast');
        }else{
            $('aside div').stop().fadeOut('fast');
        }
    });

스크롤 100을 기준으로 했을때 top버튼이 페이드인 됐다 페이드아웃되게 만든 코드

if함수를 활용해 .scrollTop(top에서부터 스크롤한지)

if(100 이상일때){html에서 만든 top버튼이 빠르게 페이드인 되고}else{100미만일때는 빠르게 페이드아웃되게 했다}

animate 부드러운 스크롤탑 이동

/* animate 부드러운 스크롤탑 이동 */
    $('.top').click(function(e){
        e.preventDefault();
        $('html,body').stop().animate({scrollTop:0},1000,'swing');
    });

top버튼을 눌렀을시 페이지의 맨 위로 올라가게 하는 코드

.preventDefault()를 쓴 이유:

-클릭 이벤트의 기본 동작을 막음

풀이) 클릭된 요소에 top으로 향하는 링크가 걸려있는데 '부드러운' 스크롤탑을 위해 뚝 하고 바뀌어버리는 기본 동작을 막기 위함이다

숫자 0이 scrollTop에서 가장 최상단을 의미함에 따라 스크롤 속도 1초, swing(기본값) 방식으로 top으로 올라간다는 뜻이다

$('html과 body 모두 작성해준 이유는 브라우저 호환성 때문으로, 브라우저마다 서로 다른 요소에서 스크롤을 처리하기에 둘 다 작성해주었다)

다음과 같은 코드를 해석하면 탑 버튼 클릭시 기본 동작 링크 이동을 preventDefault로 막고, html과 body에서 페이지 최상단까지 1초의 속도와 swing 방식으로 탑까지 올라간다고 적혀있다

제이쿼리 실습 오답노트5

a01049479039 — 2024-07-23 07:03:58 UTC

발발원인:

eq없이 .open1만 적어두면 개별로 열리고 닫히는 기능이 아닌 한번에 다 열고 닫는 기능이 되는 줄 앎
this 개념 이해도 부족

해결과정:

$(this)에서 지칭하고 있는 this가 '내가 클릭한 부분'인데 그보다 광범위로 내가 클릭한 부분의 클래스인 .open1과 혼동했다는 것을 깨달음

슬라이드 수동

a01049479039 — 2024-08-14 02:37:45 UTC

html에서 인라인 이벤트 방식으로 수동클릭할 <<, >>버튼과 점박이 버튼에 각각

슬라이드 자동

a01049479039 — 2024-08-14 02:43:30 UTC

jQuery by 강다영

제이쿼리란?

제이쿼리 기본 설정

제이쿼리 개념

제이쿼리 선택자

제이쿼리 실습 오답노트1

제이쿼리 메서드

나의 금기어

"언젠가" "아마도" "만약에"

나의 금기어

"언젠가" "아마도" "만약에"

Dead Poet Society

아코디언 UI

제목1

제목2

제목3

제목4

제이쿼리 실습 오답노트2

제이쿼리 & 자바스크립트 활용

제이쿼리 실습 오답노트3

display 개념

부트스트랩

this 개념

아코디언 메뉴

입력양식 선택자

변수 개념

제이쿼리 실습 오답노트 4

scrollTop 플러그인 활용한 부드러운 스크롤

제이쿼리 실습 오답노트5

슬라이드 수동

슬라이드 자동