👾

jQuery를 이용해 애니메이션 효과 추가하기 jQuery에는 다양한 애니메이션 효과를 제공한다. https://www.w3schools.com/jquery/jquery_ref_effects.asp 위 사이트에서 다양한 종류의 Effect Method를 확인할 수 있다. Effect Method는 간단하게 selector에 적용할 수 있다. $(selector).effectMethod() 예를 들어 h1요소를 화면에서 사라지게 하고 싶다면 $("h1").hide(); 라고 작성하면 된다. Effect Methods(애니메이션 효과 설명) 간단한 설명을 위해 h1요소에 애니메이션을 적용한다고 가정했다. $("h1").animate() // h1이 설정한 애니메이션으로 실행됨 // ex) $("h1").an..

html 요소 삽입하기 jQuery를 이용해 요소를 삽입하는 메소드는 before, after, prepend, append 등이 있다. 각각의 메소드마다 요소가 삽입되는 위치가 조금씩 다르니 자신이 원하는 위치에 따라 알맞게 사용해야 한다. $(selector).before(content) // 이때 content에 들어갈 수 있는 값은 HTML elements, jQuery objects, DOM elements이다. .before()는 selector 이전에 content를 삽입하는 메소드이다. $("h1").before("Hello"); // 이전에 Hello 삽입 $(selector).after(content) .after()는 selector 이후에 content를 삽입하는 메소드이다. $("..

Event Listener 추가하기 jQuery에는 다양한 이벤트가 존재하는데, 이런 이벤트를 추가하는 방법엔 2가지가 있다. 방법1) 이벤트 메서드 이름을 이용하기 예시로 을 클릭했을때 요소의 색을 빨간색으로 바꾸는 이벤트를 추가해보자. 클릭했을 때 이벤트가 발생하는 메소드는 .click()이다. 따라서 위의 예시를 실행하기 위한 코드는 다음과 같이 작성하면 된다. 1 2 3 $("h1").click(function () { $("h1").css("color", "red"); }); cs .click()내에 이벤트가 발생했을 때 호출될 콜백함수를 작성해서 이벤트를 추가하는 방식이다. 방법2) .on() 이용하기 .on("eventMethod", function(){}) .on()의 첫 번째 인자로는 이..

attr()을 이용해 요소의 속성 변경하기 .attr()을 이용하면 요소의 속성 값을 가져오거나(get) 변경(set)할 수 있다. $("elementName").attr("attributeName"); // 요소의 속성 값 get $("elemetName").attr("attributeName", "attributeValue"); // 요소의 속성 값 set 사용 예시 예시 1) 의 src 속성 값 변경하기 공부한 것을 정리한 내용입니다. 수정할 부분이 있다면 알려주시면 감사하겠습니다 :)

jQuery를 이용해 html 요소의 텍스트 변경하기 jQuery를 이용해 html 요소의 텍스트를 변경하는 방법에는 2가지가 있다. 방법1) .text() 이용하기 $("h1").text("new text"); 위와 같이 텍스트를 변경할 요소를 선택해서 .text 내에 변경하고 싶은 텍스트를 작성해 주면 된다. 방법2) .html() 이용하기 $("h1").html("new text"); .text()는 html 요소 내의 텍스트만 변경 가능하지만 .html()을 이용하면 텍스트뿐만 아니라 html 코드를 변경하는 것도 가능하다. 위와 같은 코드를 실행하면 new text 과 같은 형태로 h1 요소의 content가 바뀌게 된다. 사용 예시 예시1) .text() 이용 $("button").text("..

jQuery와 CDN 설명 jQuery는 자바스크립트의 라이브러리로, 짧은 코드를 이용해서 효율적으로 자바스크립트 코드를 작성할 수 있도록 해준다. jQuery를 이용하는 방법에는 https://jquery.com/에서 라이브러리를 다운받아서 사용하는 방법과 CDN을 이용하는 방법이 있다. CDN(Content Delivery Network)이란 온라인 상의 대용량 콘텐츠를 저렴한 비용으로 빠르게 전송하는 기술을 말한다. 주요 ISP의 CDN 서버에 콘텐츠를 분산시켜 놓는 방식이다. 이를 이용해서 최종 사용자가 콘텐츠를 전송받을 때 여러 CDN 서버 중에서 가장 가까운 네트워크 경로를 선택할 수 있다. 이로써 트래픽이 특정 서버에 몰려 과부하가 발생하는 것을 막을 수 있다. 또한 사용자 입장에서는 자신과..