언젠간 진화하겠지!

데브매칭 과제 테스트 중 하나를 실험적으로 따라해봤다. 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을 통해 인덱스 값을 가져올수 있다는 점! 하지만 보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술..

https://sweesweett.github.io/jsprac/ JS PRAC 여기는 Js+Html+css를 연습하기 위한 공간입니다! 하나하나씩 추가할 예정이에요! 지금까지 연습한 것 중에 하나 시계보기 가위바위보! 이미지 슬라이더 이미지 슬라이더2 카드 스와이퍼 보러가기! sweesweett.github.io 마우스 클릭 이펙트는 딱 index.html에만 해뒀다. setProperty를 사용해 각각의 원이 랜덤한 위치에서 랜덤한 크기에 랜덤한 지속시간을 갖도록 설정했다. 처음에는 애니메이션을 어떻게 해야할 지 조금 이해가 되지않아서 left / top을 사용해 해당 마우스가 클릭하는 위치에 이벤트가 활성화 되도록 만들었다가 이후에 translate를 사용해 변경하였다. 애니메이션에 랜덤하게 del..

https://sweesweett.github.io/jsprac/card.html 왜 업로드 날짜가가 왜이리 벌어졌지요? 말해보세요!!😂 정말 조지게 힘들었습니다요... 남이 하는걸 따라하는 건 쉽다. 그냥 코드만 치면되니까! 근데!!!그걸!!내꺼로 흡수하려고하니 너무 힘이 들었다. 아직흡수가됐는지 잘 모르겠어가지구 슬라이더 부분을 손으로 잡아끌어서 움직이게 만들것이다..후후....나에겐 다 계획이있지..했음 하 맛있는코딩쓰엥님.... 쓰앵님을 따라 저는 꼭 멋있는 프론트엔드 개발자가 될랍니다. 이 유튭을 어떻게 알게됐냐면, 가위바위보에서 이기면 폭죽을 터트리는걸 만들기위해 참고한 하트버튼의 쥔장되시는 분의 코드펜을 찾아갔더니 떡하니 유툽링크가 있었다. 약간 이제는 어떤걸 해야할지, 어떻게 배워야할지 고..

https://sweesweett.github.io/jsprac/imgslider2.html 이전글에 낱장으로 다시 도전해보겠다고 괜한말을...해서....(아님) 다시 시도해보았다. 문제는 맨끝장에 도달하면 맨 앞장으로갈때 필름을 와랄라ㅏ로랄 돌리듯 돌아간다는점...? 가끔오류가 나면 빈 캐러셀이 날 맞이한다는점? 이유는 모르겠다 맨끝장에 도달할 때 자연스럽게 돌아가게 하는 방법을 찾아봤는데, 다들 맨 앞장과 맨 뒷장의 복사본을 맨앞과 맨앞에 붙여서 자연스럽게 만드는 것 같았당... 방법은 이렇다 div.visible을 저만한 크기(img와 같은크기)로 만들고 div.img__wrapper(img들을 감싸고있음)를 감싸게 한다. 그런다음 css로 overflow:hidden을 주게 하면, 딱 저영역만 보..

이전에는 연습한것들을 버튼에 링크를 달아서 했었는데, 모양새가 조금 그런것 같아서 드롭다운으로 바꿔보았다. 이전 연습들과 마찬가지로 처음 구현해보는거였는데, 다른사람들꺼를 봤을 땐 js없이 가능 한것 같던데, 코드를 아무리봐도 알수가 없었다. 그래서 setTimeOut과 transition을 이용해서 스르륵 나타내는 효과를 주었다 전체 js코드 const previewUl = document.querySelector('.preview__ul'); // '연습한 것 중에 하나' 부분 const pracList = document.querySelector('.prac__list'); //'찐 리스트' const toggle = document.querySelector('.toggle');// 옆에 삼각형 p..

https://sweesweett.github.io/jsprac/imgslider.html 이미지슬라이더를 한번 구현해보고싶어서 며칠을 고민해서 만들었다. 잘 만들어진 슬라이더인지는 모르겠지만... 자신감은 없지만, 자신감 없다고 안쓰고 그냥 저기 구석에 던진다면 발전이 없을것 같아서... 미래의 똑똑한 내가 맘에 안들면 고치겠지^^ 란 생각으로 던진다. +요즘에 너무 바빠서(복습에 치이고있음) 이걸 작성할 시간도 없지만 미래의 나를 위해서 정리 구글에 치면 자바스크립트로 이미지슬라이더(캐러셀)를 만든건 많이 봤지만, 다들 현재 사진만 나오고 다른 사진은 나오지 않는 스타일이었다(이것도 다른 페이지에 구현해볼 예정!). 내가 만들고자 했던 슬라이더는 사진과 같이 옆에 그 전 혹은 그 후의 사진들이 나오길..

https://timely-granita-6bf64b.netlify.app/rocksp.html 신나는 가위 바위 보! 가위 바위 보 초기화 timely-granita-6bf64b.netlify.app 다소 지쳐서 약간 css 대충한 부분이 없지않아있음 추후 수정할 계획! 아주 엄청난 시행착오가 있었던 가위바위보였다. 시간이 꽤나 오래걸렸다. 배운 내용 중 가장 중점을 두었던 건 setInterval, setTimeout localstorage 1. setInterval, setTimeout 사용하기 인터넷 상에서 가위바위보 codepen을 치게 되면 보통 뱅글뱅글 돌아가는 가위바위보가 아닌 정적인 가위바위보다. 내가 보게 된 가위바위보도 그러했다. 하지만 내가 원했던 방향은 가위바위보가 슬롯 머신처럼 ..

https://timely-granita-6bf64b.netlify.app/clock.html Clock! TikTok ALALOG CLOCK ANALOG DIGITAL timely-granita-6bf64b.netlify.app 이번에 처음 사용해본 css filter:drop-shadow() 아날로그 시계의 입체감을 주기 위해서 처음 사용해봤다. 시계의 본체(png)와 시계의 분침,초침,시침에 입체감을 주기 위해서 사용하였다 본체에 그림자를 주고, 시계의 침에는 흰색으로 가장 밝은 부분을 만들기 위해서 사용하였다. 다만 완벽하지는 않아서 침이 돌 때 그림자와 같은 위치에 있을 때가 있다 나중에 if문으로 몇도 이상일 경우는 drop-shadow를 다르게 준다면 괜찮을 것 같다. drop-shadow이..