html/css 독학하기

details

토픽 html/css 독학하기 > html사전

HTML5에서 도입

설명

The HTML details element (<details>) is used as a disclosure widget from which the user the retrieve additional information.

<details> 엘리먼트는 HTML문서 내에서 웹페이지 또는 웹페이지 일부의 세부 정보를 설명하는데에 사용된다. 웹페이지를 보다보면, 문구 왼쪽에 ▼ 표시가 나오고 클릭하면 아래에 세부적인 사항이 펼쳐지는 경우가 있다. 이 때 사용하는 태그가 <detail> 요소이다. 즉, <detail>요소는 HTML 문서 내에서 특정 내용에 대한 세부정보를 제공하고 싶을 때 사용한다. <detail> 요소 안에는 <summary> 요소와 함께 세부 내용을 적은 부분이 들어간다. ▼ 표시를 클릭하면 세부 내용이 나타나고 다시 클릭하면 세부 내용이 숨는다.

Usage Context

Permitted content One <summary> element followed by flow content
Tag omission None, both the start tag and the end tag are mandatory.
Permitted parent elements Any element that accepts flow content.
Normative document HTML5, section 4.11.1

속성

이 엘리먼트는 전역속성을 지원한다.

open

This Boolean attribute indicates whether the details will be shown to the user on page load. If omitted the details will be hidden.

불리언(Boolean) 속성은 페이지 로드할 때 사용자에게 자세한 내용을 보여줄 것인지 아닌지 표시한다. 생략된다면 자세한 내용은 숨겨진다.

예제

 <details>  
      <summary>Some details</summary>  
      <p>More info about the details.</p>  
 </details>  
 <details>  
      <summary>생활코딩 HTML 사전</summary>  
      <li>일반인도 쉽게 이해할 수 있는 사전</li>  
      <li>개발자도 유용하게 이용할 수 있는 사전</li>
 </details>  

DOM Interface

This element implements the HTMLDetailsElement interface.

이 요소는 HTMLDetailsElement 인터페이스를 구현한다.

호환성

Desktop
기능 구글크롬 파이어폭스Gecko) 인터넷 익스플로러 Opera Safari
기본적인 지원 1.2        
Mobile
기능 안드로이드 파이어폭스 모바일(Gecko) 인터넷 익스플로러 모바일 오페라 모바일 사파리 모바일
기본적인 지원   4.0(2.0)      

참고

댓글

댓글 본문
  1. engfordev
    아.. 그런 거군요. open을 써주는 것 자체가 값을 넣어주는 거군요...
    설명감사요!
    대화보기
    • 정정식
      open 속성을 이용하는 방법은 <details open> 혹은 <details> 와 같이 사용합니다.
      즉 open은 존재 여부로 의미가 달라지는 불린 속성(Boolean attribute)입니다.
    • engfordev
      잘 해주셨어요~
      이 요소, 참 유용한데요? 한번 써보고 싶은 요소에요.
      # 예제를 함 만들어봤어요,
      예제 부분은 원하시는 내용으로 만드셔도 좋을 것 같아요 ^^
      <details> <summary>생활코딩 HTML사전</summary> <li>일반인도 쉽게 이해할 수 있는 사전</li> <li>개발자에게도 유용한 사전</li> </details>
      # 그리고 설명 부분을 일반인의 입장에서 함 풀어봤어요~
      웹페이지를 보다보면, 문구 왼쪽에 ▼ 표시가 나오고, 이 표시를 클릭하면 아래에 세부적인 사항이 쭉 펼쳐지면서 나오는 경우가 있다. 이럴 때 사용하는 것이 <detail> 요소이다. 즉 <detail> 요소는 HTML 문서 내에서, 특정 내용에 내한 세부정보를 제공하고 싶을 때 사용한다. <detail> 요소 안에는 <summary>부분과 세부내용을 적은 부분이 들어간다. ▼를 클릭하면 세부내용이 나타나고 다시 ▼를 클릭하면 세부내용이 숨는다.</summary></detail></detail></detail>
    • 정정식
      "disclosure widget"은 화면에서 내용의 일부분을 보여줬다 감췄다 할 수 있는 엘리먼트입니다.
      보통 왼쪽에 쐐기모양 아이콘이 등장하고 그 아이콘을 클릭하면 보여주거나 감추거나 토글이 됩니다.