[ XML ] 8. XML 출력하기

출처 : w3schools - XML and CSS

위 사이트의 내용을, 내맘대로 해석함. ─.─;;

Displaying XML

XML을 화면에 표시하기

Raw XML files can be viewed in all major browsers.
아무런 설정이 적용되지 않은 상태의 원본 XML 파일을 최신 브라우저에서 열어볼 수 있다.

raw : 손대지 않은, 있는 그대로의, 가공되지 않은, 처리되지 않은.
raw data : 원시 데이터. 원자료. 처리되지 않은 데이터. 처리나 집계가 행해지기 전의 데이터.

Don't expect XML files to be displayed as HTML pages.
XML 파일이 HTML 페이지처럼 표시될 거라고 기대하지 마시오.

---

Viewing XML Files

XML 파일 보기

( 아래는, XML 파일을 IE에서 열었을 때의 모습인 듯 하다...)

 
<?xml version="1.0" encoding="UTF-8"?>
 - <note>
       <to>Tove</to>
       <from>Jani</from>
       <heading>Reminder</heading>
       <article>Don't forget me this weekend!</article>
   </note>
 

Look at the XML file above in your browser: note.xml
브라우저에서 이 XML 파일을 열어 보시오.

Notice that an XML document will be displayed with color-coded root and child elements.
최상위 엘리먼트와 그 하위 엘리먼트들이 색깔로 표시되어 있음을 알 수 있다.

A plus (+) or minus sign (-) to the left of the elements can be clicked to expand or collapse the element structure.
엘리먼트의 왼쪽에 있는 (+) 나 (-) 표시를 클릭하면, 엘리먼트의 배치 구조가 펼쳐지거나 접힌다.

( 개발자 도구(F12)의 DOM 탐색기에서, 태그 앞에 있는 화살표 키와 같은 기능인 듯.)

To view the raw XML source (without the + and - signs), select "View Page Source" or "View Source" from the browser menu.

+, - 표시없이, XML 의 원본 소스를 보려면, 브러우저의 메뉴에서 “페이지 소스”나 “소스 보기”를 이용하면 된다.

( 마우스의 오른쪽 버튼.)

Note: In Safari, only the element text will be displayed.
To view the raw XML, you must right click the page and select "View Source".

사파리에서는, 엘리먼트의 텍스트만 화면에 표시될 것이다.
XML 의 원본을 보려면, 마우스 우클릭을 해서, “소스 보기”를 선택해야 한다.

( 사파리에서는 태그를 바로 보여주지 않나 보군... 흠...)

---

Viewing an Invalid XML File

잘못 작성된 XML 파일 보기

( invalid : 빈약한, 설득력이 없는, 효력이 없는, 타당하지 않은, 인식 불가능한.)

If an erroneous XML file is opened,
some browsers report the error, and some only display it incorrectly.

어딘가가 잘못 작성된 XML 파일을 열게 되면,
어떤 브라우저는 오류 내용을 알려주거나, 정확하지 않은 모습으로 출력된다.

Try to open the following XML file in Chrome, IE, Firefox, Opera, and Safari: note_error.xml.
크롬, IE, 파이어폭스, 오페라, 사파리 등등, 여러 브라우저에서 이 XML 파일을 열어보시오.

---

Other XML Examples

그외 XML 예문들

Viewing some XML documents will help you get the XML feeling:
XML 문서를 몇 개 직접 열어서 보면, XML에 대해서 대충 감이 잡힐 것이다.

An XML CD catalog

This is a CD collection, stored as XML.
XML로 저장된, CD 목록.

An XML plant catalog

This is a plant catalog from a plant shop, stored as XML.
XML로 저장된, 원예 매장의 식물 목록.

An XML breakfast menu

This is a breakfast food menu from a restaurant, stored as XML.
XML로 저장된, 레스토랑의 아침 식사 메뉴.

---

Why Does XML Display Like This?

XML은 왜 이렇게 표시되는가?

XML documents do not carry information about how to display the data.
XML 문서는, 데이터를 표시하는 방법에 관한 정보를 전달하지는 않는다.

Since XML tags are "invented" by the author of the XML document,
browsers do not know if a tag like <table> describes an HTML table or a dining table.

XML 태그는, XML문서를 작성한 사람에 의해서 만들어진 것이기 때문에,
브라우저는, <table> 이라는 것이 HTML의 table 태그인지, 집안 가구의 테이블인지 구별하지 못한다.

Without any information about how to display the data,
most browsers will just display the XML document as it is.

데이터를 표시하는 방법에 관한 정보가 전혀 없다면,
대부분의 브라우저는 XML 문서를 있는 그대로 보여주기만 할 것이다.

---

Displaying XML Files with CSS?

CSS를 사용하여 XML 파일을 표시할 수 있나?

Below is an example of how to use CSS to format an XML document.
아래는, XML 문서의 형식에 CSS를 사용한 방법이다.

We can use an XML file like cd_catalog.xml and a style sheet like cd_catalog.css
“cd_catalog.xml” 라는 XML 파일과 아래의 “cd_catalog.css” 라는 스타일시트를 사용한 것이다.

cd_catalog.css 파일의 원본 보기

 
CATALOG {
    background-color: #ffffff;
    width: 100%;
}
CD {
    display: block;
    margin-bottom: 30pt;
    margin-left: 0;
}
TITLE {
    display: block;
    color: #ff0000;
    font-size: 20pt;
}
ARTIST {
    display: block;
    color: #0000ff;
    font-size: 20pt;
}
COUNTRY, PRICE, YEAR, COMPANY {
    display: block;
    color: #000000;
    margin-left: 20pt;
}
 

Below is a fraction of the XML file. The second line links the XML file to the CSS file:
아래는 XML 파일 부분이다. 두번째 줄에서 XML 파일에 CSS 파일을 연결시키고 있다.

 
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
  <CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
  </CD>
.
.

이 하 생 략
.
.
</CATALOG>
 

RESULT: The CD catalog formatted with the CSS file
최종 결과: CSS 파일로 포맷을 정한 CD 카탈로그.

!Formatting XML with CSS is not recommended. Use JavaScript or XSLT instead.
CSS로 XML을 설정하는 것은 권하고 싶지 않다. 자바스크립트나 XSLT를 사용하시오.

이 글이 도움이 되셨나요? *^^*