HTML의 <option> 요소에 사용되는 selected 속성은 페이지가 로드될 때 특정 옵션을 미리 선택된 상태로 만들어 주는 역할을 합니다. 이 속성이 지정된 옵션이 드롭다운 목록이 열리기 전에 화면에 기본값으로 표시됩니다.
selected 속성은 불리언(Boolean) 속성이므로 별도의 값 없이 속성 이름만 작성하면 됩니다.
기본 문법
<option selected>
참고로 하나의 <select> 드롭다운 목록에는 일반적으로 하나의 옵션에만 selected 속성을 지정합니다. 여러 옵션에 지정하면 브라우저에 따라 마지막에 선언된 옵션이 선택될 수 있습니다.
예제
다음은 <option> 요소의 selected 속성을 실제로 구현한 예제입니다.
<!DOCTYPE html> <html> <body> <h1>Educational Qualification</h1> <h2>Postgraduation</h2> <select> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech" selected>M.TECH</option> <option value="msc">M.Sc</option> </select> </body> </html>
실행 결과
위 코드를 실행하면 대학원 학력(M.TECH)이 기본 선택 상태로 표시된 드롭다운 목록이 나타납니다.
코드 설명
위 예제에서는 <select> 요소를 사용해 드롭다운 목록을 생성했습니다.
<select> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech" selected>M.TECH</option> <option value="msc">M.Sc</option> </select>
목록 안에는 <option> 요소를 통해 네 가지 서로 다른 옵션이 정의되어 있습니다.
<option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech" selected>M.TECH</option> <option value="msc">M.Sc</option>
이 중 selected 속성을 활용하여 페이지가 로드되는 순간 화면에 기본으로 보이는 옵션을 지정했습니다.
<option value="mtech" selected>M.TECH</option>
이처럼 selected 속성을 사용하면 사용자가 직접 선택하기 전에도 원하는 값을 미리 노출시킬 수 있어, 설문조사나 회원가입 폼 등에서 자주 활용됩니다.