<menu>: 메뉴 요소
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
HTML <menu> 요소는 <ul>의 의미론적 대안으로 설명되지만, 브라우저에 의해서는 <ul>과 다르지 않게 다루어집니다. <li> 요소들로 표현되는 항목들의 비정렬 목록을 나타냅니다.
시도해 보기
<div class="news">
<a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
<menu>
<li><button id="save">Save for later</button></li>
<li><button id="share">Share this news</button></li>
</menu>
</div>
.news {
background-color: bisque;
padding: 1em;
border: solid thin black;
}
menu {
list-style-type: none;
display: flex;
padding: 0;
margin-bottom: 0;
gap: 1em;
}
특성
이 요소는 전역 특성만 포함합니다.
사용 일람
<menu>와 <ul> 요소 모두 비정렬 목록을 표현합니다. 주요 차이점은 <ul>이 주로 표시를 위한 항목들을 포함하는 반면, <menu>는 상호작용을 위한 항목들을 포함하도록 의도되어 있습니다. 관련된 <menuitem> 요소는 사용이 중단되었습니다.
참고 :
HTML 사양의 초기 버전에서는 <menu> 요소가 컨텍스트 메뉴로서 사용되는 사례가 있었습니다. 이 기능은 오래되었으며 사양에는 포함되어 있지 않습니다.
예시
툴바
이 예시에서는, 편집 앱을 위한 툴바를 생성하는 데에 <menu>가 사용됩니다.
HTML
html
<menu>
<li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li>
</menu>
이는 기능적으로 다음과 다르지 않습니다.
html
<ul>
<li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li>
</ul>
CSS
css
menu,
ul {
display: flex;
list-style: none;
padding: 0;
width: 400px;
}
li {
flex-grow: 1;
}
button {
width: 100%;
}
결과
기술 요약
| 콘텐츠 카테고리 | |
|---|---|
| 가능한 콘텐츠 |
|
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허��하는 모든 요소. |
| 암시적 ARIA 역할 |
list
|
| 가능한 ARIA 역할 |
directory, group,
listbox, menu, menubar,
none, presentation,
radiogroup, tablist,
toolbar or tree
|
| DOM 인터페이스 | HTMLMenuElement |
명세
| Specification |
|---|
| HTML # the-menu-element |