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 명령을 사용하는 방법


7

<HTML> <HEAD> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <H1> 문자를 기울임꼴에 빨간색으로 표현 </H1> <H2> 문자를 보통에 파란색으로 표현 </H2> </BODY> </HTML>

문서 내에 CSS 를 삽입하는 예 : HTML


css_test.html

8


문서 내에 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> [email protected] </email> </student> </students>

@import 명령을 사용한 예 : XML


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


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">  </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email STYLE="color:red;text-decoration:underline"> [email protected] </email> </student> </students>

여러 CSS 적용 방법을 사용한 예 : XML


xml_mix.xml

18

주석/* 로 시작해서 */ 로 끝남CSS 주석은 대 . 소문자 구분하지 않음사용 예

Section 04 CSS 문법

/* CSS 주석 : student 요소에 데이터는 굵은체로 파란색으로 표시 */ student {font-weight :bold ; color : blue }

19

다중 요소와 다중 규칙여러 요소에 규칙을 하나 적용할 수 있고 ,

요소 하나에 여러 규칙을 적용할 수 있음

• 기본적으로 선택자 내에 모든 요소 이름을 포함• 이름을 콤마 (,) 로 구분


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


선택자 요소 이름과 함께 하나 또는 그 이상의 부모 요소의 이름을 포함할 수 있음 규칙은 명시된 이름을 갖는 마지막 자식 요소에만 적용된다 .

문맥 선택자하나 또는 그 이상의 부모 요소를 포함하는 선택자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 }

문맥 선택자 사용 예


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>


클래스를 선택자로 사용한 예 : HTML

class.htm

23

<?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

클래스를 선택자로 사용한 예 : XML


24

<?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"> [email protected] </email> </student> </students>

ID 를 선택자로 사용CSS 규칙에 특정 ID 를 부여해서 쉽게 적용하는 방법형식

ID 를 선택자로 사용한 예 1


#CSS_ID { 선언 }

selector_id.xml

25

<?xml-stylesheet type="text/css" href="#idstyle"?> <students> <style id="idstyle">  </style>

<student> <name id="cssid1"> 홍 현 </name> <age id="cssid1"> 30 </age> </student> </students>

ID 를 선택자로 사용한 예 2


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>


네임스페이스 참조 선택자 정의에서 콜론 (:) 앞에 역슬래시 (\) 를 반드시 삽입

네임스페이스 참조를 사용한 예 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}



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}



name_space.xml

name_space2.css

29

<?xml-stylesheet type="text/css" href="#imagestyle"?> <students> <style id="imagestyle">  </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> [email protected] </email> </student> </students>

이미지 사용 예 1


xml_image.xml

30

<?xml-stylesheet type="text/css" href="#imagestyle"?> <students> <style id="imagestyle">  </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> [email protected] </email> </student> </students>

이미지 사용 예 2


xml_image2.xml

31

그룹핑스타일시트 크기를 줄이기 위해 선택자를 컴마 (,) 로 분리해서 그룹으로 묶은 목록형식 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; }

32

<?xml-stylesheet type="text/css" href="#idstyle"?> <students> <style id="idstyle">  </style> <student> <name> 홍 현 </name> <address> 서울 면목동 </address> <email> [email protected] </email> </student> </students>

그룹핑 사용 예


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


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>



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>



first_line.html

36


캐스케이딩 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">  </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 적용 우선순위를 살펴보는 예제


xml-priority.css

38

속성 설정디스플레이 속성 브라우저가 요소의 텍스트를 표시하는 기본 방법을 제어• none : 요소의 컨텐츠 또는 그 자식 요소 모두 표시하지 않는다 .

• block : 요소 텍스트의 앞과 뒤에 항상 줄 바꿈을 삽입• inline : 두 요소 텍스트 사이에 줄 바꿈이 삽입되지 않음• list-item : 요소를 하나의 block 요소로 다룸• 요소 컨텐츠를 글머리 기호 또는 번호 리스트의 항목으로

구성인터넷 익스플로러 6.0 이상에서만 적용


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>

디스플레이 속성 사용 예


xml_display.css

xml_display.xml

40


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 속성값 관련 예제


xml_display2.css

xml_display2.xml

42

속성 구성과 속성 효과값


목록 마커로 사용자 정의 지정 이미지를 사용한다 .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}

속성 구성과 속성 효과값 관련 예제


xml_liststyle.css

xml_liststyle.xml

44

글자 속성


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">  </style> <student> <name> Go Soyong </name> <address> Seoul </address> <email> [email protected] </email> <job> student </job> <book> XML </book> </student> </students>

xml_font.xml

글자 속성 관련 예


46

색상과 배경 속성


설명속성명 사용 방법

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

색상과 배경 속성



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">  </style> <student> <name> 고소영 </name> <address> 서울 </address> <email> [email protected] </email> <job> 연예인 </job> <book> XML 활용백서 </book> </student> </students>


색상과 배경 속성 관련 예xml_background.xml

49

문자 간격과 맞춤 속성



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


문자 간격과 맞춤 속성설명속성명 사용 방법

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">  </style> <student> <name> 고소영 </name> <address> 서울 서초구 잠원동 </address> <job> 연예인 </job> <book> XML 활용백서 </book> <office> dankook university </office> <phone> 02-123-1234 </phone> </student> </students>

문자 간격과 맞춤 속성 관련 예


xml_text.xml

Thank you

XML 문서 화면 표현 CSS 개념 CSS 사용법 CSS 문법

Documents