diff options
Diffstat (limited to 'files/ko/web/html/global_attributes/contextmenu')
| -rw-r--r-- | files/ko/web/html/global_attributes/contextmenu/index.html | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/files/ko/web/html/global_attributes/contextmenu/index.html b/files/ko/web/html/global_attributes/contextmenu/index.html new file mode 100644 index 0000000000..819295f11b --- /dev/null +++ b/files/ko/web/html/global_attributes/contextmenu/index.html @@ -0,0 +1,121 @@ +--- +title: contextmenu +slug: Web/HTML/Global_attributes/contextmenu +tags: + - Deprecated + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contextmenu +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="warning"> +<p><a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">contextmenu 특성은 폐기되었으며</a>, 모든 브라우저에서 제거될 것입니다.</p> +</div> + +<p><code><strong>contextmenu</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 이 요소의 컨텍스트 메뉴로 사용될 {{HTMLElement("menu")}}의 <code><a href="/ko/docs/Web/HTML/Global_attributes/id">id</a></code>입니다.</p> + +<p>컨텍스트 메뉴는 마우스의 우클릭(right-click)과 같은 사용자 상호작용 중에 나타나는 메뉴를 말합니다. HTML5에서는 이 메뉴를 커스터마이징할 수 있습니다. 다음은 계층 메뉴(nested menu)를 포함한 구현 예제입니다.</p> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html; highlight:[1,10,15] notranslate"><body contextmenu="share"> + <menu type="context" id="share"> + <menu label="share"> + <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem> + <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem> + </menu> + </menu> + <ol> + <li> + Anywhere in the example you can share the page on Twitter and + Facebook using the Share menu from your context menu. + </li> + <li contextmenu="changeFont" id="fontSizing"> + On this specific list element, you can change the size of the text + by using the "Increase/Decrease font" actions from your context menu + </li> + <menu type="context" id="changeFont"> + <menuitem label="Increase Font" onclick="incFont()"></menuitem> + <menuitem label="Decrease Font" onclick="decFont()"></menuitem> + </menu> + <li contextmenu="ChangeImage" id="changeImage"> + On the image below, you can fire the "Change Image" action + in your Context Menu.<br /> + <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" + contextmenu="ChangeImage" id="promoButton" /> + <menu type="context" id="ChangeImage"> + <menuitem label="Change Image" onclick="changeImage()"></menuitem> + </menu> + </li> + </ol> +</body> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush:js notranslate">function shareViaTwitter() { + window.open("https://twitter.com/intent/tweet?text=" + + "Hurray! I am learning ContextMenu from MDN via Mozilla"); +} + +function shareViaFacebook() { + window.open("https://facebook.com/sharer/sharer.php?u=" + + "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus"); +} + +function incFont() { + document.getElementById("fontSizing").style.fontSize = "larger"; +} + +function decFont() { + document.getElementById("fontSizing").style.fontSize = "smaller"; +} + +function changeImage() { + var index = Math.ceil(Math.random() * 39 + 1); + document.images[0].src = + "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + + index + ".png"; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", "100%", 400)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "interactive-elements.html#context-menus", "contextmenu")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.global_attributes.contextmenu")}}</p> + +<p>[1] An experimental implementation was originally available via the command line option <code>--enable-blink-features=ContextMenu</code>. Until Chrome 52 and Opera 39 it was additionally available by enabling the <em>Experimental Web Platform features</em> option, but got removed from that due to a <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=412945">Web compatibility issue</a>. In June 2017, it was removed entirely from the browsers. This is documented in <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=87553">Chrome bug 87553</a>.</p> + +<p>[2] Support for the <code>contextmenu</code> attribute has been removed from Firefox Mobile ({{bug(1424252)}}).</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a></li> + <li>{{domxref("HTMLElement.contextMenu")}}</li> +</ul> |