728x90 반응형 CSS9 Javascript 벽돌깨기 게임 소스 공유 자바스크립트 벽돌깨기 게임 소스 어릴 때 아케이드 게임에서 즐겼던 '벽돌깨기' 게임 기억하시나요? 별돌깨기 게임은 정말 단순하지만 중독성이 강해서 재미있었죠. 오늘은 그런 추억을 떠올리며, HTML, CSS, JavaScript를 활용해서 직접 벽돌깨기 게임을 만들어 보았습니다.이 게임은 500px × 600px 크기의 캔버스에 200개의 무작위 색상 벽돌이 쌓여 있어요. 각 벽돌을 깨면 다른 점수를 얻을 수 있고, 공이 바닥에 닿으면 게임이 끝나죠. 키보드로 바를 움직여서 공을 튕겨 벽돌을 깨는 동작은 고전적인 아케이드 게임의 느낌을 그대로 살렸습니다.각 벽돌의 색깔마다 다른 점수를 획득할 수 있고, 점수가 올라갈 때마다 공의 속도가 조금씩 빨라지도록 했습니다. 벽돌깨기 게임의 코드를 완성하고 .. 2024. 5. 29. Javascript 엘리베이터 동작 시뮬레이션 자바스크립트 엘리베이터 동작 시뮬레이션 먼저 위의 gif 그림을 살펴보자. 웹페이지의 중에 있는 사각형은 5층짜리 건물이다.이 건물에는 엘리베이터가 설치되어 있고 엘리베이터에서 원하는 층의 버튼을 누르면 해당층으로 이동하는 엘리베이터 시뮬레이션 프로그램인 것을 알 수 있다. html, css, javascript로 위 기능을 하는 웹프로그램을 작성해 보도록 하겠다. elevator.html 1층 2층 3층 .. 2024. 5. 28. HTML+CSS 드롭다운 메뉴 튜토리얼 HTML+CSS 드롭다운 메뉴 튜토리얼 웹 페이지에서 네비게이션 메뉴는 사용자의 여정을 안내하는 매우 중요한 요소입니다. 방문자들이 웹사이트를 탐색할 때, 메뉴의 구조와 사용성은 전반적인 사용자 경험에 큰 영향을 미치게 됩니다. 메뉴가 직관적이고 사용하기 편리하다면 사용자들은 원하는 정보를 쉽게 찾을 수 있겠지만, 그렇지 않다면 사용자 만족도가 떨어질 수밖에 없죠. 이번 튜토리얼에서는 HTML과 CSS를 활용하여 드롭다운 메뉴를 구현하는 방법을 자세히 살펴보겠습니다. 드롭다운 메뉴는 메인 메뉴 아이템을 클릭하면 하위 메뉴가 펼쳐지는 형태로, 제한된 공간에서도 다양한 메뉴 옵션을 제공할 수 있어 사용자 경험을 크게 향상시킬 수 있습니다. 이번 튜토리얼을 통해 웹 페이지의 네비게이션 메뉴의 기본적인 구.. 2024. 5. 26. CSS Background-image 속성 CSS Background-imageCSS의 background-image 속성은 웹 요소의 배경에 이미지를 지정하는 데 사용됩니다. 이 속성을 통해 웹 페이지에 시각적인 효과를 부여하고, 사용자 경험을 향상시킬 수 있습니다. background-image 사용방법background-image 속성은 다음과 같은 형식으로 사용됩니다.selector { background-image: url("이미지 파일 경로");} 이때, selector는 이미지를 적용할 HTML 요소를 선택하는 선택자입니다. url("이미지 파일 경로")는 이미지 파일의 경로를 지정하는 부분입니다. background-image 예제다음은 CSS background-image를 사용한 간단한 예제입니다./* CSS */.. 2023. 11. 11. CSS padding 예제로 알아보기 CSS paddingCSS의 padding 속성은 요소의 콘텐츠와 경계 사이의 여백을 조절하는 데 사용됩니다. 이 속성은 웹 개발에서 매우 중요한 역할을 하며, 다양한 방법으로 활용될 수 있습니다. 이번 글에서는 padding 속성의 기본 사용 방법과 여러 가지 활용 예제에 대해 자세히 알아보겠습니다. CSS padding의 기본 사용법 예제로 알아보기먼저, padding 속성의 기본 사용 방법에 대해 알아보겠습니다. padding은 요소의 내부 여백을 설정하는 데 사용되며, 해당 속성은 상하좌우 모두에 대해 설정할 수 있습니다. 예를 들어, 다음과 같은 CSS 코드를 사용하여 요소의 상하좌우 여백을 설정할 수 있습니다. .element { padding: 10px;} 위의 코드에서는 .el.. 2023. 11. 10. CSS margin 예제와 활용 CSS marginCSS의 margin은 요소의 외부 여백을 지정하는 속성입니다. CSS marginmargin은 요소 주위에 공간을 만들어주어 요소들 간의 간격을 조절하거나 요소를 가운데 정렬하는 등의 다양한 레이아웃 조작에 사용됩니다. margin 속성은 다음과 같이 사용할 수 있습니다: margin-top: 요소의 위쪽 여백을 지정합니다. margin-right: 요소의 오른쪽 여백을 지정합니다. margin-bottom: 요소의 아래쪽 여백을 지정합니다. margin-left: 요소의 왼쪽 여백을 지정합니다. 또한, margin 속성은 축약형으로 사용할 수도 있습니다. 예를 들어, margin: 10px 20px;는 위아래 여백을 10px, 좌우 여백을 20px로 지정하는 것을 의미합니다.. 2023. 11. 8. 이전 1 2 다음 728x90 반응형