인터랙티브 요소

인터랙티브 요소는 사용자와 상호작용 가능한 대화형 요소이다.

<details>

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)

• 콘텐츠와 텍스트가 보이는 상황을 가정해, 임의의 텍스트를 넣어서 폰트나 전체적인 레이아웃을 맞춰볼때 쓰는 용도

  • 영어 https://www.lipsum.com/

  • 한글 http://hangul.thefron.me/

예제

위에서 배운 내용을 복습하여 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>

3KB

interactive-elements.zip

archive