HTML / input / number / 숫자 입력하는 양식
input type="number"
input 태그의 type을 number로 하면 숫자만 입력할 수 있다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
* {
font-family: Consolas, monospace;
font-size: 24px;
}
</style>
</head>
<body>
<form method="get" action="">
<p><input type="number" name="number" placeholder="Input number"></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
외관 상으로는 차이가 없으나...
숫자 이외의 것을 입력하고 전송하려 하면 경고 메시지가 나오고 전송되지 않는다.
소수도 입력 가능하게 하기
별도의 설정을 하지 않으면 소수를 전송할 수 없다.
소수를 입력 받고 싶다면 step 속성을 추가한다. 예를 들어 step의 값을 0.01로 하면 소수 둘째 자리까지 입력 가능하다.
<input type="number" name="number" step="0.01" placeholder="Input number">
화살표로 값을 변경할 때도 0.01 단위로 조정된다.
사용할 일이 많을지는 모르겠으나, 3의 배수를 입력 받고 싶다면 step의 값을 3으로 정한다.
<input type="number" name="number" step="3" placeholder="Input number">
HTML / h1, h2, h3, h4, h5, h6, p / 제목과 문단
제목 제목(heading)은 h1, h2, h3, h4, h5, h6 태그로 만든다. 문서의 구조와 밀접한 관련이 있으므로 순서에 맞게 사용하는 게 좋다. 문단 문단(paragraph)은 p 태그로 만든다. 문단과 문단 사이는 간격이 크다. 문단 내에서 줄바꿈을 하고 싶다면 br 태그를 이용한다. 예제 1 제목의 기본 모양은 굵은 글자이고, 레벨에 따라 크기가 다르다. h4와 p는 글자 크기가 같다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading ...
noscript noscript 태그 안의 내용은 스크립트를 지원하는 않는 웹브라우저나 스크립트를 실행하지 않도록 설정한 웹브라우저에서만 출력됩니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Tag | noscript</title> </head> <body> <script> document.write( '<h1>Your browser supports JavaScript</h1>'); ...
HTML / input / checkbox / 체크박스 만들기
체크박스 체크박스는 클릭하면 선택되고, 다시 클릭하면 선택이 해제되는 사각형 모양의 박스이다. 체크박스는 input 태그로 만든다. 문법 <input type="checkbox" name="xxx" value="yyy" checked> name : 전달할 값의 이름이다. value : 전달될 값이다. checked : 선택된 상태로 만든다. 예제 1 - 기본 Blue 또는 Red를 선택한다. 둘 다 선택할 수 있다.(라디오 버튼은 하나만 선택할 수 있다.) 아무것도 선택되지 않은 상태에서 시작한다. <!doctype html> <html lang="ko"> ...
개요 video는 HTML 문서에 동영상을 삽입하는 태그이다. HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않는다. 문법 <video autoplay controls loop muted poster="aaa" preload="bbb"> <source src="xxx" type="yyy"> zzz </video> autoplay : 동영상을 자동으로 재생한다. controls : 재생, 정지 등 조작 메뉴를 보여준다. loop : 동영상을 반복 재생한다. poster : 동영상 재생 전에 ...
HTML / table, thead, tbody, tfoot, th, tr, td / 표 만들기
표 만들 때 사용하는 태그 표는 table 태그로 만든다. 행은 tr 태그로 만든다. 열의 제목이 들어가는 셀은 th 태그로 만든다. 내용이 들어가는 셀은 td 태그로 만든다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있다. 가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용한다. 세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용한다. 표 제목은 caption 태그로 ...
HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록
순서 있는 목록 - ol 순서 있는 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록이다. 순서 있는 목록은 ol로, 목록의 내용은 li로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Ordered List</h1> <ol> ...
HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식한다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현된다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용한다. 다음은 br 태그를 이용해서 줄바꿈을 한 예제이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
HTML / input / number / 숫자 입력하는 양식
input type="number" input 태그의 type을 number로 하면 숫자만 입력할 수 있다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> * { font-family: Consolas, monospace; ...
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 ...
HTML / select / 선택할 수 있는 목록을 만드는 태그
select select는 선택할 수 있는 목록을 만들 때 사용한다. 목록의 내용은 option 태그로 만든다. 문법 <select> <option>...</option> <option>...</option> <option>...</option> </select> 속성 select 태그에 사용하는 주요 속성은 다음과 같다. autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰진다. disabled : 화면에는 보이지만 사용할 수 없도록 만든다. multiple : 여러 값을 선택할 수 있도록 한다. name : 이름을 붙인다. size : 목록을 펼치기 전에 ...