Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Adding Buttons

이 절에서, 우리는 창에 간단한 버튼 몇 개를 추가하는 법을 살펴보겠습니다.

창에 버튼 추가하기

우리가 지금까지 만든 창은 안에 아무것도 없습니다, 그래서 아직까지는 재미있지 않습니다. 이 절에서, 우리는 찾기(Find)와 취소(Cancel) 버튼 둘을 추가합니다. 또한 창에 버튼을 두는 간단한 방법을 배웁니다.

HTML처럼, XUL은 UI 요소를 만드는 데 쓸 수 있는 태그가 다수 있습니다. 이 가운데 가장 기본은 button 태그입니다. 이 요소는 간단한 버튼을 만드는 데 씁니다.

button 요소에는 요소와 관련된 두 주요 프로퍼티 labelimage가 있습니다. 여러분은 하나나 둘 다 필요합니다. 이와 같이, button은 label, image만이나 label과 image 둘 다 있을 수 있습니다. 예를 들어, button은 보통 대화상자에서 확인(OK)과 취소(Cancel) 버튼에 씁니다.

button 구문

button 태그의 구문은 다음과 같습니다.

<button
    id="identifier"
    class="dialog"
    label="OK"
    image="images/image.jpg"
    disabled="true"
    accesskey="t"/>

속성은 다음과 같고, 모두 선택 속성입니다.

id 
여러분이 식별할 수 있도록 버튼에 붙이는 유일한 식별자. 여러분은 모든 요소에서 이 속성을 봅니다. 여러분이 스타일시트나 스크립트에서 버튼을 참조하고 싶다면 이를 쓰고 싶을 겁니다. 그러나, 여러분은 거의 모든 요소에 이 속성을 추가해야 합니다. 단순함을 위해 항상 이 입문서의 요소에 두지는 않습니다.
class 
버튼의 스타일 클래스. 이는 HTML에서와 같이 작동합니다. 버튼이 안에 보이는 스타일을 나타내는 데 씁니다. 이 경우에는 dialog값이 쓰입니다. 대개의 경우, 여러분은 버튼에 클래스를 쓰지 않습니다.
label 
버튼에 보이는 label. 예를 들어, 확인( OK )이나 취소( Cancel ). 이 속성을 빼면, 텍스트가 보이지 않습니다.
image 
버튼에 보이는 image의 URL. 이 속성을 빼면, image가 보이지 않습니다. 여러분은 또한 list-style-image 프로퍼티를 써서 스타일시트에 image를 지정할 수 있습니다.
disabled 
이 속성을 true로 설정하면, button이 기능하지 않습니다. 이는 보통 회색으로 텍스트를 그립니다. 버튼이 기능하지 않으면, 버튼의 기능이 수행될 수 없습니다. 이 속성을 아주 빼면, 버튼이 작동합니다. 여러분은 JavaScript를 써서 버튼의 기능 상태를 엇바꿀(switch) 수 있습니다.
accesskey 
이는 단축키(shortcut key)로 쓸 문자로 설정돼야 합니다. 이 문자는 label 텍스트에 보여야 하고 대체로 밑줄이 그려집니다. 사용자가 ALT(나 각 플랫폼마다 다른 비슷한 키)와 access key를 눌렀을 때, 버튼은 창의 어디에서나 focus를 받습니다.

button은 위에 나열된 것보다 더 많은 속성을 지원함을 유념하세요. 그 밖의 속성은 나중에 논의합니다.

버튼 예제

Example 1 : Source View

Image:buttons1.png
<button label="Normal"/>
<button label="Disabled" disabled="true"/>

위 예제는 그림(image)처럼 버튼을 생성합니다. 첫째 버튼은 보통 버튼입니다. 둘째 버튼은 기능하지 않으므로 회색으로 나옵니다.

파일 찾기(find files) 유틸리티를 위한 간단한 찾기(Find) 버튼을 만들면서 시작합니다. 아래 예제 코드는 그 방법을 보입니다.

<button id="find-button" label="Find"/>
Firefox는 웹 페이지에서 chrome 창 열기를 허용하지 않으므로, 입문서의 View 링크는 보통 브라우저 창에 열림을 유념하세요. 이 때문에, button은 창을 가로질러 늘어나 보입니다. 여러분은 늘어남을 막기 위해 window 태그에 align="start"를 추가할 수 있습니다.
findfile.xul 예제

우리가 이전 절에서 만든 findfile.xul 파일에 이 코드를 추가합시다. 코드는 window 태그 사이에 삽입이 필요합니다. 추가한 코드는 아래에 빨간 색으로 보입니다.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="findfile-window"
    title="Find Files"
    orient="horizontal"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <button id="find-button" label="Find"/>
  <button id="cancel-button" label="Cancel"/>

</window>
Image:buttons2.png

여러분은 취소(Cancel) 버튼 또한 추가됐음을 알아챌 겁니다. 창은 두 버튼이 서로 곁에 보이도록 horizontal 방향을 주었습니다. 혹시 여러분이 Mozilla에서 그 파일을 열면, 여기 보이는 그림 같은 것을 얻습니다.

 

우리가 XUL 파일에 직접 텍스트 label을 넣지 않았음을 유념하세요. 우리는 텍스트가 쉽게 번역될 수 있도록 대신 엔티티를 쓸 겁니다.

다음 절에서, 우리는 XUL 창에 label과 image를 추가하는 법을 알아보겠습니다.

같이 보기 more button fetaures

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: teoli, Suguni, Netaras
 최종 변경: teoli,