mozilla
검색 결과

    More Menu Features

     

    이번 단원에서는 하위 메뉴와 체크 메뉴를 만드는 방법을 알아 보겠습니다.

    하위 메뉴 만들기

    여러분은 기존에 있는 요소들을 사용하여 다른 메뉴 내에 있는 서브메뉴(중첩 메뉴)를 만들 수 있습니다. menupopup안에는 어떤 요소든 넣을 수 있다는 것을 기억해보세요. 지난 단원에서는 menupopup안에 menuitemmenuseparator를 넣는 방법을 알아 보았습니다. 그러나 여러분은 menupopup 요소내에 menu를 넣기만 하면 하위 메뉴를 만들 수 있습니다. 이것은 menu 요소가 꼭 메뉴바의 바로 아래에 있지 않더라도 유효한 것이기 때문에 동작하게 됩니다. 아래는 File 메뉴내에 간단한 하위 메뉴가 존재하는 예제입니다.

    예제 1 : Source View

    Image:menubar-ex3.png
    <toolbox flex="1">
      <menubar id="sample-menubar">
        <menu id="file-menu" label="File">
          <menupopup id="file-popup">
            <menu id="new-menu" label="New">
              <menupopup id="new-popup">
                <menuitem label="Window"/>
                <menuitem label="Message"/>
              </menupopup>
            </menu>
            <menuitem label="Open"/>
            <menuitem label="Save"/>
            <menuseparator/>
            <menuitem label="Exit"/>
          </menupopup>
        </menu>
      </menubar>
    </toolbox>
    

    우리의 파일 찾기 예제에 메뉴 추가하기

    이제 파일 찾기 대화창에 메뉴를 넣어 봅시다. 우리는 File 메뉴와 Edit 메뉴에 간단한 명령 몇 가지를 넣을 것입니다. 이 방법은 위의 예제와 비슷합니다.

    <toolbox>
    
     <menubar id="findfiles-menubar">
      <menu id="file-menu" label="File" accesskey="f">
        <menupopup id="file-popup">
          <menuitem label="Open Search..." accesskey="o"/>
          <menuitem label="Save Search..." accesskey="s"/>  
          <menuseparator/>
          <menuitem label="Close" accesskey="c"/>
        </menupopup>
      </menu>
      <menu id="edit-menu" label="Edit" accesskey="e">
        <menupopup id="edit-popup">
          <menuitem label="Cut" accesskey="t"/>
          <menuitem label="Copy" accesskey="c"/>
          <menuitem label="Paste" accesskey="p" disabled="true"/>
        </menupopup>
      </menu>
     </menubar>
    
    <toolbar id="findfiles-toolbar>
    
    Image:menubar1.png

    여기서 여러개의 명령을 가진 두 개의 메뉴를 만들었습니다. 툴박스 내에 어떻게 메뉴바가 추가되었는지를 유심히 보세요. Open Search와 Save Search 뒤에 불은 세 개의 점은 사용자가 해당 명령을 선택할 때 대화창이 열릴것이라는 것을 알려주는 일반적인 방법입니다. 각 메뉴와 메뉴 항목에는 접근글쇠(Access key)가 지정되어 있습니다. 그림을 보면 지정된 글자가 메뉴 제목에 밑줄로 표시된 것을 알 수 있습니다. 또 붙이기(Paste) 명령은 현재 사용불가 상태입니다. 우리는 아무 것도 붙일 것이 없다고 가정할 것입니다.

    지금까지의 파일 찾기 예제 : Source View

    메뉴에 체크 표시 넣기

    많은 프로그램들에서는 체크할 수 있는 메뉴를 사용합니다. 예를 들어 현재 사용하고 있는 기능은 명령 옆에 체크가 있고 그렇지 않은 기능은 체크가 없는 메뉴 같은 것입니다. 사용자가 메뉴를 선택하면 체크 상태가 바뀝니다. 또 메뉴 항목에 라디오 버튼을 넣고 싶을 때도 있을 것입니다.

    체크 메뉴를 만드는 방법은 checkboxradio를 만드는 방법과 비슷합니다. 이를 위해서는 두 개의 속성이 필요한데, type 속성은 체크의 형식을 지정할 때, name 속성은 관련된 명령을 하나로 묶을 때 사용합니다. 아래는 체크 항목을 가진 메뉴를 만드는 예제입니다.

    예제 2 : Source View

    <toolbox>
      <menubar id="options-menubar">
        <menu id="options_menu" label="Options">
          <menupopup>
            <menuitem label="Make Backups" type="checkbox"/>
            <menuitem label="Email Administrator" type="checkbox" checked="true"/>
          </menupopup>
        </menu>
      </menubar>
    </toolbox>
    

    메뉴 항목이 체크될 수 있도록 type 속성이 추가되었습니다. 해당 속성값을 checkbox로 설정하면 메뉴 항목을 클릭할 때마다 체크가 설정/해제됩니다.

    라디오버튼이 있는 메뉴

    일반 체크 외에도 type 속성의 값을 radio로 지정하면 라디오 형식의 체크를 만들 수 있습니다. 라디오 체크는 한 그룹의 메뉴 항목 중 하나만 선택할 수 있도록 만들 때 사용됩니다. 예를 들면 한번에 하나의 글꼴만 선택할 수 있는 글꼴 메뉴 같은 것입니다. 이 때 다른 항목이 선택되면 이전에 선택되었던 항목은 체크가 해제됩니다.

    여러 개의 메뉴 항목을 하나의 그룹으로 묶을 때는 각 메뉴 항목의 name 속성을 같은 값으로 지정하면 됩니다. 아래 예제를 보겠습니다.

    예제 3 : Source View

    <toolbox>
      <menubar id="planets-menubar">
        <menu id="planet-menu" label="Planet">
          <menupopup>
            <menuitem id="jupiter" label="Jupiter" type="radio" name="ringed"/>
            <menuitem id="saturn" label="Saturn" type="radio" name="ringed" checked="true"/>
            <menuitem id="uranus" label="Uranus" type="radio" name="ringed"/>
            <menuseparator/>
            <menuitem id="earth" label="Earth" type="radio" name="inhabited" checked="true"/>
            <menuitem id="moon" label="Moon" type="radio" name="inhabited"/>
          </menupopup>
        </menu>
      </menubar>
    </toolbox>
    

    예제를 실행시키면, 처음 세 개의 메뉴 항목 중 한 가지만 선택할 수 있다는 것을 알게 될 것입니다. 이 메뉴 항목들은 모두 동일한 name 속성값을 가지고 있기 때문에 하나의 그룹으로 엮인 것입니다. 마지막 메뉴 항목인 Earth는 라디오 메뉴이지만 name 속성값이 다르기 때문에 그 무리에 속하지 않습니다.

    물론 하나의 그룹 항목들은 모두 동일한 메뉴 안에 있어야 합니다. 꼭 붙어 있어야 할 필요는 없지만, 상식적으로 생각할 때 서로 붙어 있는 것이 좋을 것입니다.

    다음 단원에서는 팝업 메뉴를 작성하는 방법에 대해 알아보겠습니다.

    문서 태그 및 공헌자

    태그: 
    Contributors to this page: teoli, Suguni
    최종 변경: teoli,