<menu>: 메뉴 요소 - HTML: Hypertext Markup Language | MDN

Toggle sidebar

Theme

OS default
Light
Dark

한국어

Remember language Learn more

<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 역할 가능한 ARIA 역할 DOM 인터페이스

플로우 콘텐츠. 요소의 자식으로 적어도 한 개 이상의 <li> 요소를 포함한다면: 뚜렷한 콘텐츠.

<li>와 <script>, <template>가 0번 이상 존재할 수 있음.

불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.

플로우 콘텐츠를 허용하는 모든 요소.

list

directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree

HTMLMenuElement

목록과 관련된 다른 HTML 요소들: <ol>, <ul>, and <li>.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2026년 4월 15일 by MDN contributors.

View this page on GitHub • Report a problem with this content

<menu>: 메뉴 요소

In this article

시도해 보기

특성

사용 일람

예시

툴바

HTML

CSS

결과

기술 요약

명세

브라우저 호환성

같이 보기

Help improve MDN