728x90

목록javascript (3)

디자인과 개발 그 사이

input password 필드 기본 (입력)모양 바꾸기

오늘은 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: 비밀번..
javascript 2024. 11. 10. 16:58
자바스크립트로 클릭시(onclick) 클래스(classList) 토글(toggle) 적용/ 찜버튼 만들기 예시

찜버튼 만들기버튼클릭시 선택되고 해지 되는것을 표현하겠습니다. 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..
javascript 2023. 7. 31. 12:12
자바스크립트 선택자 (Selector) vs 제이쿼리 비교

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