XML data

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

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

정보: XML 데이터

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

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

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

<caption style="font-weight:bold; text-align:left;">Example </caption>

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

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

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

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

`block`	HTML의 DIV처럼 나타남 (머리글, 문단 등)
`inline`	HTML의 SPAN처럼 나타남 (문서의 강조)

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

<caption style="font-weight:bold; text-align:left; margin-top:1em;">More details </caption>

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

. . .

이 예제에서 주의할 점:

수퍼스크립트(superscript) 2 ("million km²" 에 있는)는 CSS파일에 \B2로 코딩되어있는 유니코드(Unicode) 문자입니다.
헤딩(heading) "Oceans"는 음수인 상단 마진(negative top margin)을 갖고 있어 보더의 상단에 디스플레이 되도록 위쪽으로 이동 됩니다.

<caption style="font-weight:bold; text-align:left;">Challenge </caption>

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

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

그럼 다음은

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

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

XML data

정보: XML 데이터

액션: XML 예제

그럼 다음은

문서 태그 및 공헌자