Adding Labels and Images

공헌자 숫자: 3명

이 절은 창에 label과 image를 추가하는 법을 기술합니다. 게다가, 그룹에 요소를 포함하는 법을 살펴봅니다.

Text 요소

여러분은 태그 없이는 XUL 파일에 바로 텍스트를 끼워 넣고 표시되기를 기대할 수 없습니다. 여러분을 이런 목적을 위해 XUL 요소 둘을 쓸 수 있습니다.

Label 요소

창에 텍스트를 포함하는 가장 기본 방법은 label 요소를 쓰는 겁니다. 예제를 아래에 보입니다.

Example 1 : Source View

<label value="This is some text"/>

value 속성(attribute)은 여러분이 표시되길 바라는 텍스트를 지정하는 데 쓸 수 있습니다. 텍스트는 넘겨지지(wrap) 않아서 오직 한 줄에 보입니다. 이는 짧은 텍스트 절에 어울립니다.

Description 요소

더 긴 텍스트를 위해, 여러분은 열고 닫는 description 태그 안에 content를 둘 수 있습니다. label 요소와 value 속성으로 지정된 텍스트와는 달리, child 텍스트는 필요하다면 여러 줄로 넘겨집니다. 넘겨짐(wrapping)을 보기 위해 창 크기를 조정해 보세요. HTML처럼, 줄바꿈(line break)과 여분 공백(whitespace)은 space 하나로 축약됩니다. 우리가 더 쉽게 넘겨짐을 볼 수 있도록 나중에 요소의 너비를 강제하는 법을 알아봅니다.

Example 2 : Source View

<description>
  This longer section of text is displayed.
</description>

내부에서, label 요소와 description 요소 둘은 같습니다. 이는 label은 여러분이 태그 안에 둔 텍스트가 넘겨질 수 있고 description은 value 속성이 있을 수 있음을 뜻합니다. label 요소 text field와 같은 컨트롤(control)의 label을 위한 목적입니다. description 요소는 dialog 상자의 상단에 informative text와 같은 other descriptive text를 위한 목적입니다. 관례에 따라, 여러분은 이 지침을 따르면 좋습니다.

Control 속성

여러분은 to set which control the label is associated with control 속성을 쓸 수 있습니다. 사용자가 label을 클릭할 때, 그 컨트롤이 focus를 받습니다. control 속성값을 focus 받을 요소의 id로 설정하세요.

Example 3 : Source View

<label value="Click here:" control="open-button"/>
<button id="open-button" label="Open"/>

위 예제에서, label을 클릭하면 button이 focus를 받게 됩니다.

Image

HTML처럼, XUL은 창 안에 image를 표시하는 요소가 있습니다. 이 요소는 어울리게 image로 이름 지었습니다. 태그 이름이 HTML( img 대신 image )과 다름을 유념하세요. 여러분은 image 파일의 URL을 지정하기 위해 src 속성을 쓸 수 있습니다. 아래 예제는 이를 보입니다.

<image src="images/banner.jpg"/>

비록 여러분이 이 구문을 쓸 수 있을지라도, image URL을 설정하기 위해 스타일시트를 쓰는 것이 더 낫습니다. 더 나중 절에서 스타일시트 쓰는 법을 설명하지만 예제는 완결함을 위해 여기에 보입니다. 여러분은 image URL을 설정하기 위해 list-style-image CSS 프로퍼티를 쓸 수 있습니다. 여기 예제가 있습니다.

XUL:
 <image id="image1"/>
 <image id="search"/>
Style Sheet:
 #image1 {
   list-style-image: url("chrome://findfile/skin/banner.jpg");
 }

 #search {
   list-style-image: url("http://example.com/images/search.png");
 }

이 이미지들은 findfile 꾸러미(package)용 skin의 chrome 디렉토리에서 났습니다. image가 skin에 따라 바뀌기 때문에, 여러분은 보통 skin 디렉토리에 image를 둘 겁니다.

다음 절에서, 우리는 창에 입력 컨트롤을 추가하는 법을 배웁니다.

문서 태그 및 공헌자

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