mozilla
검색 결과

    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 속성 값은 다음과 같습니다:

    blockHTML의 DIV처럼 나타남 (머리글, 문단 등)
    inlineHTML의 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)를 보세요.

    문서 태그 및 공헌자

    Contributors to this page: Verruckt, teoli, Ioseph, Sebuls
    최종 변경: teoli,