html month, week, date, time, datetime-local 속성 이용하여 시간 표현하기

네 안녕하세요, 이번 포스팅에서는 html로 시간 정보를 입력하는 방법에 대하여 알아보도록 하겠습니다.

html에서는 시간에 대한 정보도 제공을 해주는데요,

이 시간 정보를 활용을 할 데가 정말 많기 때문에 html 요소들 중에 가장 중요한 요소들 중 하나라고 생각을 합니다.

우리가 지도나 gps 등을 이용을 할 때도 위치 정보 외에 시간에 관한 정보도 받아

실시간으로 계속 전송을 하는 것이기 때문에,

시간 정보의 가치는 꽤나 중요하다는 것을 알 수가 있습니다.

그래서 이러한 시간 정보들을 html에서는 어떻게 제공을 해주는지 한 번 보도록 하겠습니다.

1. 시간 정보 입력하기 : input type="month"|"week"|"date"|"time"|"datetime-local"

시간 정보를 입력하는 속성 역시 input 태그 내에서 이루어집니다.

그리고 보통은 위에 기재를 한 5가지를 쓰곤 합니다.

이 5가지 속성은 어떤 기능을 갖는지 간단한 표로 정리를 해봤습니다.

그럼 같이 보실까요?

type 속성값	입력 데이터	value 형식
<input type="month">	년/월	2022-03
<input type="week">	년/몇 번째 주	2022-w03
<input type="date">	년/월/일	2022-03-01
<input type="time">	시/분	21:30
<input type="datetie-local">	해당 나라의 시간 : 년/월/일/오전, 오후/시/분/초/100분의 1초(밀리초)	2022-03-01 21:30:10.32

이런 식으로 표현을 합니다.

보시면 정말 다양하게 나타낼 수 있습니다.

다른 나라의 시간 정보도 받아올 수 있고,

밀리초 단위로 아주 세밀하게 시간을 표현할 수도 있습니다.

그럼 이걸 어떻게 쓰는지 한 번 간단한 예제를 통하여 알아보도록 합시다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>시간 정보 입력</title>
</head>
<body>
    <h3>시간 정보 입력</h3>
    초기 세팅 : 2022년 3월 1일 밤 9시 30분(10초 32)<br>
    시간을 변경해 보세요
    <hr>
    <form>
    <pre>
    month : <input type="month" value="2022-03"><br>
    week : <input type="week" value="2022-w09"><br>
    data : <input type="date" value="2022-03-01"><br>
    time : <input type="time" value="21:30"><br>
    local : <input type="datetime-local" value="2022-09-01T21:30:10.32"><br>
    </pre>      
    </form>
</body>
</html>

이렇게 한 번 작성을 해봤습니다.

여기에 기입이 된 것은 초기 세팅이므로 언제든지 변경이 가능합니다.

그럼 결과 화면도 같이 보실까요?

이렇게 날짜를 세팅할 수 있는 칸이 세팅이 됩니다.

그럼 각각 선택을 하면 어떻게 되는지 한 번 볼까요?

이렇게 각각 세팅을 할 수가 있습니다.

1 - 1. 생일 축하 플래너 만들기

그리고 이런 걸 이용해서 일종의 플래너 같은 것도 짜 볼 수 있습니다.

이것도 간단한 예제를 통하여 같이 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>시간 정보 입력 응용</title>
</head>
<body>
    <h3>생일축하합니다</h3>
    <hr>
    <form>
    <table>
        <tr><td>생일</td>
            <td><input type="date" value="2003-02-09"></td></tr>
        <tr><td>생일파티시간</td>
            <td><input type="time"></td></tr>
        <tr><td>생일파티장소</td>
            <td><input type="text"></td></tr>
    </table>           
    </form>
</body>
</html>

이렇게 한 번 간단하게 작성을 해봤습니다.

생일이 언제인지, 그리고 생일 파티를 여는 시간은 언제인지,

생일파티를 하는 장소는 어디인지 쓸 수 있도록 했습니다.

그럼 결과 화면도 같이 보실까요?

이렇게 생일 축하한다는 문구와 함께 생일 일자와 생일파티 시간,

그리고 파티를 여는 장소까지 설정을 할 수 있습니다.

그래서 이걸 각각 클릭을 하면 이렇게 뜹니다.

이런 식으로 선택과 입력이 가능합니다.

이걸 이렇게 파티 초대장으로 쓸 수도 있고,

그 외에 결혼식이나 돌잔치 등에도 초대장으로써도 쓸 수 있습니다.
이래서 시간 정보에 관한 것들은 활용 가치가 매우 높습니다.

여기까지 시간 정보를 입력하는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 스핀 버튼과 슬라이드 바를 사용하는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > html' 카테고리의 다른 글

html type 속성과 placeholder 속성을 이용하여 정보의 힌트 및 양식 보여주기와 형식을 가진 텍스트 입력하기 (0)	2023.03.10
html number, range 속성을 이용하여 스핀 버튼과 슬라이드 바 사용하기 (0)	2023.03.07
html color 속성 이용하여 색 입력하기 (0)	2023.03.07
html label 태그로 폼 요소의 캡션 만들기 (0)	2023.03.06
html 폼 만들기 7 - select, option 태그로 콤보박스 만들기 (0)	2023.03.04

개발러 L의 뻔fun한 코딩

html month, week, date, time, datetime-local 속성 이용하여 시간 표현하기