이야기 정리

개발 동기 이전에 '오늘의 제주' 사이트를 개발할 때 오토캐러셀은 편의상 라이브러리를 활용했다. 그러나 라이브러리만 쓰고 넘어가는 것보다 라이브러리에 있던 기능을 내가 아는 오토캐러셀에 추가해보는 것이 좋다고 생각해 만들게 됐다. 또, '오늘의 제주' 때에는 타입스크립트를 활용하지 않았기에 이번에는 타입스크립트를 사용해 타입을 명확히하며 오토캐러셀이 정확히 어떤 원리로 돌아가는지 살피며 코드를 만들었다. 필요기능 3초마다 자동으로 넘어가기 버튼 클릭 시 이전, 다음으로 넘어가기 하단 도트버튼 클릭 시 해당 번호의 슬라이드로 넘어가기 슬라이드에 마우스를 올리는 동안 슬라이드는 정지해야한다. -> 사용자가 내용을 읽기 편하게 하기 위해 완성코드 See the Pen Carousel by beren-105 (..

사이트 보기 : https://palying-piano.netlify.app/ 깃허브 보기 : https://github.com/beren-105/Mini-Project/tree/main/8_Piano 개발동기 피아노 소리는 좋아하지만, 나는 피아노를 칠 줄 알기는 커녕 악보를 읽을 줄도 모른다. 악보를 읽으려면 도레미파솔라시도를 하나하나 세야하니 피아노를 치는 것은 꿈도 못 꿀 일이다. 나와 같은 사람들이 편하게 피아노를 칠 수 있도록 피아노와 악보에 모두 계이름이 적혀 있는 사이트가 있었으면 했다. 또, 피아도도 칠 줄 모르지만 건반이 도레미파솔라시도 한줄이면 재미가 없었기에 높은 음 한줄과 흑건도 사용이 가능했으면 좋겠다는 마음으로 제작했다. 필요한 기능 키보드를 누르거나, 건반을 클릭 했을 시 소..

개발 동기 사이트 위젯이나, 핸드폰 어플로 흔한 것 중 하나가 바로 캘린더다. 날짜를 확인하는 것은 매일 일어나는 일상적인 일이니 당연하다. 그러나 흔하다고 해서 캘린더가 마냥 단순하지는 않다. 캘린더 마다 기능이나 특색이 다르기 때문이다. 단순히 날짜만 표시하는 캘린더가 있는가 하면, 어떤 캘린더는 일정을 추가할 수도 있다. 영화 예매 등에 쓰이는 캘린더라면 영화가 몇시에 있는지도 나타날 것이다. 이렇듯 캘린더의 변화는 무긍무진하다. 먼저 간단한 캘린더를 만들 것이다. 타입스크립트를 처음 쓰는 만큼 많은 기능을 추가할 수 없었기 때문이다. 캘린더에 날짜를 나타내고, 다른 월로 이동하는 기능을 만들려한다. 사용 툴 HTML, CSS TypeScript 필요한 기능 현 날짜에 맞추어 달력을 출력하기 버튼 ..