HTML DOM details open 속성이란?
HTML DOM의 details open 속성은 HTML <details> 요소의 open 속성과 연동되는 속성입니다. 이 속성은 불리언(boolean) 값으로, 세부 정보를 사용자에게 표시할지 여부를 지정하는 데 사용됩니다. 값을 true로 설정하면 세부 정보가 화면에 나타나고, false로 설정하면 해당 정보가 사용자에게서 숨겨집니다.
문법(Syntax)
details open 속성을 설정하는 기본 문법은 다음과 같습니다.
detailsObject.open = true|false
true는 세부 정보를 표시하고, false는 세부 정보를 숨깁니다. 별도로 값을 지정하지 않으면 기본값인 false가 적용되므로, 세부 정보는 처음에는 숨겨진 상태로 표시됩니다.
예제(Example)
다음은 details open 속성을 활용한 예제 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h2>Details open() 속성</h2>
<details id="Details1">
<summary>에펠탑</summary>
<p style="color:blue">에펠탑은 프랑스 파리 샹드마르스에 위치한 철골 격자 구조의 탑으로, 탑을 설계하고 건설한 엔지니어 구스타브 에펠의 이름을 따서 명명되었습니다.</p>
</details>
<p>아래 버튼을 클릭하면 세부 정보가 사용자에게 표시됩니다.</p>
<button onclick="setDetail()">표시</button>
<script>
function setDetail() {
document.getElementById("Details1").open = true;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다.
"표시" 버튼을 클릭한 후의 결과는 다음과 같습니다.
코드 설명
위 예제의 동작 방식을 단계별로 살펴보겠습니다.
먼저 id가 "Details1"인 <details> 요소를 생성하고, 그 안에 제목 역할을 하는 <summary> 요소와 본문 텍스트를 담은 <p> 요소를 배치했습니다.
<details id="Details1"> <summary>에펠탑</summary> <p style="color:blue">에펠탑은 프랑스 파리 샹드마르스에 위치한 철골 격자 구조의 탑으로, 탑을 설계하고 건설한 엔지니어 구스타브 에펠의 이름을 따서 명명되었습니다.</p> </details>
그다음, 사용자가 클릭하면 setDetail() 함수를 실행하는 "표시" 버튼을 만들었습니다.
<button onclick="setDetail()">표시</button>
setDetail() 함수는 getElementById() 메서드로 <details> 요소를 가져온 뒤, 해당 요소의 open 속성 값을 true로 설정합니다. 그 결과 <details> 내부의 정보가 사용자에게 표시됩니다.
function setDetail() {
document.getElementById("Details1").open = true;
}이처럼 details open 속성을 활용하면 자바스크립트만으로 접기·펼치기 UI를 손쉽게 제어할 수 있습니다. FAQ 목록이나 추가 정보 표시 영역 등 다양한 웹 인터페이스에서 유용하게 응용할 수 있습니다.