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

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

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

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

bookname{
 font-family: "돋음체";
 font-size:20px;
 color:#0000ff;
}
writer{
 font-family: "궁서체";
 font-size:14px;
 color:#ff00ff;
}

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

그리고 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를 다루는 것이어서 자세한 내용은 다루지 않겠습니다.

XML.NET