JavaScript를 사용하여 현재 시간을 실시간으로 표시하는 실시간 시계 예제를 만들어보겠습니다. 아래는 단계별로 설명된 코드입니다.
1. HTML 파일 생성하기
먼저 HTML 파일을 생성합니다. 파일을 "index.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 id="time"></div>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS 스타일 시트 생성하기
다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장하세요. 스타일 시트에서 시계의 초기 스타일을 정의합니다.
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.clock {
font-size: 48px;
font-weight: bold;
}
3. JavaScript 파일 생성하기
실시간 시간을 표시하기 위한 JavaScript 파일을 생성합니다. 이 파일을 "script.js"로 저장하세요. JavaScript 파일에서 현재 시간을 업데이트하고 표시하는 기능을 구현합니다.
// script.js
function updateTime() {
const timeElement = document.getElementById("time");
const currentTime = new Date();
const hours = currentTime.getHours().toString().padStart(2, "0");
const minutes = currentTime.getMinutes().toString().padStart(2, "0");
const seconds = currentTime.getSeconds().toString().padStart(2, "0");
const timeString = `${hours}:${minutes}:${seconds}`;
timeElement.textContent = timeString;
}
setInterval(updateTime, 1000); // 1초마다 시간 업데이트
updateTime(); // 초기 시간 표시
4. 실행하기
위의 코드를 모두 작성한 후, HTML 파일을 브라우저에서 열어서 테스트하세요. 페이지에는 현재 시간이 실시간으로 업데이트되는 시계가 표시됩니다.
5. 결과
화면에 아래와 같이 실시간 시간이 표시됩니다.
'HTML 예제' 카테고리의 다른 글
| 이펙트 버튼: 버튼 클릭 시 이펙트와 음악 재생 (0) | 2023.12.05 |
|---|---|
| 레인보우 그래디언트 배경: CSS로 페이지 전체에 레인보우 그래디언트 배경 생성 (0) | 2023.12.05 |
| 플립 카드: CSS로 카드 뒤집기 애니메이션 적용 (0) | 2023.12.05 |
| 무한 스크롤: 스크롤할 때마다 새로운 내용을 불러와 보여주는 기능 (0) | 2023.12.05 |
| 모달 팝업: 모달 창을 HTML과 CSS로 만들어 팝업 레이어 생성 (0) | 2023.12.05 |
