[html]대화형 컨트롤에 대해 알아보자

대화형 컨트롤
상호작용 가능한 사용자 인터페이스 객체를 만들 때 사용할 수 있는 요소를 의미합니다.
쉽게 설명하자면 사용자(컴퓨터를 통해 화면을 보고있는 사람)가 어떤 액션을 통해서 화면과 상호작용할 수 있는 요소들을 의미합니다. 클릭을 통해 닫을 수 있는 alert 경고창, 메뉴를 열었을 때 내부에 있던 중간 메뉴들을 보여주는 것 등에 해당합니다.

 

대화형 요소(참고 표) - HTML 요소 참고서(MDN)

Element	Description
<details>	HTML <details> 요소는 "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. (클릭했을 때 상세 정보가 나오는 "세부정보" 등에서 사용 가능) - 기본 값은 false로, 콘텐츠가 닫혀있습니다.
<summary>	HTML <summary> 요소는 <details> 요소에 대한 요약, 캡션을 지정합니다. 이 요소를 클릭하면 부모인 <details> 요소가 열리거나 닫힙니다.
<dialog>	HTML <dialog> 요소는 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다.
<menu>	HTML <menu> 요소는 사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌러진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함합니다.

 

1. 사용법

(1) <details>, <summary>: 요약본

details 요소의 첫 번째 자식 요소로 summary 를 지정합니다.

<summary>에 들어가는 내용에 따라 맨 처음 보여지는 요약 정보 제목(?)의 내용이 달라집니다.

<details>
    <summary>요약내용</summary>
    <p>안에 들어갈 상세 정보를 적어줍니다.</p>
</details>

See the Pen <details>태그 by ttyeombi (@ttyeombi) on CodePen.

만약, summary 를 사용하지 않는다면 해당 브라우저에 지정되어있는 기본 요약 문자열이 보이게 됩니다.

(Chrome의 경우 "세부정보")

chrome 브라우저에 지정된 기본 요약 문자열 "세부정보"

이렇게 처음 <details>를 만들게 되면 닫혀있는 상태로 시작하는데요,

만약 열려있는 상태로 만들고 싶다면 <details>에 open 특성을 지정하면 됩니다.

<details open> <!-- open 특성 추가! -->
    <summary>요약내용</summary>
    <p>안에 들어갈 상세 정보를 적어줍니다.</p>
</details>

 

(2) <dialog>: 대화 상자 요소

<dialog> 태그는 대화 상자(dialog box)나 대화 윈도우(dialog window)를 정의할 때 사용합니다.

<dialog> 요소는 웹 페이지에서 손쉽게 팝업 대화 상자를 만들 수 있도록 해줍니다.

tabindex 특성을 <dialog> 요소에 사용해서는 안 됩니다.

* tabindex란?
키보드 접근성에 근접한 속성입니다. 어떤 엘리먼트에 키보드 포커스를 주는 가장 흔한 방법으로 사용됩니다.

tabindex="0" (0값)	속성값이 0인 경우는 탭을 눌렀을 대 포커스가 가지 않는 엘리먼트에게 포커스를 줄 수 있습니다. 예를 들어, div 영역에도 포커스를 줄 수 있다는 의미입니다.
tabindex="1~..."(양수값)	속성값이 양수(1~)인 경우는 탭을 눌렀을 대 포커스가 가는 순서를 지정해줄 수 있습니다. 숫자가 낮을 수록 우선 순위가 높습니다.
tabindex="-1"(음수값)	속성값이 -1인 경우는 반대로 탭을 눌렀을 때 포커스가 가는 엘리먼트에게 포커스를 가지 않게 할 수 있습니다. 예를 들어 링크<a href=""> 혹은 버튼<button>태그에 가던 포커스를 해제시킬 수 있습니다.

** 키보드 접근성이란?
말 그대로 스크린 리더 사용자가 키보드를 통해 웹 페이지의 정보에 접근하는 것입니다. 스크린 리더를 쓰지 않더라도 흔히 탭(tab)이나 엔터(enter)를 통해 사용하고 있습니다.

<dialog open>
	<h1>돼지 저금통</h1>
    <label for="money">지갑에 동전을 얼마 넣을까요?</label>
    <div><input name="" id="money" type="" min="0" step="100" value="100"></div>
    <div><input name="round" type="checkbox">1,000원 단위로 넣기</div>
    <button type="submit" value="saving">동전 넣기</button>
</dialog>

(결과확인)

<dialog>태그 사용 결과 화면 이미지

 

 

(3) <menu>: 명령 묶음

<menu>태그는 명령어 목록이나 메뉴를 정의합니다.

1. 문맥 메뉴나 툴바, 또는 명령어나 통제 툴 메뉴를 만들 때 사용합니다.
2. 메뉴 리스트를 스타일 줄 때엔 css를 이용하는 것이 좋습니다.
3. HTML4.01 에서는 중요성이 거의 없어서 배척하는 분위기였으나 HTML5에서는 새롭게 개념이 정의되고 2개의 속성이 새로 추가되었습니다.
4. 시작태그와 종료 태그로 구성되어 있습니다(시작 태그 : <menu>, 종료 태그 : </menu>)
5. <menu> 태그는 전역속성과 이벤트 속성을 지원합니다.

* 전역속성이란?
HTML 요소가 공통으로 사용 가능한 속성을 의미합니다.

* 이벤트 속성이란?
문서객체 속성 중 on을 붙여서 사용이 가능한 속성
참고링크 : [attribute] HTML - Event Attribute - 이벤트속성종류

<menu 속성="속성값">
	<li>
    	<menu 속성="속성값">
        	<button type="button" onclick="링크 주소">명령어</button>
            <button type="button" onclick="링크 주소">명령어</button>
            <button type="button" onclick="링크 주소">명령어</button>
        </menu>
    </li>
</menu>

속성	속성값	쓰임새	비고
label	text	메뉴에 붙이는 보이는 꼬리표	HTML5 추가
type	list toolbar context	보여줄 메뉴가 어떤 형식의 메뉴인지 지정	HTML5 추가

---

2. 스타일

summary 요소의 삼각형 스타일은 css의 list-style 속성을 이용해서 바꿀 수 있습니다.

하지만 크롬에서도 해당 방법을 지원하고 있지 않기 때문에 스타일을 바꿔야한다면 비표준 ::-webkit-details-marker 요소를 사용해야합니다.

 

그 외 요소도 모두 css를 사용하여 수정합니다.

---

3. 스크립트

details 요소는 HTML 의 일반적인 이벤트 외에도 열림/닫힘 상태로 바뀔 때 발생하는 toggle 이벤트를 지원합니다.

details.addEventListener('toggle', event ={
	if(details.open) {
    	// 요소가 열렸을 때
    }else{
    	// 요소가 닫혔을 대
    }
});

---

4. 호환

(1) <details>, <summary>

IE 에서는 <details>와 <summary> 둘 다 호환되지 않습니다.

참고링크: <details>(MDN)

(2) <dialog>

<dialog>는 호환되지 않는 브라우저가 꽤 많습니다.

PC는 chrome, edge, opera 브라우저,

모바일은 WebView Android, Chrome Android, Opera Android, Samsung Internet 에서 호환이 되고 그 외에는 호환되지 않습니다.

참고링크: <dialog>(MDN)

 

(3) <menu>

<menu>는 호환되지 않는 브라우저가 많습니다.

Firefox를 제외한 모든 브라우저에서 호환되지 않습니다.

참고링크: <menu>(MDN)