제6장. CSS & XSL-FO

XML 문서의 표현 6장 : 3) XSLT 와 XSL-FO 스타일시트 사용 6장 : 2) XSLT 와 CSS 스타일시트 사용 5장 : XSLT 적용 => HTML 파일로 변환 6장 : 1) CSS 스타일시트 적용
XSLT 예 : <xsl:template match="section/title"> <P><I><xsl:apply-templates /></I></P> <xsl:template>	CSS 예 : section title { display: block; font-style: italic; }

CSS 기초 예제

ex06-c1.css	ex06-01.xml
article { font-family: Palatino, Garamond, "Times New Roman", serif; font-size: 10pt; margin: 5px; } article, p, title { display: block; margin-bottom: 10px; } url { text-decoration: underline; color: blue; } article title { font-size: larger; font-weight: bold; } section title { font-style: italic; } copyright, abstract, keywords, date { display: none; }	111<?xml version="1.0" encoding="EUC-KR" ?> <?xml-stylesheet type="text/css" href="ex06-c1.css"?> <article> <title>XML Style Sheet</title> <date>Oct 2001</date> . . . </article>
	결과

CSS History
- CSS1 : HTML
- CSS2 : for HTML & XML, 기능 추가 (인쇄출력, 음성지원 등)
- CSS3 : XML & HTML, 정교한 포맷팅
HTML에서의 CSS 사용 [참고]
- head에서 style 태그 사용하는 경우
  <head> <style type="text/css"> ... 스타일 정의 ... </style> </head>
- 외부 CSS 파일 링크하는 경우
  <head> <link Rel="stylesheet" type="text/css" href="..."> </head>
- 인라인 스타일 정의하는 경우
  <html태그 Style="스타일 정보"> ... 내용 ... </html태그>
XML 에서의 CSS 사용
- CSS 파일 작성하고
  선택자 { 속성 : 속성값 ; 속성 : 속성값 ; ... } . . .
- XML 문서에 연결
  <?xml-stylesheet type="text/css" href="파일명.css" ?>

문법

선택자(Selector)

경우	표현	사용 예	의미
나열	컴마로 구분	article, p, title { ... }	article \| p \| title 의 의미
중복 선택자	공백으로 구분	article title { ... }	article//title 의 의미 (article/title 이 아님)

경우	처리 결과	예
동일 선택자가 중복	속성을 통합 (p.178)	p { display: block; } 는 p { display: block; p { font-size: 10pt; } font-size: 10pt; } 과 동일
충돌시 (depth가 다른 경우)	더 자세한 선택자가 우선 (p.179)	article section title { ... } 은 article title { ... } 보다 우선
충돌시 (동일 depth의 경우)	낮은 단계의 선택자가 우선 (p.179)	article title { ... } 보다 section title { ... } 이 우선

특성/속성(Properties)

흐름객체(Flow Object)

특성의 상속(Properties Inheritance)

흐름객체는 대부분의 특성을 상속 (특성의 적용 범위와 유사 개념)
예) article 특성 상속, article title 과 section title 특성 재정의
article
title, date, copyright, keywords, section
title?, p+
일부 특성은 상속되지 않는다 : Box 특성

상자(Box)

구성

↕ 공간(margin) : 부모항목(바탕)과 경계 사이

↕ 여백(padding) : 경계와 내용사이

내용(element/content) : 문서의 내용

경계선(border)↘

border ↗

ex06-c3.css	ex06-01.xml
article { ... margin: 10px; } article, p, section, title { display: block; } p, title { border-style: solid; border-width: 1px; } url { background-color: silver; color: blue; } article title { font-size: larger; font-weight: bold; padding: 10px; margin: 25px; } section title { font-style: italic; padding: 0px; margin: 10px; } copyright, abstract, keywords, date { display: none; }	111<?xml version="1.0" encoding="EUC-KR" ?> <?xml-stylesheet type="text/css" href="ex06-c3.css"?> <article> . . . </article>
	결과

특성 값의 표현
- 길이-단위 : em, (ex), px, in, cm, mm, pt, (pc), 백분율 : %
- 색상 : #RRGGBB, rgb(0,255,0), rgb(0%,100%,0%), keyword사용(p.185)
- URL : url(http://www.…/… )
Text & Font Properties
- font-family: 글꼴명 (특정,…, 일반적글꼴)
- font-size: 길이값, xx-small, x-small, medium, large, x-large, xx-large
- font-weight: normal, old, bolder, lighter, 100, 200, ~ 900
- font-style: italic, oblique, normal
- text-align: left, right, center, justify
- vertical-align: baseline, sub, super, top, text-top, middle, bottom, text-bottom
- text-indent: 길이값, 백분율
- line-height: normal, 길이값, 백분율, 숫자
- font: 줄여쓰기 - 글꼴스타일, 글꼴굵기, 크기/줄간격, 글꼴명 순으로 기록
Color & Background Properties
- color: 색상
- background-color: 색상, transparent
- border-color: 색상 ( 네 방향 독립적 지정 가능)
- background-image: url(…)

자식선택자(child selector) : 바로 밑의 child
예) section>title - XSL에서 section/title 의 의미
형제선택자(sibling selector) : 바로 다음의 형제노드
예) title + p
속성선택자(attribute selector) : 특정 속성 또는 속성값을 가지는 노드
예) url[protocol=’mailto’] *주의: @문자 없음
스타일시트 Importing
@import url(http://…/…);
예제 (IE 6.0)

ex06-c4.css	ex06-01.xml
article { ... } article, p, section, title, copyright { display: block; margin-bottom: 10px; } p { text-indent: 0.5in; } title + p { text-indent: 0in; } url { text-decoration: underline; color: blue; } url[protocol='mailto'] { text-decoration: none; color: red; } article title { font-size: larger; font-weight: bold; } section > title { font-style: italic; text-decoration: underline; } copyright:before { content: "Copyright ⓒ"; } abstract, keywords, date { display: none; }	111<?xml version="1.0" encoding="EUC-KR" ?> <?xml-stylesheet type="text/css" href="ex06-c4.css"?> <article> . . . </article>
	결과 (IE6.0)