mozilla

리비전 비교

XML data

Change Revisions

리비전 193955:

리비전 193955 Ioseph

리비전 193956:

리비전 193956 Ioseph

제목:
XML data
XML data
슬러그:
CSS/Getting_Started/XML_data
CSS/Getting_Started/XML_data
태그:
CSS:Getting_Started
CSS:Getting_Started
내용:

리비전 (193955):
리비전 (193956):
n8      This page contains an example of how you can use CSS with Xn
>ML data. 
9    </p>
10    <p>
11      You create a sample XML document, and a stylesheet that you
> can use to display it in your browser. 
12    </p>
13    <p>
n19    <h3 name="Information:_XML_data">n
20      Information: XML data
21    </h3>
n25    <p>n
26      <i><a href="ko/XML">XML</a></i> (eXtended Markup Language) 
>is a general-purpose language for any kind of structured data. 
27    </p>
28    <p>
29      By default, your Mozilla browser displays XML in a format v
>ery similar to the original data in the XML file. You see the act 
>ual tags that define the data's structure. 
30    </p>
31    <p>
32      By linking a CSS stylesheet with the XML document, you can 
>define other ways to display it. To do this, your stylesheet uses 
> rules that map tags in the XML document to the display types use 
>d by HTML. 
33    </p>
n50            Data in an XML document uses <code>html:input</code> n
>tags. You want the document's <small>INFO</small> elements to be  
>displayed like HTML paragraphs. 
51            <p>
52              XML 문서의 데이터는 <code>html:input</code> 택들을 사용합니다. 문서의32            XML 문서의 데이터는 <code>html:input</code> 택들을 사용합니다. 문서의 <
> <small>INFO</small> 엘리먼트들이 HTML 단락처럼 디스플레이 되기 원한다고 가정합시다.>small>INFO</small> 엘리먼트들이 HTML 단락처럼 디스플레이 되기 원한다고 가정합시다.
53            </p>
54            <p>
55              In the document's stylesheet, you specify how <smal
>l>INFO</small> elements are to be displayed: 
56            </p>
n73      The most common values for the <code>display</code> propertn
>y are: 
74    </p>
75    <p>
n98    <p>n
99      Add your own style rules that specify the font, spacing and
> other details in the same way as for HTML. 
100    </p>
n111            Other values of <code>display</code> display the elemn
>ent like a list item, or like a component of a table. 
112            <p>
113              <code>display</code>의 다른 값들은 그 엘리먼트를 리스트 아이템 처럼 , 또81            <code>display</code>의 다른 값들은 그 엘리먼트를 리스트 아이템 처럼 , 또는 
>는 표의 컴포넌트(component) 처럼 디스플레이 합니다.>표의 컴포넌트(component) 처럼 디스플레이 합니다.
114            </p>
115            <p>
116              For the full list of display types, see <a class="e
>xternal" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-di 
>splay">The display property</a> in the CSS Specification. 
117            </p>
n122              Using CSS alone, the structure of the display must n
>be the same as the structure of the document. Other technologies  
>can modify the structure of the display—for example, XBL can add  
>content, and JavaScript can modify the DOM. 
123            </p>
124            <p>
n128              For more information about XML in Mozilla, see the n
><a href="ko/XML">XML</a> page in this wiki. 
129            </p>
130            <p>
n137    <h3 name="Action:_An_XML_demonstration">n
138      Action: An XML demonstration
139    </h3>
n143    <p>n
144      Make a new XML file, <code>doc9.xml</code>. Copy and paste 
>the content from here, making sure that you scroll to get all of  
>it: 
145    </p>
n192    <p>n
193      Make a new CSS file, <code>style9.css</code>. Copy and past
>e the content from here, making sure that you scroll to get all o 
>f it: 
194    </p>
n258      Open the document in your browser:n
259    </p>
260    <p>
n289    <p>n
290      <br>
291      Notes about this demonstration:
292    </p>
293    <ul>
294      <li>The superscript 2 (in "million km²") a Unicode characte
>r, coded as <code>\B2</code> in the CSS file. 
295      </li>
296      <li>The heading, "Oceans", has a negative top margin, movin
>g it up so it is displayed on top of the border. 
297      </li>
298    </ul>
n315            Change the stylesheet so that it displays the documenn
>t as a table. 
316            <p>
317              스타일 시트를 변경해서 문서를 표로 디스플레이하게 하세요.251            스타일 시트를 변경해서 문서를 표로 디스플레이하게 하세요.
318            </p>
319            <p>
320              (See the <a class="external" href="http://www.w3.or
>g/TR/CSS21/tables.html">Tables</a> chapter in the CSS Specificati 
>on for examples that you can adapt.) 
321            </p>
n329    <h4 name="What_next.3F">n
330      What next?
331    </h4>
t337    </p>t
338    <p>
339      This is the last page of the tutorial. For more information
> about CSS in Mozilla, see the main <a href="ko/CSS">CSS</a> page 
> in this wiki. 

이력으로 돌아가기