키보드를 이용해 간단한 게임을 만들어보고 싶다는 생각이 들었다.그전에 `KeyboardEvent.key`를 활용해 간단한 예제를 구현해 봤다.코드 실행 See the Pen Untitled by Wi daehyeon (@widaehyeon) on CodePen.  HTML 코드 🧍‍♂️ 방향키를 입력해보세요! CSS 코드body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.container { text-align: center;}.box { width: 300..

언젠가 누군가의 티스토리에 들어갔는데 마우스를 움직일 때마다 뭔가가 마우스를 따라 온다거나, 꽃가루 같은 것을 뿌리는 것을 경험한 적이 있다.그걸 구현하고 싶었다.코드 실행 See the Pen Monkey Follow by Wi daehyeon (@widaehyeon) on CodePen.HTML 코드 🐒 CSS 코드body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.container { text-align: center;}.box { width: 300px; h..

코드 실행 See the Pen money rain by Wi daehyeon (@widaehyeon) on CodePen.HTML 코드 생성 초기화  CSS 코드body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.container { text-align: center;}.box { width: 300px; height: 300px; background-color: white; border: 2px solid #333; positi..

코드 예시  See the Pen love is always run by Wi daehyeon (@widaehyeon) on CodePen.CSS 코드body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.container { text-align: center;}.box { width: 300px; height: 300px; background-color: white; border: 2px solid #333; position: relative; overflow: hi..

구현See the Pen Untitled by Wi daehyeon (@widaehyeon) on CodePen.HTML 코드                                                                                    주사위 굴리기`container` div안에 주사위와 주사위 굴리기 버튼을 구현했다.점 9개를 그려놓고 주사위 숫자에 맞게 점들을 보였다 숨겼다 만들 것이다.CSS 코드body {    display: flex;    justify-content: center;    align-items: center;    height: 100vh;    margin: 0;    background-color: #f0f0f0;}.container..