728x90
오늘은 현재 시간에 따라 자동으로 낮/밤 테마가 변경되는 간단한 웹페이지를 만들어보겠습니다. JavaScript를 사용해서 실시간으로 시간을 체크하고, CSS로 부드러운 테마 전환 효과를 구현해보겠습니다.
1. HTML 기본 구조 작성하기
먼저 HTML 파일을 생성하고 기본 구조를 만들어보겠습니다. 제목, 시간 표시, 그리고 수동으로 테마를 변경할 수 있는 버튼을 포함합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 낮밤 테마</title>
<!-- CSS는 다음 단계에서 추가 -->
</head>
<body id="body" class="day">
<h1 id="title">좋은 하루!</h1>
<div class="time" id="time"></div>
<button onclick="toggleTheme()">테마 변경</button>
<!-- JavaScript는 마지막 단계에서 추가 -->
</body>
</html>
여기서 중요한 점은 body 태그에 id="body"와 class="day"를 지정한 것입니다. 이를 통해 JavaScript에서 테마를 동적으로 변경할 수 있습니다.
2. CSS로 낮밤 테마 스타일 정의하기
이제 낮과 밤 테마의 스타일을 CSS로 정의해보겠습니다. 부드러운 전환 효과를 위해 transition 속성을 사용합니다.
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
transition: all 1s ease; /* 1초간 부드러운 전환 */
}
/* 낮 테마 - 밝은 하늘색 배경 */
.day {
background-color: #87CEEB;
color: #333;
}
/* 밤 테마 - 어두운 배경 */
.night {
background-color: #2C3E50;
color: #fff;
}
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.time {
font-size: 2rem;
margin-bottom: 20px;
}
button {
font-size: 1.2rem;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: rgba(255,255,255,0.3);
color: inherit; /* 부모 요소의 색상을 상속 */
}
</style>
핵심은 .day와 .night 클래스를 만들어서 각각 다른 배경색과 텍스트 색상을 지정하는 것입니다. transition: all 1s ease로 테마 변경 시 자연스러운 애니메이션 효과를 만들었습니다.
3. JavaScript로 시간 확인 및 자동 테마 변경 구현하기
이제 가장 중요한 JavaScript 부분입니다. 현재 시간을 실시간으로 표시하고, 시간대에 따라 자동으로 테마를 변경하는 함수를 만들어보겠습니다.
<script>
// 시간 표시 및 자동 테마 변경 함수
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString('ko-KR');
document.getElementById('time').textContent = timeString;
// 시간에 따른 자동 테마 변경
const hour = now.getHours();
const body = document.getElementById('body');
const title = document.getElementById('title');
if (hour >= 6 && hour < 18) {
// 낮 시간 (오전 6시 ~ 오후 6시)
body.className = 'day';
title.textContent = '좋은 하루!';
} else {
// 밤 시간 (오후 6시 ~ 오전 6시)
body.className = 'night';
title.textContent = '좋은 밤!';
}
}
// 수동 테마 변경 함수
function toggleTheme() {
const body = document.getElementById('body');
const title = document.getElementById('title');
if (body.className === 'day') {
body.className = 'night';
title.textContent = '좋은 밤!';
} else {
body.className = 'day';
title.textContent = '좋은 하루!';
}
}
// 1초마다 시간 업데이트 및 페이지 로드 시 실행
setInterval(updateTime, 1000);
updateTime();
</script>
updateTime() 함수는 현재 시간을 가져와서 화면에 표시하고, 시간대를 확인해서 6시-18시는 낮 테마, 18시-6시는 밤 테마로 자동 변경합니다. setInterval()을 사용해서 1초마다 이 함수를 실행합니다.
4. 완성된 코드와 활용 방법
위의 모든 코드를 하나의 HTML 파일로 합치면 완성입니다. 이 코드를 응용해서 다양한 기능을 추가할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 낮밤 테마</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
transition: all 1s ease;
}
.day {
background-color: #87CEEB;
color: #333;
}
.night {
background-color: #2C3E50;
color: #fff;
}
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.time {
font-size: 2rem;
margin-bottom: 20px;
}
button {
font-size: 1.2rem;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: rgba(255,255,255,0.3);
color: inherit;
}
</style>
</head>
<body id="body" class="day">
<h1 id="title">좋은 하루!</h1>
<div class="time" id="time"></div>
<button onclick="toggleTheme()">테마 변경</button>
<script>
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString('ko-KR');
document.getElementById('time').textContent = timeString;
const hour = now.getHours();
const body = document.getElementById('body');
const title = document.getElementById('title');
if (hour >= 6 && hour < 18) {
body.className = 'day';
title.textContent = '좋은 하루!';
} else {
body.className = 'night';
title.textContent = '좋은 밤!';
}
}
function toggleTheme() {
const body = document.getElementById('body');
const title = document.getElementById('title');
if (body.className === 'day') {
body.className = 'night';
title.textContent = '좋은 밤!';
} else {
body.className = 'day';
title.textContent = '좋은 하루!';
}
}
setInterval(updateTime, 1000);
updateTime();
</script>
</body>
</html>
이 간단한 예제를 기반으로 여러분만의 창의적인 테마 변경 웹페이지를 만들어보세요!
728x90
'웹 퍼블리싱 | Web Publishing > 스크립트 | Script' 카테고리의 다른 글
| 마우스 커서 이미지 교체로 파리잡기 게임 만들기 (1) | 2025.06.26 |
|---|---|
| 버튼 클릭으로 배경과 내용이 동시에 바뀌는 인터랙티브 페이지 만들기 (2) | 2025.06.25 |
| 모바일 웹에서 가로형 화면 사용을 제한하는 방법 (0) | 2025.06.24 |
