https://learn.jquery.com/ 따라하기 The jQuery Object 새 요소를 생성하거나(또는 기존 요소를 선택할 때) jQuery는 요소들을 컬렉션으로 반환합니다. jQuery를 새로 접해보는 개발자들은 이 컬렉션이 배열과 유사한 속성들과 .length 속성이 있어서 배열인 줄 알고 있습니다. 그러나 사실 jQuery 객체는 그보다 복잡합니다. DOM and DOM Elements Document Object Model (DOM for short)은 html 문서의 표현입니다. 여기에는 수많은 DOM 요소(Elements)가 포함될 수 있고, 고수준에서 DOM 요소는 웹 페이지의 '조각'으로 생각할 수 있습니다. DOM에는 텍스트와 또는 다른 DOM 요소가 포함될 수 ..
https://learn.jquery.com/ 따라하기 Manipulating Elements(요소 조작) Getting and Setting Information About Elements 기존 요소를 변경하는 여러 가지 방법이 있습니다. 가장 흔한 작업 중 하나는 요소의 내부 HTML 또는 속성을 변경하는 것입니다. 다음은 요소에 대한 정보를 가져오고 설정하는 데 사용할 수 있는 몇 가지 메서드입니다: html() - HTML 내용을 가져오거나 설정합니다. text() - 텍스트 내용을 가져오거나 설정하며 HTML은 제거됩니다. attr() - 제공된 속성의 값을 가져오거나 설정합니다. width() - 선택된 요소의 너비(픽셀)를 정수로 가져오거나 설정합니다. height() - 선택된 요소의 높이..
https://learn.jquery.com/ 따라하기 Selecting Elements(요소 선택) jQuery의 가장 기본적인 개념은 "일부 요소를 선택하고 그들에게 무언가를 수행하는 것"입니다. jQuery는 대부분의 CSS3 선택자를 지원하며 일부 비표준 선택자도 지원합니다. // ID로 요소 선택하기 $( "#myId" ); // 주의: ID는 페이지 당 고유해야 합니다. //클래스 이름으로 요소 선택하기 $( ".myClass" ); // 속성으로 요소 선택하기 $( "input[name='first_name']" ); //복합 CSS 선택자로 요소 선택하기 $( "#contents ul.people li" ); //쉼표로 구분된 선택자 목록으로 요소 선택하기 $( "div.my..
https://learn.jquery.com/ 따라하기 Attributes 요소의 속성은 응용 프로그램에 유용한 정보를 포함할 수 있으므로, 이를 가져오고 설정할 수 있는 것이 중요합니다. The .attr() method .attr() 메서드는 getter 및 setter로 작동합니다. setter로 사용될 때, .attr()은 키와 값을 받을 수 있거나, 하나 이상의 키/값 쌍을 포함하는 객체를 받을 수 있습니다. 링크얌
https://learn.jquery.com/ 따라하기 Avoiding Conflicts with Other Libraries(다른 라이브러리와 충돌 피하기) 기본적으로 jQuery는 $를 jQuery의 단축키로 사용합니다. 따라서 $ 변수를 사용하는 다른 JavaScript 라이브러리를 사용하고 있는 경우 jQuery와 충돌할 수 있습니다. hello 오류 발생 : Uncaught TypeError: $(...).ready is not a function at ...이러한 충돌을 피하려면 페이지에 로드된 jQuery를 사용하기 전에 jQuery를 논-컨플릭트 모드로 설정해야 합니다. Putting jQuery Into No-Conflict Mode(논-컨플릭트 모드로 jQuery 설정하기) jQuery..
공 움직이기 애니메이션(basic ver) mdn의 캔버스 튜토리얼 따라하기 참고 : 캔버스 튜토리얼 1. 공 그리기 HTML JS const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const ball = { // 초기 위치 x: 100, y: 100, // 속도 vx: 5, vy: 1, radius: 25, color: "blue", draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); }, }; b..
