Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements/menu below:

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

Baseline Widely available

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>가 사용됩니다.

<menu>
  <li><button onclick="copy()">Copy</button></li>
  <li><button onclick="cut()">Cut</button></li>
  <li><button onclick="paste()">Paste</button></li>
</menu>

이는 기능적으로 다음과 다르지 않습니다.

<ul>
  <li><button onclick="copy()">Copy</button></li>
  <li><button onclick="cut()">Cut</button></li>
  <li><button onclick="paste()">Paste</button></li>
</ul>

menu,
ul {
  display: flex;
  list-style: none;
  padding: 0;
  width: 400px;
}

li {
  flex-grow: 1;
}

button {
  width: 100%;
}

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

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4