Section 03 CSS CSS HTML HTML HEAD STYLE

  • Slides: 52
Download presentation

Section 03 CSS 사용법 문서 내에 CSS를 삽입하는 예: HTML <HTML> <HEAD> <STYLE type="text/css">

Section 03 CSS 사용법 문서 내에 CSS를 삽입하는 예: HTML <HTML> <HEAD> <STYLE type="text/css"> <!-- h 1 {font-style : italic ; color : red} h 2 {font-style : normal ; color : blue} --> </STYLE> </HEAD> <BODY> <H 1> 문자를 기울임꼴에 빨간색으로 표현 </H 1> <H 2> 문자를 보통에 파란색으로 표현</H 2> </BODY> </HTML> css_test. html 7

Section 03 CSS 사용법 문서 내에 CSS를 삽입하는 예: XML <? xml version='1. 0'

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> hong@dankook. ac. kr </email> </student> </students> 8

Section 03 CSS 사용법 스타일 속성을 각 태그에 적용하는 예: HTML <HTML> <Head> <title>

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

Section 03 CSS 사용법 스타일 속성을 각 태그에 적용하는 예: XML <? xml version='1.

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"> hong@dankook. ac. kr </email> </student> </students> 10

Section 03 CSS 사용법 외부 스타일시트를 연결하는 예: HTML H 1 {font-style : normal;

Section 03 CSS 사용법 외부 스타일시트를 연결하는 예: HTML H 1 {font-style : normal; color : blue} H 2 {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> <H 1>문자를 보통에 파란색으로 표현</H 1> <P> <H 2>문자를 기울임꼴에 녹색으로 표현</H 2> </BODY> </HTML> 11

Section 03 CSS 사용법 3. 외부 스타일시트를 연결하는 예: XML name {font-style : normal;

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> hong@dankook. ac. kr </email> </student> </students> 12

Section 03 CSS 사용법 @import 명령을 사용한 예: HTML H 4 { color: green

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

Section 03 CSS 사용법 @import 명령을 사용한 예: XML name {font-style : normal; color

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> hong@dankook. ac. kr </email> </student> </students> 15

Section 03 CSS 사용법 여러 CSS 적용 방법을 사용한 예: HTML <HTML> css_mix. html

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); H 1 {font-style : italic ; color : red} </STYLE> </HEAD> <BODY> <H 1>문자를 기울임꼴에 빨간색으로 표현</H 1> <P> <H 3 style="font-style: italic; color: blue"> 문자를 기울임꼴에 파란색으로 표현 </H 3> <P> <H 5>Link에 의한 CSS 적용 </H 5> </BODY> </HTML> 16

Section 03 CSS 사용법 여러 CSS 적용 방법을 사용한 예: XML <? xml version='1.

Section 03 CSS 사용법 여러 CSS 적용 방법을 사용한 예: XML <? xml version='1. 0' encoding='euc-kr'? > xml_mix. xml <? xml-stylesheet type="text/css" href="xml_mix 1. css"? > <? xml-stylesheet type="text/css" href="#mixstyle"? > <students> <style id="mixstyle"> <!-- @import url(xml_mix 2. 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> 17

Section 04 CSS 문법 문맥 선택자 사용 예 <students> <name> 단국대학교 </name> <student> <name>

Section 04 CSS 문법 문맥 선택자 사용 예 <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 } students 2. css student , name { color : blue; font-style : italic } 21

Section 04 CSS 문법 클래스를 선택자로 사용한 예: HTML <HTML> <HEAD><TITLE>클래스 사용</TITLE> <STYLE TYPE="text/css">

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

Section 04 CSS 문법 클래스를 선택자로 사용한 예: XML <? xml-stylesheet type="text/css" href="#class"? >

Section 04 CSS 문법 클래스를 선택자로 사용한 예: XML <? xml-stylesheet type="text/css" href="#class"? > xml_class. xml <students> <style id="class"> <!-- name. class 1 { color: red } name. class 2 { color: blue } name. class 3 { color: green } --> </style> <student> <name class="class 1"> 고소영 </name> </student> <name class="class 2"> 고소영 </name> </student> <name class="class 3"> 고소영 </name> </students> 23

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

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

Section 04 CSS 문법 ID 를 선택자로 사용한 예 2 selector_id 2. xml <?

Section 04 CSS 문법 ID 를 선택자로 사용한 예 2 selector_id 2. xml <? xml-stylesheet type="text/css" href="#idstyle"? > <students> <style id="idstyle"> <!-- #cssid 1 {font-style : normal ; color : blue} age#cssid 1 {font-style : italic ; color : red} --> </style> <student> <name id="cssid 1"> 홍 현 </name> <age id="cssid 1"> 30 </age> </students> 25

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

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.

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> address {font-style : normal; color : blue} Address {font-style : italic; color : red} ADDRESS {font-style : italic; color : green} name_space. css 27

Section 04 CSS 문법 네임스페이스 참조를 사용한 예 3 name_space. xml <? xml version='1.

Section 04 CSS 문법 네임스페이스 참조를 사용한 예 3 name_space. xml <? xml version='1. 0' encoding='euc-kr'? > <? xml-stylesheet type="text/css" href="name_space 2. 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 2. 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"?

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> hong@dankook. ac. kr </email> </student> </students> 29

Section 04 CSS 문법 이미지 사용 예 2 xml_image 2. xml <? xml-stylesheet type="text/css"

Section 04 CSS 문법 이미지 사용 예 2 xml_image 2. 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(bg 2. gif); font-style : italic; color : red} --> </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook. ac. kr </email> </student> </students> 30

Section 04 CSS 문법 그룹핑 스타일시트 크기를 줄이기 위해 선택자를 컴마(, )로 분리해서 그룹

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

Section 04 CSS 문법 그룹핑 사용 예 <? xml-stylesheet type="text/css" href="#idstyle"? > grouping. xml

Section 04 CSS 문법 그룹핑 사용 예 <? xml-stylesheet type="text/css" href="#idstyle"? > grouping. xml <students> <style id="idstyle"> <!-- name { font: bold 12 pt/14 pt helvetica} address, email { font: bold 16 pt/18 pt helvetica} --> </style> <student> <name> 홍 현 </name> <address> 서울 면목동 </address> <email> hong@dankook. ac. kr </email> </students> 32

Section 04 CSS 문법 가상 클래스와 가상 요소 사용 예 1 <HTML> anchor. html

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 : 고소영 address : 서울 압구정 E-mail: <A HREF="mailto: gosoyoung@dankook. ac. kr">gosoyoung@dankook. ac. kr</A> </BODY> </HTML> 33

Section 04 CSS 문법 가상 클래스와 가상 요소 사용 예 2 <HTML> <HEAD> <STYLE

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

Section 04 CSS 문법 가상 클래스와 가상 요소 사용 예 3 <HTML> first_line. html

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>address : 서울 압구정 <p> E-mail: <A HREF="mailto: go@dankook. ac. kr"> go@dankook. ac. kr</A> </P> </BODY> </HTML> 35

Section 04 CSS 문법 CSS 적용 우선순위를 살펴보는 예제 name {font-style: italic ; color

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"> hong@dankook. ac. kr </email> </student> </students> 37

Section 04 CSS 문법 디스플레이 속성 사용 예 xml_display. css student {display : block;

Section 04 CSS 문법 디스플레이 속성 사용 예 xml_display. css student {display : block; margin-top: 20 pt ; font-size : 16 pt } 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>hong@dankook. ac. kr</homeemail> <officeemail>hong@dku. edu</officeemail> </email> </student> </students> 39

Section 04 CSS 문법 visibility 속성값 관련 예제 student {display : block; margin-top: 20

Section 04 CSS 문법 visibility 속성값 관련 예제 student {display : block; margin-top: 20 pt ; font-size : 16 pt } xml_display 2. css 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_display 2. css"? > xml_display 2. xml <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> 41

Section 04 CSS 문법 속성 구성과 속성 효과값 관련 예제 student { display :

Section 04 CSS 문법 속성 구성과 속성 효과값 관련 예제 student { display : list-item; list-style-type: decimal; list-style-position: outside; margin-left: 30 pt; margin-top: 20 pt ; font-size : 13 pt } 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> <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. xml 43

Section 04 CSS 문법 글자 속성 속성명 설명 사용 방법 font-family 사용되는 글꼴을 표현

Section 04 CSS 문법 글자 속성 속성명 설명 사용 방법 font-family 사용되는 글꼴을 표현 NAME {font-family: Arial} font-size 글자크기를 절대값, 상대값, 백분율로 표현 NAME {font-size: 12 pt} 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: 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 12 pt/16 pt Arial} NAME {font-size: 12 pt; font-weight: bold } 44

Section 04 CSS 문법 글자 속성 관련 예 <? xml-stylesheet type="text/css" href="#font"? > xml_font.

Section 04 CSS 문법 글자 속성 관련 예 <? xml-stylesheet type="text/css" href="#font"? > xml_font. xml <students> <style id="font"> <!-- name { font-family: serif; font-size: 12 pt; 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> </students> 45

Section 04 CSS 문법 색상과 배경 속성 속성명 설명 사용 방법 color 요소의 텍스트

Section 04 CSS 문법 색상과 배경 속성 속성명 설명 사용 방법 color 요소의 텍스트 색을 지정 NAME {color : red} NAME {color : rgb(255, 0, 0)} NAME {color : rgb(100%, 0%)} NAME {color : #FF 0000} background-color 요소의 배경색을 지정 NAME {background-color : red} NAME {background-color : #FF 0000} 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 배경 이미지가

Section 04 CSS 문법 색상과 배경 속성 속성명 설명 사용 방법 background-attachment 배경 이미지가 스크롤과 함께 이동할 것인지를 지정 NAME {background-attachment: scroll} NAME {background-attachment: fixed} background-position 배경색이나 배경 이미지의 시작 위치를 지정 NAME {background-position: 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"

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)} student { background-color: #ffffff; background-image: url(bg. gif); background-repeat: repeat; background-attachment: scroll; background-position: 100% } email { background-image: url(bg 2. gif)} --> </style> <student> <name> 고소영</name> <address> 서울 </address> <email> go@dankook. ac. kr </email> <job> 연예인 </job> <book> XML 활용백서 </book> </student> </students> 48

Section 04 CSS 문법 문자 간격과 맞춤 속성 속성명 설명 사용 방법 letter-spacing 요소

Section 04 CSS 문법 문자 간격과 맞춤 속성 속성명 설명 사용 방법 letter-spacing 요소 텍스트의 문자 사이 간격을 늘이거나 줄일 수 있다. NAME {letter-spacing: . 25 em} NAME {letter-spacing: -. 5 pt} NAME {letter-spacing: 0 cm} word-spacing 전체 단어 사이의 간격을 늘이거나 줄일 수 있다. NAME {word-spacing: 2 em} NAME {word-spacing: 3 cm} 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 요소

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: 3 em} NAME {text-indent: -2 em} NAME {text-indent: 50%} line-height 요소 텍스트의 기본 선 사이의 간격을 조정 NAME {line-height: normal} /* 기본값 */ NAME {line-height: 3} NAME {line-height: 3. 5 em} 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"?

Section 04 CSS 문법 문자 간격과 맞춤 속성 관련 예 <? xml-stylesheet type="text/css" href="#text"? > <students> <style id="text"> <!-- name, address, job, book, office, phone {display: block} name { letter-spacing : 3 cm} address { word-spacing : 2 em} 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 -1234 </phone> </student> </students> xml_text. xml 51

Thank you

Thank you