10.4 menu 요소
menu 요소는 command의 목록이나 메뉴를 만들
때 사용하는 요소로 “list”, “context”, “toolbar”와 같이 메뉴의 타입(type)을 설정하는 type 속성과 메뉴에 대한 시각적인 라벨을
설정하는 label 속성이 사용가능하며 다음과 같은 형식으로 menu
요소를 사용할 수 있습니다.
<menu type=”context | toolbar | list”>
command, button …
</menu>
방금 전 사용한
“commandEx.html”을 메모장으로 열어서
<body> 시작, 마침 태그 안에 코드를 다음과 같이 수정합니다.
<body>
<menu>
<command onclick="alert('새 파일')">새파일</command>
<command onclick="alert('파일
열기')">파일 열기</command>
<command onclick="alert('파일
저장')">파일 저장</command>
</menu>
</body>
위와 같이 작성한
후 “menuEx.html”로 저장하고 IE로 보면 다음과
같이 나타나며 각 메뉴를 클릭하면 설정된 대로 알림창이 나타나 메시지를 표시합니다.
실제로 새파일, 파일 열기, 파일 저장 같은 메뉴들이 버튼(button) 형태로 나타나도록 하기 위해서는 다음과 같이 command 요소
블록 내에 button 요소를 포함하여 코드를 수정해주면 됩니다.
<menu>
<command onclick="alert('새 파일')">
<button>새파일</button>
</command>
<command onclick="alert('파일
열기')">
<button>파일 열기</button>
</command>
<command onclick="alert('파일
저장')">
<button>파일 저장</button>
</command>
</menu>
아니면 다음과 같이 간단하게 처리를 해도 됩니다.
<menu>
<button type="button"
onclick="alert('새 파일')">새파일</button>
<button type="button"
onclick="alert('파일 열기')">파일 열기</button>
<button type="button"
onclick="alert('파일 저장')">파일 저장</button>
</menu>
둘 중 하나의
형태로 코드를 수정, 저장한 후 IE로 열어보면 다음과 같이
버튼(button)의 형태로 나타나게 됩니다.
그리고 해당
버튼을 클릭하면 알림창을 열어 설정한 메시지를 나타내게 됩니다.
마지막으로 Firefox 8 이상에서만 지원되는 menu
요소에 포함되는 menuitem 요소를 이용하여 menu
요소의 type 속성값이 context인 조금
그럴듯한 menu를 만들어볼까요?
메모장을 열어서 기본적인 코드를 작성하고 <body> … </body> 블록을
다음과 같이 작성합니다.
<body>
<div contextmenu="yourContextmenu">
<h1>menu 요소 소스보기</h1>
</div>
<menu type="context"
id="yourContextmenu">
<menuitem label="홈(Home)으로" onclick="alert('홈으로
이동할까요?')"
icon="home.png"></menuitem>
<menuitem label="다음(Daum)으로" onclick="alert('다음으로
이동할까요?')"
icon="daum.png"></menuitem>
<menuitem label="네이버(Naver)으로" onclick="alert('네이버로
이동할까요?')"
icon="daum.png"></menuitem>
</menu>
</body>
위와 같이 작성한
후 “menuContext.html”로 저장한 후 Firefox로
이를 열어보면 다음과 같이 나타납니다.
위에서 표시된 대로 마우스 오른쪽 버튼을 클릭하면 다음과 같이 context 메뉴가 나타나게 되는데 앞 부분에 이미지는 코드 상에서 명시한 아이콘 속성에 설정된 이미지입니다.
이제 해당 메뉴를
클릭하면 이미 작성한 코드대로 알림창을 띄워서 메시지를 표시하게 됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 11.2 class, id, style 속성 (0) | 2013.07.31 |
|---|---|
| 11. Global Attributes (0) | 2013.07.31 |
| 10.3 command 요소 (0) | 2013.07.31 |
| 10.2 summary 요소 (0) | 2013.07.31 |
| 10. Interactive Elements (0) | 2013.07.31 |