인터랙티브 요소
인터랙티브 요소는 사용자와 상호작용 가능한 대화형 요소이다.
<details>
디스클로저 위젯(disclosure widget)으로 정보를 감추거나, 펼쳐서 보여 준다. (보다 자세한 정보를 알려줄 때 사용)
이전에는 JavaScript로 제어해야 했지만 이제는
<deltails>요소로 구현이 가능하다.
모든 정보를 일시에 공개하지 않고 사용자의 요구에 맞춰 정보를 공개할 수 있다. (화면의 복잡함을 줄임)
아코디언(Accordion) 컴포넌트(Component)와 비슷하게 작동한다.
참고로 각주(footnote)에는 적합하지 않다.
각주에 앵커 속성의 id 값을 이용해서 해당 각주로 이동할 수 있는 방법을 앞서 배웠다.
속성
open - 페이지 로딩 시, 위젯을 펼쳐 표시하도록 설정
(open 속성을 사용하지 않을 땐 기본적으로 감춰진 형태로 표시)
예제
<summary>
<details>요소의 레이블/캡션(제목), 서머리(요약) 등을 표시한다.폼
<fieldset>요소의 제목을<legend>가 표시하듯 비슷하다.
<dialog>
다이얼로그(Dialog)는 사용자의 결정 또는 정보 입력을 요구하는 컴포넌트를 말함.
'모달 윈도우'(레이어 팝업) 또는 '대화상자'라고도 불린다.
모든 브라우저가 HTML5.2를 지원하는 것은 아니다. 사용하기 전 확인하기!
속성
open - 페이지 로딩 시, 위젯을 표시하도록 설정
(open 속성을 사용하지 않을 땐 기본적으로 감춰진 형태로 표시)
더미텍스트 (로렘입숨 Lorem-Ipsum)
콘텐츠와 텍스트가 보이는 상황을 가정해, 임의의 텍스트를 넣어서 폰트나 전체적인 레이아웃을 맞춰볼때 쓰는 용도
예제
위에서 배운 내용을 복습하여 UI를 구현한다.
Last updated
Was this helpful?