HTML / Reference / input type="range"
개요
- type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다.
- 슬라이드로 값을 선택합니다.
문법
<input type="range" min="x" max="x" step="x" value="x">
- min : 최솟값으로, 기본값은 0입니다.
- max : 최댓값으로, 기본값은 100입니다.
- step : 숫자들 사이의 간격으로, 기본값은 1입니다.
- value : 초깃값으로, min과 max의 평균입니다.
예제
Submit을 클릭하면 URL에서 값을 확인할 수 있습니다. 아래 상태 그대로 전송하면 URL 뒤에 ?a=50&b=100&c=60&d=400가 붙습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
* {
font-family: Consolas, monospace;
}
</style>
</head>
<body>
<form method="get" action="">
<p>
A <input type="range" name="a">
</p>
<p>
B <input type="range" name="b" max="1000" value="100">
</p>
<p>
C <input type="range" name="c" min="50" value="60">
</p>
<p>
D <input type="range" name="d" min="0" max="1000" step="20" value="400">
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
</html>
참고
- 색을 지정하고 싶다면 CSS의 accent-color 속성을 이용합니다.
개요 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 : 동영상 재생 전에 ...
개요 q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다. 문법 <q cite="xxx">...</q> 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. 예제 q 요소의 기본 모양은 인용 문구를 큰 따옴표로 감싸는 것입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> ...
개요 del은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. ins는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>My favorate color is <del>blue</del> <ins>red</ins>.</p> </body> </html>
HTML / Reference / input type="radio"
개요 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 합니다. 라디오 버튼은 input 태그로 만듭니다. 문법 <input type="radio" name="xxx" value="yyy" checked> name : name의 값이 같은 것 중에서 하나를 선택합니다. value : 선택했을 때 전달될 값입니다. checked : 선택된 상태로 만듭니다. 예제 1 Apple 또는 Banana 중 하나만 선택합니다. 아무것도 선택되지 않은 상태에서 시작합니다. <!doctype html> <html lang="ko"> ...
HTML / Reference / input type="time"
개요 type이 time인 input은 시간을 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다. 아래 스크린샷은 크롬 기준입니다. 문법 <input type="time" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 시간을 정합니다. min : 선택 항목으로, 입력 가능한 가장 빠른 시간입니다. max : 선택 항목으로, 입력 가능한 가장 늦은 시간입니다. 예제 - 기본 양식 시간을 입력 받는, 선택 ...
개요 HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다. 예제 다음은 br 태그를 이용해서 줄바꿈을 한 예제입니다. 첫 번째 문단은 코드 상에서 줄바꿈을 했지만 웹브라우저에서는 띄어쓰기로 표현됩니다. 두 번째 ...
HTML / Reference / figure, figcaption
개요 figure는 사진, 이미지, 다이어그램 등을 감싸는 테그입니다. figcaption은 figure 요소에 캡션을 만듭니다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Reference | figcaption</title> </head> <body> <p>Aenean nec mollis nulla. Phasellus lacinia ...
HTML / Reference / input type="range"
개요 type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다. 슬라이드로 값을 선택합니다. 문법 <input type="range" min="x" max="x" step="x" value="x"> min : 최솟값으로, 기본값은 0입니다. max : 최댓값으로, 기본값은 100입니다. step : 숫자들 사이의 간격으로, 기본값은 1입니다. value : 초깃값으로, min과 max의 평균입니다. 예제 Submit을 클릭하면 URL에서 값을 확인할 수 있습니다. 아래 상태 그대로 전송하면 URL 뒤에 ...
HTML / Reference / input type="hidden"
개요 양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 사용자가 접속한 IP 로그인한 상태에서의 계정 정보 게시물의 답글인 경우 게시물의 ID 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다. 다른 type의 input과 마찬가지로 이름은 name, 값은 value로 정합니다. 문법 <input type="hidden" name="xxx" value="yyy"> 예제 다음은 size의 값을 big으로 정하고 넘기는 ...
개요 label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제합니다. 예제 1 input 요소에 label을 붙인 간단한 예제입니다. label을 클릭하면 input의 type에 맞게 처리합니다. 즉, type이 text이면 텍스트를 입력할 수 있게 커서를 위치시킵니다. type이 checkbox이면 체크박스에 ...