[XML.NET] 4. CSS를 이용한 스타일 지정

4. CSS를 이용한 스타일 지정

XML은 다양한 데이터를 표현하기에 적합한 마크업 언어입니다. 하지만 XML은 데이터의 외형을 표현하지는 않습니다. 그렇다고 XML의 데이터를 화면에 표시할 스타일을 지정할 수 있는 방법이 없는 것은 아닙니다.

 

CSS(Casecading Style Sheets)은 HTML뿐만 아니라 XML의 데이터를 화면에 표시할 때 스타일을 지정할 수 있습니다. 간단하게 XML 문서의 데이터를 CSS를 적용하는 방법을 알아봅시다.

 

먼저 CSS 파일로 스타일을 작성하세요.

book.css

bookname{

 font-family: "돋음체";

 font-size:20px;

 color:#0000ff;

}

writer{

 font-family: "궁서체";

 font-size:14px;

 color:#ff00ff;

}

 

스타일 지정하는 방법은 이 책에서는 다루지 않습니다.

 

그리고 XML 문서에 스타일을 지정한 파일을 명시합니다.

sample5.xml

<?xml version="1.0" encoding="euc-kr" standalone="yes"?>

<?xml-stylesheet type="text/css" href="book.css"?>

<book>

 <bookname>디딤돌 C언어</bookname>

 <writer>장문석</writer>

</book>

 

다음은 인터넷 익스플로러로 확인한 화면입니다.

 

CSS 파일에 스타일을 작성할 때 전용 편집기를 사용하면 간단하게 원하는 스타일을 만들 수 있습니다. 또한 Visual Studio를 이용하는 것도 비용을 줄이는 방법 중에 하나입니다. 물론 XML 문서도 Visual Studio를 이용해서 작성하면 들여쓰기 및 종료 태그 자동 작성 등의 편의성을 제공받을 수 있습니다.

 

 

먼저 파일 메뉴의 새로만들기=>파일을 선택하세요.

 

새 파일 창에서 [일반]=>[스타일시트]를 선택한 후에 열기를 누르세요.

 

그리고 편집 창에서 스타일 이름을 작성한 후에 마우스 오른쪽 버튼을 누르면 나오는 컨텍스트 메뉴에서 [스타일 작성]을 선택하시면 GUI 환경에서 원하는 스타일을 편집할 수 있는 창이 나옵니다.

 

 

스타일 수정 창에서 원하는 조건을 선택하면 미리보기로 확인도 가능하고 설명도 나옵니다. 원하는 스타일로 수정한 후에 확인 버튼을 클릭하세요.

 

다음은 위 화면으로 선택하였을 때 자동 완성하는 스타일입니다.

bookname

{

    font-family: 휴먼편지체;

    font-size: xx-small;

    color: #008080;

    text-decoration: underline;

}

 

마지막으로 메인 메뉴에서 [파일]=>[저장]을 선택하신 후에 원하는 파일 이름으로 저장하세요.

 

XML 문서를 만드는 방법도 비슷하므로 설명을 생략할게요.

 

참고로 이 책은 XML.NET 기술을 이용하여 프로그래밍 방법을 소개하는 것이 주 목적입니다. 필요에 의해  XML과 CSS를 다루는 것이어서 자세한 내용은 다루지 않겠습니다.