HTML <select> 요소의 size 속성은 드롭다운 목록에서 한 번에 화면에 표시되는 항목의 개수를 지정하는 데 사용됩니다. 기본 상태에서는 드롭다운 형태로 하나의 항목만 보이지만, size 값을 1보다 크게 설정하면 목록 상자(list box) 형태로 전환되며 지정한 개수만큼 항목이 동시에 노출됩니다.
또한 전체 옵션 수가 size로 지정한 표시 개수보다 많으면 스크롤바가 자동으로 추가되어 나머지 항목도 쉽게 확인할 수 있습니다.
size 속성 문법
<select size="num">
여기서 num은 드롭다운 목록에 표시할 항목의 개수를 의미하는 숫자 값입니다. size 속성을 생략하면 기본값인 1이 적용되어 일반적인 드롭다운 형태로 표시됩니다.
size 속성 활용 예제
아래 예제는 학력 정보를 입력받는 폼에서 대학교육(학사)과 대학원교육(석사) 두 개의 선택 목록에 size 속성을 적용한 사례입니다.
<!DOCTYPE html>
<html>
<body>
<h1>지원자 프로필</h1>
<p>지원자가 제출해야 할 세부 정보는 다음과 같습니다:</p>
<h2>학력 사항</h2>
<form action="">
<section>
<h3>학사 학위</h3>
<select size = "2">
<option value="bca">BCA</option>
<option value="bcom">B.COM</option>
<option value="btech">B.TECH</option>
<option value="bsc">B.SC</option>
</select>
</section>
<section>
<h3>석사 학위</h3>
<select size="2">
<option value="mca">MCA</option>
<option value="mcom">M.COM</option>
<option value="mtech">M.TECH</option>
<option value="msc">M.Sc</option>
</select>
</section><br>
<input type="submit" value="다음">
</form>
</body>
</html>
실행 결과
코드 설명
위 예제에서는 두 개의 선택 목록을 만들었습니다.
<section>
<h3>학사 학위</h3>
<select size = "2">
<option value="bca">BCA</option>
<option value="bcom">B.COM</option>
<option value="btech">B.TECH</option>
<option value="bsc">B.SC</option>
</select>
</section>
<section>
<h3>석사 학위</h3>
<select size="2">
<option value="mca">MCA</option>
<option value="mcom">M.COM</option>
<option value="mtech">M.TECH</option>
<option value="msc">M.Sc</option>
</select>
</section>두 목록 모두 size 속성을 "2"로 설정하여 화면에 동시에 보이는 항목 수를 2개로 지정했습니다.
<select size="2">
각 목록에는 4개의 옵션이 포함되어 있지만 2개만 표시되므로, 나머지 항목을 확인하려면 스크롤바를 사용해야 합니다.
참고 사항
- size 속성의 기본값은 1이며, 이 경우 일반적인 드롭다운 형태로 렌더링됩니다.
multiple속성과 함께 사용하면 Ctrl(또는 Cmd) 키를 누른 채 여러 항목을 동시에 선택할 수 있습니다.- 모든 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 size 속성을 지원합니다.