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 |
댓글