Download - XML 문서 화면 표현 CSS 개념 CSS 사용법 CSS 문법
44 장장 ㅎㅎ
• XML 문서 화면 표현• CSS 개념• CSS 사용법• CSS 문법
CSSCSS
2
학습목표 CSS 의 사용 목적과 방법 학습 XML 문서에 CSS 를 적용하는 방법 실습 네임스페이스 참조에 의한 CSS 적용방법 학습 기본 CSS 속성과 속성값 적용방법 실습
4 장 . CSS
3
XML 문서를 화면에 표현하는 방법CSS(Cascading Style Sheet) 를 이용하는 방법XSL(eXtensible StyleSheet Language) 을 이용하는 방법
HTML 문서와 XML 문서 : 화면 표현
Section 01 XML 문서 화면 표현
[ 그림 4-1] HTML 출력 결과
[ 그림 4-2] XML 출력 결과
4
스타일시트 (style sheets)문서의 각 요소를 화면에 표시하기 위해 스타일 규칙을 모아놓은 문서데이터를 포장하기 위한 포장지 역할
CSS 장점기능 확장성 : HTML 기능의 확장 가능양식 모듈화 : 흐름이 같은 문서 양식으로 전체 구성 가능간편성 : 문서 형식을 손쉽고 다양하게 구성 가능일관성 : 사용 환경에 영향받지 않음
CSS 단점브라우저의 호환성 문제
Section 02 CSS 개념
5
CSS 구성
선택자 : 표시 정보를 적용하는 요소 타입선언 블록 : 중괄호 ({}) 를 사용하고 하나 이상의 선언 포함
각 선언은 세미콜론 (;) 으로 구분각 선언은 요소를 표시하는 글꼴과 해당 속성을 지정선언은 속성과 값 , 콜론으로 구성
Section 03 CSS 사용법
H3 { font-style : italic ; color : red }
선택자 속성 값
선언선언
CSS 규칙
6
CSS 적용 방법문서 내에 CSS 를 삽입하는 방법 스타일 속성을 각각의 태그에 적용하는 방법외부 스타일시트를 연결하는 방법 @import 명령을 사용하는 방법
Section 03 CSS 사용법
7
<HTML> <HEAD> <STYLE type="text/css"> <!-- h1 {font-style : italic ; color : red} h2 {font-style : normal ; color : blue} --> </STYLE> </HEAD> <BODY> <H1> 문자를 기울임꼴에 빨간색으로 표현 </H1> <H2> 문자를 보통에 파란색으로 표현 </H2> </BODY> </HTML>
문서 내에 CSS 를 삽입하는 예 : HTML
Section 03 CSS 사용법
css_test.html
8
Section 03 CSS 사용법
문서 내에 CSS 를 삽입하는 예 : XML
<?xml version='1.0' encoding='euc-kr'?> <?xml-stylesheet type="text/css" href="#xmlstyle"?> <students> <style id="xmlstyle"> <!-- style {display: none; visibility :hidden} name {font-style : normal; color : blue} age {font-style : italic; color : red} address {font-style : italic; color : green} email {font-style : italic; color : blue} </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> [email protected] </email> </student> </students>
xml_style.xml
9
스타일 속성을 각 태그에 적용하는 예 : HTML
Section 03 CSS 사용법
<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
10
스타일 속성을 각 태그에 적용하는 예 : XML
Section 03 CSS 사용법
<?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"> [email protected] </email> </student> </students>
student_css.xml
11
외부 스타일시트를 연결하는 예 : HTML
Section 03 CSS 사용법
H1 {font-style : normal; color : blue} H2 {font-style : italic; color : green}
<HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="css_link.css"> </HEAD> <BODY> <H1> 문자를 보통에 파란색으로 표현 </H1> <P> <H2> 문자를 기울임꼴에 녹색으로 표현 </H2> </BODY> </HTML>
css_link.css
css_link.html
12
3. 외부 스타일시트를 연결하는 예 : XML
Section 03 CSS 사용법
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 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> [email protected] </email> </student> </students>
xml_link.css
xml_link.xml
13
@import 명령다른 곳에 있는 스타일시트를 가져오는 옵션 사용관련된 규칙을 분리된 파일로 저장할 수 있음문서에서 특정 타입의 필요에 따라 결합할 수 있음정의 형식
<style> 태그에서 적용가능• <STYLE> 태그의 처음 부분에 표현해야 한다 .
외부 CSS 파일의 위치는 "url( )" 부분에 표현 • 외부 CSS 파일의 스타일 중에서 변경할 사항은 <STYLE>
태그에서 다시 정의할 수 있음
Section 03 CSS 사용법
@import url(LINK_CSS_URL);
14
H4 { color:green ; text-decoration:underline }
@import url(css_import2.css); H3 { color:red ; text-decoration:underline }
<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>
Section 03 CSS 사용법
@import 명령을 사용한 예 : HTML
css_import2.css
css_import.css
css_import2.html
15
name {font-style : normal; color : blue} age {font-style : italic; color : red} address {text-decoration: underline; color : green}
<?xml version='1.0' encoding='euc-kr'?> <?xml-stylesheet type="text/css" href="#importstyle"?> <students> <style id="importstyle"> <!-- @import url(xml_import.css); email {font-style : italic; color : blue} --> </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> [email protected] </email> </student> </students>
@import 명령을 사용한 예 : XML
Section 03 CSS 사용법
xml_import.css
xml_import.xml
16
<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 적용 방법을 사용한 예 : HTML
Section 03 CSS 사용법
css_mix.html
17
<?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"> <!-- @import url(xml_mix2.css); address {font-style : italic; color : blue} --> </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email STYLE="color:red;text-decoration:underline"> [email protected] </email> </student> </students>
여러 CSS 적용 방법을 사용한 예 : XML
Section 03 CSS 사용법
xml_mix.xml
18
주석/* 로 시작해서 */ 로 끝남CSS 주석은 대 . 소문자 구분하지 않음사용 예
Section 04 CSS 문법
/* CSS 주석 : student 요소에 데이터는 굵은체로 파란색으로 표시 */ student {font-weight :bold ; color : blue }
19
다중 요소와 다중 규칙여러 요소에 규칙을 하나 적용할 수 있고 ,
요소 하나에 여러 규칙을 적용할 수 있음
• 기본적으로 선택자 내에 모든 요소 이름을 포함• 이름을 콤마 (,) 로 구분
Section 04 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 }
20
Section 04 CSS 문법
선택자 요소 이름과 함께 하나 또는 그 이상의 부모 요소의 이름을 포함할 수 있음 규칙은 명시된 이름을 갖는 마지막 자식 요소에만 적용된다 .
문맥 선택자하나 또는 그 이상의 부모 요소를 포함하는 선택자cf. 부모 요소 이름을 갖지 않는 선택자는 일반 선택자
21
<students> <name> 단국대학교 </name> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> [email protected] </email> </student> </students>
name { color : red } student name { color : blue; font-style : italic }
name { color : red } student , name { color : blue; font-style : italic }
문맥 선택자 사용 예
Section 04 CSS 문법
students.xml
students.css
students2.css
22
<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>
Section 04 CSS 문법
클래스를 선택자로 사용한 예 : HTML
class.htm
23
<?xml-stylesheet type="text/css" href="#class"?> <students> <style id="class"> <!-- name.class1 { color: red } name.class2 { color: blue } name.class3 { color: green } --> </style> <student> <name class="class1"> 고소영 </name> </student> <student> <name class="class2"> 고소영 </name> </student> <student> <name class="class3"> 고소영 </name> </student> </students>
xml_class.xml
클래스를 선택자로 사용한 예 : XML
Section 04 CSS 문법
24
<?xml-stylesheet type="text/css" href="#idstyle"?> <students> <style id="idstyle"> <!-- #cssid1 {font-style : normal ; color : blue} #cssid2 {font-style : italic ; color : red} --> </style> <student> <name id="cssid1"> 홍 현 </name> <age id="cssid2"> 30 </age> <address id="cssid1"> 서울 면목동 </address> <email id="cssid2"> [email protected] </email> </student> </students>
ID 를 선택자로 사용CSS 규칙에 특정 ID 를 부여해서 쉽게 적용하는 방법형식
ID 를 선택자로 사용한 예 1
Section 04 CSS 문법
#CSS_ID { 선언 }
selector_id.xml
25
<?xml-stylesheet type="text/css" href="#idstyle"?> <students> <style id="idstyle"> <!-- #cssid1 {font-style : normal ; color : blue} age#cssid1 {font-style : italic ; color : red} --> </style>
<student> <name id="cssid1"> 홍 현 </name> <age id="cssid1"> 30 </age> </student> </students>
ID 를 선택자로 사용한 예 2
Section 04 CSS 문법
selector_id2.xml
26
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>
Section 04 CSS 문법
네임스페이스 참조 선택자 정의에서 콜론 (:) 앞에 역슬래시 (\) 를 반드시 삽입
네임스페이스 참조를 사용한 예 1
css_namespace.css
css_namespace.xml
27
<?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}
네임스페이스 참조를 사용한 예 2
Section 04 CSS 문법
name_space.xml
name_space.css
28
<?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}
네임스페이스 참조를 사용한 예 3
Section 04 CSS 문법
name_space.xml
name_space2.css
29
<?xml-stylesheet type="text/css" href="#imagestyle"?> <students> <style id="imagestyle"> <!-- student {background-image:url(bg.gif); font-style : italic; color : yellow} --> </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> [email protected] </email> </student> </students>
이미지 사용 예 1
Section 04 CSS 문법
xml_image.xml
30
<?xml-stylesheet type="text/css" href="#imagestyle"?> <students> <style id="imagestyle"> <!-- name {background-image:url(bg.gif); font-style : italic; color : yellow} address {background-image:url(bg2.gif); font-style : italic; color : red} --> </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> [email protected] </email> </student> </students>
이미지 사용 예 2
Section 04 CSS 문법
xml_image2.xml
31
그룹핑스타일시트 크기를 줄이기 위해 선택자를 컴마 (,) 로 분리해서 그룹으로 묶은 목록형식 1
형식 2
Section 04 CSS 문법
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; }
32
<?xml-stylesheet type="text/css" href="#idstyle"?> <students> <style id="idstyle"> <!-- name { font: bold 12pt/14pt helvetica} address, email { font: bold 16pt/18pt helvetica} --> </style> <student> <name> 홍 현 </name> <address> 서울 면목동 </address> <email> [email protected] </email> </student> </students>
그룹핑 사용 예
Section 04 CSS 문법
grouping.xml
33
<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:[email protected]">[email protected]</A> </BODY> </HTML>
가상 클래스와 가상 요소 사용 예 1
Section 04 CSS 문법
anchor.html
34
<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:[email protected]"> [email protected]</A> <hr> name : 김현주 <br> address : 서울 잠원동 <br> E-mail:<A class="class2" HREF="mailto:[email protected]"> [email protected]</A> <hr> name : 심은하 <br> address : 서울 홍제동 <br> E-mail:<A class="class3" HREF="mailto:[email protected]"> [email protected]</A> <hr> name : 이효리 <br> address : 서울 신사동 <br> E-mail:<A class="class4" HREF="mailto:[email protected]"> [email protected]</A> </BODY> </HTML>
Section 04 CSS 문법
가상 클래스와 가상 요소 사용 예 2
anchor4.html
35
<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:[email protected]">[email protected]</A> </P> </BODY> </HTML>
가상 클래스와 가상 요소 사용 예 3
Section 04 CSS 문법
first_line.html
36
Section 04 CSS 문법
캐스케이딩 CSS 에서 캐스케이딩은 여러 다양한 수준에서 속성 값을 지정할 수 있다는 의미
CSS 적용 우선순위!important 명시 > style 속성 > style 요소 ( ID >class > contextual selector>general selector) > 외부 CSS 파일
37
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"> <!-- name {font-style: italic ; color : green} address {font-style : italic ! important ; color : green ! important} --> </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"> [email protected] </email> </student> </students>
CSS 적용 우선순위를 살펴보는 예제
Section 04 CSS 문법
xml-priority.css
38
속성 설정디스플레이 속성 브라우저가 요소의 텍스트를 표시하는 기본 방법을 제어• none : 요소의 컨텐츠 또는 그 자식 요소 모두 표시하지 않는다 .
• block : 요소 텍스트의 앞과 뒤에 항상 줄 바꿈을 삽입• inline : 두 요소 텍스트 사이에 줄 바꿈이 삽입되지 않음• list-item : 요소를 하나의 block 요소로 다룸• 요소 컨텐츠를 글머리 기호 또는 번호 리스트의 항목으로
구성인터넷 익스플로러 6.0 이상에서만 적용
Section 04 CSS 문법
39
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>[email protected]</homeemail> <officeemail>[email protected]</officeemail> </email> </student> </students>
디스플레이 속성 사용 예
Section 04 CSS 문법
xml_display.css
xml_display.xml
40
Section 04 CSS 문법
visibility 속성값
요소가 보이지 않도록 지정hidden
요소가 보이도록 지정visible
기본값이다 . 요소가 부모 요소의 “ visibility” 속성을 상속inherit
내용속성값
41
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>[email protected]</homeemail> <officeemail>[email protected]</officeemail> </email> </student> </students>
visibility 속성값 관련 예제
Section 04 CSS 문법
xml_display2.css
xml_display2.xml
42
속성 구성과 속성 효과값
Section 04 CSS 문법
목록 마커로 사용자 정의 지정 이미지를 사용한다 .list-style-image:url(button.gif)
list-style-image
목록 마커의 위치를 제어한다 .• outside : 목록 마커는 내어 쓰기가 된다 . 즉 , 텍스트 블록의 왼쪽에 위치하게 된다 . 목록
마커를 표시하기 위해 요소에 왼쪽 여백을 지정해야 한다 . 왼쪽 여백 (margin-left) 은 약 30 포인트 정도가 좋다 ( 기본값 ).
• inside : 목록 마커는 내어 쓰기가 되지 않는다 . 즉 , 마커는 텍스트 블록내에 첫 번째 위치에 표시된다 .
list-style-position
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 : 목록 마커 사용 안함 .
43
<?xml-stylesheet type="text/css" href="xml_liststyle.css"?> <students> <student> <name> 고소영 </name> <address> 서울 압구정 </address> <email> [email protected] </email> </student> <student> <name> 송혜교 </name> <address> 서울 잠원동 </address> <email> [email protected] </email> </student> <student> <name> 김현주 </name> <address> 서울 한남동 </address> <email> [email protected] </email> </student> </students>
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}
속성 구성과 속성 효과값 관련 예제
Section 04 CSS 문법
xml_liststyle.css
xml_liststyle.xml
44
글자 속성
Section 04 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 }
45
<?xml-stylesheet type="text/css" href="#font"?> <students> <style id="font"> <!-- name { font-family: serif; font-size: 12pt; font-weight: 300} address { font-family: sans-serif; font-size: 150%; font-weight: 400} email { font-family: cursive; font-size: large; font-weight: 500} job { font-family: fantasy; font-size: small; font-weight: 600} book { font-family: monospace; font-size: medium; font-weight: 700} --> </style> <student> <name> Go Soyong </name> <address> Seoul </address> <email> [email protected] </email> <job> student </job> <book> XML </book> </student> </students>
xml_font.xml
글자 속성 관련 예
Section 04 CSS 문법
46
색상과 배경 속성
Section 04 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}
background-repeat 배경 이미지를 반복적으로사용할 것인지 지정
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}
47
색상과 배경 속성
Section 04 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}
48
<?xml-stylesheet type="text/css" href="#background"?> <students> <style id="background"> <!-- name, address, email, job, book {display:block; color: rgb(255,255,255)} student { background-color:#ffffff; background-image:url(bg.gif); background-repeat:repeat; background-attachment:scroll; background-position: 100% 100% } email { background-image:url(bg2.gif)} --> </style> <student> <name> 고소영 </name> <address> 서울 </address> <email> [email protected] </email> <job> 연예인 </job> <book> XML 활용백서 </book> </student> </students>
Section 04 CSS 문법
색상과 배경 속성 관련 예xml_background.xml
49
문자 간격과 맞춤 속성
Section 04 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}
50
Section 04 CSS 문법
문자 간격과 맞춤 속성설명속성명 사용 방법
text-align 요소 텍스트의 수평 맞춤을 제어 NAME {text-align: left}NAME {text-align: right}NAME {text-align: center}NAME {text-align: justify}
text-indent 요소 텍스트의 첫 줄에 들여 쓰기 NAME {text-indent: 3em}NAME {text-indent: -2em}NAME {text-indent: 50%}
line-height 요소 텍스트의 기본 선 사이의 간격을 조정
NAME {line-height: normal} /* 기본값 */NAME {line-height: 3}NAME {line-height: 3.5em}NAME {line-height: 120%}
text-transform 요소 텍스트의 대 . 소문자를 제어 NAME {text-transform: uppercase}NAME {text-transform: lowercase}
51
<?xml-stylesheet type="text/css" href="#text"?> <students> <style id="text"> <!-- name, address, job, book, office, phone {display:block} name { letter-spacing : 3cm} address { word-spacing : 2em} job { text-align : center} book { text-indent : 20%} office { text-transform : uppercase} phone { text-decoration : line-through } --> </style> <student> <name> 고소영 </name> <address> 서울 서초구 잠원동 </address> <job> 연예인 </job> <book> XML 활용백서 </book> <office> dankook university </office> <phone> 02-123-1234 </phone> </student> </students>
문자 간격과 맞춤 속성 관련 예
Section 04 CSS 문법
xml_text.xml
Thank you