Js&React 실습/JSprac9 [JS] 프로그래밍 언어 검색(프로그래머스) 데브매칭 과제 테스트 중 하나를 실험적으로 따라해봤다. api가 따로 없어서, 그냥 express로 서버 간단하게 만들어서 켜놓고 있었다...ㅋㅋㅋ 바닐라로 spa로 만드는걸 처음해보는데 정말..정말.....익숙하지못해서 그런가? https://codesandbox.io/s/recursing-kowalevski-ughmzd recursing-kowalevski-ughmzd - CodeSandbox recursing-kowalevski-ughmzd by sweesweett using parcel-bundler codesandbox.io 이걸하면서 알게 된 점! dataset을 통해 인덱스 값을 가져올수 있다는 점! 하지만 보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술.. 2022. 11. 9. [JS] 마우스클릭 이펙트 & 애니메이션 효과 https://sweesweett.github.io/jsprac/ JS PRAC 여기는 Js+Html+css를 연습하기 위한 공간입니다! 하나하나씩 추가할 예정이에요! 지금까지 연습한 것 중에 하나 시계보기 가위바위보! 이미지 슬라이더 이미지 슬라이더2 카드 스와이퍼 보러가기! sweesweett.github.io 마우스 클릭 이펙트는 딱 index.html에만 해뒀다. setProperty를 사용해 각각의 원이 랜덤한 위치에서 랜덤한 크기에 랜덤한 지속시간을 갖도록 설정했다. 처음에는 애니메이션을 어떻게 해야할 지 조금 이해가 되지않아서 left / top을 사용해 해당 마우스가 클릭하는 위치에 이벤트가 활성화 되도록 만들었다가 이후에 translate를 사용해 변경하였다. 애니메이션에 랜덤하게 del.. 2022. 8. 6. [JS]카드 스와이퍼 만들기 https://sweesweett.github.io/jsprac/card.html 왜 업로드 날짜가가 왜이리 벌어졌지요? 말해보세요!!😂 정말 조지게 힘들었습니다요... 남이 하는걸 따라하는 건 쉽다. 그냥 코드만 치면되니까! 근데!!!그걸!!내꺼로 흡수하려고하니 너무 힘이 들었다. 아직흡수가됐는지 잘 모르겠어가지구 슬라이더 부분을 손으로 잡아끌어서 움직이게 만들것이다..후후....나에겐 다 계획이있지..했음 하 맛있는코딩쓰엥님.... 쓰앵님을 따라 저는 꼭 멋있는 프론트엔드 개발자가 될랍니다. 이 유튭을 어떻게 알게됐냐면, 가위바위보에서 이기면 폭죽을 터트리는걸 만들기위해 참고한 하트버튼의 쥔장되시는 분의 코드펜을 찾아갔더니 떡하니 유툽링크가 있었다. 약간 이제는 어떤걸 해야할지, 어떻게 배워야할지 고.. 2022. 7. 21. [JS]이미지 슬라이더 만들기2(캐러셀)+변경 https://sweesweett.github.io/jsprac/imgslider2.html 이전글에 낱장으로 다시 도전해보겠다고 괜한말을...해서....(아님) 다시 시도해보았다. 문제는 맨끝장에 도달하면 맨 앞장으로갈때 필름을 와랄라ㅏ로랄 돌리듯 돌아간다는점...? 가끔오류가 나면 빈 캐러셀이 날 맞이한다는점? 이유는 모르겠다 맨끝장에 도달할 때 자연스럽게 돌아가게 하는 방법을 찾아봤는데, 다들 맨 앞장과 맨 뒷장의 복사본을 맨앞과 맨앞에 붙여서 자연스럽게 만드는 것 같았당... 방법은 이렇다 div.visible을 저만한 크기(img와 같은크기)로 만들고 div.img__wrapper(img들을 감싸고있음)를 감싸게 한다. 그런다음 css로 overflow:hidden을 주게 하면, 딱 저영역만 보.. 2022. 7. 10. 이전 1 2 3 다음
