HTML details 요소의 open 속성이란?
HTML에서 <details> 요소에 open 속성을 사용하면 페이지가 로드되는 순간 세부 정보가 접히지 않고 펼쳐진 상태로 사용자에게 표시됩니다. 이 속성은 불리언(Boolean) 속성이므로 별도의 값을 지정할 필요 없이 속성 이름만 작성하면 됩니다.
반대로 open 속성을 생략하면 세부 정보는 기본적으로 접힌 상태로 시작되며, 사용자가 <summary> 영역을 클릭해야만 내용을 확인할 수 있습니다.
open 속성 사용 예제
다음 코드를 실행하여 open 속성이 실제로 어떻게 동작하는지 직접 확인해 보세요.
<!DOCTYPE html> <html> <head> <title>HTML open 속성 예제</title> </head> <body> <details open> <summary>추가 정보 더보기</summary> <p>여기에서 세부 사항에 대한 자세한 정보를 확인할 수 있습니다.</p> </details> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 "추가 정보 더보기"라는 요약 제목 아래의 설명 문단이 처음부터 열려 있는 상태로 나타납니다. 사용자는 요약 부분을 클릭해 내용을 접거나 다시 펼칠 수도 있습니다.
참고 사항
- open 속성은 JavaScript를 통해 동적으로 추가하거나 제거할 수 있어, 특정 조건에 따라 세부 정보를 자동으로 펼치는 인터랙션 구현에 활용됩니다.
- FAQ 섹션, 공지사항, 접이식 메뉴 등 콘텐츠를 단계적으로 노출하고 싶은 경우에 유용하게 사용됩니다.