반응형 script&jquery20 여러개 막대 가로 그래프 스크립트로 각각 값 불러오기 포스텔러앱에 가로막대를 보면 길이는 같고 전체값에 따라서 현재값이 표시되는 가로 막대그래프 1. 하나의 스크립트로 막대그래프 공용으로 사용 가능 2. 전체값, 현재값 각각 인라인으로 각각 넣어서 막대그래프 여러개일때도 유동적으로 변경가능3. 막대그래프가 보여질때 오른쪽으로 길어지는 에니메이션 효과 막대그래프가 보여질때 오른쪽으로 길어지는 에니메이션 효과를 css로 줄려고 했으나 생기는 문제점아래와 같이 값을 스크립트로 뿌려주는거라서 css로 적용시 값이 적용은 0에서 100%기준이라 적용이 안됨=> 에니메이션 효과는 스크립트로See the Pen 전체 값 현재값 각각 값받아와서 막대그래프에 넣어주기 by uni (@agosto) on CodePen. 2024. 7. 3. 스크롤시 헤더 색상변경 및 백그라운드 덮기 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 4 다음 반응형
