안녕하세요, 여행벌입니다.
오늘은 드롭다운 목록을 만들 때 사용하는 select, optgroup, option 태그에 대해서 포스팅해보겠습니다.
<select> <option> 태그
사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용합니다. 드롭다운 목록이란 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐지므로, 공간을 최소한으로 사용하면서 여러 옵션을 표시할 때 이용합니다.
드롭다운 목록은 <select> 태그와 <option> 태그를 이용해 표시합니다. <select> 태그로 드롭다운 모곩의 시작과 끝을 표시하고 그 안에 <option> 태그를 사용해 원하는 항목들을 추가합니다.
<!-- 기본형 -->
<select 속성="속성값">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>size 속성 ( <select> 태그 )
화면에 표시될 드롭다운 메뉴의 항목 개수를 지정합니다.
<select size="5"> </select>multiple 속성 ( <select> 태그 )
브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있습니다.
<select multiple> </select>value 속성 ( <option> 태그 )
옵션을 선택했을 때 서버로 넘겨질 값을 지정합니다.
<option value="이값을서버로넘깁니다."></option>selected 속성 ( <option> 태그 )
화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정합니다.
<option selected></option><optgroup> 태그 - 옵션끼리 묶기
드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우, <optgroup> 태그를 사용할 수 있습니다.
예시1) size와 selected 속성 사용
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 웹 폼</title>
<style>
body {
background-color: #fff;
}
form fieldset {
margin-bottom: 25px;
}
form legend {
font-size: 15px;
font-weight: 600;
}
.reg {
font-size: 14px;
width: 110px;
color: #390;
font-weight: bold;
float: left;
text-align: right;
margin-right: 10px;
}
form ul li {
list-style: none;
margin: 15px 0;
font-size: 14px;
}
</style>
</head>
<body>
<h1> 멋사 특강 신청</h1>
<form>
<fieldset>
<legend>수강 신청인</legend>
<ul>
<li>
<label class="reg" for="id">대학교</label>
<input type="text" id="id" autofocus>
</li>
<li>
<label class="reg" for="name">이름</label>
<input type="text" id="name">
</li>
<li>
<label class="reg" for="class">학과</label>
<select size="3" id="class" multiple>
<option value="math" selected>수학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer">컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</select>
</li>
</ul>
</fieldset>
</form>
</body>
</html>
예시2) optgroup 사용
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 웹 폼</title>
<style>
body {
background-color: #fff;
}
form fieldset {
margin-bottom: 25px;
}
form legend {
font-size: 15px;
font-weight: 600;
}
.reg {
font-size: 14px;
width: 110px;
color: #390;
font-weight: bold;
float: left;
text-align: right;
margin-right: 10px;
}
form ul li {
list-style: none;
margin: 15px 0;
font-size: 14px;
}
</style>
</head>
<body>
<h1> 멋사 특강 신청</h1>
<form>
<fieldset>
<legend>수강 신청인</legend>
<ul>
<li>
<label class="reg" for="id">대학교</label>
<input type="text" id="id" autofocus>
</li>
<li>
<label class="reg" for="name">이름</label>
<input type="text" id="name">
</li>
<li>
<label class="reg" for="class">학과</label>
<select id="class">
<optgroup label="공과대학">
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer">컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</optgroup>
<optgroup label="인문대학">
<option value="history">사학과</option>
<option value="lang">어문학부</option>
<option value="philo">철학</option>
</optgroup>
</select>
</li>
</ul>
</fieldset>
</form>
</body>
</html>
드롭다운 목록을 프론트 개발 시 자주 사용되므로 꼭 잘 익혀두세요!
이상으로 포스팅을 마치도록 하겠습니다 :)
'Dev > HTML5 + CSS3' 카테고리의 다른 글
| [HTML+CSS] 클래스(class) 와 아이디(id) 선택자 - travelbeeee (0) | 2020.04.06 |
|---|---|
| [HTML+CSS] 레이아웃을 잡아주는 <div> 태그 (0) | 2020.04.05 |
| [HTML+CSS] 사용자의 입력을 받는 <input> 태그 (0) | 2020.04.03 |
| [HTML+CSS] 블록 레벨 요소 vs 인라인 레벨 요소 - travelbeeee (0) | 2020.04.02 |
| [HTML+CSS] HTML의 요소 구조 - travelbeeee (0) | 2020.04.02 |