diff options
Diffstat (limited to 'files/ko/web/css/getting_started/xbl_bindings/index.html')
| -rw-r--r-- | files/ko/web/css/getting_started/xbl_bindings/index.html | 198 |
1 files changed, 0 insertions, 198 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 deleted file mode 100644 index 6799095812..0000000000 --- a/files/ko/web/css/getting_started/xbl_bindings/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -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><!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> -</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><?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> -</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> |