HTML에서 페이지가 로드될 때 특정 옵션이 미리 선택된 상태로 표시되도록 하려면 selected 속성을 사용합니다. 이 속성은 불리언(Boolean) 속성으로, <option> 태그에 추가하기만 하면 해당 옵션이 기본값으로 선택됩니다.
아래 예제 코드를 실행하여 selected 속성이 실제로 어떻게 동작하는지 확인해 보세요.
예제
<!DOCTYPE html> <html> <head> <title>HTML selected 속성</title> </head> <body> <p>다음은 과목 목록입니다. 하나를 선택하세요:</p> <form> <select name = "dropdown"> <option value = "Computer Architecture" selected>컴퓨터 구조</option> <option value = "Java">Java</option> <option value = "Discrete Mathematics">이산 수학</option> </select> </form> </body> </html>
설명
위 코드에서 첫 번째 옵션인 '컴퓨터 구조'에 selected 속성이 적용되어 있습니다. 따라서 페이지가 로드되는 즉시 드롭다운 목록에서 이 옵션이 자동으로 선택된 상태로 나타납니다.
참고 사항
- 단일 선택: 하나의
<select>요소에는selected속성이 지정된 옵션이 하나만 있어야 합니다. 여러 개가 있으면 마지막에 선언된 옵션이 선택됩니다. - XHTML 사용 시: XHTML 문서에서는
selected="selected"형태로 값을 명시적으로 작성해야 합니다. - 다중 선택 목록:
multiple속성이 설정된<select>요소에서는 여러 옵션에selected속성을 지정할 수 있습니다.