HTML selected 속성 – 드롭다운 메뉴에서 기본 선택 옵션 설정하기

HTML의 selected 속성은 웹 페이지가 로드될 때 <select> 드롭다운 목록에서 특정 옵션이 미리 선택된 상태로 표시되도록 지정하는 불리언(Boolean) 속성입니다.

이 속성을 사용하면 사용자가 페이지를 열었을 때 가장 자주 선택되는 항목이나 기본값을 자동으로 보여줄 수 있어, 폼 작성 편의성이 크게 향상됩니다.

문법(Syntax)

selected 속성의 기본 문법은 다음과 같습니다.

<option selected></option>

selected는 불리언 속성이므로 별도의 값을 지정할 필요 없이 태그에 selected만 추가하면 됩니다. HTML5에서는 selected="selected" 형태로 작성해도 동일하게 동작합니다.

예제(Example)

아래 예제는 세 개의 과목 옵션 중 'Biology'가 기본적으로 선택되어 있는 드롭다운 목록을 보여줍니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML selected Demo</h1>
<p>Select your favourite subject:</p>
<select>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology" selected>Biology</option>
</select>
</body>
</html>

실행 결과(Output)

위 코드를 브라우저에서 실행하면 드롭다운 목록에 세 개의 과목이 표시되며, 페이지가 로드되는 순간 'Biology' 항목이 이미 선택된 상태로 나타납니다.

참고 사항

하나의 <select> 요소 안에서는 하나의 옵션에만 selected를 적용하는 것이 좋습니다. 여러 개에 적용하면 마지막 옵션이 선택됩니다.
multiple 속성이 설정된 다중 선택 목록에서는 여러 옵션에 selected를 지정할 수 있습니다.
JavaScript로는 option.selected = true 또는 option.setAttribute('selected', '')를 통해 동적으로 선택 상태를 변경할 수 있습니다.