JavaScript를 사용하여 디지털 시계 애플리케이션을 만드는 방법을 단계별로 설명해 드리겠습니다.
HTML 파일 생성:
먼저 HTML 파일을 생성하고 디지털 시계를 표시할 영역을 마크업합니다.
<!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="styles.css">
<title>디지털 시계</title>
</head>
<body>
<div class="clock">
<div class="time" id="time">00:00:00</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS 스타일 시트 생성:
디지털 시계의 스타일을 정의하기 위한 CSS 파일(styles.css)을 생성합니다.
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f2f2f2;
}
.clock {
background-color: #333;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.time {
font-size: 3rem;
color: #fff;
}
JavaScript 파일 생성:
디지털 시계를 업데이트하고 실시간으로 시간을 표시할 JavaScript 파일(script.js)을 생성합니다.
// script.js
function updateTime() {
const timeElement = document.getElementById('time');
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const currentTime = `${hours}:${minutes}:${seconds}`;
timeElement.textContent = currentTime;
}
setInterval(updateTime, 1000); // 1초마다 시간 업데이트
updateTime(); // 초기 시간 업데이트
결과 확인:
웹 브라우저에서 HTML 파일을 열어 디지털 시계 애플리케이션을 확인합니다.
'HTML 예제' 카테고리의 다른 글
| 간단한 계산기 (0) | 2023.12.07 |
|---|---|
| Hello, World! 출력 (0) | 2023.12.07 |
| 파티클 시뮬레이션: HTML5 <canvas>를 사용하여 파티클 시뮬레이션 만들기 (1) | 2023.12.06 |
| 사진 슬라이드 쇼: JavaScript로 사진 슬라이드 쇼 만들기 (1) | 2023.12.06 |
| 실시간 통계: JavaScript로 실시간 통계 표시 (0) | 2023.12.06 |
