diff options
Diffstat (limited to 'files/ko/web/css/getting_started')
5 files changed, 1038 insertions, 0 deletions
diff --git a/files/ko/web/css/getting_started/javascript/index.html b/files/ko/web/css/getting_started/javascript/index.html new file mode 100644 index 0000000000..2f9fd8f53b --- /dev/null +++ b/files/ko/web/css/getting_started/javascript/index.html @@ -0,0 +1,144 @@ +--- +title: JavaScript +slug: Web/CSS/Getting_Started/JavaScript +tags: + - 'CSS:Getting_Started' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<p>이 페이지는 입문서의 II 부입니다. II 부는 모질라에서의 CSS의 범위(scope)를 보여주는 예제들을 포함하고 있습니다.</p> +<p>II 부의 각 페이지는 CSS 가 다른 기술(technologies)들과 어떻게 상호작용하는지 설명하고 있습니다. 이 페이지들은 이들 다른 기술들을 사용하는 방법들을 가르치기위해서 디자인 되지는 않았습니다. 이 들 기술들을 자세히 배우려면 다른 입문서를 보세요.</p> +<p>대신 이 페이지들은 CSS의 다양한 사용법을 설명하기 위해서 디자인되었습니다. 이들 페이지들을 사용하려면, CSS에 대해 좀 알고 있어야만 합니다, 그러나, 다른 분야 기술들에대한 어떤 지식을 필요로하지는 않습니다.</p> +<h3 id=".EC.A0.95.EB.B3.B4:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28JavaScript.29" name=".EC.A0.95.EB.B3.B4:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28JavaScript.29">정보: 자바스크립트(JavaScript)</h3> +<p>자바스크립트(JavaScript)는 + <i> + 프로그래밍 언어</i> + 입니다. 모질라 애플리케이션( 예를 들면, 모질라 브라우저) 사용할 때, 컴퓨터가 실행시키는 코드의 많은 부분이 자바스크립트로 쓰여져 있습니다.</p> +<p>자바스크립트는 스타일 시트와 상호작용하여, 문서 스타일을 동적으로 변화시키는 프로그램을 쓸 수 있게 해줍니다.</p> +<p>이렇게 하는데 세가지 방법이 있습니다:</p> +<ul> + <li>문서의 스타일 시트 리스트와 함께 작동함으로써 — 예: 스타일 시트를 첨가, 제거, 또는 수정함으로써</li> + <li>스타일 시트의 규칙(rules)와 함께 작동함으로써 — 예: 규칙을 첨가, 제거, 또는 수정 함으로써</li> + <li>DOM내의 각 엘리먼트(element)와 함께 작동함으로써 — 예: 문서 스타일을 문서의 스타일 시트와는 독립적으로 수정함으로써</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption> + More details</caption> + <tbody> + <tr> + <td>모질라에서의 자바스트립트에 대해 더 많은 정보를 원하시면, 이 위키(wiki)에 있는 <a href="ko/JavaScript">JavaScript</a>페이지를 보세요.</td> + </tr> + </tbody> +</table> +<h3 id=".EC.95.A1.EC.85.98:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.98.88.EC.A0.9C.28demonstration.29" name=".EC.95.A1.EC.85.98:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.98.88.EC.A0.9C.28demonstration.29">액션: 자바스크립트 예제(demonstration)</h3> +<p>새로은 HTML 문서 <code>doc5.html</code>를 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Mozilla CSS Getting Started - JavaScript demonstration</TITLE> +<LINK rel="stylesheet" type="text/css" href="style5.css"> +<SCRIPT type="text/javascript" src="script5.js"></SCRIPT> +</HEAD> + +<BODY> +<H1>JavaScript sample</H1> + +<DIV id="square"></DIV> + +<BUTTON type="button" onclick="doDemo(this);">Click Me</BUTTON> + +</BODY> +</HTML> +</pre> +</div> +<p>새로운 CSS 파일 <code>style5.css</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:</p> +<div style="width: 48em;"> + <pre>/*** JavaScript demonstration ***/ +#square { + width: 20em; + height: 20em; + border: 2px inset gray; + margin-bottom: 1em; + } + +button { + padding: .5em 2em; + } +</pre> +</div> +<p>새로운 텍스트 파일 <code>script5.js</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:</p> +<div style="width: 48em;"> + <pre>// JavaScript demonstration +function doDemo (button) { + var square = document.getElementById("square") + square.style.backgroundColor = "#fa4" + button.setAttribute("disabled", "true") + setTimeout(clearDemo, 2000, button) + } + +function clearDemo (button) { + var square = document.getElementById("square") + square.style.backgroundColor = "transparent" + button.removeAttribute("disabled") + } +</pre> +</div> +<p>브라우저에서 문서을 열고 버튼을 누르세요.</p> +<p>이 위키페이지는 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 버튼을 누른 전과 후가 대략 다음과 같이 보입니다:</p> +<table> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><b>JavaScript demonstration</b></p> + <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white;"> + <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 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><b>JavaScript demonstration</b></p> + <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #fa4;"> + <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>스크립트는 DOM안의 개개의 엘리먼트(element)와 함께 작동합니다. 스크립트는 사각형(square)의 스타일을 직접 수정합니다. 스크립트는 버튼의 스타일을 속성(attribute)을 변경함으로써 간접적으로 수정합니다.</li> + <li>자바스크립트에서 <code>document.getElementById("square")</code> 는 그 기능상 CSS 선별자(selector) <code>#square</code> 와 유사합니다.</li> + <li>자바스크립트에서 <code>backgroundColor</code>는 CSS 속성 <code>background-color</code>에 상응합니다.</li> + <li>브라우저는 버튼이 사용할 수 없게 되었을 때 그 모습을 바꾸어 주는 <code>button{{ mediawiki.external('disabled=\"true\"') }}</code>에 대한 내장된 CSS 규칙을 가지고 있습니다.</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>스크립트를 변경해서 사각형(square)이 색이 변할 때 오른쪽으로 20em 점프했다가 이후 되 돌아오게 만드세요.</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>이 예제에서 HTML 문서가 단지 버튼 엘리먼트만이 스크립트를 사용함에도 불구하고 스크립트에 링크를 가지고 있었습니다. 모질라는 CSS를 확장해서 자바스크립트 코드를 (내용물과 다른 스타일 시트들도) 선택된 엘리먼트에 링크할 수 있게 합니다. 다음 페이지에서는 다음을 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/XBL_bindings">XBL bindings</a></b></p> diff --git a/files/ko/web/css/getting_started/svg_graphics/index.html b/files/ko/web/css/getting_started/svg_graphics/index.html new file mode 100644 index 0000000000..d8ca001fb2 --- /dev/null +++ b/files/ko/web/css/getting_started/svg_graphics/index.html @@ -0,0 +1,195 @@ +--- +title: SVG graphics +slug: Web/CSS/Getting_Started/SVG_graphics +tags: + - 'CSS:Getting_Started' +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +<p>이 페이지는 그래픽을 만들기 위한 특별한 언어 SVG를 설명합니다.</p> +<p>SVG 기능이 있는 모질라 브라우저에서 작동하는 간단한 예제를 만듭니다.</p> +<h3 id=".EC.A0.95.EB.B3.B4:_SVG" name=".EC.A0.95.EB.B3.B4:_SVG">정보: SVG</h3> +<p> + <i> + SVG</i> + (Scalable Vector Graphics, 스케일러블 벡터 그래픽)은 그래픽을 만들어내기 위한 XML-기반 언어입니다.</p> +<p>움직이지 않는 이미지(static image)를 위해 사용될 수 있으며, 또한 애니메이션 과 사용자 인터페이스를 위해서도 사용될 수 있습니다.</p> +<p>다른 XML-기반 언어들과 같이, SVG는 CSS 스타일 시트를 지원하여 그래픽에 사용되는 스타일을 그래픽의 내용물과 분리시킬 수 있게 합니다.</p> +<p>또한, 다른 문서 마크업 언어들과 함께 사용되는 스타일 시트들도 이미지가 요구되는 곳에 SVG 그래픽의 URL을 지정할 수 있습니다. 예를들면, HTML 문서와 함께 사용하는 스타일 시트에서 <code>background</code> 속성 값에 SVG값의 URL을 지정할 수 있습니다.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption> + More details</caption> + <tbody> + <tr> + <td>이글을 쓰는 시점에서(2005년 중반), 모질라 브라우저의 몇몇 최근 빌드만이 SVG 지원을 내장하고 있었습니다. + <p><a class="external" href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>에서 제공되는 것 같은 플럭인(plugin)을 인스톨하면 다른 버전에서도 SVG 지원을 추가할 수 있습니다.</p> + <p>모질라에서의 SVG에 관한 더많은 정보를 원하시면, 이 위키안의 <a href="ko/SVG">SVG</a> 페이지를 보세요.</p> + </td> + </tr> + </tbody> +</table> +<h3 id=".EC.95.A1.EC.85.98:_SVG_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_SVG_.EC.98.88.EC.A0.9C">액션: SVG 예제</h3> +<p>새로운 SVG 문서를 텍스트 파일 <code>doc8.svg</code>로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><?xml version="1.0" standalone="no"?> + +<?xml-stylesheet type="text/css" href="style8.css"?> + +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + +<svg width="600px" height="600px" viewBox="-300 -300 600 600" + xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + +<title>SVG demonstration</title> +<desc>Mozilla CSS Getting Started - SVG demonstration</desc> + +<defs> + <g id="segment" class="segment"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g id="quadrant"> + <use xlink:href="#segment"/> + <use xlink:href="#segment" transform="rotate(18)"/> + <use xlink:href="#segment" transform="rotate(36)"/> + <use xlink:href="#segment" transform="rotate(54)"/> + <use xlink:href="#segment" transform="rotate(72)"/> + </g> + <g id="petals"> + <use xlink:href="#quadrant"/> + <use xlink:href="#quadrant" transform="rotate(90)"/> + <use xlink:href="#quadrant" transform="rotate(180)"/> + <use xlink:href="#quadrant" transform="rotate(270)"/> + </g> + <radialGradient id="fade" cx="0" cy="0" r="200" + gradientUnits="userSpaceOnUse"> + <stop id="fade-stop-1" offset="33%"/> + <stop id="fade-stop-2" offset="95%"/> + </radialGradient> + </defs> + +<text id="heading" x="-280" y="-270"> + SVG demonstration</text> +<text id="caption" x="-280" y="-250"> + Move your mouse pointer over the flower.</text> + +<g id="flower"> + <circle id="overlay" cx="0" cy="0" r="200" + stroke="none" fill="url(#fade)"/> + <use id="outer-petals" xlink:href="#petals"/> + <use id="inner-petals" xlink:href="#petals" + transform="rotate(9) scale(0.33)"/> + </g> + +</svg> +</pre> +</div> +<p>새로운 CSS 문서를 텍스트 파일 <code>style8.css</code>로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre>/*** SVG demonstration ***/ + +/* page */ +svg { + background-color: beige; + } + +#heading { + font-size: 24px; + font-weight: bold; + } + +#caption { + font-size: 12px; + } + +/* flower */ +#flower:hover { + cursor: crosshair; + } + +/* gradient */ +#fade-stop-1 { + stop-color: blue; + } + +#fade-stop-2 { + stop-color: white; + } + +/* outer petals */ +#outer-petals { + opacity: .75; + } + +#outer-petals .segment-fill { + fill: azure; + stroke: lightsteelblue; + stroke-width: 1; + } + +#outer-petals .segment-edge { + fill: none; + stroke: deepskyblue; + stroke-width: 3; + } + +#outer-petals .segment:hover > .segment-fill { + fill: plum; + stroke: none; + } + +#outer-petals .segment:hover > .segment-edge { + stroke: slateblue; + } + +/* inner petals */ +#inner-petals .segment-fill { + fill: yellow; + stroke: yellowgreen; + stroke-width: 1; + } + +#inner-petals .segment-edge { + fill: none; + stroke: yellowgreen; + stroke-width: 9; + } + +#inner-petals .segment:hover > .segment-fill { + fill: darkseagreen; + stroke: none; + } + +#inner-petals .segment:hover > .segment-edge { + stroke: green; + } +</pre> +</div> +<p>문서를 SVG 기능이 있는(SVG-enabled) 브라우저에서 여세요. 마우스 포인터(mouse pointer)를 그래픽위로 움직여 보세요.</p> +<p>이 위키페이지는 SVG를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 다음과 같이 보입니다:</p> +<table style="border: 2px outset #36b;"> + <tbody> + <tr> + <td><img alt="SVG demonstration"></td> + </tr> + </tbody> +</table> +<p>이 예제에서 주의할 점:</p> +<ul> + <li>SVG 문서는 전처럼 스타일 시트에 링크되어 있습니다.</li> + <li>SVG는 그 자신만의 CSS 스타일 시트와 값을 가지고 있습니다. 이들중 몇가지는 HTML을 위한 CSS의 속성과 비슷합니다.</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>스타일 시트를 변경해서, 마우스 포인터가 안쪽 꽃잎들 중 한개 위에 오게 되면, 바깥 쪽 꽃잎이 작동하는 방식은 바뀌지 않은채 모든 안쪽꽃잎 색이 핑크(pink)색으로 변하게 하세요</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>이 예제에서 SVG 기능이 있는(SVG enabled) 브라우저는 이미 SVG 엘리먼트를 디스플레이하는 방법을 알고 있습니다. 스타일 시트는 단지 그 디스플레이를 특정 방식으로 수정할 뿐 입니다. 그러나 디스플레이하는 방식이 미리 지정되어 있지 않은 범용(general-purpose) XML 문서를 위해서 CSS를 사용할 수있습니다. 다음 페이지에서는 이를 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/XML_data">XML data</a></b></p> +<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Graphiques_SVG", "pl": "pl/CSS/Na_pocz\u0105tek/Grafika_SVG" } ) }}</p> 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><!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 new file mode 100644 index 0000000000..fc674a29e4 --- /dev/null +++ b/files/ko/web/css/getting_started/xml_data/index.html @@ -0,0 +1,186 @@ +--- +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 new file mode 100644 index 0000000000..cd08f23579 --- /dev/null +++ b/files/ko/web/css/getting_started/xul_user_interfaces/index.html @@ -0,0 +1,315 @@ +--- +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> |