script&jquery7 스크롤시 헤더 색상변경 및 백그라운드 덮기 1. 스크롤시 상단 이미지 덮으면서 이동2. 상단 이미지안에 타이틀은 스크롤시 점점 오파시티3. 스크롤시 콘텐츠가헤더의 밑부분에 이면 클래스 on 붙이기 https://brunch.co.kr/@this-summer/92참고 사이트 See the Pen scroll 할때 header 배경색상 변경 상단이미지 덮기 by uni (@agosto) on CodePen. 2024. 7. 1. 인풋 삭제 버튼 표시 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. 이전 1 2 다음
