mozilla
검색 결과

    More Button Features

    이번 단원에서는 버튼의 부가적인 기능들에 대해 알아 보겠습니다.

    그림 넣기

    버튼에 그림을 넣을 때는 image 속성에 URL을 지정해 주면 됩니다. 그림은 상대든 절대 URL이든 상관없이 로드되며, 읽어온 그림을 버튼에 표시합니다.

    아래의 버튼은 labelimage(happy.png)을 모두 포함하고 있습니다. 그림은 라벨의 왼쪽에 표시되는데 다른 두 가지 속성을 이용하여 그림의 위치를 바꿀 수 있습니다. 이에 대해서는 잠시 후에 설명하겠습니다.

    예제 1 : Source View

    <button label="Help" image="happy.png"/>
    

    CSS로 그림 넣기

    이미지를 지정하는 또 다른 방법은 버튼에 CSS의 list-style-image 스타일 속성을 이용하는 것입니다. 이 방법은 XUL 파일을 바꾸지 않고도 '스킨'(이 경우는 그림)을 변경할 수 있도록 고안된 것입니다. 예제는 아래와 같습니다.

    예제 2 : Source View

    <button id="find-button"
      label="Find" style="list-style-image: url('happy.png')"/>
    

    위의 예에서도 'happy.png'라는 그림이 버튼에 표시됩니다. style 속성은 HTML에서의 style 속성과 비슷하게 동작합니다. 일반적으로, style 속성은 모든 XUL 요소에 사용할 수 있습니다. 스타일 선언은 별도의 스타일 시트에 넣는 것이 좋다는 점을 명심하세요.

    그림 위치 지정하기

    기본적으로 버튼의 그림은 글씨의 왼쪽에 표시됩니다. 그림의 위치를 지정하기 위해서는 두 가지의 속성을 사용할 수 있습니다.

    dir 속성은 그림과 글씨의 방향을 제어합니다. dir 속성값을 reverse로 지정하면 그림이 글씨의 오른쪽에 출력됩니다. 반대로 normal을 사용하거나 값을 지정하지 않으면 그림은 글씨의 왼쪽에 나타납니다.

    orient 속성을 사용하면 그림과 글씨의 상하 관계를 조정할 수 있습니다. 기본값은 horizontal로 그림이 글자의 왼쪽이나 오른쪽에 표시되도록 합니다. 이 값을 vertical로 지정하면 그림이 글자의 위나 아래에 나타나게 됩니다. 이 때는 dir 속성은 위, 아래의 방향을 지정하기 위해 사용할 수 있는데 normal일 때는 그림이 글씨 위에, reverse일 때는 그림이 글씨 아래에 표시됩니다.

    예제 3 : Source View

    Image:advbtns1.png
    <button label="Left" image="happy.png"/>
    <button label="Right" image="happy.png" dir="reverse"/>
    <button label="Above" image="happy.png" orient="vertical"/>
    <button label="Below" image="happy.png" orient="vertical" dir="reverse"/>
    

    위의 예제는 앞에서 말한 네 가지 정렬 방식이 모두 사용되었습니다. 기본값을 사용할 때는 위와 같이 속성값을 지정하지 않아도 됩니다.

    특별한 내용을 가지는 버튼

    버튼 내부에는 임의의 마크업을 포함할 수 있으며 이런것들은 버튼의 안쪽에 표시됩니다. 이 기능을 자주 사용하지는 않겠지만, XUL이 제공하지 않는 사용자 정의 요소(custom element)를 만들 때 유용하게 쓰일 수 있습니다.

    아래는 두 단어가 빨간색인 버튼을 만드는 예입니다.

    예제 4 : Source View

    <button>
      <description value="This is a"/>
      <description value="rather strange" style="color: red;"/>
      <description value="button"/>
    </button>
    

    어떠한 XUL 요소도 button에 삽입될 수 있습니다. 하지만 HTML 요소들은 무시되기 때문에, 대신 description을 사용해야 합니다. 그리고 버튼에 label 속성값을 지정하면 버튼 내부의 모든 내용이 사라진다는 것에 유념하세요.

    여러분은 menulist처럼 버튼을 눌렀을때 드롭 다운 메뉴가 나오도록 하기 위해, menupopup 요소를 버튼 내부에 넣을 수 있습니다. 이 때 type 속성을 반드시 menu로 지정해야 합니다.

    예제 5 : Source View

    Image:advbtns2.png
    <button type="menu" label="Device">
      <menupopup>
        <menuitem label="Printer"/>
        <menuitem label="Mouse"/>
        <menuitem label="Keyboard"/>
      </menupopup>
    </button>
    

    위의 예를 실행시키고 버튼을 클릭하면 세 가지 항목이 있는 메뉴가 펼쳐집니다. 하지만 menulist와 달리 항목을 선택해도 버튼의 라벨은 변하지 않습니다. 이런 종류의 버튼은 각 항목마다 스크립트를 지정하여 작업을 수행하게 함으로써 메뉴처럼 사용할 수 있습니다. 메뉴에 대한 더 자세한 내용은 나중에 알아보겠습니다.

    여러분은 type 속성을 menu-button으로 지정하여 메뉴가 있는 버튼을 만들 수 있는데, 이렇게 만들어진 버튼은 위의 버튼과는 모양이 다릅니다. 위 그림의 왼쪽은 'menu'이고 두번째는 'menu-button'을 사용한 것입니다. 둘 다 메뉴를 가리키는 화살표를 가지고 있습니다. 하지만 'menu'를 사용한 버튼은 사용자가 버튼의 아무 곳이나 클릭하면 메뉴가 나타나는 반면 'menu-button'을 사용한 버튼은 사용자가 화살표를 눌러야 메뉴가 나타납니다.

    다음에서는 XUL 요소가 창내에 배치되는 방법에 대해 좀 더 자세히 알아보겠습니다.

    문서 태그 및 공헌자

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