본문으로 바로가기

사용자들과 상호작용하기 위해서 준비된 요소들에 대해 설명합니다.

인터랙티브 컨트롤

인터랙티브 컨트롤(interactive control)은 사용자가 입력한 데이터를 브라우저나 서버로 전송하기 위한 도구다. 과거에는 데이터 전송을 위해 폼이나 자바스크립트를 이용해야만 했다. 웹이 점점 애플리케이션화 되면서 웹 문서 어느 곳에서든 데이터 전송이 이루어질 필요가 있었고, 이를 위해 새롭게 details, summary, command, menu 요소가 제안되었다.

DETAILS 요소

details 요소는 HTML5에 새롭게 추가된 요소로서 세부사항(DETAILS)을 표시한다. 이 요소를 사용하면 세부사항을 선택적으로 보여줄 수 있다. 사용자가 요약(summary)을 선택하면 숨겨져 있던 세부사항이 나타나도록 구성하는 기법인데 W3C에서는 디스클로저 위젯(diclosure widget)이라고 부르고 있다.

<details>
    <summary>Copyright 1999-2011.</summary>
    <p> - by Refsnes Data. All Rights Reserved.</p>
    <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
Copyright 1999-2011.

- by Refsnes Data. All Rights Reserved.

All content and graphics on this web site are the property of the company Refsnes Data.

  • summary 요소와 함께 사용된다.
  • 별도의 자바스크립트 없이 브라우저에서 직접 구현할 수 있게 되었다.

open 속성

open 속성은세부사항을 표시된 상태로 지정한다. 기본적으로 dtails 요소는 세부사항을 숨겨진 상태로 표시한다. 이것은 사용자 선택이 있어야만 세부사항을 보여주겠다는 의도이므로 사용자 선택없이 세부사항을 보여주고자 한다면 open 속성을 사용해야 한다.

<details open="open">
    <summary>Copyright 1999-2011.</summary>
    <p> - by Refsnes Data. All Rights Reserved.</p>
    <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
Copyright 1999-2011.

- by Refsnes Data. All Rights Reserved.

All content and graphics on this web site are the property of the company Refsnes Data.

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
미지원 미지원 SF6 지원 미지원

SUMMARY 요소

summary 요소는 요약(SUMMARY)을 표시한다. 여기에서의 요약은 details 요소로 제공되는 세부사항에 대한 요약 또는 제목을 의미한다.

  • "요약-세부"라는 관계를 제대로 전달하기 위해서는 details 요소 다음에 곧바로 summary 요소가 이어져야 한다.
  • 위의 details 요소 참조

MENU 요소

menu 요소는 메뉴(MENU)를 표시한다. 주로 메뉴바, 툴바, 컨텍스트 메뉴등에서 사용된다.

<menu type="toolbar">
<li>
<menu label="File">
<button type="button" onclick="file_new()">New...</button>
<button type="button" onclick="file_open()">Open...</button>
<button type="button" onclick="file_save()">Save</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button" onclick="edit_cut()">Cut</button>
<button type="button" onclick="edit_copy()">Copy</button>
<button type="button" onclick="edit_paste()">Paste</button>
</menu>
</li>
</menu>

아직 지원하는 브라우저가 없다

type 속성

type 속성은 메뉴 타입을 지정한다. 이 속성에 의해 menu 요소의 표현 형태가 결정되는데 아직 menu 요소를 지원하는 브라우저가 없어서 어떻게 표현되는지 정확하게 알 수 없다.

  • type="list" : 속성값을 list로 지정하면 리스트 메뉴가 만들어진다. 리스트 메뉴의 리스트는 일반적인 항목으로 구성된 리스트가 아니라 명령어 리스트이다. 이 값이 기본값이다.
  • type="context" : 속성값을 context로 지정하면 컨텍스트 메뉴가 만들어진다. 마우스 우측버튼을 눌렀을 때 나타나는 메뉴처럼 컨텍스트 메뉴는 특정 상황을 지원하기 위한 명령어 리스트만으로 구성된 메뉴를 의미한다.
  • type="toolbar" : 속성값을 toolbar로 지정하면 툴바 메뉴가 만들어진다. 툴바는 자주 이용하는 명령어를 별도로 모아두는 곳이다.

label 속성

label 속성은 메뉴 이름을 지정한다. 이 속성은 서브 메뉴를 포함하고 있는 메뉴에 적용된다.

COMMAND 요소

command 요소는 명령 버튼(COMMAND button)을 표시한다. 명령 버튼은 복사, 삭제, 인쇄 등 명령을 호출하는 버튼이다. 이 요소를 사용하면 form 요소로 정의되지 않는 곳에서도 컨트롤 요소를 제공할 수 있다.

<menu>
    <command type="command" label="Save" onclick="save()">Save</command>
</menu>
  • 이 요소는 반드시 menu 요소내에서만 사용될 수 있다.

아직 지원하는 브라우저가 없다.

type 속성

type 속성은 명령타입을 지정한다. 이 속성에 의해 command 요소의 표현 형태가 결정된다.

  • type="command" : 속성값을 command로 지정하면 명령 버튼이 만들어진다.(기본값)
  • type="checkbox" : 속성값을 checkbox로 지정하면 체크박스가 만들어진다.
  • type="radio" : 속성값을 radio로 지정하면 라디오 버튼이 만들어진다.

icon 속성

icon 속성은 명령을 표현하기 아이콘을 지정한다. 속성값은 이미지 파일이 있는 주소다.

<menu>
    <command type="radio" label="Left" icon="left.png" onclick="setAlign('left')">Left</command>
</menu>

radiogroup 속성

radiogroup 속성은 라디오 버튼이 적용된 command 요소의 그룹 이름을 지정한다. 이 속성은 command 요소 중 type="radio"인 command 요소에만 지정할 수 있으며 같은 속성값을 가진 command 요소가 서로 연결되어 작동할 수 있게 한다.

<menu>
    <command type="radio" label="Left" radiogroup="alignment" onclick="setAlign('left')">Left</command>
</menu>