이 페이지는 모질라에서 CSS를 사용하여 복잡한 애플리케이션의 구조를 향상시켜 코드와 자원(resources)을 보다 쉽게 재사용(recycle)할 수 있게 만드는 방법을 설명합니다.

정보: XBL 바인딩(bindings)

마크업 언어와 CSS에서 제공되는 구조(structure)는 각 부분이 독립적이고(self-contained) 재 사용되어야 하는 복잡한 애플리케이션에 이상적이라고는 할 수 없습니다. 스타일 시트들을 다른 파일들에 저장할 수 있고, 스크립트들도 다른 파일들에 저장 해 놓을 수 있으나, 문서에서 이들 파일들을 하나의 전체로서 링크해야만 합니다.

또 다른 구조적 제한사항은 내용물에 관한 것입니다. CSS를 사용하여 선택된 엘리먼트들에 내용물을 제공해 줄 수 있으나, 내용물은 텍스트와 이미지에 한정되어 있으며, 그 위치지정은(positioning) 선택된 엘리먼트의 앞 또는 뒤로 한정되어 있습니다.

모질라는 이러한 제한 사항들을 극복할 미케니즘을 제공합니다: XBL (XML 바인딩 언어, XML Binding Language)가 바로 그것입니다. XBL을 사용해서 선택된 엘리먼트를 다음의 것들과 링크시킬 수 있습니다:

문서 레벨에서 모든것을 링크시키는 것을 피할 수 있기 때문에, 유지와 재사용이 쉬운 독립적인 부분들을 만들어 낼 수 있습니다.

액션: XBL 예제

More details
XBL 바인딩에 대한 더 많은 정보를 원하시면, 이 위키의 XBL 페이지를 보세요.

새로운 HTML 문서 doc6.html를 만드세요. 아래의 내용물을 복사해서 붙여넣으세요.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>

<HEAD>
<TITLE>Mozilla CSS Getting Started - XBL demonstration</TITLE>
<LINK rel="stylesheet" type="text/css" href="style6.css"></strong>
</HEAD>

<BODY>
<H1>XBL demonstration</H1>
<DIV id="square">Click Me</DIV>
</BODY>

</HTML>

새로운 CSS 파일 style6.css을 만드세요. 이 스타일 시트는 문서 스타일을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣으세요.

새로운 텍스트 파일 square.xbl을 만드세요. 이 스타일 시트는 XBL 바인딩(binding)을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

<?xml version="1.0"?>
<!DOCTYPE bindings>
<bindings xmlns="http://www.mozilla.org/xbl">

<binding id="square">

  <resources>
    <stylesheet src="bind6.css"/>
    </resources>

  <content xmlns="http://www.w3.org/1999/xhtml">
    <div anonid="square"/>
    <button anonid="button" type="button">
      <xbl:children/>
      </button>
    </content>

  <implementation>

    <field name="square"><![CDATA[
      document.getAnonymousElementByAttribute(this, "anonid", "square")
      ]]></field>

    <field name="button"><![CDATA[
      document.getAnonymousElementByAttribute(this, "anonid", "button")
      ]]></field>

    <method name="doDemo">
      <body><![CDATA[
        this.square.style.backgroundColor = "#cf4"
        this.square.style.marginLeft = "20em"
        this.button.setAttribute("disabled", "true")
        setTimeout(this.clearDemo, 2000, this)
        ]]></body>
      </method>

    <method name="clearDemo">
      <parameter name="me"/>
      <body><![CDATA[
        me.square.style.backgroundColor = "transparent"
        me.square.style.marginLeft = "0"
        me.button.removeAttribute("disabled")
        ]]></body>
      </method>

    </implementation>

  <handlers>
    <handler event="click" button="0"><![CDATA[
     if (event.originalTarget == this.button) this.doDemo()
     ]]></handler>
    </handlers>

  </binding>

</bindings>

새로운 CSS 파일 bind6.css을 만드세요. 이 새 스타일 시트는 바인딩에대한 스타일(style for the binding)을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣으세요.

/*** XBL demonstration ***/
[anonid="square"] {
  width: 20em;
  height: 20em;
  border: 2px inset gray;
  }

[anonid="button"] {
  margin-top: 1em;
  padding: .5em 2em;"
  }

이 위키페이지는 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 버튼을 누른 전과 후가 대략 다음과 같이 보입니다:

그럼 다음은?

Challenges
XBL 파일을 수정해서 사각형(square)이 색이 바뀔 때 오른쪽으로 점핑하는 대신 폭이(width) 2배가 되도록 하세요. DOM Inspector tool을 사용하여 문서를 조사해서 추가된 내용물을 확인해 보세요.

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

이 문서에서, 사각형(square)과 버튼은 독립적인 HTML 문서내에서 작동하는 위젯(widget) 이 되었습니다. 모질라는 사용자 인터페이스를 만들어내는 데 특별한 마크업 언어를 가지고 있습니다. 다음 페이지에서는 이것을 실행해 봅니다: XUL user interfaces

{{ languages( { "fr": "fr/CSS/Premiers_pas/Liaisons_XBL", "pl": "pl/CSS/Na_pocz\u0105tek/Wi\u0105zania_XBL" } ) }}