ㅎㅎ CSS XML 문서 화면 표현 CSS 개념 CSS 사용법 CSS 문법
학습목표 4장. CSS CSS의 사용 목적과 방법 학습 XML 문서에 CSS를 적용하는 방법 실습
XML 문서를 화면에 표현하는 방법 HTML 문서와 XML 문서: 화면 표현 Section 01 XML 문서 화면 표현 CSS(Cascading Style Sheet)를 이용하는 방법 XSL(eXtensible StyleSheet Language)을 이용하는 방법 HTML 문서와 XML 문서: 화면 표현 [그림 4-1] HTML 출력 결과 [그림 4-2] XML 출력 결과
스타일시트(style sheets) CSS 장점 CSS 단점 Section 02 CSS 개념 문서의 각 요소를 화면에 표시하기 위해 스타일 규칙을 모아놓은 문서 데이터를 포장하기 위한 포장지 역할 CSS 장점 기능 확장성: HTML 기능의 확장 가능 양식 모듈화: 흐름이 같은 문서 양식으로 전체 구성 가능 간편성: 문서 형식을 손쉽고 다양하게 구성 가능 일관성: 사용 환경에 영향받지 않음 CSS 단점 브라우저의 호환성 문제
CSS 구성 H3 { font-style : italic ; color : red } Section 03 CSS 사용법 선택자: 표시 정보를 적용하는 요소 타입 선언 블록: 중괄호({})를 사용하고 하나 이상의 선언 포함 각 선언은 세미콜론(;)으로 구분 각 선언은 요소를 표시하는 글꼴과 해당 속성을 지정 선언은 속성과 값, 콜론으로 구성 H3 { font-style : italic ; color : red } 선택자 속성 값 선언 CSS 규칙
CSS 적용 방법 Section 03 CSS 사용법 문서 내에 CSS를 삽입하는 방법 스타일 속성을 각각의 태그에 적용하는 방법 외부 스타일시트를 연결하는 방법 @import 명령을 사용하는 방법
문서 내에 CSS를 삽입하는 예: HTML Section 03 CSS 사용법 <HTML> css_test.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
문서 내에 CSS를 삽입하는 예: XML Section 03 CSS 사용법 <?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> hong@dankook.ac.kr </email> </student> </students> xml_style.xml
스타일 속성을 각 태그에 적용하는 예: HTML 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
스타일 속성을 각 태그에 적용하는 예: XML Section 03 CSS 사용법 student_css.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
외부 스타일시트를 연결하는 예: HTML Section 03 CSS 사용법 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
3. 외부 스타일시트를 연결하는 예: XML Section 03 CSS 사용법 xml_link.css xml_link.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
@import 명령 Section 03 CSS 사용법 다른 곳에 있는 스타일시트를 가져오는 옵션 사용 관련된 규칙을 분리된 파일로 저장할 수 있음 문서에서 특정 타입의 필요에 따라 결합할 수 있음 정의 형식 <style> 태그에서 적용가능 <STYLE> 태그의 처음 부분에 표현해야 한다. 외부 CSS 파일의 위치는 "url( )"부분에 표현 외부 CSS 파일의 스타일 중에서 변경할 사항은 <STYLE> 태그에서 다시 정의할 수 있음 @import url(LINK_CSS_URL);
@import 명령을 사용한 예: HTML Section 03 CSS 사용법 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> <H4>CSS 파일내에 @import명령문에 의한 CSS 적용 </H4> </BODY> </HTML> css_import2.html
@import 명령을 사용한 예: XML Section 03 CSS 사용법 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"> <!-- @import url(xml_import.css); email {font-style : italic; color : blue} --> </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook.ac.kr </email> </student> </students> xml_import.xml
여러 CSS 적용 방법을 사용한 예: HTML Section 03 CSS 사용법 <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> <H5>Link에 의한 CSS 적용 </H5> </BODY> </HTML> css_mix.html
여러 CSS 적용 방법을 사용한 예: XML Section 03 CSS 사용법 <?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"> hong@dankook.ac.kr </email> </student> </students> xml_mix.xml
주석 Section 04 CSS 문법 /*로 시작해서 */로 끝남 CSS 주석은 대.소문자 구분하지 않음 사용 예 /* CSS 주석 : student 요소에 데이터는 굵은체로 파란색으로 표시 */ student {font-weight :bold ; color : blue }
다중 요소와 다중 규칙 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 }
선택자 문맥 선택자 Section 04 CSS 문법 요소 이름과 함께 하나 또는 그 이상의 부모 요소의 이름을 포함할 수 있음 규칙은 명시된 이름을 갖는 마지막 자식 요소에만 적용된다. 문맥 선택자 하나 또는 그 이상의 부모 요소를 포함하는 선택자 cf. 부모 요소 이름을 갖지 않는 선택자는 일반 선택자
문맥 선택자 사용 예 Section 04 CSS 문법 <students> students.xml <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
클래스를 선택자로 사용한 예: HTML Section 04 CSS 문법 <HTML> class.htm <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
클래스를 선택자로 사용한 예: XML Section 04 CSS 문법 xml_class.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> <name class="class2"> 고소영 </name> <name class="class3"> 고소영 </name> </students> xml_class.xml
ID를 선택자로 사용 ID를 선택자로 사용한 예 1 Section 04 CSS 문법 CSS 규칙에 특정 ID를 부여해서 쉽게 적용하는 방법 형식 ID를 선택자로 사용한 예 1 #CSS_ID { 선언 } <?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"> hong@dankook.ac.kr </email> </student> </students> selector_id.xml
ID 를 선택자로 사용한 예 2 Section 04 CSS 문법 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> selector_id2.xml
네임스페이스 참조 네임스페이스 참조를 사용한 예 1 Section 04 CSS 문법 선택자 정의에서 콜론(:) 앞에 역슬래시(\)를 반드시 삽입 네임스페이스 참조를 사용한 예 1 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} css_namespace.css <?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.xml
네임스페이스 참조를 사용한 예 2 Section 04 CSS 문법 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.xml address {font-style : normal; color : blue} Address {font-style : italic; color : red} ADDRESS {font-style : italic; color : green} name_space.css
네임스페이스 참조를 사용한 예 3 Section 04 CSS 문법 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_space.xml s\:address {font-style : normal; color : blue} t\:Address {font-style : italic; color : red} b\:ADDRESS {font-style : italic; color : green} name_space2.css
이미지 사용 예 1 Section 04 CSS 문법 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> hong@dankook.ac.kr </email> </student> </students> xml_image.xml
이미지 사용 예 2 Section 04 CSS 문법 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> hong@dankook.ac.kr </email> </student> </students> xml_image2.xml
그룹핑 Section 04 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; }
Section 04 CSS 문법 그룹핑 사용 예 <?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> hong@dankook.ac.kr </email> </student> </students> grouping.xml
가상 클래스와 가상 요소 사용 예 1 Section 04 CSS 문법 <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:gosoyoung@dankook.ac.kr">gosoyoung@dankook.ac.kr</A> </BODY> </HTML> anchor.html
가상 클래스와 가상 요소 사용 예 2 Section 04 CSS 문법 anchor4.html <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> name : 심은하 <br> address : 서울 홍제동 <br> E-mail:<A class="class3" HREF="mailto:sim@dankook.ac.kr"> sim@dankook.ac.kr</A> name : 이효리 <br> address : 서울 신사동 <br> E-mail:<A class="class4" HREF="mailto:lee@dankook.ac.kr"> lee@dankook.ac.kr</A> </BODY> </HTML> anchor4.html
가상 클래스와 가상 요소 사용 예 3 Section 04 CSS 문법 <HTML> first_line.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 적용 우선순위 Section 04 CSS 문법 !important 명시 > style속성 > style요소 ( ID >class > contextual selector>general selector) > 외부 CSS 파일
CSS 적용 우선순위를 살펴보는 예제 Section 04 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"> <!-- 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"> hong@dankook.ac.kr </email> </student> </students> xml-priority.css
속성 설정 Section 04 CSS 문법 디스플레이 속성 브라우저가 요소의 텍스트를 표시하는 기본 방법을 제어 none : 요소의 컨텐츠 또는 그 자식 요소 모두 표시하지 않는다. block : 요소 텍스트의 앞과 뒤에 항상 줄 바꿈을 삽입 inline : 두 요소 텍스트 사이에 줄 바꿈이 삽입되지 않음 list-item : 요소를 하나의 block 요소로 다룸 요소 컨텐츠를 글머리 기호 또는 번호 리스트의 항목으로 구성인터넷 익스플로러 6.0이상에서만 적용
디스플레이 속성 사용 예 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.css <?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.xml
visibility 속성값 Section 04 CSS 문법 요소가 보이지 않도록 지정 hidden 요소가 보이도록 지정 visible 기본값이다. 요소가 부모 요소의 “visibility” 속성을 상속 inherit 내용 속성값
visibility 속성값 관련 예제 Section 04 CSS 문법 xml_display2.css 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_display2.css <?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.xml
속성 구성과 속성 효과값 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 : 목록 마커 사용 안함.
속성 구성과 속성 효과값 관련 예제 Section 04 CSS 문법 xml_liststyle.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> go@dankook.ac.kr </email> </student> <student> <name> 송혜교 </name> <address> 서울 잠원동 </address> <email> song@dankook.ac.kr </email> </student> <name> 김현주 </name> <address> 서울 한남동 </address> <email> kim@dankook.ac.kr </email> </students> xml_liststyle.xml
글자 속성 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 }
글자 속성 관련 예 Section 04 CSS 문법 xml_font.xml <?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> go@dankook.ac.kr </email> <job> student </job> <book> XML </book> </student> </students> xml_font.xml
색상과 배경 속성 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}
색상과 배경 속성 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}
색상과 배경 속성 관련 예 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> go@dankook.ac.kr </email> <job> 연예인 </job> <book> XML 활용백서 </book> </student> </students> xml_background.xml
문자 간격과 맞춤 속성 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}
문자 간격과 맞춤 속성 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}
문자 간격과 맞춤 속성 관련 예 Section 04 CSS 문법 xml_text.xml <?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> xml_text.xml