diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
| commit | a065e04d529da1d847b5062a12c46d916408bf32 (patch) | |
| tree | fe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/ko/web/css | |
| parent | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff) | |
| download | translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.gz translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.bz2 translated-content-a065e04d529da1d847b5062a12c46d916408bf32.zip | |
update based on https://github.com/mdn/yari/issues/2028
Diffstat (limited to 'files/ko/web/css')
3 files changed, 0 insertions, 699 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> diff --git a/files/ko/web/css/getting_started/xml_data/index.html b/files/ko/web/css/getting_started/xml_data/index.html deleted file mode 100644 index fc674a29e4..0000000000 --- a/files/ko/web/css/getting_started/xml_data/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: XML data -slug: Web/CSS/Getting_Started/XML_data -tags: - - 'CSS:Getting_Started' -translation_of: Archive/Beginner_tutorials/XML_data ---- -<p>이 페이지는 XML 데이터와 함께 CSS를 사용할 수 있는 방법에 대한 예제들을 담고 있습니다. -</p><p>샘플 XML 문서와 이 문서를 브라우저에 디스플레이할 때 사용할 수 있는 스타일 시트를 만듭니다. -</p> -<h3 id=".EC.A0.95.EB.B3.B4:_XML_.EB.8D.B0.EC.9D.B4.ED.84.B0" name=".EC.A0.95.EB.B3.B4:_XML_.EB.8D.B0.EC.9D.B4.ED.84.B0"> 정보: XML 데이터 </h3> -<p><i><a href="ko/XML">XML</a></i>(확장 마크업 언어, eXtensible Markup Lanugage)는 모든 종류의 구조화 된 데이터를 위한 범용(general-purpose) 언어입니다. -</p><p>디폴트로, 모질라 브라우저는 XML을 XML파일의 원래 데이터와 매우 유사한 포맷으로 디스플레이합니다. -데이터의 구조를 정의하는 실제 택들을 볼 수 있습니다. -</p><p>CSS 스타일 시트를 XML 문서와 링크함으로써, 이를 디스플레이하는 다른 방식을 정의할 수 있습니다. -이를 위해, 스타일 시트는 XML 문서의 택들과 HTML에 의해 사용되는 디스플레이 유형들(types)에 매핑(map)시키는 규칙들을 사용합니다. -</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> -<caption>Example -</caption><tbody><tr> -<td> XML 문서의 데이터는 <code>html:input</code> 택들을 사용합니다. 문서의 <small>INFO</small> 엘리먼트들이 HTML 단락처럼 디스플레이 되기 원한다고 가정합시다. -<p>문서의 스타일 시트에 <small>INFO</small>엘리먼트가 어떻게 디스플레이 될 것인지 지정합니다: -</p> -<div style="width: 30em;"> -<pre class="eval">INFO { - display: block; - margin: 1em 0; - } -</pre> -</div> -</td></tr></tbody></table> -<p>가장 흔한 <code>display</code> 속성 값은 다음과 같습니다: -</p> -<table style="margin-left: 2em;"> -<tbody><tr> -<td style="padding-right: 2em;"><code>block</code></td><td>HTML의 <small>DIV</small>처럼 나타남 (머리글, 문단 등) -</td></tr> -<tr> -<td><code>inline</code></td><td>HTML의 <small>SPAN</small>처럼 나타남 (문서의 강조) -</td></tr></tbody></table> -<p>HTML에서와 같은 방식으로 폰트, 스페이싱(spacing) 그리고 다른 세부사항들을 지정하는 자기 자신의 스타일 규칙을 더하세요. -</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> -<caption>More details -</caption><tbody><tr> -<td> <code>display</code>의 다른 값들은 그 엘리먼트를 리스트 아이템 처럼 , 또는 표의 컴포넌트(component) 처럼 디스플레이 합니다. -<p>디스플레이 유형들(types)의 완전한 리스트를 원하시면, CSS 규약의 <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a>을 보세요. -</p><p>CSS 만을 사용하면, 디스플레이의 구조가 문서의 구조와 똑 같을 것입니다. -다른 기술을 사용해서 디스플레이 구조를 수정할 수 있습니다 — 예를 들면, XBL로 내용물을 더할 수 있으며 자바스크립트로 DOM을 수정할 수 있습니다. -</p><p>모질라에서의 XML에 관해서 더 많은 정보를 원하시면, 이 위키의 <a href="ko/XML">XML</a> 페이지를 보세요. -</p> -</td></tr></tbody></table> -<h3 id=".EC.95.A1.EC.85.98:_XML_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_XML_.EC.98.88.EC.A0.9C"> 액션: XML 예제 </h3> -<p>새로운 XML 문서를 텍스트 파일 <code>doc9.xml</code>로 만드세요. -아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요: -</p> -<div style="width: 48em; height: 12em; overflow: auto;"><pre><?xml version="1.0"?> -<!-- XML demonstration --> - -<?xml-stylesheet type="text/css" href="style9.css"?> - -<!DOCTYPE planet> -<planet> - -<ocean> -<name>Arctic</name> -<area>13,000</area> -<depth>1,200</depth> -</ocean> - -<ocean> -<name>Atlantic</name> -<area>87,000</area> -<depth>3,900</depth> -</ocean> - -<ocean> -<name>Pacific</name> -<area>180,000</area> -<depth>4,000</depth> -</ocean> - -<ocean> -<name>Indian</name> -<area>75,000</area> -<depth>3,900</depth> -</ocean> - -<ocean> -<name>Southern</name> -<area>20,000</area> -<depth>4,500</depth> -</ocean> - -</planet> -</pre></div> -<p>새로운 CSS 문서를 텍스트 파일 <code>style9.css</code>로 만드세요. -아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요: -</p> -<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** XML demonstration ***/ - -planet:before { - display: block; - width: 8em; - font-weight: bold; - font-size: 200%; - content: "Oceans"; - margin: -.75em 0px .25em -.25em; - padding: .1em .25em; - background-color: #cdf; - } - -planet { - display: block; - margin: 2em 1em; - border: 4px solid #cdf; - padding: 0px 1em; - background-color: white; - } - -ocean { - display: block; - margin-bottom: 1em; - } - -name { - display: block; - font-weight: bold; - font-size: 150%; - } - -area { - display: block; - } - -area:before { - content: "Area: "; - } - -area:after { - content: " million km\B2"; - } - -depth { - display: block; - } - -depth:before { - content: "Mean depth: "; - } - -depth:after { - content: " m"; - } -</pre></div> -<p>브라우저에서 문서를 여세요: -</p> -<table style="border: 2px outset #36b; padding: 1em;"> -<tbody><tr> -<td><div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;"> -<p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Oceans</p> -<p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><b>Arctic</b><br> -Area: 13,000 million km²<br> -Mean depth: 1,200 m</p> -<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>Atlantic</b><br> -Area: 87,000 million km²<br> -Mean depth: 3,900 m</p> -<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>. . .</b></p> -</div> -</td></tr></tbody></table> -<p>이 예제에서 주의할 점: -</p> -<ul><li>수퍼스크립트(superscript) 2 ("million km²" 에 있는)는 CSS파일에 <code>\B2</code>로 코딩되어있는 유니코드(Unicode) 문자입니다. -</li><li>헤딩(heading) "Oceans"는 음수인 상단 마진(negative top margin)을 갖고 있어 보더의 상단에 디스플레이 되도록 위쪽으로 이동 됩니다. -</li></ul> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> -<caption>Challenge -</caption><tbody><tr> -<td> 스타일 시트를 변경해서 문서를 표로 디스플레이하게 하세요. -<p>(수정할 예문들을 원하시면, CSS 규약의 <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> 챕터를 보세요.) </p> -</td></tr></tbody></table> -<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80"> 그럼 다음은 </h4> -<p>이 페이지를 이해하기 어렵거나 다른 코멘트가 있다면 <a>Discussion</a>에 기여하세요. -</p><p>이 페이지는 입문서의 마지막 페이지입니다. -모질라에서의 CSS에 관한 더 많은 정보를 원하시면, 이 위키의 <a href="ko/CSS">CSS</a> 메인 페이지(main page)를 보세요. -</p>{{ languages( { "en": "en/CSS/Getting_Started/XML_data", "fr": "fr/CSS/Premiers_pas/Donn\u00e9es_XML", "pl": "pl/CSS/Na_pocz\u0105tek/Dane_XML", "pt": "pt/CSS/Como_come\u00e7ar/Dados_XML" } ) }} diff --git a/files/ko/web/css/getting_started/xul_user_interfaces/index.html b/files/ko/web/css/getting_started/xul_user_interfaces/index.html deleted file mode 100644 index cd08f23579..0000000000 --- a/files/ko/web/css/getting_started/xul_user_interfaces/index.html +++ /dev/null @@ -1,315 +0,0 @@ ---- -title: XUL user interfaces -slug: Web/CSS/Getting_Started/XUL_user_interfaces -tags: - - 'CSS:Getting_Started' -translation_of: Archive/Beginner_tutorials/XUL_user_interfaces ---- -<p>이 페이지는 사용자 인터페이스를 만드는 모질라의 특별한 언어를 설명합니다.</p> -<p>모질라 브라우저에서 작동하는 간단한 예제를 만들어봅니다.</p> -<h3 id=".EC.A0.95.EB.B3.B4:_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4" name=".EC.A0.95.EB.B3.B4:_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4">정보: 사용자 인터페이스</h3> -<p>HTML가 사용자 인터페이스에 대한 지원를 하고 있으나, 하나의 독립적인 애플리케이션을 만드는데 필요한 모든 기능을 지원하고 있지는 못합니다.</p> -<p>모질라는 사용자 인터페이스를 만드는 특별한 언어를 제공함으로써 이런 제한사항을 극복하고 있습니다: 이 언어가 바로 - <i> - XUL</i> - 입니다. (XML 사용자-인터페이스 언어(XML User-interface Language)로서 보통 " - <i> - 줄(zool)</i> - "라고 읽습니다.)</p> -<p>XUL에는 많은 흔히사용되는 사용자 인터페이스가 내장되어 있습니다. 예를 들면, XUL은 대화창(dialogue), 위저드(wizard) 같은 특별한 윈도우들 뿐만아니라 상태 바(status bar), 메뉴, 툴 바(tool bar), 그리고 브라우저까지 제공합니다.</p> -<p>더 많은 특화된 기능들은 이 입문서에서 보아 온 다른 기술들(CSS 스타일, 자바스크립트 코드 그리고 XBL 바인딩)과 함께 XUL을 사용함으로써 만들어 낼 수 있습니다.</p> -<p>다른 XML-기반 언어들과 같이, XUL은 CSS 스타일 시트를 사용합니다.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> - <caption> - More details</caption> - <tbody> - <tr> - <td>XUL 사용자 인터페이스에 관한 더 많은 정보를 원하시면, 이 위키의 <a href="ko/XUL">XUL</a> 페이지를 보세요.</td> - </tr> - </tbody> -</table> -<h3 id=".EC.95.A1.EC.85.98:_XUL_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_XUL_.EC.98.88.EC.A0.9C">액션: XUL 예제</h3> -<p>새로운 XUL 문서를 텍스트 파일 <code>doc7.xul</code>로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> -<div style="width: 48em; height: 12em; overflow: auto;"> - <pre><?xml version="1.0"?> -<?xml-stylesheet type="text/css" href="style7.css"?> -<!DOCTYPE window> - -<window - xmlns="http&58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" - title="CSS Getting Started - XUL demonstration" - onload="init();"> - -<script type="application/x-javascript" src="script7.js"/> - -<label class="head-1" value="XUL demonstration"/> - -<vbox> - - <groupbox class="demo-group"> - <caption label="Day of week calculator"/> - <grid> - <columns> - <column/> - <column/> - </columns> - <rows> - <row> - <label class="text-prompt" value="Date:" - accesskey="D" control="date-text"/> - <textbox id="date-text" type="timed" - timeout="750" oncommand="refresh();"/> - </row> - <row> - <label value="Day:"/> - <hbox id="day-box"> - <label class="day" value="Sunday" disabled="true"/> - <label class="day" value="Monday" disabled="true"/> - <label class="day" value="Tuesday" disabled="true"/> - <label class="day" value="Wednesday" disabled="true"/> - <label class="day" value="Thursday" disabled="true"/> - <label class="day" value="Friday" disabled="true"/> - <label class="day" value="Saturday" disabled="true"/> - </hbox> - </row> - </rows> - </grid> - <hbox class="buttons"> - <button id="clear" label="Clear" accesskey="C" - oncommand="clearDate();"/> - <button id="today" label="Today" accesskey="T" - oncommand="setToday();"/> - </hbox> - </groupbox> - - <statusbar> - <statusbarpanel id="status"/> - </statusbar> - -</vbox> - -</window> -</pre> -</div> -<p>새로운 CSS 파일 <code>style7.css</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> -<div style="width: 48em; height: 12em; overflow: auto;"> - <pre>/*** XUL demonstration ***/ -window { - -moz-box-align: start; - background-color: -moz-dialog; - font: -moz-dialog; - padding: 2em; - } - -.head-1 { - font-weight: bold; - font-size: 200%; - padding-left: 5px; - } - - -/* the group box */ -.demo-group { - padding: 1em; - } - -.demo-group grid { - margin-bottom: 1em; - } - -.demo-group column { - margin-right: .5em; - } - -.demo-group row { - margin-bottom: .5em; - } - -.demo-group .buttons { - -moz-box-pack: end; - } - - -/* the day-of-week labels */ -.day { - margin-left: 1em; - } - -.day[disabled] { - color: #777; - } - -.day:first-child { - margin-left: 4px; - } - - -/* the left column labels */ -.text-prompt { - padding-top: .25em; - } - - -/* the date input box */ -#date-text { - max-width: 8em; - } - - -/* the status bar */ -statusbar { - width: 100%; - border: 1px inset -moz-dialog; - margin: 4px; - padding: 0px 4px; - } - -#status { - padding: 4px; - } - -#status[warning] { - color: red; - } -</pre> -</div> -<p>새로운 텍스트 파일 <code>script7.js</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> -<div style="width: 48em; height: 12em; overflow: auto;"> - <pre>// XUL demonstration - -var dateBox, dayBox, currentDay, status; // elements - -// called by window onLoad -function init() { - dateBox = document.getElementById("date-text") - dayBox = document.getElementById("day-box") - status = document.getElementById("status") - setToday(); - } - -// called by Clear button -function clearDate() { - dateBox.value = "" - refresh() - } - -// called by Today button -function setToday() { - var d = new Date() - dateBox.value = (d.getMonth() + 1) - + "/" + d.getDate() - + "/" + d.getFullYear() - refresh() - } - -// called by Date textbox -function refresh() { - var d = dateBox.value - var theDate = null - - showStatus(null) - if (d != "") { - try { - var a = d.split("/") - var theDate = new Date(a[2], a[0] - 1, a[1]) - showStatus(theDate) - } - catch (ex) {} - } - setDay(theDate) - } - -// internal -function setDay(aDate) { - if (currentDay) currentDay.setAttribute("disabled", "true") - if (aDate == null) currentDay = null - else { - var d = aDate.getDay() - currentDay = dayBox.firstChild - while (d-- > 0) currentDay = currentDay.nextSibling - currentDay.removeAttribute("disabled") - } - dateBox.focus(); - } - -function showStatus(aDate) { - if (aDate == null) { - status.removeAttribute("warning") - status.setAttribute("label", "") - } - else if (aDate === false || isNaN(aDate.getTime())) { - status.setAttribute("warning", "true") - status.setAttribute("label", "Date is not valid") - } - else { - status.removeAttribute("warning") - status.setAttribute("label", aDate.toLocaleDateString()) - } - } -</pre> -</div> -<p>정확히 의도하신대로 결과를 보고 싶으시면, 브라우저의 디폴트 씸(default theme)을 사용하세요. 다른 씸(theme)을 사용하고 계시면, 씸이 몇가지 사용자 인터페이스 스타일을 변경해서 예제가 좀 이상하게 보일 수 도 있습니다.</p> -<p>브라우저에서 문서를 열고 인터페이스를 사용하세요.</p> -<p>이 위키페이지는 XUL과 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다.</p> -<p>다음과 같이 보입니다:</p> -<table style="border: 2px outset #36b; background-color: threedface; padding: 1em; cursor: default; white-space: nowrap; margin: .5em 0;"> - <tbody> - <tr> - <td> - <p style="font-size: 150%; font-weight: bold; margin: 0; padding: 0;">XUL demonstration</p> - <div style="position: relative; border: 2px groove threedhighlight; margin-top: 1em;"> - <p style="float: left; margin: -1em 0 0 .5em; padding: 0; background-color: threedface;">Day of week calculator</p> - <table style="background-color: threedface; margin: .5em; padding-right: .5em;"> - <tbody> - <tr> - <td style="padding-right: .5em;"><u>D</u>ate:</td> - <td style="background-color: white; border: 1px solid #000; width: 8em; float: left; cursor: text; padding: .15em .25em;">6/27/2005</td> - </tr> - <tr> - <td>Day:</td> - <td style="color: graytext;">Sunday <span style="color: #000;">Monday</span> Tuesday Wednesday Thurdsay Friday Saturday</td> - </tr> - <tr> - <td> </td> - <td> - <div style="float: right; margin-top: .5em;"> - <p><span style="border: 2px outset threedface; padding: .25em 1em;"><u>C</u>lear</span> <span style="border: 2px outset threedface; padding: .25em 1em;"><u>T</u>oday</span></p> - </div> - </td> - </tr> - </tbody> - </table> - </div> - <div style="border: 1px inset threedface; margin-top: 1em;"> - <p style="margin: 0; padding: .25em .5em;">June 27, 2005</p> - </div> - </td> - </tr> - </tbody> -</table> -<p>이 예제에서 주의할 점:</p> -<ul> - <li>XUL문서는 이전처럼 스타일 시트에 링크되어 있으며, 스크립트에도 링크되어 있습니다.</li> - <li>스크립트는 이 예제에서 중요하지 않습니다.</li> - <li>보게되는 대부분의 스타일은 브라우저의 씸(theme)에의해서 정해집니다.</li> -</ul> -<p>문서의 스타일 시트를 잘 검토해서 그안의 모든 규칙들을 확실히 이해하도록 하세요. 이해하지 못하는 규칙이 있으면, 코멘트 아웃(comment out)한 다음 브라우저를 리프레쉬해서 문서에 나타나는 효과를 보도록 하세요.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Challenge</caption> - <tbody> - <tr> - <td>DOM 조사 도구(DOM Inspector tool)을 사용해서 Date textbox를 검사하세요. Date textbox는 XBL 바인딩으로 만들어진 다른 엘리먼트들로 이루어져 있습니다. - <p><code>html:input</code> 엘리먼트의 - <i> - 클래스</i> - 를 찾아내세요. 이 엘리먼트가 실질적으로 샤용자 입력을 받고 있습니다.</p> - <p>이 지식을 이용해서, 스타일 시트에 규칙을 하나 더해서 Date box가 키보드 포거스를 가지게 될때 배경색이 희미한 푸른색으로 되게 하세요.(그러나 키보드 포커스가 다른 데 있을 경우 힌색이 되게 하세요.)</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>이 예제에서 대부분의 사용자 인터페이스에 공통적으로 사용되는 표준적인 사각형 도형들을 보았습니다. 모질라는 스타일을 지정하는 CSS스타일 시트를 이용하여 도형을 만들어내는 쓰는 특별한 그래픽 언어도 지원하고 있습니다. 다음 페이지에서는 이것을 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/SVG_graphics">SVG graphics</a></b></p> -<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Interfaces_utilisateur_XUL", "pl": "pl/CSS/Na_pocz\u0105tek/XUL-owe_interfejsy_u\u017cytkownika" } ) }}</p> |