HTML / select / 선택할 수 있는 목록을 만드는 태그

select

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 / em, strong / 강조하는 텍스트, 중요한 텍스트

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 / placeholder / 양식에 안내 문구 추가하기

HTML / placeholder / 양식에 안내 문구 추가하기

input 태그에 value를 이용해서 기본값을 만들 수 있다. 이 상태에서 버튼을 클릭하면 기본값이 전송된다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; ...

HTML / progress - 진행 정도 나타내는 바 만드는 태그

HTML / progress - 진행 정도 나타내는 바 만드는 태그

progress progress는 진행 정도 나타내는 바를 만드는 태그입니다. HTML5에서 추가되었습니다. IE는 버전 10부터 지원합니다. 주요 속성은 max, value입니다. max를 전체로 보았을 때 value에 해당하는 정도를 나타냅니다. 예제 1 첫 번째 바는 전체를 100으로 보았을 때 20을 나타냅니다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타냅니다. 웹브라우저마다 표현 방식이 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <div> <progress value="20" max="100"></progress> </div> <div> <progress value="20" max="200"></progress> </div> </body> </html> 예제 ...

HTML / noscript

HTML / noscript

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 / textarea / 여러 줄의 문자열을 입력할 수 있는 양식

HTML / textarea / 여러 줄의 문자열을 입력할 수 있는 양식

textarea textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식이다. 문법 <textarea></textarea> 예제 col 속성(attribute)으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있다. 하지만, 크기 등 모양은 CSS에서 정하는 게 좋다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { ...

HTML / figure, figcaption / 이미지 등을 감싸고 캡션 만드는 태그

HTML / figure, figcaption / 이미지 등을 감싸고 캡션 만드는 태그

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 ...

HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록

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 / pre / 입력한 그대로 출력하는 태그

HTML / pre / 입력한 그대로 출력하는 태그

pre HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식한다. 예를 들어 다음 문서의 내용은 한 줄로 나온다. <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> Lorem ipsum dolor. Lorem ipsum dolor. ...

HTML / input / number / 숫자 입력하는 양식

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 / q, blockquote / 인용하기

HTML / q, blockquote / 인용하기

인용임을 나타내는 태그에는 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> ...