차례
    1. 4.11 Interactive elements
      1. 4.11.1 The details element
      2. 4.11.2 The summary element
      3. 4.11.3 The command element
      4. 4.11.4 The menu element
        1. 4.11.4.1 소개
        2. 4.11.4.2 메뉴와 툴바 생성
        3. 4.11.4.3 컨텍스트 메뉴
        4. 4.11.4.4 툴바

4.11 인터랙티브 요소들

4.11.1 The details element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
섹션 루트Sectioning root
대화형 컨텐츠Interactive content
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

플로우 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것:Content model

하나의 summary 요소. 그 뒤에 플로우 컨텐츠가 옵니다.

One summary element followed by flow content.

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
open
DOM interface:
interface HTMLDetailsElement : HTMLElement {
           attribute boolean open;
};

details 요소는 사용자가 추가적인 정보를 얻거나 컨트롤할 수 있는 노출된 위젯을 나타냅니다.

The details element represents a disclosure widget from which the user can obtain additional information or controls.

details 요소는 각주footnote로 사용하기에 적합하지 않습니다. 각주를 마크업하는 상세는 해당 섹션을 참고하시기 바랍니다.

The details element is not appropriate for footnotes. Please see the section on footnotes for details on how to mark up footnotes.

summary 요소를 포함하고 있다면 그중 첫번째 것이 details 요소의 요약이나 범례를 나타냅니다.

The first summary element child of the element, if any, represents the summary or legend of the details. If there is no child summary element, the user agent should provide its own legend (e.g. "Details").

내용 속성 open불리언 속성입니다. 이 속성을 사용하면 details 요소가 나타내는 세부 사항이 사용자에게 노출됩니다. 속성이 존재하지 않는다면 세부 사항은 노출되지 않습니다.

The open content attribute is a boolean attribute. If present, it indicates that the details are to be shown to the user. If the attribute is absent, the details are not to be shown.

If the attribute is removed, then the details should be hidden. If the attribute is added, the details should be shown.

The user agent should allow the user to request that the details be shown or hidden. To honor a request for the details to be shown, the user agent must set the open attribute on the element to the value open. To honor a request for the details to be hidden, the user agent must remove the open attribute from the element.

The open attribute must reflect the open content attribute.

진척 리포트에서 기술적인 세부 사항을 숨기기 위해 details 요소를 사용했습니다.

The following example shows the details element being used to hide technical details in a progress report.

<section class="progress window">
 <h1>Copying "Really Achieving Your Childhood Dreams"</h1>
 <details>
  <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
  <dl>
   <dt>Transfer rate:</dt> <dd>452KB/s</dd>
   <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
   <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
   <dt>Duration:</dt> <dd>01:16:27</dd>
   <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
   <dt>Dimensions:</dt> <dd>320×240</dd>
  </dl>
 </details>
</section>

몇몇 컨트롤을 기본적으로 숨기기 위해 details 요소를 사용했습니다.

The following shows how a details element can be used to hide some controls by default:

<details>
 <summary><label for=fn>Name & Extension:</label></summary>
 <p><input type=text id=fn name=fn value="Pillar Magazine.pdf">
 <p><label><input type=checkbox name=ext checked> Hide extension</label>
</details>

이것을 다른 details 요소와 함께 써서 목록의 제목만 보여주고 필요하면 각각을 열도록 할 수 있습니다.

One could use this in conjuction with other details in a list to allow the user to collapse a set of fields down to a small set of headings, with the ability to open each one.

이 예제의 요약은 어떤 컨트롤이 바뀔 수 있는지만 요약하며 실제 값에 대해서는 요약하지 않았으므로 좋은 예제라고는 할 수 없습니다.

In these examples, the summary really just summarises what the controls can change, and not the actual values, which is less than ideal.

4.11.2 The summary element

요소가 속하는 범주Categories
없음None
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used
details 요소의 자식 요소로As the first child of a details element.
이 요소가 포함할 수 있는 것:Content model
구문 컨텐츠Phrasing content
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
DOM interface:
Uses HTMLElement.

summary 요소는 부모인 details 요소에 자신을 제외한 내용이 있다면, 그에 대한 요약, 캡션, 범례를 나타냅니다.

The summary element represents a summary, caption, or legend for the rest of the contents of the summary element's parent details element, if any.

4.11.3 The command element

요소가 속하는 범주Categories
메타데이터Metadata content
플로우 컨텐츠Flow content
구문 컨텐츠Phrasing content
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

메타데이터 컨텐츠가 사용될 수 있는 곳

Where metadata content is expected.

구문 컨텐츠가 사용될 수 있는 곳

Where phrasing content is expected.

이 요소가 포함할 수 있는 것:Content model
이 요소는 비어 있어야 합니다.Empty
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
type
label
icon
disabled
checked
radiogroup
Also, the title attribute has special semantics on this element.
DOM interface:
interface HTMLCommandElement : HTMLElement {
           attribute DOMString type;
           attribute DOMString label;
           attribute DOMString icon;
           attribute boolean disabled;
           attribute boolean checked;
           attribute DOMString radiogroup;
};

command 요소는 사용자가 실행할 수 있는 명령을 나타냅니다.

The command element represents a command that the user can invoke.

커맨드는 menu 요소를 통해 컨텍스트 메뉴나 툴바의 일부가 될 수 있으며, 또한 페이지의 어떤 곳에서든 사용될 수 있는데, 이러한 경우에는 키보드 단축키를 정의합니다.

A command can be part of a context menu or toolbar, using the menu element, or can be put anywhere else in the page, to define a keyboard shortcut.

type 속성으로 이러한 명령의 종류를 지정합니다. 행동과 연관된 일반적인 명령, 토글될 수 있는 상태/옵션, 목록으로부터 하나의 아이템을 선택하는 것 등입니다.

The type attribute indicates the kind of command: either a normal command with an associated action, or a state or option that can be toggled, or a selection of one item from a list of items.

속성은 나열 속성이며 3개의 키워드와 상태를 갖습니다. command 키워드는 Command 상태, checkbox 키워드는 Checkbox 상태, radio 키워드는 Radio 상태를 각각 나타냅니다. 속성을 생략하였다면 기본값은 Command 상태입니다.

The attribute is an enumerated attribute with three keywords and states. The "command" keyword maps to the Command state, the "checkbox" keyword maps to the Checkbox state, and the "radio" keyword maps to the Radio state. The missing value default is the Command state.

The Command state

요소는 연결된 액션을 갖는 일반적인 명령을 나타냅니다.

The element represents a normal command with an associated action.

The Checkbox state

요소는 토글 가능한 옵션, 혹은 상태를 나타냅니다.

The element represents a state or option that can be toggled.

The Radio state

요소는 목록중에서 하나의 아이템을 고르는 선택을 나타냅니다.

The element represents a selection of one item from a list of items.

label 속성으로 커맨드를 명명하며 그것이 사용자에게 보여집니다. label 속성은 반드시 명시되어야 하며, 빈 문자열이 아닌 값을 가져야 합니다.

The label attribute gives the name of the command, as shown to the user. The label attribute must be specified and must have a value that is not the empty string.

title 속성으로 사용자에게 보여졌을때 도움이 될 만한, 커맨드를 설명하는 힌트를 제공합니다.

The title attribute gives a hint describing the command, which might be shown to the user to help him.

icon 속성은 커맨드를 나타낼 그림을 지정합니다. 속성을 사용하였다면, 값은 유효한 URL이어야 합니다.

The icon attribute gives a picture that represents the command. If the attribute is specified, the attribute's value must contain a valid non-empty URL potentially surrounded by spaces. To obtain the absolute URL of the icon when the attribute's value is not the empty string, the attribute's value must be resolved relative to the element. When the attribute is absent, or its value is the empty string, or resolving its value fails, there is no icon.

disabled 속성은 불리언 속성입니다. 존재한다면, 커맨드가 현재 상태에서 사용 불가능함을 나타냅니다.

The disabled attribute is a boolean attribute that, if present, indicates that the command is not available in the current state.

disabled와 hidden의 구별은 모호합니다. disabled의 경우, 동일한 문맥에서, 상황이 변경된 점이 있다면, 다시 활성화될 수 있을 것입니다. 하지만 동일한 상황에서, 커맨드가 hidden 이라면, 그것은 어떠한 방법으로도 활성화시킬 수 없을 것입니다. 수도꼭지에 관한 컨텍스트 메뉴를 하나 상상해 봅시다. "연다" 라는 명령은, 수도꼭지에서 이미 물이 나오고 있다면, disabled 가 되어야 할 것입니다. 하지만 "물을 마신다" 라는 명령은, 수돗물을 마실수는 없으니까 hidden으로 설정해야 할 것입니다.

The distinction between disabled and hidden is subtle. A command would be disabled if, in the same context, it could be enabled if only certain aspects of the situation were changed. A command would be marked as hidden if, in that situation, the command will never be enabled. For example, in the context menu for a water faucet, the command "open" might be disabled if the faucet is already open, but the command "eat" would be marked hidden since the faucet could never be eaten.

checked 속성은 불리언 속성입니다. 사용되었다면, 커맨드가 선택되었음을 나타냅니다. 속성은 type 속성이 checkbox, radio 상태가 아니라면 사용할 수 없습니다.

The checked attribute is a boolean attribute that, if present, indicates that the command is selected. The attribute must be omitted unless the type attribute is in either the Checkbox state or the Radio state.

radiogroup 속성은, 커맨드 자신이 토글되었을 때 토글될 커맨드 그룹을 명명합니다. 이름의 초점은 부모 요소의 자손의 목록입니다. type 속성이 radio 일 때에만 이 속성을 사용할 수 있습니다.

The radiogroup attribute gives the name of the group of commands that will be toggled when the command itself is toggled, for commands whose type attribute has the value "radio". The scope of the name is the child list of the parent element. The attribute must be omitted unless the type attribute is in the Radio state.

The type IDL attribute must reflect the content attribute of the same name, limited to only known values.

The label, icon, disabled, checked, and radiogroup IDL attributes must reflect the respective content attributes of the same name.

The element's activation behavior depends on the value of the type attribute of the element, as follows:

If the type attribute is in the Checkbox state

If the element has a checked attribute, the UA must remove that attribute. Otherwise, the UA must add a checked attribute, with the literal value checked. The UA must then fire a click event at the element.

If the type attribute is in the Radio state

If the element has a parent, then the UA must walk the list of child nodes of that parent element, and for each node that is a command element, if that element has a radiogroup attribute whose value exactly matches the current element's (treating missing radiogroup attributes as if they were the empty string), and has a checked attribute, must remove that attribute.

Then, the element's checked attribute attribute must be set to the literal value checked and the user agent must fire a click event at the element.

Otherwise

The element has no activation behavior.

Firing a synthetic click event at the element does not cause any of the actions described above to happen.

command 요소들은, 메뉴의 일부분이 아니라면 렌더링되지 않습니다.

command elements are not rendered unless they form part of a menu.

여기에 3개의 버튼을 가진 툴바의 예제가 있습니다. 사용자가 왼쪽, 중앙, 오른쪽 정렬 사이를 토글한다고 가정해 봅시다. 텍스트 에디터에 보통 있는 것입니다. 3개의 버튼 뒤에는 세퍼레이터(서브메뉴 사이의 구분선)와 "publish" 라고 명명된 버튼이 있습니다(버튼은 비활성화 되어 있습니다)

Here is an example of a toolbar with three buttons that let the user toggle between left, center, and right alignment. One could imagine such a toolbar as part of a text editor. The toolbar also has a separator followed by another button labeled "Publish", though that button is disabled.

<menu type="toolbar">
 <command type="radio" radiogroup="alignment" checked="checked"
          label="Left" icon="icons/alL.png" onclick="setAlign('left')">
 <command type="radio" radiogroup="alignment"
          label="Center" icon="icons/alC.png" onclick="setAlign('center')">
 <command type="radio" radiogroup="alignment"
          label="Right" icon="icons/alR.png" onclick="setAlign('right')">
 <hr>
 <command type="command" disabled
          label="Publish" icon="icons/pub.png" onclick="publish()">
</menu>
요소가 속하는 범주Categories
플로우 컨텐츠Flow content

요소의 type 속성이 toolbar 상태인 경우: 대화형 컨텐츠

If the element's type attribute is in the toolbar state: Interactive content.

이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

구문 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것:Content model
0개 이상의 li 요소Zero or more li elements.
또는, 플로우 컨텐츠 Flow content.
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
type
label
DOM interface:
interface HTMLMenuElement : HTMLElement {
           attribute DOMString type;
           attribute DOMString label;
};

menu 요소는 커맨드 목록을 나타냅니다.

The menu element represents a list of commands.

type 속성은 나열 속성이며 선언되는 메뉴의 종류를 나타냅니다. 속성은 3개의 상태 - context, toolbar, list 를 가집니다. 각각의 상태는 동일한 이름의 키워드에 연결됩니다. 속성을 생략하였을 경우의 기본값은 list 상태입니다. 이것은 단순히 커맨드의 목록일 뿐이며, 컨텍스트 메뉴를 선언하거나 툴바를 정의하는 것이 아닙니다.

The type attribute is an enumerated attribute indicating the kind of menu being declared. The attribute has three states. The context keyword maps to the context menu state, in which the element is declaring a context menu. The toolbar keyword maps to the toolbar state, in which the element is declaring a toolbar. The attribute may also be omitted. The missing value default is the list state, which indicates that the element is merely a list of commands that is neither declaring a context menu nor defining a toolbar.

요소의 type 속성이 context 상태라면, 요소는 컨텍스트 메뉴를 나타내며, 사용자는 컨텍스트 메뉴가 활성화 되었을때에만 커맨드들과 상호작용할 수 있습니다.

If a menu element's type attribute is in the context menu state, then the element represents the commands of a context menu, and the user can only interact with the commands if that context menu is activated.

요소의 type 속성이 toolbar 상태라면, 요소는 툴바 메뉴를 나타내며 사용자는 즉시 이것을 사용할 수 있습니다.

If a menu element's type attribute is in the toolbar state, then the element represents a list of active commands that the user can immediately interact with.

요소의 type 속성이 list 상태라면, 요소는 순서 없는 목록을 나타내거나, 그렇지 않을 수 있습니다. 전자의 경우 각각의 커맨드는 li 요소로 나타내어지며, 각각의 아이템은 사용자가 수행하거나 활성화시킬 수 있는 커맨드를 나타냅니다. 요소가 li 자손 요소를 갖지 않는다면 후자의 경우가 되는데, 이 경우 요소는 사용 가능한 커맨드들을 설명하는 플로우 컨텐츠를 나타냅니다.

If a menu element's type attribute is in the list state, then the element either represents an unordered list of items (each represented by an li element), each of which represents a command that the user can perform or activate, or, if the element has no li element children, flow content describing available commands.

label 속성은 메뉴에 레이블을 부여합니다. 사용자 에이전트는 UI에서 중첩된 메뉴의 레이블에 이것을 사용합니다. 예를 들어 다른 메뉴를 포함하는 컨텍스트 메뉴는 중첩된 메뉴의 label 속성을 이용하여 서브메뉴의 메뉴 레이블을 나타냅니다.

The label attribute gives the label of the menu. It is used by user agents to display nested menus in the UI. For example, a context menu containing another menu would use the nested menu's label attribute for the submenu's menu label.

The type and label IDL attributes must reflect the respective content attributes of the same name.

This section is non-normative.

menu 요소는 컨텍스트 메뉴와 툴바를 정의하기 위해 사용됩니다.

The menu element is used to define context menus and toolbars.

예를 들어, 다음은 3개의 버튼을 가진 툴바를 나타냅니다. 각각의 버튼은 몇개의 옵션을 포함하는 드롭다운 메뉴를 갖고 있습니다.

For example, the following represents a toolbar with three menu buttons on it, each of which has a dropdown menu with a series of options:

<menu type="toolbar">
 <li>
  <menu label="File">
   <button type="button" onclick="fnew()">New...</button>
   <button type="button" onclick="fopen()">Open...</button>
   <button type="button" onclick="fsave()">Save</button>
   <button type="button" onclick="fsaveas()">Save as...</button>
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="ecopy()">Copy</button>
   <button type="button" onclick="ecut()">Cut</button>
   <button type="button" onclick="epaste()">Paste</button>
  </menu>
 </li>
 <li>
  <menu label="Help">
   <li><a href="help.html">Help</a></li>
   <li><a href="about.html">About</a></li>
  </menu>
 </li>
</menu>

지원되는 사용자 에이전트에서는, 이렇게 보일 것입니다.

In a supporting user agent, this might look like this:

A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'.

구형 사용자 에이전트에서는, 위의 것이 3개의 아이템을 가진 불릿 리스트로 보일 것입니다.

In a legacy user agent, the above would look like a bulleted list with three items, the first of which has four buttons, the second of which has three, and the third of which has two nested bullet points with two items consisting of links.


다음은 흡사한 툴바를 구현합니다. 버튼은 하나 있고, 이것을 선택하면 사용자는 웹사이트로 되돌려집니다.

The following implements a similar toolbar, with a single button whose values, when selected, redirect the user to Web sites.

<form action="redirect.cgi">
 <menu type="toolbar">
  <label for="goto">Go to...</label>
  <menu label="Go">
   <select id="goto">
    <option value="" selected="selected"> Select site: </option>
    <option value="http://www.apple.com/"> Apple </option>
    <option value="http://www.mozilla.org/"> Mozilla </option>
    <option value="http://www.opera.com/"> Opera </option>
   </select>
   <span><input type="submit" value="Go"></span>
  </menu>
 </menu>
</form>

지원되는 사용자 에이전트에서는 위의 예제와 비슷한 행동을 하지만, 구형 사용자 에이전트에서는 하나의 select 요소와 제출 버튼으로 보일 것입니다. 제출 버튼은 툴바 안에 나타나지는 않는데, 이것이 menu, 혹은 그 li 자식 요소의 직접적인 자손이 아니기 때문입니다.

The behavior in supporting user agents is similar to the example above, but here the legacy behavior consists of a single select element with a submit button. The submit button doesn't appear in the toolbar, because it is not a direct child of the menu element or of its li children.

4.11.4.2 메뉴와 툴바 생성

A menu (or toolbar) consists of a list of zero or more of the following components:

The list corresponding to a particular menu element is built by iterating over its child nodes. For each child node in tree order, the required behavior depends on what the node is, as follows:

An element that defines a command
Append the command to the menu, respecting its facets.
An hr element
An option element that has a value attribute set to the empty string, and has a disabled attribute, and whose textContent consists of a string of one or more hyphens (U+002D HYPHEN-MINUS)
Append a separator to the menu.
An li element
A label element
Iterate over the children of the element.
A menu element with no label attribute
A select element
Append a separator to the menu, then iterate over the children of the menu or select element, then append another separator.
A menu element with a label attribute
An optgroup element with a label attribute
Append a submenu to the menu, using the value of the element's label attribute as the label of the menu. The submenu must be constructed by taking the element and creating a new menu for it using the complete process described in this section.
Any other node
Ignore the node.

Once all the nodes have been processed as described above, the user agent must the post-process the menu as follows:

  1. Except for separators, any menu item with no label, or whose label is the empty string, must be removed.
  2. Any sequence of two or more separators in a row must be collapsed to a single separator.
  3. Any separator at the start or end of the menu must be removed.
4.11.4.3 컨텍스트 메뉴

contextmenu 속성은 요소의 컨텍스트 메뉴를 반환합니다. 값은 DOM 에서 menu 요소의 ID 여야 합니다.

The contextmenu attribute gives the element's context menu. The value must be the ID of a menu element in the DOM. If the node that would be obtained by the invoking the getElementById() method using the attribute's value as the only argument is null or not a menu element, then the element has no assigned context menu. Otherwise, the element's assigned context menu is the element so identified.

When an element's context menu is requested (e.g. by the user right-clicking the element, or pressing a context menu key), the user agent must apply the appropriate rules from the following list:

If the user requested a context menu using a pointing device

The user agent must dispatch an event with the name contextmenu, that bubbles and is cancelable, and that uses the MouseEvent interface, at the element for which the menu was requested. The context information of the event must be set to the same values as the last MouseEvent user interaction event that was dispatched as part of the gesture that that was interpreted as a request for the context menu.

Otherwise

The user agent must fire a synthetic mouse event named contextmenu that bubbles and is cancelable at the element for which the menu was requested.

Typically, therefore, the firing of the contextmenu event will be the default action of a mouseup or keyup event. The exact sequence of events is UA-dependent, as it will vary based on platform conventions.

The default action of the contextmenu event depends on whether the element or one of its ancestors has a context menu assigned (using the contextmenu attribute) or not. If there is no context menu assigned, the default action must be for the user agent to show its default context menu, if it has one.

If the element or one of its ancestors does have a context menu assigned, then the user agent must fire a simple event named show at the menu element of the context menu of the nearest ancestor (including the element itself) with one assigned.

The default action of this event is that the user agent must show a context menu built from the menu element.

The user agent may also provide access to its default context menu, if any, with the context menu shown. For example, it could merge the menu items from the two menus together, or provide the page's context menu as a submenu of the default menu.

If the user dismisses the menu without making a selection, nothing in particular happens.

If the user selects a menu item that represents a command, then the UA must invoke that command's Action.

Context menus must not, while being shown, reflect changes in the DOM; they are constructed as the default action of the show event and must remain as constructed until dismissed.

User agents may provide means for bypassing the context menu processing model, ensuring that the user can always access the UA's default context menus. For example, the user agent could handle right-clicks that have the Shift key depressed in such a way that it does not fire the contextmenu event and instead always shows the default context menu.

The contextMenu attribute must reflect the contextmenu content attribute.

입력 컨트롤을 위한 컨텍스트 메뉴의 예제입니다.

Here is an example of a context menu for an input control:

<form name="npc">
 <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
 <menu type=context id=namemenu>
  <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
  <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
 </menu>
</form>

이것은 컨트롤의 컨텍스트 메뉴에 아이템을 추가합니다. 하나는 "Pick random name" 이란 이름이고, 다른 하나는 "Prefill other fields based on name" 이란 이름입니다. 이것들은 스크립트를 호출하는데, 스크립트는 이 예제에 나타나지 않습니다.

This adds two items to the control's context menu, one called "Pick random name", and one called "Prefill other fields based on name". They invoke scripts that are not shown in the example above.

4.11.4.4 툴바

When a menu element has a type attribute in the toolbar state, then the user agent must build the menu for that menu element, and use the result in the rendering.

The user agent must reflect changes made to the menu's DOM, by immediately rebuilding the menu.