Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML open 속성 완벽 정리 – details 요소를 기본으로 펼쳐 보이게 하는 방법

HTML의 open 속성은 <details> 요소의 내용을 문서가 로드될 때 기본적으로 펼쳐진(열린) 상태로 표시하도록 지정하는 불리언(Boolean) 속성입니다.

일반적으로 <details> 요소는 사용자가 클릭하기 전까지 내용이 접혀 있는 상태로 유지되지만, open 속성을 추가하면 페이지가 열리는 즉시 상세 내용이 화면에 나타납니다.

open 속성 문법

open 속성은 별도의 값을 가지지 않는 불리언 속성이므로, 아래와 같이 태그에 그대로 작성하면 됩니다.

<details open></details>

HTML open 속성 예제

다음 예제는 <details> 요소에 open 속성을 적용하여, 요약(summary)과 단락(paragraph) 내용이 페이지 로드 시 자동으로 펼쳐져 보이도록 구현한 코드입니다.

<!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 open Attribute Demo</h1>
<details open>
<summary>Hi! I'm a summary element</summary>
<p>Hi! I'm a paragraph element with some dummy text</p>
</details>
</body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 <summary> 요소의 제목과 함께 하위 단락 내용이 처음부터 열려 있는 상태로 출력됩니다. 만약 open 속성을 제거하면, 사용자가 summary 영역을 직접 클릭해야만 내용이 펼쳐집니다.

참고 사항

  • open 속성은 JavaScript에서 element.open = true 또는 false로 동적으로 제어할 수 있습니다.
  • <details> 요소는 FAQ, 아코디언 메뉴, 추가 정보 표시 등 다양한 UI 패턴에 활용됩니다.