방문자 수

오늘 127
어제 386
최대 583
전체 391,905

회원 수

오늘 0
어제 1
전체 788

[Style Semantic] HTML5 - <details> (디테일즈태그, 상세태그) - 사용자가 보거나 감출 수 있는 추가적 세부 사항 : IE 및 파이어폭스 아직 지원 안 함.

예제

<details>
  <summary>홈짱닷컴 (homzzang.com) 소개 [클릭]</summary>
  <p> - 홈페이지 제작 무료 가이드.</p>
  <p>제작 순서, HTML CSS, JS, SQL, PHP 등</p>
</details>


결과보기


정의

사용자가 원할 때 보거나 감출 수 있는 추가적인 세부 사항을 표시할 때 사용



비고

1. 사용자가 보거나 감출 수 있는 위젯을 만들 때 사용. (자바스크립트나 CSS로 구현하던 것을 이 태그로 간단히 해결 가능)

2. <details> 태그 안에는 어떤 내용이라도 올 수 있음.

3. <details> 태그 안 내용은 사용자가 보기 선택을 하지 않는 한, 내용이 절대 안 보여야 함.    

  단, <summary> 태그를 이용하여 <details> 태그 안 세부 내용의 머리글을 노출할 수 있음.

4. 시작태그와 종료태그로 구성

5. HTML5에 새로 도입

6. 엣지, 익스플로러 및 파이어폭스는 아직 지원 안 함.  크롬, 사파리, 오페라 최신 버전만 지원.

7. HTML5 전역속성과 이벤트 속성 지원.

8. 주요 브라우저 기본 CSS : details { display: block; }     ※ 한 줄 전체를 차지하는 block 요소로 취급.



속성과 속성값
 속성  속성값  설명  비고
 open  open  세부사항을 사용자에게 노출시킴  HTML5에서 도입

즐겨찾기 : Ctrl + D

이름
비밀번호
자동등록방지
자동등록방지 숫자를 순서대로 입력하세요.
Since 2012