PowerPoint 프레젠테이션
Download
Report
Transcript PowerPoint 프레젠테이션
4장 CSS
•
•
•
•
XML
CSS
CSS
CSS
문서 화면 표현
개념
사용법
문법
ㅎㅎ
4장. CSS
학습목표
CSS의 사용 목적과 방법 학습
XML 문서에 CSS를 적용하는 방법 실습
네임스페이스 참조에 의한 CSS 적용방법 학습
기본 CSS 속성과 속성값 적용방법 실습
2
Section 01 XML 문서 화면 표현
XML 문서를 화면에 표현하는 방법
CSS(Cascading Style Sheet)를 이용하는 방법
XSL(eXtensible StyleSheet Language)을 이용하는 방법
HTML 문서와 XML 문서: 화면 표현
[그림 4-1] HTML 출력 결과
[그림 4-2] XML 출력 결과
3
Section 02 CSS 개념
스타일시트(style sheets)
문서의 각 요소를 화면에 표시하기 위해 스타일 규칙을 모아놓은
문서
데이터를 포장하기 위한 포장지 역할
CSS 장점
기능 확장성: HTML 기능의 확장 가능
양식 모듈화: 흐름이 같은 문서 양식으로 전체 구성 가능
간편성: 문서 형식을 손쉽고 다양하게 구성 가능
일관성: 사용 환경에 영향받지 않음
CSS 단점
브라우저의 호환성 문제
4
Section 03 CSS 사용법
CSS 구성
CSS 규칙
선언
H3
{
font-style : italic ;
color : red
}
선택자
속성
선언
값
선택자: 표시 정보를 적용하는 요소 타입
선언 블록: 중괄호({})를 사용하고 하나 이상의 선언 포함
각 선언은 세미콜론(;)으로 구분
각 선언은 요소를 표시하는 글꼴과 해당 속성을 지정
선언은 속성과 값, 콜론으로 구성
5
Section 03 CSS 사용법
CSS 적용 방법
문서 내에 CSS를 삽입하는 방법
스타일 속성을 각각의 태그에 적용하는 방법
외부 스타일시트를 연결하는 방법
@import 명령을 사용하는 방법
6
Section 03 CSS 사용법
문서 내에 CSS를 삽입하는 예: HTML
<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_test.html
7
Section 03 CSS 사용법
문서 내에 CSS를 삽입하는 예: XML
<?xml version='1.0' encoding='euc-kr'?>
xml_style.xml
<?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>
8
Section 03 CSS 사용법
스타일 속성을 각 태그에 적용하는 예: 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
9
Section 03 CSS 사용법
스타일 속성을 각 태그에 적용하는 예: XML
<?xml version='1.0' encoding='euc-kr'?>
student_css.xml
<?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>
10
Section 03 CSS 사용법
외부 스타일시트를 연결하는 예: HTML
H1 {font-style : normal; color : blue}
H2 {font-style : italic; color : green}
css_link.css
<HTML>
css_link.html
<HEAD>
<LINK rel="stylesheet" type="text/css" href="css_link.css">
</HEAD>
<BODY>
<H1>문자를 보통에 파란색으로 표현</H1>
<P>
<H2>문자를 기울임꼴에 녹색으로 표현</H2>
</BODY>
</HTML>
11
Section 03 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_link.xml
<?xml-stylesheet type="text/css" href="xml_link.css"?>
<students>
<student>
<name> 홍 현 </name>
<age> 30 </age>
<address> 서울 면목동 </address>
<email> [email protected] </email>
</student>
</students>
12
Section 03 CSS 사용법
@import 명령
다른 곳에 있는 스타일시트를 가져오는 옵션 사용
관련된 규칙을 분리된 파일로 저장할 수 있음
문서에서 특정 타입의 필요에 따라 결합할 수 있음
정의 형식
@import url(LINK_CSS_URL);
<style> 태그에서 적용가능
• <STYLE> 태그의 처음 부분에 표현해야 한다.
외부 CSS 파일의 위치는 "url( )"부분에 표현
• 외부 CSS 파일의 스타일 중에서 변경할 사항은 <STYLE> 태그에서 다
시 정의할 수 있음
13
Section 03 CSS 사용법
@import 명령을 사용한 예: HTML
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>
css_import2.css
css_import.css
css_import2.html
14
Section 03 CSS 사용법
@import 명령을 사용한 예: XML
name {font-style : normal; color : blue}
xml_import.css
age {font-style : italic; color : red}
address {text-decoration: underline; color : green}
xml_import.xml
<?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>
15
Section 03 CSS 사용법
여러 CSS 적용 방법을 사용한 예: HTML
<HTML>
css_mix.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>
16
Section 03 CSS 사용법
여러 CSS 적용 방법을 사용한 예: XML
<?xml version='1.0' encoding='euc-kr'?>
xml_mix.xml
<?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>
17
Section 04 CSS 문법
주석
/*로 시작해서 */로 끝남
CSS 주석은 대.소문자 구분하지 않음
사용 예
/* CSS 주석 : student 요소에 데이터는 굵은체로 파란색으로 표시 */
student {font-weight :bold ;
color : blue }
18
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 }
• 기본적으로 선택자 내에 모든 요소 이름을 포함
• 이름을 콤마(,)로 구분
19
Section 04 CSS 문법
선택자
요소 이름과 함께 하나 또는 그 이상의 부모 요소의 이름을 포함할
수 있음 규칙은 명시된 이름을 갖는 마지막 자식 요소에만 적용
된다.
문맥 선택자
하나 또는 그 이상의 부모 요소를 포함하는 선택자
cf. 부모 요소 이름을 갖지 않는 선택자는 일반 선택자
20
Section 04 CSS 문법
문맥 선택자 사용 예
<students>
<name> 단국대학교 </name>
<student>
<name> 홍 현 </name>
<age> 30 </age>
<address> 서울 면목동 </address>
<email> [email protected] </email>
</student>
</students>
students.xml
name { color : red }
student name { color : blue; font-style : italic }
students.css
name { color : red }
students2.css
student , name { color : blue; font-style : italic }
21
Section 04 CSS 문법
클래스를 선택자로 사용한 예: HTML
<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
22
Section 04 CSS 문법
클래스를 선택자로 사용한 예: XML
<?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
23
Section 04 CSS 문법
ID를 선택자로 사용
CSS 규칙에 특정 ID를 부여해서 쉽게 적용하는 방법
형식 #CSS_ID { 선언 }
ID를 선택자로 사용한 예 1
selector_id.xml
<?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>
24
Section 04 CSS 문법
ID 를 선택자로 사용한 예 2
selector_id2.xml
<?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>
25
Section 04 CSS 문법
네임스페이스 참조
선택자 정의에서 콜론(:) 앞에 역슬래시(\)를 반드시 삽입
네임스페이스 참조를 사용한 예 1
st\:sid {font-style : normal; color : green}
st\:name {font-style : normal; color : blue}
css_namespace.css
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'?>
css_namespace.xml
<?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>
26
Section 04 CSS 문법
네임스페이스 참조를 사용한 예 2
name_space.xml
<?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>
name_space.css
address {font-style : normal; color : blue}
Address {font-style : italic; color : red}
ADDRESS {font-style : italic; color : green}
27
Section 04 CSS 문법
네임스페이스 참조를 사용한 예 3
name_space.xml
<?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>
name_space2.css
s\:address {font-style : normal; color : blue}
t\:Address {font-style : italic; color : red}
b\:ADDRESS {font-style : italic; color : green}
28
Section 04 CSS 문법
이미지 사용 예 1
xml_image.xml
<?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>
29
Section 04 CSS 문법
이미지 사용 예 2
xml_image2.xml
<?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>
30
Section 04 CSS 문법
그룹핑
스타일시트 크기를 줄이기 위해 선택자를 컴마(,)로 분리해서 그룹
으로 묶은 목록
형식 1
name,address,email{font-style:italic; color : yellow }
형식 2
name {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: italic;
}
31
Section 04 CSS 문법
그룹핑 사용 예
<?xml-stylesheet type="text/css" href="#idstyle"?>
grouping.xml
<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>
32
Section 04 CSS 문법
가상 클래스와 가상 요소 사용 예 1
<HTML>
anchor.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>
33
Section 04 CSS 문법
가상 클래스와 가상 요소 사용 예 2
<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>
anchor4.html
34
Section 04 CSS 문법
가상 클래스와 가상 요소 사용 예 3
<HTML>
first_line.html
<HEAD>
<STYLE type="text/css">
P:first-letter { color: red; font-weight:bold; texttransform: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>
35
Section 04 CSS 문법
캐스케이딩
CSS에서 캐스케이딩은 여러 다양한 수준에서 속성 값을 지정할 수
있다는 의미
CSS 적용 우선순위
!important 명시 > style속성 > style요소 ( ID >class > contextual
selector>general selector) > 외부 CSS 파일
36
Section 04 CSS 문법
CSS 적용 우선순위를 살펴보는 예제
name {font-style: italic ; color : green}
xml-priority.css
<?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>
37
Section 04 CSS 문법
속성 설정
디스플레이 속성 브라우저가 요소의 텍스트를 표시하는 기본 방법
을 제어
• none : 요소의 컨텐츠 또는 그 자식 요소 모두 표시하지 않는다.
• block : 요소 텍스트의 앞과 뒤에 항상 줄 바꿈을 삽입
• inline : 두 요소 텍스트 사이에 줄 바꿈이 삽입되지 않음
• list-item : 요소를 하나의 block 요소로 다룸
• 요소 컨텐츠를 글머리 기호 또는 번호 리스트의 항목으로 구성인터넷
익스플로러 6.0이상에서만 적용
38
Section 04 CSS 문법
디스플레이 속성 사용 예
xml_display.css
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_display.xml
<?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>
39
Section 04 CSS 문법
visibility 속성값
속성값
내용
inherit
기본값이다. 요소가 부모 요소의 “visibility” 속성을 상속
visible
요소가 보이도록 지정
hidden
요소가 보이지 않도록 지정
40
Section 04 CSS 문법
visibility 속성값 관련 예제
student {display : block; margin-top: 20pt ; font-size : xml_display2.css
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"?>xml_display2.xml
<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>
41
Section 04 CSS 문법
속성 구성과 속성 효과값
속성 구성
속성 효과와 값
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)
42
Section 04 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_liststyle.css
<?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>
xml_liststyle.xml
43
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 }
44
Section 04 CSS 문법
글자 속성 관련 예
<?xml-stylesheet type="text/css" href="#font"?>
xml_font.xml
<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>
45
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}
46
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}
47
Section 04 CSS 문법
색상과 배경 속성 관련 예
xml_background.xml
<?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>
48
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}
49
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}
50
Section 04 CSS 문법
문자 간격과 맞춤 속성 관련 예
<?xml-stylesheet type="text/css" href="#text"?>
<students>
<style id="text">
<!-name, address, job, book, office, phone {display:block}
xml_text.xml
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>
51
Thank you