CSS로 XML 문서 스타일 지정하기

캐스 캐이 딩 스타일 시트를 사용하여 XML을 어떻게 보이게 만드는지 확인하십시오.

XML 문서를 작성하고, DTD를 작성하고, 브라우저로 구문 분석하는 것이 좋습니다. 그러나 문서를 볼 때 문서가 어떻게 표시됩니까? XML 은 디스플레이 언어가 아닙니다. 실제로 XML로 작성된 문서에는 서식이 전혀 없습니다.

그렇다면 XML을 어떻게 볼 수 있습니까?

브라우저에서 XML을 보는 핵심은 CSS (Cascading Style Sheets)입니다. 스타일 시트를 사용하면 텍스트 크기와 색상부터 텍스트가 아닌 객체의 배경 및 위치까지 XML 문서의 모든 측면을 정의 할 수 있습니다.

XML 문서가 있다고 가정 해보십시오.

]> Judy Layard Jennifer 브렌든

Internet Explorer와 같은 XML 준비된 브라우저에서 해당 문서를 보려면 다음과 같은 내용이 표시됩니다.

Judy Layard Jennifer Brendan

하지만 부모 요소와 자식 요소를 구분하려면 어떻게해야할까요? 또는 문서의 모든 요소를 ​​시각적으로 구분할 수도 있습니다. XML로 할 수는 없으며, 표시를 위해 사용되는 언어가 아닙니다.

다행히 XML 문서에서 캐스 케이 딩 스타일 시트 ( CSS)를 사용하여 브라우저에서 볼 때 해당 문서와 응용 프로그램을 표시하는 방법을 쉽게 정의 할 수 있습니다. 위의 문서에서는 HTML 문서와 동일한 방식으로 각 태그의 스타일을 정의 할 수 있습니다.

예를 들어 HTML에서 단락 태그 (

) 내의 모든 텍스트를 Verdana, Geneva 또는 Helvetica 글꼴 및 배경색이 녹색 인 것으로 정의 할 수 있습니다. 모든 단락이 그렇게되도록 스타일 시트에 정의하려면 다음과 같이 작성하십시오.

p {글꼴 - 가족 : verdana, 제네바, 헬 베티 아; 배경색 : # 00ff00; }

동일한 규칙이 XML 문서에도 적용됩니다. XML의 각 태그는 XML 문서에서 정의 할 수 있습니다.

가족 {색상 : # 000000; } parent {font-family : Arial Black; color : # ff0000; 테두리 : 단색 5px; 너비 : 300px; } child {font-family : verdana, helvetica; color : # cc0000; 테두리 : 단색 5px; border-color : # cc0000; }

XML 문서가 있고 스타일 시트 가 작성되면 함께 묶어야합니다. HTML의 link 명령과 비슷하게 XML 문서의 맨 위에 (XML 선언 아래에) 선을 긋고 XML 파서에 스타일 시트를 찾을 위치를 알려줍니다. 예 :

앞서 말했듯이이 줄은 선언 아래에 있지만 XML 문서의 요소 앞에 있어야합니다.

XML 문서를 모두 작성하면 다음과 같이 표시됩니다.

< 브랜든