initial commit

1 files changed, 198 insertions, 0 deletions

diff --git a/files/ko/web/css/getting_started/xbl_bindings/index.html b/files/ko/web/css/getting_started/xbl_bindings/index.html
new file mode 100644
index 0000000000..6799095812
--- /dev/null
+++ b/files/ko/web/css/getting_started/xbl_bindings/index.html
@@ -0,0 +1,198 @@
+---
+title: XBL bindings
+slug: Web/CSS/Getting_Started/XBL_bindings
+tags:
+  - 'CSS:Getting_Started'
+translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets
+---
+<p>이 페이지는 모질라에서 CSS를 사용하여 복잡한 애플리케이션의 구조를 향상시켜 코드와 자원(resources)을 보다 쉽게 재사용(recycle)할 수 있게 만드는 방법을 설명합니다.</p>
+<p>이 테크닉을 간단한 예제에 적용시켜 봅니다.</p>
+<h3 id=".EC.A0.95.EB.B3.B4:_XBL_.EB.B0.94.EC.9D.B8.EB.94.A9.28bindings.29" name=".EC.A0.95.EB.B3.B4:_XBL_.EB.B0.94.EC.9D.B8.EB.94.A9.28bindings.29">정보: XBL 바인딩(bindings)</h3>
+<p>마크업 언어와 CSS에서 제공되는 구조(structure)는 각 부분이 독립적이고(self-contained) 재 사용되어야 하는 복잡한 애플리케이션에 이상적이라고는 할 수 없습니다. 스타일 시트들을 다른 파일들에 저장할 수 있고, 스크립트들도 다른 파일들에 저장 해 놓을 수 있으나, 문서에서 이들 파일들을 하나의 전체로서 링크해야만 합니다.</p>
+<p>또 다른 구조적 제한사항은 내용물에 관한 것입니다. CSS를 사용하여 선택된 엘리먼트들에 내용물을 제공해 줄 수 있으나, 내용물은 텍스트와 이미지에 한정되어 있으며, 그 위치지정은(positioning) 선택된 엘리먼트의 앞 또는 뒤로 한정되어 있습니다.</p>
+<p>모질라는 이러한 제한 사항들을 극복할 미케니즘을 제공합니다:
+ <i>
+  XBL</i>
+ (XML 바인딩 언어, XML Binding Language)가 바로 그것입니다. XBL을 사용해서 선택된 엘리먼트를 다음의 것들과 링크시킬 수 있습니다:</p>
+<ul>
+ <li>에리먼트의 스타일 시트</li>
+ <li>엘리먼트의 내용물</li>
+ <li>엘리먼트의 속성(property)과 메소드(method)</li>
+ <li>엘리먼트의 이벤트 핸들러(event hadler)</li>
+</ul>
+<p>문서 레벨에서 모든것을 링크시키는 것을 피할 수 있기 때문에, 유지와 재사용이 쉬운 독립적인 부분들을 만들어 낼 수 있습니다.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
+ <caption>
+  More details</caption>
+ <tbody>
+  <tr>
+   <td>XBL 바인딩에 대한 더 많은 정보를 원하시면, 이 위키의 <a href="ko/XBL">XBL</a> 페이지를 보세요.</td>
+  </tr>
+ </tbody>
+</table>
+<h3 id=".EC.95.A1.EC.85.98:_XBL_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_XBL_.EC.98.88.EC.A0.9C">액션: XBL 예제</h3>
+<p>새로운 HTML 문서 <code>doc6.html</code>를 만드세요. 아래의 내용물을 복사해서 붙여넣으세요.</p>
+<div style="width: 48em;">
+ <pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+
+&lt;HEAD&gt;
+&lt;TITLE&gt;Mozilla CSS Getting Started - XBL demonstration&lt;/TITLE&gt;
+&lt;LINK rel="stylesheet" type="text/css" href="style6.css"&gt;&lt;/strong&gt;
+&lt;/HEAD&gt;
+
+&lt;BODY&gt;
+&lt;H1&gt;XBL demonstration&lt;/H1&gt;
+&lt;DIV id="square"&gt;Click Me&lt;/DIV&gt;
+&lt;/BODY&gt;
+
+&lt;/HTML&gt;
+</pre>
+</div>
+<p>새로운 CSS 파일 <code>style6.css</code>을 만드세요. 이 스타일 시트는 문서 스타일을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣으세요.</p>
+<div style="width: 48em;">
+ <pre>/*** XBL demonstration ***/
+#square {
+  -moz-binding: url("square.xbl#square");
+  }
+</pre>
+</div>
+<p>새로운 텍스트 파일 <code>square.xbl</code>을 만드세요. 이 스타일 시트는 XBL 바인딩(binding)을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p>
+<p> </p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+ <pre>&lt;?xml version="1.0"?&gt;
+&lt;!DOCTYPE bindings&gt;
+&lt;bindings xmlns="http://www.mozilla.org/xbl"&gt;
+
+&lt;binding id="square"&gt;
+
+  &lt;resources&gt;
+    &lt;stylesheet src="bind6.css"/&gt;
+    &lt;/resources&gt;
+
+  &lt;content xmlns="http://www.w3.org/1999/xhtml"&gt;
+    &lt;div anonid="square"/&gt;
+    &lt;button anonid="button" type="button"&gt;
+      &lt;xbl:children/&gt;
+      &lt;/button&gt;
+    &lt;/content&gt;
+
+  &lt;implementation&gt;
+
+    &lt;field name="square"&gt;&lt;![CDATA[
+      document.getAnonymousElementByAttribute(this, "anonid", "square")
+      ]]&gt;&lt;/field&gt;
+
+    &lt;field name="button"&gt;&lt;![CDATA[
+      document.getAnonymousElementByAttribute(this, "anonid", "button")
+      ]]&gt;&lt;/field&gt;
+
+    &lt;method name="doDemo"&gt;
+      &lt;body&gt;&lt;![CDATA[
+        this.square.style.backgroundColor = "#cf4"
+        this.square.style.marginLeft = "20em"
+        this.button.setAttribute("disabled", "true")
+        setTimeout(this.clearDemo, 2000, this)
+        ]]&gt;&lt;/body&gt;
+      &lt;/method&gt;
+
+    &lt;method name="clearDemo"&gt;
+      &lt;parameter name="me"/&gt;
+      &lt;body&gt;&lt;![CDATA[
+        me.square.style.backgroundColor = "transparent"
+        me.square.style.marginLeft = "0"
+        me.button.removeAttribute("disabled")
+        ]]&gt;&lt;/body&gt;
+      &lt;/method&gt;
+
+    &lt;/implementation&gt;
+
+  &lt;handlers&gt;
+    &lt;handler event="click" button="0"&gt;&lt;![CDATA[
+     if (event.originalTarget == this.button) this.doDemo()
+     ]]&gt;&lt;/handler&gt;
+    &lt;/handlers&gt;
+
+  &lt;/binding&gt;
+
+&lt;/bindings&gt;
+</pre>
+</div>
+<p>새로운 CSS 파일 <code>bind6.css</code>을 만드세요. 이 새 스타일 시트는 바인딩에대한 스타일(style for the binding)을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣으세요.</p>
+<div style="width: 48em;">
+ <pre>/*** XBL demonstration ***/
+[anonid="square"] {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  }
+
+[anonid="button"] {
+  margin-top: 1em;
+  padding: .5em 2em;"
+  }
+</pre>
+</div>
+<p>브라우저에서 문서을 열고 버튼을 누르세요.</p>
+<p>이 위키페이지는 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 버튼을 누른 전과 후가 대략 다음과 같이 보입니다:</p>
+<table>
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;">
+    <table style="border: 2px outset #36b; padding: 0 4em .5em .5em;">
+     <tbody>
+      <tr>
+       <td>
+        <p><b>XBL demonstration</b></p>
+        <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white; margin-right: 5em;">
+         <div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;">
+           </div>
+        </div>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table style="border: 2px outset #36b; padding: 0 4em .5em .5em;">
+     <tbody>
+      <tr>
+       <td>
+        <p><b>XBL demonstration</b></p>
+        <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #cf4; margin-left: 5em;">
+         <div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;">
+           </div>
+        </div>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>이 예제에서 주의할 점:</p>
+<ul>
+ <li>HTML 문서는 전처럼 문서의 스타일 시트에 링크되어 있습니다. 그러나 어떤 자바스크립트 코드에도 링크되어 있지 않습니다.</li>
+ <li>문서는 아무 버튼도 포함하고 있지 않습니다. 문서는 버튼 레이블(label)의 텍스트만을 포함하고 있습니다. 버튼은 바인딩(binding)에 의해서 더해집니다.</li>
+ <li>문서 스타일 시트는 바인딩(binding)에 링크되어 있습니다.</li>
+ <li>바인딩(binding)은 그 자신의 스타일에 링크되어 있고, 그 자신의 내용물과 자바스크립트 코드를 지원합니다. 따라서, 바인딩은 독립적으로(self-contained) 되어있습니다.</li>
+</ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;">
+ <caption>
+  Challenges</caption>
+ <tbody>
+  <tr>
+   <td>XBL 파일을 수정해서 사각형(square)이 색이 바뀔 때 오른쪽으로 점핑하는 대신 폭이(width) 2배가 되도록 하세요.
+    <p>DOM Inspector tool을 사용하여 문서를 조사해서 추가된 내용물을 확인해 보세요.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4>
+<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a>Discussion</a> page.</p>
+<p>이 문서에서, 사각형(square)과 버튼은 독립적인 HTML 문서내에서 작동하는
+ <i>
+  위젯(widget)</i>
+ 이 되었습니다. 모질라는 사용자 인터페이스를 만들어내는 데 특별한 마크업 언어를 가지고 있습니다. 다음 페이지에서는 이것을 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></b></p>
+<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Liaisons_XBL", "pl": "pl/CSS/Na_pocz\u0105tek/Wi\u0105zania_XBL" } ) }}</p>