From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- .../css/getting_started/xbl_bindings/index.html | 198 ------------- .../ko/web/css/getting_started/xml_data/index.html | 186 ------------ .../getting_started/xul_user_interfaces/index.html | 315 --------------------- 3 files changed, 699 deletions(-) delete mode 100644 files/ko/web/css/getting_started/xbl_bindings/index.html delete mode 100644 files/ko/web/css/getting_started/xml_data/index.html delete mode 100644 files/ko/web/css/getting_started/xul_user_interfaces/index.html (limited to 'files/ko/web/css') 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 ---- -

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

-

이 테크닉을 간단한 예제에 적용시켜 봅니다.

-

정보: XBL 바인딩(bindings)

-

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

-

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

-

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

- -

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

- - - - - - - -
- More details
XBL 바인딩에 대한 더 많은 정보를 원하시면, 이 위키의 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을 만드세요. 이 스타일 시트는 문서 스타일을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣으세요.

-
-
/*** XBL demonstration ***/
-#square {
-  -moz-binding: url("square.xbl#square");
-  }
-
-
-

새로운 텍스트 파일 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;"
-  }
-
-
-

브라우저에서 문서을 열고 버튼을 누르세요.

-

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

- - - - - - - -
- - - - - - -
-

XBL demonstration

-
-
-  
-
-
-
- - - - - - -
-

XBL demonstration

-
-
-  
-
-
-
-

이 예제에서 주의할 점:

- - - - - - - - -
- 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" } ) }}

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 ---- -

이 페이지는 XML 데이터와 함께 CSS를 사용할 수 있는 방법에 대한 예제들을 담고 있습니다. -

샘플 XML 문서와 이 문서를 브라우저에 디스플레이할 때 사용할 수 있는 스타일 시트를 만듭니다. -

-

정보: XML 데이터

-

XML(확장 마크업 언어, eXtensible Markup Lanugage)는 모든 종류의 구조화 된 데이터를 위한 범용(general-purpose) 언어입니다. -

디폴트로, 모질라 브라우저는 XML을 XML파일의 원래 데이터와 매우 유사한 포맷으로 디스플레이합니다. -데이터의 구조를 정의하는 실제 택들을 볼 수 있습니다. -

CSS 스타일 시트를 XML 문서와 링크함으로써, 이를 디스플레이하는 다른 방식을 정의할 수 있습니다. -이를 위해, 스타일 시트는 XML 문서의 택들과 HTML에 의해 사용되는 디스플레이 유형들(types)에 매핑(map)시키는 규칙들을 사용합니다. -

- - -
Example -
XML 문서의 데이터는 html:input 택들을 사용합니다. 문서의 INFO 엘리먼트들이 HTML 단락처럼 디스플레이 되기 원한다고 가정합시다. -

문서의 스타일 시트에 INFO엘리먼트가 어떻게 디스플레이 될 것인지 지정합니다: -

-
-
INFO {
-  display: block;
-  margin: 1em 0;
-  }
-
-
-
-

가장 흔한 display 속성 값은 다음과 같습니다: -

- - - - -
blockHTML의 DIV처럼 나타남 (머리글, 문단 등) -
inlineHTML의 SPAN처럼 나타남 (문서의 강조) -
-

HTML에서와 같은 방식으로 폰트, 스페이싱(spacing) 그리고 다른 세부사항들을 지정하는 자기 자신의 스타일 규칙을 더하세요. -

- - -
More details -
display의 다른 값들은 그 엘리먼트를 리스트 아이템 처럼 , 또는 표의 컴포넌트(component) 처럼 디스플레이 합니다. -

디스플레이 유형들(types)의 완전한 리스트를 원하시면, CSS 규약의 The display property을 보세요. -

CSS 만을 사용하면, 디스플레이의 구조가 문서의 구조와 똑 같을 것입니다. -다른 기술을 사용해서 디스플레이 구조를 수정할 수 있습니다 — 예를 들면, XBL로 내용물을 더할 수 있으며 자바스크립트로 DOM을 수정할 수 있습니다. -

모질라에서의 XML에 관해서 더 많은 정보를 원하시면, 이 위키의 XML 페이지를 보세요. -

-
-

액션: XML 예제

-

새로운 XML 문서를 텍스트 파일 doc9.xml로 만드세요. -아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요: -

-
<?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>
-
-

새로운 CSS 문서를 텍스트 파일 style9.css로 만드세요. -아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요: -

-
/*** 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";
-  }
-
-

브라우저에서 문서를 여세요: -

- - -
-

Oceans

-

Arctic
-Area: 13,000 million km²
-Mean depth: 1,200 m

-

Atlantic
-Area: 87,000 million km²
-Mean depth: 3,900 m

-

. . .

-
-
-

이 예제에서 주의할 점: -

- - - -
Challenge -
스타일 시트를 변경해서 문서를 표로 디스플레이하게 하세요. -

(수정할 예문들을 원하시면, CSS 규약의 Tables 챕터를 보세요.)

-
-

그럼 다음은

-

이 페이지를 이해하기 어렵거나 다른 코멘트가 있다면 Discussion에 기여하세요. -

이 페이지는 입문서의 마지막 페이지입니다. -모질라에서의 CSS에 관한 더 많은 정보를 원하시면, 이 위키의 CSS 메인 페이지(main page)를 보세요. -

{{ 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 ---- -

이 페이지는 사용자 인터페이스를 만드는 모질라의 특별한 언어를 설명합니다.

-

모질라 브라우저에서 작동하는 간단한 예제를 만들어봅니다.

-

정보: 사용자 인터페이스

-

HTML가 사용자 인터페이스에 대한 지원를 하고 있으나, 하나의 독립적인 애플리케이션을 만드는데 필요한 모든 기능을 지원하고 있지는 못합니다.

-

모질라는 사용자 인터페이스를 만드는 특별한 언어를 제공함으로써 이런 제한사항을 극복하고 있습니다: 이 언어가 바로 - - XUL - 입니다. (XML 사용자-인터페이스 언어(XML User-interface Language)로서 보통 " - - 줄(zool) - "라고 읽습니다.)

-

XUL에는 많은 흔히사용되는 사용자 인터페이스가 내장되어 있습니다. 예를 들면, XUL은 대화창(dialogue), 위저드(wizard) 같은 특별한 윈도우들 뿐만아니라 상태 바(status bar), 메뉴, 툴 바(tool bar), 그리고 브라우저까지 제공합니다.

-

더 많은 특화된 기능들은 이 입문서에서 보아 온 다른 기술들(CSS 스타일, 자바스크립트 코드 그리고 XBL 바인딩)과 함께 XUL을 사용함으로써 만들어 낼 수 있습니다.

-

다른 XML-기반 언어들과 같이, XUL은 CSS 스타일 시트를 사용합니다.

- - - - - - - -
- More details
XUL 사용자 인터페이스에 관한 더 많은 정보를 원하시면, 이 위키의 XUL 페이지를 보세요.
-

액션: XUL 예제

-

새로운 XUL 문서를 텍스트 파일 doc7.xul로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

-
-
<?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>
-
-
-

새로운 CSS 파일 style7.css을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

-
-
/*** 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;
-  }
-
-
-

새로운 텍스트 파일 script7.js을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

-
-
// 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())
-    }
-  }
-
-
-

정확히 의도하신대로 결과를 보고 싶으시면, 브라우저의 디폴트 씸(default theme)을 사용하세요. 다른 씸(theme)을 사용하고 계시면, 씸이 몇가지 사용자 인터페이스 스타일을 변경해서 예제가 좀 이상하게 보일 수 도 있습니다.

-

브라우저에서 문서를 열고 인터페이스를 사용하세요.

-

이 위키페이지는 XUL과 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다.

-

다음과 같이 보입니다:

- - - - - - -
-

XUL demonstration

-
-

Day of week calculator

- - - - - - - - - - - - - - - -
Date:6/27/2005
Day:Sunday Monday Tuesday Wednesday Thurdsay Friday Saturday
  -
-

Clear Today

-
-
-
-
-

June 27, 2005

-
-
-

이 예제에서 주의할 점:

- -

문서의 스타일 시트를 잘 검토해서 그안의 모든 규칙들을 확실히 이해하도록 하세요. 이해하지 못하는 규칙이 있으면, 코멘트 아웃(comment out)한 다음 브라우저를 리프레쉬해서 문서에 나타나는 효과를 보도록 하세요.

- - - - - - - -
- Challenge
DOM 조사 도구(DOM Inspector tool)을 사용해서 Date textbox를 검사하세요. Date textbox는 XBL 바인딩으로 만들어진 다른 엘리먼트들로 이루어져 있습니다. -

html:input 엘리먼트의 - - 클래스 - 를 찾아내세요. 이 엘리먼트가 실질적으로 샤용자 입력을 받고 있습니다.

-

이 지식을 이용해서, 스타일 시트에 규칙을 하나 더해서 Date box가 키보드 포거스를 가지게 될때 배경색이 희미한 푸른색으로 되게 하세요.(그러나 키보드 포커스가 다른 데 있을 경우 힌색이 되게 하세요.)

-
-

그럼 다음은?

-

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

-

이 예제에서 대부분의 사용자 인터페이스에 공통적으로 사용되는 표준적인 사각형 도형들을 보았습니다. 모질라는 스타일을 지정하는 CSS스타일 시트를 이용하여 도형을 만들어내는 쓰는 특별한 그래픽 언어도 지원하고 있습니다. 다음 페이지에서는 이것을 실행해 봅니다: SVG graphics

-

{{ languages( { "fr": "fr/CSS/Premiers_pas/Interfaces_utilisateur_XUL", "pl": "pl/CSS/Na_pocz\u0105tek/XUL-owe_interfejsy_u\u017cytkownika" } ) }}

-- cgit v1.2.3-54-g00ecf