select

1 개요
2 문법
3 속성
4 예제

개요

select 태그는 드롭다운 목록을 생성하는 데 사용됩니다. 사용자는 이 드롭다운에서 하나 이상의 옵션을 선택할 수 있습니다.
드롭다운 목록의 내용은 option 태그로 만듭니다.

문법

<select>
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>

속성

select 태그에 사용하는 주요 속성은 다음과 같다.

autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰집니다.
disabled : 화면에는 보이지만 사용할 수 없도록 만듭니다.
multiple : 여러 값을 선택할 수 있도록 합니다.
name : 이름을 붙입니다.
size : 목록을 펼치기 전에 보여질 목록의 개수를 정합니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML Reference | select</title>
  </head>
  <body>
    <h1>General</h1>
    <form>
      <select>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolor</option>
        <option>Amet</option>
      </select>
    </form>
    <h1>Autofocus</h1>
    <form>
      <select autofocus>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolor</option>
        <option>Amet</option>
      </select>
    </form>
    <h1>Disabled</h1>
    <form>
      <select disabled>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolor</option>
        <option>Amet</option>
      </select>
    </form>
    <h1>Multiple</h1>
    <form>
      <select multiple>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolor</option>
        <option>Amet</option>
      </select>
    </form>
    <h1>Size</h1>
    <form>
      <select size="2">
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolor</option>
        <option>Amet</option>
      </select>
    </form>
  </body>
</html>

HTML / Reference / q

q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다.

HTML / Reference / caption

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

HTML / Reference / input type="range"

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

HTML / Reference / pre

pre 태그는 HTML에서 "preformatted text"를 정의하는 데 사용됩니다. 이 태그는 HTML 문서에서 텍스트를 작성한 그대로 표시하도록 하여, 공백과 줄바꿈을 유지하는 특징이 있습니다. 일반적으로 코드 블록, ASCII 아트, 또는 공백과 줄바꿈을 유지해야 하는 텍스트를 표시할 때 사용됩니다.

HTML / Reference / abbr

abbr은 약자(abbreviation)임을 나타냅니다. title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나옵니다.

HTML / Reference / input type="hidden"

양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 접속한 IP 등 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다.

HTML / Reference / progress

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

HTML / Reference / form

form은 HTML에서 사용자 입력을 서버로 전송하는 양식을 정의할 때 사용됩니다. 입력 받은 값을 어디로 전송할지, 어떤 방식으로 전송할지 정합니다. form 태그 안에 input, select, textarea 등 양식이 들어갑니다.

HTML / Reference / input type="radio"

radio(라디오 버튼)는 사용자가 여러 개의 옵션 중 하나만 선택할 수 있게 하는 폼 요소입니다. input 태그의 type="radio" 속성을 사용하여 라디오 버튼을 생성합니다.

HTML / Reference / select

select 태그는 드롭다운 목록을 생성하는 데 사용됩니다. 사용자는 이 드롭다운에서 하나 이상의 옵션을 선택할 수 있습니다. 드롭다운 목록의 내용은 option 태그로 만듭니다.