오늘 날짜를 HTML로 가져오기

HTML에는 현재 날짜를 실시간으로 표시하는 기능이 내장되어 있지 않습니다. JavaScript로 Date를 만들고, 독자에게 적합한 형식으로 값을 바꾼 다음, 결과 문자열을 HTML 요소에 넣으세요. Date 객체는 한 시점을 나타내며, getMonth() 및 toLocaleDateString() 같은 메서드로 그 값을 어떻게 표시할지 정합니다.

HTML에서 JavaScript로 현재 날짜와 시간 표시하기

Date 객체와 그 메서드가 필요하다면 new Date()를 사용하세요. new 없이 Date()를 호출하면 날짜와 시간 문자열이 바로 반환되므로 getFullYear() 같은 메서드에 사용할 수 없습니다. 페이지에 ID가 current-date인 요소를 넣은 뒤, 같은 ID를 선택해 textContent를 설정하세요.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

<p>Current date and time: <span id="current-date"></span></p>
<script>
  const currentDate = new Date();
  document.getElementById("current-date").textContent = currentDate.toString();
</script>

스크립트가 요소 뒤에 있으므로 getElementById()가 실행될 때 요소가 이미 존재합니다. 표시되는 값은 스크립트가 실행되는 시점과 컴퓨터의 현지 시간대에 따라 달라집니다. 일반 날짜 문자열에는 textContent를 사용하세요. 이 속성을 사용하면 값을 HTML 마크업으로 처리하지 않습니다. 이 브라우저 페이지 예제는 문서 런타임에서 실행되지 않았습니다.

현재 날짜 값을 가져오는 방법을 더 자세히 알아보려면 JavaScript로 현재 날짜 가져오기를 참조하세요.

HTML에서 날짜를 월/일/연도 형식으로 표시하기

미국식 숫자 날짜를 표시하려면 날짜의 각 부분으로 문자열을 만드세요. getMonth()는 0부터 시작하므로 일반적인 월 숫자를 얻으려면 1을 더해야 합니다. getDate()는 해당 월의 날짜를 반환하고, getFullYear()는 연도를 반환합니다. 형식 변환 과정을 쉽게 응용할 수 있도록 이 예제에서는 고정된 날짜를 사용합니다. 오늘의 현지 날짜를 표시하려면 new Date()로 바꾸세요.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const page = { textContent: "" };
const document = { getElementById: () => page };
const date = new Date(2024, 0, 5);
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const year = date.getFullYear();
document.getElementById("current-date").textContent = `${month}/${day}/${year}`;
console.log(page.textContent);

생성자의 월 인수도 0부터 시작합니다. 따라서 0은 1월을 뜻합니다. 한 자리 월과 일을 두 자리로 채우면 형식을 일관되게 유지할 수 있습니다. month/day/year 순서는 표시 관례일 뿐 보편적인 날짜 형식은 아니므로, 독자에게 더 적합한 순서를 선택하세요. 다른 날짜 형식은 JavaScript 날짜 형식 지정을 참조하세요.

toLocaleDateString()으로 로캘에 맞게 날짜 형식 지정하기

브라우저의 국제화 기능으로 날짜 문자열을 만들려면 toLocaleDateString()을 사용하세요. en-US나 en-GB 같은 로캘을 전달하면 표시 관례를 명시적으로 요청할 수 있고, 옵션으로 표시할 날짜 구성 요소를 지정할 수 있습니다. 로캘을 지정하지 않으면 결과가 브라우저 환경을 따를 수 있어 독자마다 다르게 표시될 수 있습니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const date = new Date(2024, 0, 5);
const options = { year: "numeric", month: "long", day: "numeric" };
const formatted = date.toLocaleDateString("en-US", options);
console.log(formatted);

영국 영어 관례를 요청하려면 로캘을 en-GB로 바꾸세요. 정확한 표현과 문장 부호는 런타임의 로캘 데이터가 결정하므로, 결과 문자열의 형식이 항상 고정되어 있다고 가정해 파싱하지 마세요. 기계가 처리할 날짜가 아니라 독자에게 보여 줄 현지 언어 및 지역별 형식이 필요할 때 toLocaleDateString()을 사용하세요.

요일 또는 읽기 쉬운 날짜 형식 추가하기

로캘 형식을 사용하면 요일을 바로 포함할 수 있습니다. 이렇게 하면 요일 이름을 별도의 배열로 관리할 필요가 없고, 선택한 로캘에 따라 표현과 순서가 정해집니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const date = new Date(2024, 0, 5);
const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
console.log(date.toLocaleDateString("en-US", options));

같은 옵션을 fr-FR 같은 다른 로캘과 함께 사용하면 현지화된 긴 날짜 형식도 만들 수 있습니다. 짧은 숫자 형식만 필요하다면 weekday를 생략하고 월과 일의 숫자 옵션을 사용하세요. 요청한 로캘과 옵션이 같더라도 로캘 데이터가 바뀌면 브라우저마다 표시 문자열이 달라질 수 있습니다.

추가 날짜 및 시간 형식에 Moment.js 사용하기

Moment.js는 선택적으로 사용할 수 있는 라이브러리이며, 기본 날짜 표시에 필요한 것은 아닙니다. API를 호출하기 전에 Moment.js를 불러오고, 현지화된 형식을 사용한다면 해당 로캘 데이터도 포함하세요. 다음 호출은 사용 예시이며 페이지에 해당 의존성이 있어야 합니다. moment().format("YYYY-MM-DD")는 날짜를 형식화하고, moment().fromNow()는 현재 시점부터의 상대 시간을 반환합니다. 프랑스어 로캘 데이터가 로드된 상태에서 moment.locale("fr"); moment().format("LL")을 호출하면 프랑스어 긴 날짜 형식을 요청하며, moment().calendar()는 날짜가 현재와 얼마나 가까운지에 따라 표현을 선택합니다.

상대 시간은 게시 또는 업데이트된 날짜가 아니라 시간 간격을 나타냅니다. 실제로 저장된 업데이트 시각에 기반한 값이 아니라면 moment().fromNow()를 “마지막 업데이트”라고 표시하지 마세요. Moment.js는 이미 사용하는 프로젝트에서 편리할 수 있지만, 간단한 표시에는 내장 Date API를 사용하면 의존성을 추가하지 않아도 됩니다.

toUTCString()으로 날짜를 UTC로 변환하기

보는 사람의 현지 시각보다 공통 시간 기준이 유용할 때 toUTCString()을 사용하세요. 이 메서드는 Date 값의 문자열 표현을 UTC로 반환합니다. 원래 시점 자체를 바꾸거나 보는 사람의 현지 시각으로 변환하지는 않습니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const date = new Date("2024-01-05T12:30:00Z");
console.log(date.toUTCString());

현재 시각을 표시하려면 고정된 ISO 타임스탬프를 new Date()로 바꾸세요. 같은 시점이라도 UTC 날짜와 현지 시간대의 날짜는 서로 다를 수 있습니다. 보는 사람을 위한 날짜에는 현지 형식을, 지역별 관례에는 로캘 형식을, 일관된 시간 기준을 비교하거나 공유해야 할 때는 UTC를 선택하세요. UTC에 관한 자세한 내용은 JavaScript 날짜를 UTC로 변환하기를 참조하세요.