본문 바로가기

script&jquery6

인풋 삭제 버튼 표시 input delete버튼 javascript 1. 인풋에 텍스트 입력시 삭제버튼 보이기2. 삭제버튼 누르면 입력된값 삭제3. disabled 됐을때는 삭제버튼 안보이기4. value값 있을때는 삭제버튼 보이기 See the Pen Untitled by uni (@agosto) on CodePen. 2024. 6. 20.
vertical card swiper 세로형 카드 스와이프 https://www.youtube.com/watch?v=B8-cTdaUuRQ현대카드 다이브   GitHub - JoniVR/VerticalCardSwiper: A marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift.A marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift. - JoniVR/VerticalCardSwipergithub.com  상단처럼 효과를 주고싶은데 저 링크는 앱에서 사용하는거 같아서스와이퍼 플러그인을 활용해본다. 1. 위 아래로 스와이프시 겹쳐서 수직 이동2. 오른쪽 왼쪽 .. 2024. 6. 14.
탭 접근성 javascript ## 접근성 aria-selected="true" 선택된 상태다 (aria-selected="false" 선택이 되지 않은상태다) aria-hidden="false" 보이는 상태다 (aria-hidden="true" 보이지 않는 상태다) role="tablist" 난 탭이라는 자식들을 가지고 있다 role="tab" 난 탭이라는 자식이다 aria-controls="tab-panel-1" 내가 탭일떄 선택되는 콘텐츠를 연결해준다 role="tabpanel" 나는 탭의 선택했을때 나오는 콘텐츠다 aria-labelledby="tab-1"  aria-labelledby="탭1" 난 첫번째 탭의 내용을 가져오는 거다 하고 설명해주는 레이블 한글로 적어도 상관없다 이 요소가 뭔지 설명해주는 부분이다 ##javas.. 2024. 6. 13.
날짜 스와이프 모바일앱에 보면 날짜를 스와이프하는 형식 See the Pen 스와이프로 날짜선택하기 by uni (@agosto) on CodePen. 2024. 5. 30.
레이어팝업 웹접근성 포커스 이동 1. 버튼 클릭했을때 레이어팝업 가져오기2. 닫기를 눌렀을때 포커스를 클릭한 버튼으로 이동3. 딤 눌렀을때 닫힘 * 제이쿼리See the Pen 레이어팝업 by uni (@agosto) on CodePen.* 자바스크립트See the Pen 레이어팝업 javascript by uni (@agosto) on CodePen.이 코드는 jQuery를 사용하지 않고 순수 자바스크립트를 사용하여 동일한 기능을 구현합니다. 주요 변경 사항은 다음과 같습니다:$("id")  => document.getElementById를 사용하여 요소를 선택합니다.document.createElement를 사용하여 새로운 요소를 만듭니다.element.style.display를 사용하여 요소의 표시 상태를 변경합니다.eleme.. 2024. 5. 29.
에니메이션 라이브러리 Velocity.js http://velocityjs.org/mo.js https://mojs.github.io/anime.js  https://animejs.com/ 2024. 5. 18.