XML, DTD, XML 스키마 , XSLT

XML 원리와 응용 √ 원리를 알면 IT가 맛있다 XML, DTD, XML 스키마, XSLT ehanbit.net

chapter 04. CSS

학습목표 • CSS의 사용 목적과 방법 학습 • XML 문서에 CSS를 적용하는 방법 실습 • 네임스페이스 참조에 의한 CSS 적용방법 학습 • 기본 CSS 속성과 속성값 적용방법 실습

XML 문서 화면 표현 • XML 문서를 화면에 표현하는 방법 • CSS(Cascading Style Sheet)를 이용하는 방법 • XSL(eXtensible StyleSheet Language)을 이용하는 방법 • HTML 문서와 XML 문서: 화면 표현 태그를 적용해서 표현하는 HTML 문서 태그 정보를 그대로 출력하는 XML 문서

CSS 개념 • 스타일시트(style sheets) • 문서의 각 요소를 화면에 표시하기 위해 스타일 규칙을 모아놓은 문서 • 데이터를 포장하기 위한 포장지 역할 • CSS 장점 • 기능 확장성: HTML 기능의 확장 가능 • 양식 모듈화: 흐름이 같은 문서 양식으로 전체 구성 가능 • 간편성: 문서 형식을 손쉽고 다양하게 구성 가능 • 일관성: 사용 환경에 영향받지 않음 • CSS 단점 • 브라우저의 호환성 문제

CSS 규칙 H3 { font-style : italic ; color : red } 선언 선언 선택자 속성 값 CSS 사용법 • CSS 구성 • 선택자: 표시 정보를 적용하는 요소 타입 • 선언 블록: 중괄호({})를 사용하고 하나 이상의 선언 포함 각 선언은 세미콜론(;)으로 구분 • 각 선언은 요소를 표시하는 글꼴과 해당 속성을 지정 • 선언은 속성과 값, 콜론으로 구성

CSS 사용법 • CSS 적용 방법 • 문서 내에 CSS를 삽입하는 방법 • 스타일 속성을 각각의 태그에 적용하는 방법 • 외부 스타일시트를 연결하는 방법 • @import 명령을 사용하는 방법

<HTML> <HEAD> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <H1> 문자를 기울임꼴에 빨간색으로 표현 </H1> <H2> 문자를 보통에 파란색으로 표현</H2> </BODY> </HTML> css_test.html CSS 사용법 • 1. 문서 내에 CSS를 삽입하는 예: HTML

CSS 사용법 • 1. 문서 내에 CSS를 삽입하는 예: XML <?xml version='1.0' encoding='euc-kr'?> <?xml-stylesheet type="text/css" href="#xmlstyle"?> <students> <style id="xmlstyle">  </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook.ac.kr </email> </student> </students> xml_style.xml

CSS 사용법 • 2. 스타일 속성을 각 태그에 적용하는 예: HTML <HTML> <Head> <title> CSS 활용 </title> </Head> <BODY> <H1 style="font-style:italic; color:blue"> 문자를 기울임꼴에 파란색으로 표현 </H1> <P> <H2 style="font-style:normal; color:red"> 문자를 보통에 빨간색으로 표현</H2> </BODY> </HTML> css_style.html

CSS 사용법 • 2. 스타일 속성을 각 태그에 적용하는 예: XML <?xml version='1.0' encoding='euc-kr'?> <?xml-stylesheet type="text/css"?> <students> <student> <name STYLE="color:blue"> 홍 현 </name> <age STYLE="color:green"> 30 </age> <address STYLE="color:green ; font-weight:bold"> 서울 면목동 </address> <email STYLE="color:red;text-decoration:underline"> hong@dankook.ac.kr </email> </student> </students> student_css.xml

CSS 사용법 • 3. 외부 스타일시트를 연결하는 예: HTML H1 {font-style : normal; color : blue} H2 {font-style : italic; color : green} css_link.css <HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="css_link.css"> </HEAD> <BODY> <H1>문자를 보통에 파란색으로 표현</H1> <P> <H2>문자를 기울임꼴에 녹색으로 표현</H2> </BODY> </HTML> css_link.html

CSS 사용법 • 3. 외부 스타일시트를 연결하는 예: XML name {font-style : normal; color : blue} age {font-style : italic; color : red} address {font-style : italic; color : green} email {font-style : italic; color : yellow} xml_link.css <?xml version='1.0' encoding='euc-kr'?> <?xml-stylesheet type="text/css" href="xml_link.css"?> <students> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook.ac.kr </email> </student> </students> xml_link.xml

CSS 사용법 • 4. @import 명령 • 다른 곳에 있는 스타일시트를 가져오는 옵션 사용 • 관련된 규칙을 분리된 파일로 저장할 수 있음 • 문서에서 특정 타입의 필요에 따라 결합할 수 있음 • 정의 형식 • <style> 태그에서 적용가능 • <STYLE> 태그의 처음 부분에 표현해야 한다. • 외부 CSS 파일의 위치는 "url( )"부분에 표현 • 외부 CSS 파일의 스타일 중에서 변경할 사항은 <STYLE> 태그에서 다시 정의할 수 있음 @import url(LINK_CSS_URL);

H4 { color:green ; text-decoration:underline } css_import2.css @import url(css_import2.css); H3 { color:red ; text-decoration:underline } css_import.css <HTML> <HEAD> <STYLE type="text/css"> @import url(css_import.css); H1 {font-style : italic ; color : red} H2 {font-style : normal ; color : blue} </STYLE> </HEAD> <BODY> <H1>문자를 기울임꼴에 빨간색으로 표현</H1> <P> <H2>문자를 보통에 파란색으로 표현 </H2> <p> <H3>@import명령문에 의한 CSS 적용 </H3> <p> <H4>CSS 파일내에 @import명령문에 의한 CSS 적용 </H4> </BODY> </HTML> css_import2.html CSS 사용법 • 4. @import 명령을 사용한 예: HTML

name {font-style : normal; color : blue} age {font-style : italic; color : red} address {text-decoration: underline; color : green} xml_import.css <?xml version='1.0' encoding='euc-kr'?> <?xml-stylesheet type="text/css" href="#importstyle"?> <students> <style id="importstyle">  </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook.ac.kr </email> </student> </students> xml_import.xml CSS 사용법 • 4. @import 명령을 사용한 예: XML

<HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="css_mix.css"> <STYLE type="text/css"> @import url(css_file.css); H1 {font-style : italic ; color : red} </STYLE> </HEAD> <BODY> <H1>문자를 기울임꼴에 빨간색으로 표현</H1> <P> <H3 style="font-style:italic; color:blue"> 문자를 기울임꼴에 파란색으로 표현 </H3> <P> <H5>Link에 의한 CSS 적용 </H5> </BODY> </HTML> css_mix.html CSS 사용법 • 여러 CSS 적용 방법을 사용한 예: HTML

<?xml version='1.0' encoding='euc-kr'?> <?xml-stylesheet type="text/css" href="xml_mix1.css"?> <?xml-stylesheet type="text/css" href="#mixstyle"?> <students> <style id="mixstyle">  </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email STYLE="color:red;text-decoration:underline"> hong@dankook.ac.kr </email> </student> </students> xml_mix.xml CSS 사용법 • 여러 CSS 적용 방법을 사용한 예: XML

CSS 문법 • 주석 • /*로 시작해서 */로 끝남 • CSS 주석은 대.소문자 구분하지 않음 • 사용 예 /* CSS 주석 : student 요소에 데이터는 굵은체로 파란색으로 표시 */ student {font-weight :bold ; color : blue }

CSS 문법 • 다중 요소와 다중 규칙 • 여러 요소에 규칙을 하나 적용할 수 있고, • 요소 하나에 여러 규칙을 적용할 수 있음 • 기본적으로 선택자 내에 모든 요소 이름을 포함 • 이름을 콤마(,)로 구분 student, name, address {font-weight :bold ; font-style : italic ; color : blue } student, name, address { font-weight :bold ; font-style : italic ; color : blue } name { display : block }

CSS 문법 • 선택자 • 요소 이름과 함께 하나 또는 그 이상의 부모 요소의 이름을 포함할 수 있음  규칙은 명시된 이름을 갖는 마지막 자식 요소에만 적용된다. • 문맥 선택자 • 하나 또는 그 이상의 부모 요소를 포함하는 선택자 • cf. 부모 요소 이름을 갖지 않는 선택자는 일반 선택자

<students> <name> 단국대학교 </name> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook.ac.kr </email> </student> </students> students.xml name { color : red } student name { color : blue; font-style : italic } students.css name { color : red } student , name { color : blue; font-style : italic } students2.css CSS 문법 • 문맥 선택자 사용 예

<HTML> <HEAD><TITLE>클래스 사용</TITLE> <STYLE TYPE="text/css"> H1.class1 { color: red } H1.class2 { color: blue } </STYLE> </HEAD> <BODY> <H1 class=class1>빨간색으로 문자 표현</H1> <H1 class=class2>파란색으로 문자 표현</H1> </BODY> </HTML> class.htm CSS 문법 • 클래스를 선택자로 사용한 예: HTML

<?xml-stylesheet type="text/css" href="#class"?> <students> <style id="class">  </style> <student> <name class="class1"> 고소영 </name> </student> <student> <name class="class2"> 고소영 </name> </student> <student> <name class="class3"> 고소영 </name> </student> </students> xml_class.xml CSS 문법 • 클래스를 선택자로 사용한 예: XML

<?xml-stylesheet type="text/css" href="#idstyle"?> <students> <style id="idstyle">  </style> <student> <name id="cssid1"> 홍 현 </name> <age id="cssid2"> 30 </age> <address id="cssid1"> 서울 면목동 </address> <email id="cssid2"> hong@dankook.ac.kr </email> </student> </students> selector_id.xml CSS 문법 • ID를 선택자로 사용 • CSS 규칙에 특정 ID를 부여해서 쉽게 적용하는 방법 • 형식 • ID를 선택자로 사용한 예 1 #CSS_ID { 선언 }

<?xml-stylesheet type="text/css" href="#idstyle"?> <students> <style id="idstyle">  </style> <student> <name id="cssid1"> 홍 현 </name> <age id="cssid1"> 30 </age> </student> </students> selector_id2.xml CSS 문법 • ID 를 선택자로 사용한 예 2

st\:sid {font-style : normal; color : green} st\:name {font-style : normal; color : blue} bk\:name {font-style : italic; color : red} bk\:price {font-style : italic; color : blue} bk\:publishing {font-style : italic; color : yellow} <?xml version='1.0' encoding='euc-kr'?> <?xml-stylesheet type="text/css" href="css_namespace.css"?> <st:students xmlns:st="http://www.dankook.ac.kr/2003/students" xmlns:bk="http://www.hanbit.co.kr/xml/"> <st:student> <st:sid>100</st:sid> <st:name>홍 현 </st:name> <st:book> <bk:name> XML 활용백서 </bk:name> <bk:price unit="원"> 23000 </bk:price> <bk:publishing> 한빛출판사 </bk:publishing> </st:book> </st:student> </st:students> css_namespace.css css_namespace.xml CSS 문법 • 네임스페이스 참조 • 선택자 정의에서 콜론(:) 앞에 역슬래시(\)를 반드시 삽입 • 네임스페이스 참조를 사용한 예 1

<?xml version='1.0' encoding='euc-kr'?> <?xml-stylesheet type="text/css" href="name_space.css"?> <address_list> <address> 서울 면목동 </address> <Address> 대전 면목동 </Address> <ADDRESS> 부산 면목동 </ADDRESS> </address_list> address {font-style : normal; color : blue} Address {font-style : italic; color : red} ADDRESS {font-style : italic; color : green} name_space.xml name_space.css CSS 문법 • 네임스페이스 참조를 사용한 예 2

<?xml version='1.0' encoding='euc-kr'?> <?xml-stylesheet type="text/css" href="name_space2.css"?> <address_list xmlns:s="http://www.dankook.ac.kr/s/" xmlns:t="http://www.dankook.ac.kr/t/" xmlns:b="http://www.dankook.ac.kr/b/"> <s:address> 서울 면목동 </s:address> <t:Address> 대전 면목동 </t:Address> <b:ADDRESS> 부산 면목동 </b:ADDRESS> </address_list> s\:address {font-style : normal; color : blue} t\:Address {font-style : italic; color : red} b\:ADDRESS {font-style : italic; color : green} name_space.xml name_space2.css CSS 문법 • 네임스페이스 참조를 사용한 예 3

<?xml-stylesheet type="text/css" href="#imagestyle"?> <students> <style id="imagestyle">  </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook.ac.kr </email> </student> </students> xml_image.xml CSS 문법 • 이미지 사용 예 1

<?xml-stylesheet type="text/css" href="#imagestyle"?> <students> <style id="imagestyle">  </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook.ac.kr </email> </student> </students> xml_image2.xml CSS 문법 • 이미지 사용 예 2

CSS 문법 • 그룹핑 • 스타일시트 크기를 줄이기 위해 선택자를 컴마(,)로 분리해서 그룹으로 묶은 목록 • 형식 1 • 형식 2 name, address, email { font-style : italic; color : yellow } name { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: italic; }

<?xml-stylesheet type="text/css" href="#idstyle"?> <students> <style id="idstyle">  </style> <student> <name> 홍 현 </name> <address> 서울 면목동 </address> <email> hong@dankook.ac.kr </email> </student> </students> grouping.xml CSS 문법 • 그룹핑 사용 예

<HTML> <HEAD> <STYLE type="text/css"> A:link { color: red } A:visited { color: blue } A:active { color: black } A:hover { color: green } </STYLE> </HEAD> <BODY> name : 고소영<br> address : 서울 압구정 <br> E-mail:<A HREF="mailto:gosoyoung@dankook.ac.kr">gosoyoung@dankook.ac.kr</A> </BODY> </HTML> anchor.html CSS 문법 • 가상 클래스와 가상 요소 사용 예 1

<HTML> <HEAD> <STYLE type="text/css"> A.class1:link { color: red } A.class2:visited { color: blue ; font-weight:bold} A.class3:active { color: black } A.class4:hover { color: green ; font-style:italic} </STYLE> </HEAD> <BODY> name : 고소영<br> address : 서울 압구정 <br> E-mail:<A class="class1" HREF="mailto:go@dankook.ac.kr">go@dankook.ac.kr</A> <hr> name : 김현주<br> address : 서울 잠원동 <br> E-mail:<A class="class2" HREF="mailto:kim@dankook.ac.kr">kim@dankook.ac.kr</A> <hr> name : 심은하<br> address : 서울 홍제동 <br> E-mail:<A class="class3" HREF="mailto:sim@dankook.ac.kr">sim@dankook.ac.kr</A> <hr> name : 이효리<br> address : 서울 신사동 <br> E-mail:<A class="class4" HREF="mailto:lee@dankook.ac.kr">lee@dankook.ac.kr</A> </BODY> </HTML> anchor4.html CSS 문법 • 가상 클래스와 가상 요소 사용 예 2

<HTML> <HEAD> <STYLE type="text/css"> P:first-letter { color: red; font-weight:bold; text-transform:uppercase } P:first-line { color: blue; font-style:italic } </STYLE> </HEAD> <BODY> <p>name : 고소영<p> <p>address : 서울 압구정 <p> <p> E-mail:<A HREF="mailto:go@dankook.ac.kr"> go@dankook.ac.kr</A> </P> </BODY> </HTML> first_line.html CSS 문법 • 가상 클래스와 가상 요소 사용 예 3

CSS 문법 • 캐스케이딩 • CSS에서 캐스케이딩은 여러 다양한 수준에서 속성 값을 지정할 수 있다는 의미 • CSS 적용 우선순위 • !important 명시 > style속성 > style요소 (ID > class > 문맥선택자 > 일반선택자) > 외부 CSS 파일

name {font-style: italic ; color : green} <?xml-stylesheet type="text/css" href="xml_priority.css"?> <?xml-stylesheet type="text/css" href="#priority"?> <students> <style id="priority">  </style> <student> <name STYLE="font-style: normal ; color : blue" > 홍 현 </name> <age> 30 </age> <address STYLE="font-style: normal ; color : blue"> 서울 면목동 </address> <email STYLE="color:red;text-decoration:underline"> hong@dankook.ac.kr </email> </student> </students> xml-priority.css CSS 문법 • CSS 적용 우선순위를 살펴보는 예제

CSS 문법 • 속성 설정 • 디스플레이 속성 브라우저가 요소의 텍스트를 표시하는 기본 방법을 제어 • none : 요소의 컨텐츠 또는 그 자식 요소 모두 표시하지 않는다. • block : 요소 텍스트의 앞과 뒤에 항상 줄 바꿈을 삽입 • inline : 두 요소 텍스트 사이에 줄 바꿈이 삽입되지 않음 • list-item : 요소를 하나의 block 요소로 다룸 • 요소 컨텐츠를 글머리 기호 또는 번호 리스트의 항목으로 구성인터넷 익스플로러 6.0이상에서만 적용

student {display : block; margin-top: 20pt ; font-size : 16pt } name { font-style: italic ; color : green} age { font-style: italic ; color : red} address { font-style: normal ; color : blue} email { display : none; color : aqua} <?xml-stylesheet type="text/css" href="xml_display.css"?> <students> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> <homeemail>hong@dankook.ac.kr</homeemail> <officeemail>hong@dku.edu</officeemail> </email> </student> </students> xml_display.css xml_display.xml CSS 문법 • 디스플레이 속성 사용 예

속성값 내용 inherit 기본값이다. 요소가 부모 요소의 “visibility”속성을 상속 visible 요소가 보이도록 지정 hidden 요소가 보이지 않도록 지정 CSS 문법 • visibility 속성값

student {display : block; margin-top: 20pt ; font-size : 16pt } name { font-style: italic ; color : green} age { visibility : hidden; font-style: italic ; color : red} address {visibility : hidden; font-style: normal} city { visibility : visible; color : blue} zipcode { visibility : visible; color : blue} email { visibility : hidden; color : blue} officeemail { visibility : visible; color : red} <?xml-stylesheet type="text/css" href="xml_display2.css"?> <students> <student> <name> 홍 현 </name> <age> 30 </age> <address> <nation> 한국 </nation> <city> 서울</city> <zipcode> 123-456 </zipcode> </address> <email> <homeemail>hong@dankook.ac.kr</homeemail> <officeemail>hong@dku.edu</officeemail> </email> </student> </students> xml_display2.css xml_display2.xml CSS 문법 • visibility 속성값 관련 예제

속성 구성 속성 효과와 값 list-style-type • disc : 속이 찬 동그라미 (기본값) • circle : 속이 빈 동그라미, • square : 속이 찬 사각형 • decimal : 1, 2, 3, 4, 5... • lower-roman : I, ii, iii ..... • upper-roman : I, II, III ..... • lower-alpha : a, b, c ..... • upper-alpha : A, B, C ..... • none : 목록 마커 사용 안함. list-style-position 목록 마커의 위치를 제어한다. • outside : 목록 마커는 내어 쓰기가 된다. 즉, 텍스트 블록의 왼쪽에 위치하게 된다. 목록 마커를 표시하기 위해 요소에 왼쪽 여백을 지정해야 한다. 왼쪽 여백(margin-left)은 약 30 포인트 정도가 좋다(기본값). • inside : 목록 마커는 내어 쓰기가 되지 않는다. 즉, 마커는 텍스트 블록내에 첫 번째 위치에 표시된다. list-style-image 목록 마커로 사용자 정의 지정 이미지를 사용한다. list-style-image:url(button.gif) CSS 문법 • 속성 구성과 속성 효과값

student { display : list-item; list-style-type:decimal; list-style-position:outside; margin-left: 30pt; margin-top: 20pt ; font-size : 13pt } name { font-style: italic ; color : green} address { color : blue ; font-weight: bold} email { font-style: italic ; color : black} <?xml-stylesheet type="text/css" href="xml_liststyle.css"?> <students> <student> <name> 고소영 </name> <address> 서울 압구정 </address> <email> go@dankook.ac.kr </email> </student> <student> <name> 송혜교 </name> <address> 서울 잠원동 </address> <email> song@dankook.ac.kr </email> </student> <student> <name> 김현주 </name> <address> 서울 한남동 </address> <email> kim@dankook.ac.kr </email> </student> </students> xml_liststyle.css xml_liststyle.xml CSS 문법 • 속성 구성과 속성 효과값 관련 예제

속성명 설명 사용 방법 font-family 사용되는 글꼴을 표현 NAME {font-family:Arial} font-size 글자크기를 절대값,상대값, 백분율로 표현 NAME {font-size:12pt} NAME {font-size:150%} NAME {font-size:small} font-style 글자 속성을 지정 보통 문자로 표시할지, 기울임꼴로 표시할지 제어 NAME {font-style:italic} NAME {font-style:oblique} NAME {font-style:normal} font-weight 글자 굵기를 표현 NAME {font-weight:normal} NAME {font-weight:bold} NAME {font-weight:bolder} NAME {font-weight:lighter} NAME {font-weight:200} font-variant 글자를 대소문자로 표현 NAME {font-variant:small-caps} NAME {font-variant:normal} font 모든 글자 모양을 모아서 한번에 표현 NAME {font : normal bold 12pt/16pt Arial} NAME {font-size:12pt; font-weight:bold } CSS 문법 • 글자 속성

<?xml-stylesheet type="text/css" href="#font"?> <students> <style id="font">  </style> <student> <name> Go Soyong </name> <address> Seoul </address> <email> go@dankook.ac.kr </email> <job> student </job> <book> XML </book> </student> </students> xml_font.xml CSS 문법 • 글자 속성 관련 예

속성명 설명 사용 방법 color 요소의 텍스트 색을 지정 NAME {color : red} NAME {color : rgb(255,0,0)} NAME {color : rgb(100%,0%,0%)} NAME {color : #FF0000} background-color 요소의 배경색을 지정 NAME {background-color : red} NAME {background-color : #FF0000} NAME {background-color : transparent} background-image 배경 이미지를 표현 NAME {background-image:url(image.gif)} NAME {background-image:none} NAME {background-repeat:repeat} /*기본값*/ NAME {background-repeat:repeat-x} NAME {background-repeat:repeat-y} NAME {background-repeat:no-repeat} NAME {background-repeat:repeat} /*기본값*/ NAME {background-repeat:repeat-x} NAME {background-repeat:repeat-y} NAME {background-repeat:no-repeat} background-repeat 배경 이미지를 반복적으로 사용할 것인지 지정 CSS 문법 • 색상과 배경 속성

속성명 설명 사용 방법 background-attachment 배경 이미지가 스크롤과 함께 이동할 것인지를 지정 NAME {background-attachment:scroll} NAME {background-attachment:fixed} background-position 배경색이나 배경 이미지의 시작 위치를 지정 NAME {background-position: 100% 100%} NAME {background-position: right top } /* 100% 0% */ background 배경 속성을 모아서 지정할 수 있으며, 순서는 상관 없다. NAME {background: url(image.gif) red repeat scroll} CSS 문법 • 색상과 배경 속성

<?xml-stylesheet type="text/css" href="#background"?> <students> <style id="background">  </style> <student> <name> 고소영</name> <address> 서울 </address> <email> go@dankook.ac.kr </email> <job> 연예인 </job> <book> XML 활용백서 </book> </student> </students> xml_background.xml CSS 문법 • 색상과 배경 속성 관련 예

속성명 설명 사용 방법 letter-spacing 요소 텍스트의 문자 사이 간격을 늘이거나 줄일 수 있다. NAME {letter-spacing: .25em} NAME {letter-spacing:-.5pt} NAME {letter-spacing:0cm} word-spacing 전체 단어 사이의 간격을 늘이거나 줄일 수 있다. NAME {word-spacing: 2em} NAME {word-spacing: 3cm} vertical-align 위첨자 또는 아래 첨자 생성 NAME {vertical-align: baseline} /* 기본값 */ NAME {vertical-align: sub} NAME {vertical-align: super} NAME {vertical-align: text-top} NAME {vertical-align: text-bottom} NAME {vertical-align: top} NAME {vertical-align: bottom} text-decoration 요소 텍스트에 다양한 타입의 선을 그릴 수 있다 NAME {text-decoration: underline} NAME {text-decoration: overline} CSS 문법 • 문자 간격과 맞춤 속성

XML, DTD, XML 스키마 , XSLT