728x90
HTML, CSS, JS로 색상 변경 앱을 프로그래밍 해보겠습니다.
https://www.youtube.com/watch?v=_Jrhe_oCJ70
1. 프로젝트 개요
- 프로젝트 이름: Color Changer App
- 프로젝트 설명: 버튼 클릭으로 페이지의 배경 색상을 무작위로 변경할 수 있는 간단한 웹 앱입니다.
- 프로젝트 목표: DOM조작과 사용자 이벤트 처리와 UI변경 학습
- 프로젝트 기능: 무작위 색상 생성, 배경 색상 변경, 현재 색상 코드 표시
2. 프로젝트 구조
<bash />Counter-App/ ├── index.html ├── style.css └── app.js
3. 코드
HTML
<bash />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Change Color</title>
</head>
<body>
<div class="app-container">
<h1 id="color-name">color</h1>
<button id="change-color">change color</button>
</div>
<script src="app.js"></script>
</body>
</html>
CSS
<bash />* { padding: 0; margin: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; text-align: center; } h1 { margin-bottom: 10px; } button { border: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); padding: 10px; border-radius: 5px; transition: all 0.3s ease; } button:hover { cursor: pointer; transform: scale(1.025); }
JS
<bash />
document.addEventListener('DOMContentLoaded', () => {
const colorName = document.getElementById('color-name');
const changeColor = document.getElementById('change-color');
function getRandomColor() {
let letter = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
let random = Math.floor(Math.random() * 16);
color += letter[random]
}
return color;
}
changeColor.addEventListener('click', () => {
document.body.style.backgroundColor = getRandomColor();
colorName.textContent = getRandomColor();
})
})
https://idocleancode.tistory.com/424
[JavaScript] 학습 로드맵
소개자바스크립트란?자바스크립트 역사자바스크립트 실행 방법변수변수의 선언호이스팅네이밍 규칙스코프데이터 타입string 참고 자료https://roadmap.sh/javascript JavaScript Developer Roadmap: Step by step
idocleancode.tistory.com
728x90
