Web Code/jQuery6 [jQuery] 제이쿼리로 Roulette(룰렛) 이벤트 구현하기 룰렛 스타일의 이벤트는 사용자에게 재미와 흥미를 제공하는 데 유용합니다. jQuery를 사용하여 이미지를 돌리는 간단한 룰렛 이벤트를 만들어보겠습니다. 1. HTML 구조 먼저 HTML 구조를 설정합니다. 룰렛 이미지와 시작 버튼을 포함하는 간단한 구조를 만듭니다. 시작 2. CSS 스타일링 이미지와 버튼의 스타일을 원하는대로 추가합니다. 'styles.css' 파일을 사용하여 스타일링합니다. /* styles.css */ .roulette-container { text-align: center; } .roulette { width: 300px; transition: transform 5s ease-in-out; } #start-button { font-size: 18px; padding: 10px 20.. 2021. 11. 19. [jQuery] 플러그인 없는 아코디언 Accordion 부트스트랩이나 플러그인을 사용하지 않은 아코디언 입니다. css에서 이미지를 변경하여 화살표를 바꿀 수 있으며, 다른 조건을 주어서 js를 수정할 수 있습니다. 2021. 10. 18. [jQuery] 제이쿼리 keyup 숫자만 입력 가능한 input input에 type="number"가 아닌 text로 숫자만 입력이 가능하게, keyup()메소드를 이용하여 val()값이 숫자가 아닌 다른 값이 들어올 경우 replace(/[^0-9]/g, "")를 이용하여 필터링 하는 방식입니다. 선택자는 별도로 변경하셔서 커스텀으로 사용할 수 있습니다. 2021. 4. 19. (2) [jQuery] 제이쿼리 클릭(click) 시 show, hide / 보이기 숨기기 저번 시간에 이어서 JQ 제이쿼리 기본 메서드 중에서 show, hide 응용법을 알려드리겠습니다. 위 예시처럼 버튼에 클릭 이벤트를 부여해서 show 버튼에는 show 이벤트가 hide 버튼 엔 hide 이벤트가 있습니다. 그렇기 때문에 텍스트가 보였다가 숨겼다가 하는 show, hide 응용 사용이 가능합니다. 2020. 12. 28. (1) [jQuery] 제이쿼리 show, hide 이벤트 JQ 제이쿼리 기본 메서드 중에서 show, hide 사용법을 알려드리겠습니다. 위 예시처럼 jq에서 선택자인 test1은 hide 이벤트로 숨겨지며, show는 기존 element 디폴트가 show이기 때문에 이벤트를 안 주어도 show 이벤트처럼 보입니다. 다음에는 오늘 배운 2가지 이벤트를 응용하는 법을 알려드리겠습니다. 2020. 12. 28. [jQuery] 얼럿 / 컨펌 박스 띄우기 alert / confirm box 띄우기 / 경고창 안내창 띄우기 컴펌 박스는 확인과 취소 버튼이 있는 확인 창으로 간단하게 사용이 가능하다. 주로 취소 버튼 또는 어떠한 정보를 작성 완료 후 나오는 팝업창이라고 생각하면 쉽습니다. 얼럿은 간단하게 확인을 하고 넘어가는 경우에 주로 사용된다. 컨펌과 얼럿 2개 다 내용이 변경 가능하며, 버튼클릭 시 노출되는거 뿐만 아니라 다른 태그로 이용이 가능하다. 2020. 8. 17. 이전 1 다음
