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>
Related Posts
img img는 HTML 문서에 이미지를 삽입하는 태그이다. 주요 속성은 다음과 같다. src : 이미지의 경로 alt : 이미지를 표시할 수 없을 때 출력할 내용 width : 이미지의 가로 크기 height : 이미지의 세로 크기 loading : 이미지 로딩 방식 예제 1 width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나온다. 만약 지정한 경로에 이미지가 없다면 alt 속성에 있는 ...
기본 문법 가장 기본적인 문법은 다음과 같다. <tagname>Contents</tagname> 위 모든 걸 요소(element)라고 한다. <tagname>을 시작 태그, </tagname>을 종료 태그, 둘을 합쳐 태그(tag)라고 한다. Contents는 내용이다. 예를 들어 <p>Lorem</p> 는 p 요소라 하고, 시작 태그는 <p>, 종료 태그는 </p>, 내용은 Lorem이다. 속성 태그는 속성(attribute)을 가질 수 있다. <tagname attribute="value">Contents</tagname> 예를 들어 blockquote에 id 속성(attribute)을 추가하고 값(value)을 abc로 정하고 싶으면 다음과 같이 한다. <blockquote id="abc"> ...
HTML / label / 폼의 양식에 이름 붙이는 태그
label label은 폼의 양식에 이름 붙이는 태그이다. 주요 속성은 for이다. label의 for의 값과 양식의 id의 값이 같으면 연결된다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제한다. 예제 input 요소에 label을 붙인 간단한 예제이다. label을 클릭하면 input의 type에 맞게 처리한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p> <label for="jb-input-text">Input - Text</label> <input type="text" id="jb-input-text"> </p> <p> <label for="jb-input-checkbox">Input - Checkbox</label> <input type="checkbox" id="jb-input-checkbox"> </p> </body> </html> Tip input 등 ...
HTML / input / radio / 라디오 버튼 만들기
라디오 버튼 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 한다. 라디오 버튼은 input 태그로 만든다. 문법 <input type="radio" name="xxx" value="yyy" checked> name : name의 값이 같은 것 중에서 하나를 선택한다. value : 선택했을 때 전달될 값이다. checked : 선택된 상태로 만든다. 예제 1 Apple 또는 Banana 중 하나만 선택한다.(중복 선택이 가능하게 하려면 체크박스를 만든다.) 아무것도 선택되지 ...
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 / 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 / address - 문서의 소유자, 작성자의 연락처를 나타내는 태그
address address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit ...
HTML / input / date, time / 날짜, 시간 입력하는 양식
input type="date" type이 date인 input은 날짜를 입력 받기 위한 양식이다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다르다. IE는 지원하지 않는다. 아래 스크린샷은 크롬 기준이다. 문법 <input type="date" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 날짜를 정한다. min : 선택 항목으로, 입력 가능한 가장 빠른 날짜이다. max : 선택 항목으로, 입력 가능한 가장 늦은 날짜이다. 예제 1 - 기본 ...
HTML / select / 선택할 수 있는 목록을 만드는 태그
select select는 선택할 수 있는 목록을 만들 때 사용한다. 목록의 내용은 option 태그로 만든다. 문법 <select> <option>...</option> <option>...</option> <option>...</option> </select> 속성 select 태그에 사용하는 주요 속성은 다음과 같다. autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰진다. disabled : 화면에는 보이지만 사용할 수 없도록 만든다. multiple : 여러 값을 선택할 수 있도록 한다. name : 이름을 붙인다. size : 목록을 펼치기 전에 ...
HTML / caption / 표(table)에 캡션 붙이는 태그
caption 표(table)에 캡션 붙일 때 caption 태그를 사용한다. 기본 위치는 표 위 가운데이다. 캡션 위치는 CSS의 caption-side로 정한다. 예제 캡션의 위치를 파악하기 위해 표의 가로 크기를 100%로 했고, 테두리를 넣었다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> table { width: 100%; } th, td { border: 1px solid #dadada; } </style> </head> <body> <table> <caption>Table Caption</caption> <tr> <th>Lorem</th><th>Ipsum</th> </tr> <tr> <td>Dolor</td><td>Amet</td> </tr> </table> </body> </html>