웹페이지를 상단에 오늘 날짜를 표기하는 방법입니다. 웹페이지에 한국 날짜를 방문자에게 알려주는 자바스크릿과 css코드 소스를 정리한 내용입니다.
웹페이지에 오늘 한국 날짜 표시 – HTML 현재 날짜 php 사용법
웹페이지에 한국 시간 기준으로 오늘 날짜를 2025년 4월 19일 (토요일) 형식으로 표시하고 싶으시다면, 다음과 같은 방식으로 index.php, CSS, JavaScript를 구성하면 됩니다. 웹사이트의 특성상 당일의 날짜와 요일이 필요한 경우에 php 수정을 통해서 가능합니다.

✅ 1. index.php
코드
다음과 같은 코드를 표기합니다. 날짜가 보이게 하려는 웹페이지의 위치를 그곳에 아래 코드 소스를 삽입합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 웹페이지</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>🌟 nBox.com 🌟</h1>
<div id="today-date" class="date-box"></div>
</header>
<script src="date.js"></script>
</body>
</html>
✅ 2. style.css
(CSS 파일)
날짜를 보이게 하는 박스를 만들려면 아래의 소스를 css에 명기합니다. css에 다음에 코드를 표기하지 않으면 기본문자로 출력이 됩니다.
/* style.css */
.date-box {
font-size: 18px;
color: #555;
margin-top: 10px;
font-weight: bold;
text-align: center;
}
✅ 3. date.js
(JavaScript 파일)
JavaScript 파일을 만들어서 요일을 배열하고, 한국 시간으로 현재 날짜 가져오게 만듭니다.
document.addEventListener("DOMContentLoaded", function () {
const todayElement = document.getElementById("today-date");
// 요일 배열
const weekdays = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
// 한국 시간으로 현재 날짜 가져오기
const now = new Date();
// UTC+9 적용 (한국 시간으로 강제 설정)
const koreaTime = new Date(now.toLocaleString("en-US", { timeZone: "Asia/Seoul" }));
const year = koreaTime.getFullYear();
const month = koreaTime.getMonth() + 1;
const date = koreaTime.getDate();
const day = weekdays[koreaTime.getDay()];
// 날짜 포맷 생성
const formatted = `${year}년 ${month}월 ${date}일 (${day})`;
// 웹페이지에 출력
todayElement.textContent = formatted;
});
추가 팁
- 날짜는 사용자 브라우저 시간에 따라 자동으로 한국 시간(Asia/Seoul) 으로 맞춰 표시됩니다.
- PHP로 서버 시간 기반으로 출력하고 싶으시다면 아래와 같이 PHP만으로도 출력이 가능합니다.
✅ PHP만으로 한국 날짜 웹페이지에 나오게 하는 방법
복잡하게 css, js 파일에 손을 대지 않고 index.php에 간단하게 다음의 코드를 index.php에 쓰면 JS 없이도 서버 시간 기준으로 한국 날짜가 나옵니다.
<?php
date_default_timezone_set('Asia/Seoul');
$weekdays = ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'];
$today = date('Y년 n월 j일');
$weekday = $weekdays[date('w')];
?>
<div class="date-box"><?php echo $today . " (" . $weekday . ")"; ?></div>
상식은 권력이다 nBox.com