티스토리 뷰

HTML

[HTML] <summary>

<summary>

<detalist> 태그는 접기/펼치기 목록을 설정합니다. 자바스크립트를 이용하여 컨텐츠 내용을 숨기고 보여줄 수 있는 기능을 HTML 태그를 통해 구현할 수 있습니다. 접기/펼치기 목록의 제목은 <summary> 태그를 통해 설정합니다.


<summary>

<summary> 태그는 <details> 요소에 대한 요약 또는 제목을 정의합니다.

정의(Definition)

  • <summary> 태그는 <details> 요소에 대한 요약 또는 제목을 정의합니다.
  • <summary> 태그에는 제목 태그나 강조 태그를 사용할 수 있습니다.

비교(Compare)

  • 접기/펼치기 목록을 사용시 <details> 태그를 사용합니다.
  • 접기/펼치기 목록의 제목은 <summary> 태그를 사용합니다.

Sample1

<details> 태그와 <summary> 태그의 사용 예제입니다.

결과
더 자세한 정보를 알고 싶다면?
  1. 접기/펼치기 목록은 deatails 요소를 사용합니다.
  2. 접기/펼치기 목록의 제목은 summary 요소를 사용합니다.
html
<details>
    <summary>더 자세한 정보를 알고 싶다면?</summary>
    <ol>
       <li>접기/펼치기 목록은 deatails 요소를 사용합니다.</li>
       <li>접기/펼치기 목록의 제목은 summary 요소를 사용합니다.</li> 
    </ol>
</details>

Sample2

<details> 태그에 open 속성으로 숨겨진 내요을 펼쳐 볼 수 있는 예제입니다.

결과
더 자세한 정보를 알고 싶다면?
  1. 접기/펼치기 목록은 deatails 요소를 사용합니다.
  2. 접기/펼치기 목록의 제목은 summary 요소를 사용합니다.
html
<details open>
    <summary>더 자세한 정보를 알고 싶다면?</summary>
    <ol>
       <li>접기/펼치기 목록은 deatails 요소를 사용합니다.</li>
       <li>접기/펼치기 목록의 제목은 summary 요소를 사용합니다.</li> 
    </ol>
</details>

Sample3

<summary> 태그에 제목 태그나 강조 태그를 넣을 수 있는 예제입니다.

결과
더 자세한 정보를 알고 싶다면?
  1. 접기/펼치기 목록은 deatails 요소를 사용합니다.
  2. 접기/펼치기 목록의 제목은 summary 요소를 사용합니다.
html
<details open>
    <summary><strong>더 자세한 정보를 알고 싶다면?</strong></summary>
    <ol>
       <li>접기/펼치기 목록은 deatails 요소를 사용합니다.</li>
       <li>접기/펼치기 목록의 제목은 summary 요소를 사용합니다.</li> 
    </ol>
</details>

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<summary> 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능

참고(Reference)

  • MDN
  • HTML5

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼