HTML / input / date, time / 날짜, 시간 입력하는 양식
목차
input type="date"
- type이 date인 input은 날짜를 입력 받기 위한 양식이다.
- 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다르다.
- IE는 지원하지 않는다.
- 아래 스크린샷은 크롬 기준이다.
문법
<input type="date" value="xxx" min="yyy" max="zzz">
- value : 선택 항목으로, 기본 날짜를 정한다.
- min : 선택 항목으로, 입력 가능한 가장 빠른 날짜이다.
- max : 선택 항목으로, 입력 가능한 가장 늦은 날짜이다.
예제 1 - 기본 양식
- 날짜를 입력 받는, 선택 항목이 없는 가장 간단한 양식이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
* {
font-size: 16px;
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<form>
<p><input type="date"></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
예제 2 - 기본값이 있는 양식
- 2019년 9월 22일을 기본값으로 하는 예제이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
* {
font-size: 16px;
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<form>
<p><input type="date" value="2019-09-22"></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
예제 3 - 입력 가능 범위가 있는 양식
- 2019년 9월 10일부터 2019년 9월 25일까지만 입력할 수 있는 양식이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
* {
font-size: 16px;
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<form>
<p><input type="date" value="2019-09-22" min="2019-09-10" max="2019-09-25"></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
input type="time"
- type이 time인 input은 시간을 입력 받기 위한 양식이다.
- 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다르다.
- IE는 지원하지 않는다.
- 아래 스크린샷은 크롬 기준이다.
문법
<input type="time" value="xxx" min="yyy" max="zzz">
- value : 선택 항목으로, 기본 시간을 정한다.
- min : 선택 항목으로, 입력 가능한 가장 빠른 시간이다.
- max : 선택 항목으로, 입력 가능한 가장 늦은 시간이다.
예제 1 - 기본 양식
- 시간을 입력 받는, 선택 항목이 없는 가장 간단한 양식이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
* {
font-size: 16px;
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<form>
<p><input type="time"></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
예제 2 - 기본값과 입력 가능 범위가 있는 양식
- 기본값과 입력 가능한 시간 범위를 정한 예제이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
* {
font-size: 16px;
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<form>
<p><input type="time" value="13:10:20" min="13:00:00" max="15:00:00"></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
Related Posts
링크(link)는 <a> 태그로 만든다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있다. 기본 문법 <a href="xxx">Label</a> href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣는다. 웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리된다. <a href="">Label</a>처럼 href 속성에 값이 없으면, 현재 페이지로 이동하는 링크가 만들어진다. 주요 속성 a 태그에 추가할 ...
HTML / input / hidden / 입력하지 않은 값을 넘기는 숨겨진 양식
양식은 보통 사용자가 입력한 값을 활용하기 위해 사용한다. 하지만, 사용자가 입력하지 않아도 필요한 값이 있을 수 있다. 사용자가 접속한 IP, 로그인한 상태에서의 계정 정보, 게시물의 답글인 경우 게시물의 ID 등을 예로 들 수 있다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘긴다. 다른 type의 input과 마찬가지로 이름은 name, 값은 value로 정한다. 다음은 ...
HTML / em, strong / 강조하는 텍스트, 중요한 텍스트
em, strong em 태그는 강조하는 텍스트에 사용한다. 기본 모양은 기울임꼴이다. strong 태그는 중요한 텍스트에 사용한다. 기본 모양은 굵은 글자이다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> body { font-size: 64px; } </style> </head> <body> <p>Lorem <em>Ipsum</em> <strong>Dolor</strong>.</p> </body> </html> b 태그는 글자를 굵게 만든다. 의미 부여 없이 굵게 만든다는 것이 strong과의 차이점이다.
HTML / form / 데이터를 전달하는 양식 만들기
form은 데이터를 입력 받고 전송할 때 사용하는 태그이다. 문법 <form method="xxx" action="yyy"> ... </form> method : 값을 전송하는 방법으로 get 또는 post를 입력한다. action : 값을 전달할 페이지를 입력한다. 입력하지 않으면 현재 페이지로 전송한다. form 안에 form을 넣으면 제대로 작동하지 않는다. 예제 1 - GET 방식으로 값 전달 get 방식으로 값을 전달하는 간단한 양식이다. <!doctype html> <html lang="ko"> <head> <meta ...
기본 문법 가장 기본적인 문법은 다음과 같다. <tagname>Contents</tagname> 위 모든 걸 요소(element)라고 한다. <tagname>을 시작 태그, </tagname>을 종료 태그, 둘을 합쳐 태그(tag)라고 한다. Contents는 내용이다. 예를 들어 <p>Lorem</p> 는 p 요소라 하고, 시작 태그는 <p>, 종료 태그는 </p>, 내용은 Lorem이다. 속성 태그는 속성(attribute)을 가질 수 있다. <tagname attribute="value">Contents</tagname> 예를 들어 blockquote에 id 속성(attribute)을 추가하고 값(value)을 abc로 정하고 싶으면 다음과 같이 한다. <blockquote id="abc"> ...
인용임을 나타내는 태그에는 q와 blockquote가 있다. q는 인라인 요소이고, blockquote는 블록 요소이다. 문법 <q cite="xxx">...</q> <blockquote cite="xxx">...</blockquote> 인용의 출처는 cite 속성으로 나타낸다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않는다. 예제 1 q 요소의 기본 모양은 인용 문구를 큰 따옴표로 감싸는 것이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> ...
pre HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식한다. 예를 들어 다음 문서의 내용은 한 줄로 나온다. <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> Lorem ipsum dolor. Lorem ipsum dolor. ...
video video는 HTML 문서에 동영상을 삽입하는 태그이다. HTML 5에서 추가된 것이므로, HTML 5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않는다. 문법 <video autoplay controls loop muted poster="aaa" preload="bbb"> <source src="xxx" type="yyy"> zzz </video> autoplay : 동영상을 자동으로 재생한다. controls : 재생, 정지 등 조작 메뉴를 보여준다. loop : 동영상을 반복 재생한다. poster : 동영상 ...
HTML / caption / 표(table)에 캡션 붙이는 태그
caption 표(table)에 캡션 붙일 때 caption 태그를 사용한다. 기본 위치는 표 위 가운데이다. 캡션 위치는 CSS의 caption-side로 정한다. 예제 캡션의 위치를 파악하기 위해 표의 가로 크기를 100%로 했고, 테두리를 넣었다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> table { width: 100%; } th, td { border: 1px solid #dadada; } </style> </head> <body> <table> <caption>Table Caption</caption> <tr> <th>Lorem</th><th>Ipsum</th> </tr> <tr> <td>Dolor</td><td>Amet</td> </tr> </table> </body> </html>
HTML / table, thead, tbody, tfoot, th, tr, td / 표 만들기
표 만들 때 사용하는 태그 표는 table 태그로 만든다. 행은 tr 태그로 만든다. 열의 제목이 들어가는 셀은 th 태그로 만든다. 내용이 들어가는 셀은 td 태그로 만든다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있다. 가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용한다. 세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용한다. 표 제목은 caption 태그로 ...