이야기 정리

그동안 자잘한 프로젝트를 만들며 배운 메서드들을 복습하기 위해 애니메이션 효과 없이 간단하게 두더지 잡기 게임을 만들었다. 다른 프로젝트들이 기본 2,3일 소요된 걸 생각하면 하루만에 완성한 간단한 프로젝트다. 필요한 기능 n초마다 두더지가 랜덤한 위치에 나타나고, 다시 사라지기 두더지를 클릭하면 점수가 오르게 하기 시간이 종료되면 승리/패배여부와 리셋버튼 나타내기 제작기간 약 3시간 완성코드 마땅한 이미지가 없어 두더지 대신 여우 이미지를 썼다. 본의아니게 여우잡기가 돼버렸다. See the Pen Untitled by beren-105 (@beren-105) on CodePen. 깃허브에서 전체 코드 보기 https://github.com/beren-105/Mini-Project/tree/main/7..

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

클론 코딩은 도움이 되지 않는다는 이야기가 있다. 그저 강의만 보고 따라한다면 크게 도움이 되지 않는다. 그러나 이미 잘 만들어진 사이트를 분석해 내 방식으로 코드를 짜보는 건 색다른 경험이며, 추후 실제 사이트를 제작할 때 도움이 된다. 첫 클론 코딩으로는 가장 유명한 사이트 중 하나인 유튜브를 선택했다. 만들어진 페이지 보기 https://clone-coding-youtube.netlify.app/ 전체 코드는 아래에서 확인할 수 있다. https://github.com/beren-105/Mini-Project/tree/main/4_youtube 제작기간 7일 사용할 것 React Tailwind 유튜브 API Git & GitHub 목표 깃을 사용하여 작성한 코드를 깃허브에 올린다. 리액트에서 테일..

자바스크립트 없이 input의 radio 기능을 사용해 간단하게 클릭 애니메이션을 구현할 것이다. 만들어볼 애니메이션은 총 4종류다. 완성 코드는 아래와 같으며, 스크롤을 내리면 나머지 3종도 볼 수 있다. See the Pen Navigation CSS by beren-105 (@beren-105) on CodePen. 0. 기본 레이아웃 기본 레이아웃을 기반으로 4가지를 모두 만들 것이기 때문에 span 태그는 기본적으로 display:none로 두고, 필요할 때만 block으로 사용했다. 보통이라면 label 안에 input을 넣어 코드를 간결하게 적었겠지만, 애니메이션 효과를 만들기 위해 둘을 따로 분리해서 작성했다. 색상 통일을 위해 :root로 기본 색상과 자주 쓰는 transition을 넣어..