input type="range"

1 개요
2 문법
3 예제
4 참고

개요

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 속성을 이용합니다.

HTML / Reference / progress

progress는 HTML5에서 제공하는 태그로, 작업의 진행 상태를 나타내기 위해 사용됩니다. 주로 파일 업로드, 다운로드, 로딩 진행 상황 등을 시각적으로 보여줄 때 유용합니다. progress 태그는 기본적으로 게이지 형태로 표시되며, 사용자가 커스텀 스타일을 적용할 수도 있습니다.

HTML / Reference / textarea

textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다. col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS의 width, height로 정하는 게 좋습니다.

HTML / Reference / input type="range"

type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다. 슬라이드로 값을 선택합니다.

HTML / Reference / input type="checkbox"

checkbox는 여러 선택지를 제공하고, 사용자가 하나 또는 여러 개의 선택을 할 수 있게 하는 폼 요소입니다. input 태그의 type="checkbox" 속성을 사용하여 체크박스를 생성합니다.

HTML / Reference / input type="time"

type이 time인 input은 시간을 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.

HTML / Reference / caption

caption은 표에 제목을 붙일 때 사용합니다. caption 태그는 반드시 table 태그 내부에 있어야 하며, thead, tbody, tr 등의 다른 테이블 요소들보다 먼저 위치해야 합니다. 기본 위치는 표 위 가운데입니다. 위치는 CSS의 caption-side로 정합니다.

HTML / Reference / em, strong

em 태그는 주로 말투나 감정적인 강조 또는 문장의 맥락에서 중요한 부분을 나타낼 때 사용합니다. strong 태그는 중요성, 경고 또는 텍스트에서 매우 중요한 정보를 나타낼 때 사용됩니다.

HTML / Reference / address

address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다.

HTML / Reference / input type="date"

type이 date인 input은 날짜를 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.

HTML / Reference / img

img는 HTML에서 이미지를 삽입할 때 사용하는 태그입니다. 이 태그는 자체 종료 태그(self-closing)이며, 이미지 파일을 웹 페이지에 표시하는 데 사용됩니다.