HTML DOM Time dateTime 속성 완벽 정리 – 사용법과 예제 코드

HTML DOM의 Time dateTime 속성은 <time> 요소의 datetime 속성 값을 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하면 기계가 읽을 수 있는 형식의 날짜와 시간 정보를 자바스크립트로 손쉽게 다룰 수 있습니다.

문법(Syntax)

값 가져오기

timeObject.dateTime

값 설정하기

timeObject.dateTime = YYYY-MM-DDThh:mm:ssTZD

여기서 YYYY-MM-DDThh:mm:ssTZD는 아래 표와 같은 구성 요소로 이루어집니다.

구성 요소	설명
YYYY	연도를 나타냅니다. (예: 1998)
MM	월을 나타냅니다. (예: 5월은 05)
DD	일을 나타냅니다. (예: 24)
T	날짜와 시간을 구분하는 구분자입니다.
hh	시를 나타냅니다. (예: 12)
mm	분을 나타냅니다. (예: 48)
ss	초를 나타냅니다. (예: 00)
TZD	표준 시간대 지정자(Time Zone Designator)입니다. (예: Z 또는 +09:00)

이제 Time dateTime 속성이 실제로 어떻게 동작하는지 예제를 통해 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<title>Time dateTime</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>Time-dateTime</legend>
            <label>알림 : <strong>시험이 다가옵니다!</strong>
            <time id="TimeDateTimeSelect" dateTime="2019-05-23T12:45Z">
            </label>
            <input type="button" onclick="getExamDate()" value="시험 날짜가 언제인가요?">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var TimeDateTimeSelect = document.getElementById("TimeDateTimeSelect");
    function getExamDate() {
        divDisplay.textContent = '시험 날짜: '+TimeDateTimeSelect.dateTime;
    }
</script>
</body>
</html>

실행 결과

'시험 날짜가 언제인가요?' 버튼을 클릭하기 전 화면입니다.

HTML DOM Time dateTime 속성 완벽 정리 – 사용법과 예제 코드

버튼을 클릭한 후에는 <time> 요소의 datetime 속성 값인 2019-05-23T12:45Z가 화면에 출력됩니다.

HTML DOM Time dateTime 속성 완벽 정리 – 사용법과 예제 코드

위 예제에서 볼 수 있듯이, dateTime 속성은 사용자에게 보이는 텍스트와 별개로 기계가 해석할 수 있는 정확한 날짜·시간 정보를 저장합니다. 검색 엔진이나 캘린더 애플리케이션처럼 시맨틱한 시간 데이터가 필요한 경우에 매우 유용하게 활용할 수 있습니다.