인터랙티브 요소
인터랙티브 요소는 사용자와 상호작용 가능한 대화형 요소이다.
<details>
디스클로저 위젯(disclosure widget)으로 정보를 감추거나, 펼쳐서 보여 준다. (보다 자세한 정보를 알려줄 때 사용)
이전에는 JavaScript로 제어해야 했지만 이제는
<deltails>요소로 구현이 가능하다.
모든 정보를 일시에 공개하지 않고 사용자의 요구에 맞춰 정보를 공개할 수 있다. (화면의 복잡함을 줄임)
아코디언(Accordion) 컴포넌트(Component)와 비슷하게 작동한다.
참고로 각주(footnote)에는 적합하지 않다.
각주에 앵커 속성의 id 값을 이용해서 해당 각주로 이동할 수 있는 방법을 앞서 배웠다.
속성
open - 페이지 로딩 시, 위젯을 펼쳐 표시하도록 설정
(open 속성을 사용하지 않을 땐 기본적으로 감춰진 형태로 표시)
예제
<details open>...</details><details open>
<summary>사용자와 상호작용하는 요소</summary>
<p>
위하여서 풀밭에 청춘의 품고 가치를 그들사막이다. 가치를 넣는 열매를
커다란 방지하는 청춘얼음 부패뿐이다.
</p>
</details><summary>
<details>요소의 레이블/캡션(제목), 서머리(요약) 등을 표시한다.폼
<fieldset>요소의 제목을<legend>가 표시하듯 비슷하다.
<dialog>
다이얼로그(Dialog)는 사용자의 결정 또는 정보 입력을 요구하는 컴포넌트를 말함.
'모달 윈도우'(레이어 팝업) 또는 '대화상자'라고도 불린다.
모든 브라우저가 HTML5.2를 지원하는 것은 아니다. 사용하기 전 확인하기!
속성
open - 페이지 로딩 시, 위젯을 표시하도록 설정
(open 속성을 사용하지 않을 땐 기본적으로 감춰진 형태로 표시)
<dialog open>...</dialog><dialog open>
<button type="submit">confirm</button>
</dialog>더미텍스트 (로렘입숨 Lorem-Ipsum)
콘텐츠와 텍스트가 보이는 상황을 가정해, 임의의 텍스트를 넣어서 폰트나 전체적인 레이아웃을 맞춰볼때 쓰는 용도
예제
위에서 배운 내용을 복습하여 UI를 구현한다.
<div class="container">
<dialog class="dialog" open>
<section>
<h1 class="dialog-headline">"html5.2-video-recture.mp4" 파일 복사</h1>
<details>
<summary >복사중...<progress value="25" max="100"></progress> 25%</summary>
<dl>
<dt>초당 전송 속도: </dt>
<dd>723KB/s</dd>
<dt>로컬 파일이름: </dt>
<dd>/Desktop/html5.2-video-recture.mp4</dd>
<dt>원격 파일이름: </dt>
<dd>/Backup/html5.2-video-recture.mp4</dd>
<dt>재생시간: </dt>
<dd>00:14:38</dd>
<dt>컬러 프로파일: </dt>
<dd>HD (1-1-1)</dd>
<dt>해상도(너비×높이): </dt>
<dd>1680×1050</dd>
</dl>
</details>
</section>
</dialog>
</div>Last updated
Was this helpful?