Js&React 실습/JSprac9 [JS] 드롭다운 구현하기 이전에는 연습한것들을 버튼에 링크를 달아서 했었는데, 모양새가 조금 그런것 같아서 드롭다운으로 바꿔보았다. 이전 연습들과 마찬가지로 처음 구현해보는거였는데, 다른사람들꺼를 봤을 땐 js없이 가능 한것 같던데, 코드를 아무리봐도 알수가 없었다. 그래서 setTimeOut과 transition을 이용해서 스르륵 나타내는 효과를 주었다 전체 js코드 const previewUl = document.querySelector('.preview__ul'); // '연습한 것 중에 하나' 부분 const pracList = document.querySelector('.prac__list'); //'찐 리스트' const toggle = document.querySelector('.toggle');// 옆에 삼각형 p.. 2022. 7. 5. [JS]이미지 슬라이더 만들기(캐러셀)+추가 https://sweesweett.github.io/jsprac/imgslider.html 이미지슬라이더를 한번 구현해보고싶어서 며칠을 고민해서 만들었다. 잘 만들어진 슬라이더인지는 모르겠지만... 자신감은 없지만, 자신감 없다고 안쓰고 그냥 저기 구석에 던진다면 발전이 없을것 같아서... 미래의 똑똑한 내가 맘에 안들면 고치겠지^^ 란 생각으로 던진다. +요즘에 너무 바빠서(복습에 치이고있음) 이걸 작성할 시간도 없지만 미래의 나를 위해서 정리 구글에 치면 자바스크립트로 이미지슬라이더(캐러셀)를 만든건 많이 봤지만, 다들 현재 사진만 나오고 다른 사진은 나오지 않는 스타일이었다(이것도 다른 페이지에 구현해볼 예정!). 내가 만들고자 했던 슬라이더는 사진과 같이 옆에 그 전 혹은 그 후의 사진들이 나오길.. 2022. 6. 30. [JS] 가위 바위 보! https://timely-granita-6bf64b.netlify.app/rocksp.html 신나는 가위 바위 보! 가위 바위 보 초기화 timely-granita-6bf64b.netlify.app 다소 지쳐서 약간 css 대충한 부분이 없지않아있음 추후 수정할 계획! 아주 엄청난 시행착오가 있었던 가위바위보였다. 시간이 꽤나 오래걸렸다. 배운 내용 중 가장 중점을 두었던 건 setInterval, setTimeout localstorage 1. setInterval, setTimeout 사용하기 인터넷 상에서 가위바위보 codepen을 치게 되면 보통 뱅글뱅글 돌아가는 가위바위보가 아닌 정적인 가위바위보다. 내가 보게 된 가위바위보도 그러했다. 하지만 내가 원했던 방향은 가위바위보가 슬롯 머신처럼 .. 2022. 6. 20. [JS]시계 만들기 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이.. 2022. 6. 12. 이전 1 2 3 다음
