디자인과 개발 그 사이

✅ MutationObserver란?MutationObserver는 HTML 요소가 바뀌는 걸 감시할 수 있는 자바스크립트 기능입니다.쉽게 말해,- 누가 DOM 안의 글씨를 바꾸거나- 요소를 추가하거나- 속성을 수정하면 이걸 자동으로 감지해서 알려주는 감시자예요.✅ 왜 필요할까?기존 자바스크립트에서는 이런 변화는 감지할 수 없었어요:div.textContent를 누가 바꿨는지?태그가 새로 추가되었는지?누가 클래스명을 변경했는지?이런 건 이벤트리스너로는 못 감지하니까,이럴 때 MutationObserver가 필요해요!const observer = new MutationObserver((mutations) => { // 변화가 감지되었을 때 실행할 코드});observer.observe(감시할_요소, { ..

오늘은 input password 필드의 기본 모양을 어떻게 변경할 수 있는지에 대해 기록해보려 합니다.우선, input password 대신 input text를 사용합니다. 그 위에 position absolute로 설정한 박스를 덮어, 사용자가 입력할 때마다 원하는 문자나 이미지를 나타나게 설정해 보았습니다. 1. input password 입력 모양 바꾸기 (문자로) See the Pen input password 입력 모양 바꾸기 by 김보라 (@etbeatbh-the-bashful) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스inputField: 실제 비밀번호가 입력되는 input 요소를 가져옵니다.passwordDisplay: 비밀번..

찜버튼 만들기버튼클릭시 선택되고 해지 되는것을 표현하겠습니다. html 찜하기css.btn { padding: 10px 20px; border: none; background-color: #f2f2f2; cursor: pointer;}.btn.act { background-color: #ff9800; color: white;}javascriptfunction toggleAct(button) { button.classList.toggle("act");}  결과 🌈클릭해보세요 :) 찜하기 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   See the Pen onclick, classList, toggle 찜버튼 만들기 b..

(자바스크립트를 시작할때 선택자를 많이 쓰는데요, 저는 요즘 제이쿼리를 많이 써서 비교해 보고자 기록 해봅니다.) 자바스크립트와 제이쿼리(jQuery)는 모두 웹 개발에서 DOM(Document Object Model) 요소를 선택하기 위해 사용하는 선택자를 지원합니다. 기본적으로 제이쿼리는 자바스크립트의 기능을 확장하여 사용하기 쉽고 간결하게 작성할 수 있도록 도와주는 라이브러리입니다. 따라서 대부분의 제이쿼리 선택자는 기본 자바스크립트의 선택자와 비슷하거나 동일합니다. 하지만 제이쿼리는 선택자를 더 간단하게 사용할 수 있는 몇 가지 추가적인 기능을 제공합니다. 다음은 자바스크립트와 제이쿼리의 선택자를 비교하는 예시입니다. 1. 요소 선택자 (Element Selector) 자바스크립트: documen..