저번에 CSS 에 대한 설명에 이어서
CSS 를 사용한 XML 적용을 해보겠습니다-_-)/
저번에 작성한 xml 을 우려먹겠습니다;;
<?xml version="1.0" encoding="euc-kr" ?>
<mylife>
<home> 멋진집 </home>
<money> 10000 </money>
<good> 강아지 </good>
</mylife>
여기에 스타일 시트를 불러오도록 파일을 삽입 합니다
스타일 시트를 xml 문서에 불러와서 사용하겠다는 선언문입니다
<?xml:stylesheet type="text/css" href="mylife.css"?>
그러면 위에 스타일 시트 적용문을 다 작성을 하면
(mylife.xml)
<?xml version="1.0" encoding="euc-kr" ?>
<?xml:stylesheet type="text/css" href="mylife.css"?>
<mylife>
<home> 멋진집 </home>
<money> 10000 </money>
<good> 강아지 </good>
</mylife>
이렇게 됩니다
여기서 적용할 css 를 작성 합니다
전 간단하고 우려먹기를 좋아해서
이렇게 작성했습니다
(mylife.css)
mylife{
display : block;
margin : 15px;
}
home {
display:block;
background-color:#99FFCC;
font-size : 10t;
color : black;
text-align : center;
}
money {
display:block;
background-color:#FFCCFF;
font-size : 10pt;
color : blcak;
text-align : center;
}
good {
display : block;
background-color:#CCFF66;
font-size : 10pt;
text-align : center;
}
이제 이것을 mylife.css 란 css 파일과
mylife.xml 로 저장을 해서 실행을 해보면 css가 적용이 된 화면을
보실 수 있습니다
하지만 저렇게 되면 동일한 이름을 가진
모든 엘리먼트들이 똑같은 css 가 적용이 됩니다
다 동일하게 적용하고 싶다고 하면 상관이 없지만
따로 따로 적용 하고 싶으시면 스타일 시트 클래스를 사용 하면 됩니다
예제) <-- 또 우려먹습니다;;
(mylife2.xml)
<?xml version="1.0" encoding="euc-kr" ?>
<?xml:stylesheet type="text/css" href="mylife2.css"?>
<mylife>
<home class="1"> 멋진집 </home>
<money class="1"> 10000 </money>
<good class="1"> 강아지 </good>
<home class="2"> 멋진집 </home>
<money class="2"> 10000 </money>
<good class="2"> 강아지 </good>
</mylife>
(mylife2.css)
mylife{
display : block;
margin : 15px;
}
home.1 {
display:block;
background-color:#99FFCC;
font-size : 10t;
color : black;
text-align : center;
}
money.1 {
display:block;
background-color:#FFCCFF;
font-size : 10pt;
color : blcak;
text-align : center;
}
good.1 {
display : block;
background-color:#CCFF66;
font-size : 10pt;
text-align : center;
}
home.2 {
display:block;
background-color:#ffffff;
font-size : 10t;
color : black;
text-align : center;
}
money.2 {
display:block;
background-color:#000000;
font-size : 10pt;
color : white;
text-align : center;
}
good.2 {
display : block;
background-color:#ff0000;
font-size : 10pt;
text-align : center;
}
위의 예제를 보면 1, 2 의 속성을 엘리먼트에 지정을 했고
이것을 xml 문서의 엘리먼트 중에서 사용 하려는 것에 class라는 키워드를
사용 하여 속성을 지정했습니다
<money class="1">
이런 식으로 선택적으로 적용하고자 하는 같은 이름의 엘리먼트를
다르게 적용할 수 있습니다
이상으로
XML 문서 CSS 적용하여 꾸미기 는;;
여기까지 하겠습니다!! 기타 질문에 대해서는 따로 이야기해주세요
다음에는 "xml 문서 xsl 적용하여 꾸미기"에 대해서 이야기 하겠습니다
p.s 아는 분이 예제도 작성해서 올리라고 해서 -_-;; 우려먹기를 좋아하는 저는
그대로 우려먹은 파일을 저장해서 올렸습니다 다른 것이라고 기대하지 말아주세요;
mylife(xml, css) 예제 ( 링크 수정;; )
mylife.css
이올린에 북마크하기
이올린에 추천하기
