코맹이의 개발일지

✔️ 데이터셋 속성HTML의 데이터셋 속성은 커스텀 사용자 속성을 DOM 요소에 저장하는데 표준화된 방법을 제공한다.일종의 html 변수 역할이라고 말할 수 있다.HTML5부터 데이터 속성이 생기며 데이터 속성은 HTML 요소의 'data-'로 시작하는 속성을 말한다.데이터 속성의 목적은 특정한 데이터를 DOM 요소에 저장해두기 위함이다.'data-'로 시작하며 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다.data-* 전역 특성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성할 수 있다.속성명은 value이지만, HTML 표준 속성이 value 속성과는 상관..

attr()- 엘리먼트의 속성 값을 가져오거나 변경할 수 있는 함수하나의 인자를 주면 해당 속성 값만을 조회하고, 두 개를 주면 해당 속성 값을 변경한다.TestContent prop()- 엘리먼트의 속성 값을 가져오거나 변경한다는 점에서 attr()과 유사하지만,아무 속성 값이 아니라 true와 false 값만 가지는 속성 값을 관리한다.TestContent addClass()- 클래스가 없는 엘리먼트에 class 속성을 추가한다.TestContent  removeClass()- 클래스가 있는 엘리먼트의 class 속성을 삭제한다.TestContent val()- 엘리먼트가 가지고 있는 value 속성(값)을 관리한다.인자를 넣지 않으면 value를 가져오고 인자를 넣어주면 value를 인자 값으로 변..

✔️ 요소 추가prepend()- 선택한 요소 안의 첫 부분에 내용 삽입$(function() { $(".box").prepend("추가 문자");}); append()- 선택한 요소 안의 끝 부분에 내용 삽입$(function() { $(".box").append("추가 문자");}); before()- 선택한 요소 앞에 내용 삽입$(function() { $(".box").before("추가 문자");}); after()- 선택한 요소 뒤에 내용 삽입$(function() { $(".box").after("추가 문자");});  ✔️ 요소 제거remove()- 선택한 요소를 제거 (자식 요소도 함께 제거된다.)$(".box").remove(); ❗remove()는 매개변수를 가질 수 있다.$(".bo..

📌 AJAX란?자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능클라이언트와 서버 간에 XML 데이터를 주고받는 기술이다.더보기💡 XML?-eXtensible Markup Language: 확장될 수 있는 표시 언어- HTML과 같이 마크업 언어로서 태그를 사용하여 작성할 수 있다.- 그러나 차이점은 HTML은 약속한 태그들만, XML은 사용자가 임의로 만들어서 사용할 수 있다는 점이다.- ❓ 그렇다면 왜 임의로 만들게 했을까 라고 물어볼 수 있다.- XML은 어떠한 데이터를 설명하기 위해 임의로 지은 태그로 데이터를 감싸는 방식이다.- 즉, 태그로 데이터를 설명하는 것이다. 📌 비동기 방식이란?웹페이지를 리로드 하지 않고 데이터를 불러오는 방식웹페이지에서 기타..

1. innerHTML먼저 innerHTML은 'Element'의 속성으로, element 내에 포함된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다.즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있다.Hello, World!위의 코드에서 id가 myDiv인 요소의 내용을 변경해보자.document.getElementById("myDiv").innerHTML = "안녕하세요~!";위 코드를 실행하면 Hello, World!가 안녕하세요~!로 변경되는 것을 확인할 수 있다.// html 코드와 함께 작성 가능document.documentElement.innerHTML = "innerHTML"//..