Trio Ȩ?????? - ?ؽ?Ʈ(Text) - CSS2 ?԰? ??????

16 ?ؽ?Ʈ(Text)

????

???? ?׸?鿡?? ?? ?Ӽ????? ???ڵ?, ??????, ?ܾ??? ???ܵ??? ???̴? ǥ???? ?????? ?ִ? ???? ?????Ѵ?.

16.1 ?鿩????: 'text-indent' ?Ӽ?

??:	\| \| inherit
???ʰ?:	0
????:	????????(block-level) ??????Ʈ??
????:	??
?????:	?????? ????(block)?? ?ʺ? ????
?޵??:	visible(???̴?)

?? ?Ӽ??? ????(block)???? ?ؽ?Ʈ ù??�� ???? ?鿩???⸦ ?????Ѵ?. ?? ??Ȯ?ϰ? ???ϸ?, ?̴? ????(block)?? ó?? ???? ?ڽ?(line box) ?ȿ? ???? ù??�� ?ڽ?(box)?? ?鿩???⸦ ?????Ѵ? ?ڽ??? ???? ?ڽ?(line box)?? ????(?Ǵ? ?????ʿ??? ???????? ?��?Ǵ? ??��?? ??????) ?𼭸??? ????????? ?鿩???Ⱑ ?ȴ?. ??뵵?????? ?鿩???⸦ ?? ???????? ǥ???Ͽ??? ?Ѵ?.

?????? ?????? ?ǹ̸? ???��?:

: ???? ????(length) ?鿩????.
: ??????(containing block) ?ʺ??? ????? ??ŭ ?鿩????.

'text-indent'?? ???? ?????? ?? ??????, ???�� ???? ???ѵ??? ???? ?? ?ִ?.

?????? '3em' ??ŭ ?鿩?????ϴ? ?ؽ?Ʈ ?????̴?.

P { text-indent: 3em }

16.2 ????: 'text-align' ?Ӽ?

'text-align'

??:	left \| right \| center \| justify \| \| inherit
???ʰ?:	??뵵???? ???? ???⿡ ???? ?ٸ?
????:	????????(block-level) ??????Ʈ??
????:	??
?????:	??? ????
?޵??:	visible(???̴?)

?? ?Ӽ??? ????(block)?? ?��??? ?????? ???ĵǴ��??? ????Ѵ?. ?????? ?????? ?ǹ̸? ???��?:

left, right, center?? justify: ???? ?ؽ?Ʈ?? ????, ??????, ?߾Ӱ? ???? justify ?̴?.
: ???̺??? ?��?(table column) ?ȿ??? ? ??(cell)?鿡 ???ڿ??? ???ĵǴ��??? ?????Ѵ?(???��??װ? ?????? ?��??????? ???????? ????). ?? ???? ???̺?(table)?? ???鿡 ?? ????ȴ?. ???? ?ٸ? ??????Ʈ?鿡 ?????Ǹ?, ????('direction')?? ???ʿ??? ??????????('ltr')?ΰ? ?????ʿ??? ????????('rtl') ?ΰ??? ???? 'left' ?Ǵ? 'right'?? ó???ȴ?.

?ؽ?Ʈ ????(block)?? ???? ?ڽ?(line box)???? ?��??? ???̴?. 'left', 'right'?? 'center'?? ???, ?? ?Ӽ??? ?? ???? ?ڽ? ?ȿ??? ?��??? ?ڽ????? ???? ?ڽ??? ???ʰ? ?????? ??鿡 ???Ͽ? ??? ???ĵǴ��??? ?????Ѵ?; ?????? ??????Ʈ(viewport)?? ???Ͽ? ?̷?????? ???? ?ƴϴ?. 'justify'?? ???, ??뵵???? ?? ???? ??ġ?? ?߰??Ͽ? ?��??? ?ڽ????? ??? ?��? ?? ?ִ?('letter-spacing'?? 'word-spacing' ????).

?? ????????, 'text-align'?? ????(inherit)?Ǿ????Ƿ?, 'class=center'?? ?ִ? DIV ??????Ʈ ???? ??? ????????(block-level) ??????Ʈ?鿡?? ?��??? ?????? ?߾ӿ? ??ġ?Ѵ?.

DIV.center { text-align: center }

?ּ?. ?????????? ???Ǵ? ????(justification) ????? ??뵵???? ?????? ?? ???? ?ٸ???.

?԰ݿ? ?????ϴ? ??뵵?????? ?? 'justify'??, ?? ??????Ʈ?? ????Ʈ(default) ???? ?????? ???ʿ??? ??????????(left-to-right) ?Ǵ? ?????ʿ??? ????????(right-to-left) ?ΰ??? ????, ???? 'left' ?Ǵ? 'right'???? ?ؼ??? ?? ?ִ?.

16.3 ???

16.3.1 ???ٱ߱?, ???ٱ߱?, ????ٱ߱?? ?????Ÿ???:
'text-decoration' ?Ӽ?

'text-decoration'

??:	none \| [ underline \|\| overline \|\| line-through \|\| blink ] \| inherit
???ʰ?:	none
????:	??? ??????Ʈ??
????:	?ȵ?(prose ????)
?????:	??? ????
?޵??:	visible(???̴?)

?? ?Ӽ??? ??????Ʈ?? ?ؽ?Ʈ?? ?߰??Ǵ? ??ĵ??? ?????Ѵ?. ???? ?? ?Ӽ??? ????????(block-level) ??????Ʈ?? ?????Ǿ?????, ?? ??????Ʈ ??? ?��???(inline-level) ????(descendant)?鿡 ????ȴ?. ???? ?��??? ??????Ʈ?? ?????ǰų? ?????? ?ָ?, ?? ??????Ʈ?? ???Ͽ? ?????? ??? ?ڽ??鿡 ?ۿ??Ѵ?. ???? ?? ??????Ʈ?? ?????̳? ?ؽ?Ʈ ?????? ?ڱ?? ???? ??????(??: HTML?? IMG ??????Ʈ), ??뵵?????? ?? ?Ӽ??? ?????Ͽ??? ?Ѵ?.

?????? ?????? ?ǹ̸? ???��?:

none(????): ?ؽ?Ʈ ????? ????.
underline(????): ?? ?ؽ?Ʈ?? ?ٿ? ?????? ?ߴ��?.
overline(????): ?? ?ؽ?Ʈ?? ?? ???? ???? ?ߴ��?.
line-through(??? ?ٱ߱?): ?? ?ؽ?Ʈ?? ?? ???? ?? ???? ????? ???? ?ߴ��?.
blink(?????Ÿ?): ?ؽ?Ʈ?? ?????Ÿ???(?????? ?Ⱥ????ٸ? ?ݺ?). ?԰ݿ? ?????ϴ? ??뵵?????? ?? ???? ?????? ?ʿ?? ???? ?ʴ��?.

?ؽ?Ʈ ??��? ?ʿ??? ??????? 'color' ?Ӽ????鿡?? ???? ?;? ?Ѵ?.

?? ?Ӽ??? ????(inherit)???? ??????, ???? ?ڽ??? ????(descendant) ?ڽ????? ???? ??????? ???ȭ?Ǿ?? ?Ѵ?(??: ??? ???ٱ׾???). ???? ??????Ʈ???? ?ٸ? 'color' ?????? ?????? ?ִ? ?ϴ???, ???? ??ĵ??? ?????? ?ʴ��?.

???? HTML ????????, ????(hyperlink)?? ?ۿ??ϴ? ??? A ??????Ʈ???? ?ؽ?Ʈ ?????? ?????? ?? ???̴?:

A[href] { text-decoration: underline }

16.3.2 ?ؽ?Ʈ ?׸???: 'text-shadow' ?Ӽ?

'text-shadow'

??:	none \| [ \|\| ?,]* [ \|\| ?] \| inherit
???ʰ?:	none
????:	??? ??????Ʈ??
????:	?ȵ?(prose ????)
?????:	??? ????
?޵??:	visible(???̴?)

?? ?Ӽ??? ?��??? ??????Ʈ?? ?ؽ?Ʈ?? ????Ǵ? ?׸???(shadow) ȿ?????? ?��??? ????? ?????Ѵ?. ?׸??? ȿ?????? ?????? ?????? ????ǰ? ???? ??ĥ ?? ??????, ?ؽ?Ʈ ??ü???? ????? ???????? ?ʴ��?. ?׸??? ȿ?????? ?ڽ??? ũ?⸦ ?????Ű?? ??????, ?׷??? ?? ?׵��??? ?????? Ȯ??? ?? ?ִ?. ?׸??? ȿ?????? stack ?????? ?? ??????Ʈ ??ü?? ?Ͱ? ????.

?? ?׸??? ȿ???? ?׸??? ??????Ʈ(offset)?? ?????Ͽ??? ?ϰ?, ?????????? ?帲 ????(blur radius)?? ?׸??? ?????? ?????? ?? ?ִ?.

?׸??? ??????Ʈ(offset)?? ?ؽ?Ʈ?? ?????? ?Ÿ??? ??Ÿ???? ?? ????? ?????ȴ?. ù??�� ???? ???? ?ؽ?Ʈ?? ?????ʱ????? ???? ?Ÿ??? ?????Ѵ?. ???? ???? ???? ???? ?ؽ?Ʈ?? ???ʿ? ?׸??ڸ? ??ġ??Ų??. ?��?�� ???? ???? ?ؽ?Ʈ?? ?Ʒ????? ?????Ÿ??? ?????Ѵ?. ???? ?????? ???? ???? ?ؽ?Ʈ?? ???ʿ? ?׸??ڸ? ??ġ??Ų??.

?帲 ????(blur radius)?? ?׸??? ??????Ʈ ?????? ?????????? ?????? ?? ?ִ?. ?帲 ?????? ???? ?帲 ȿ???? ?ִ? ?׵��??? ?????ϴ? ???̴?. ???????? ?帲 ȿ???? ??? ????? ???ǵ??? ?ʾҴ?.

?????? ?׸??? ȿ???? ???? ???? ?????̳? ???��? ?????????? ?????? ?? ?ִ?. ?????? ?׸??? ȿ???? ???? ???ʷ? ???ȴ?. ???? ?????? ???????? ?ʾ?????, 'color' ?Ӽ????? ??? ???ȴ?.

?ؽ?Ʈ?? ?׸??ڴ? :first-letter?? :first-line ???? ??????Ʈ(pseudo-element)??? ?Բ? ???? ?? ?ִ?.

?Ʒ? ?????? ??????Ʈ?? ?ؽ?Ʈ ?????ʰ? ?Ʒ??? ?ؽ?Ʈ ?׸??ڸ? ?????Ѵ?. ?????? ???????? ?ʾ????Ƿ?, ?׸??ڴ? ?? ??????Ʈ ??ü?? ????? ???? ?????? ???? ???̰?, ?帲 ?ݰ??? ???????? ?ʾ????Ƿ?, ?ؽ?Ʈ ?׸??ڴ? ??????? ???? ???̴?:

H1 { text-shadow: 0.2em 0.2em }

???? ?????? ?? ??????Ʈ ?ؽ?Ʈ?? ?????ʰ? ?Ʒ??? ?׸???(shadow)?? ?????. ?? ?׸??ڴ? ???? 5px?? ????? ?????? ?ȴ?.

H2 { text-shadow: 3px 3px 5px red }

???? ?????? ?׸??? ȿ?????? ????? ?????Ѵ?.
ù??�� ?׸???(shadow)?? ??????Ʈ?? ?ؽ?Ʈ ?????ʰ? ?Ʒ??? ???? ?????? ?帲 ȿ???? ???? ???̴?. ?��?�� ?׸??ڴ? ù??�� ?׸??? ȿ???? ????????, ??????? ?帲(blur) ȿ???? ?ְ? ?ؽ?Ʈ?? ???ʰ? ?Ʒ? ?��?. ????�� ?׸??? ȿ???? ?ؽ?Ʈ?? ?????ʰ? ???? ??ġ?Ѵ?. ????�� ?׸??? ȿ?????? ?׸??? ?????? ???????? ?ʾ????Ƿ?, ???? ?? ??????Ʈ?? 'color' ?Ӽ??? ???ȴ?:

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

???? ?????? ????:

SPAN.glow {
   background: white;
   color: white;
   text-shadow: black 0px 0px 5px;
}

???⼭ 'background'?? 'color' ?Ӽ????? ???? ???̰? 'text-shadow' ?Ӽ??? ?Ͻ?ȿ??("solar eclipse") ȿ?? ?????? ???ȴ?.:

[D]

?ּ?. ?? ?Ӽ??? CSS1???? ???ǵ??? ?ʾҴ?. ?Ϻ? ?׸??? ȿ????(?????? ?????? ????)?? CSS1 ???? ?????ϴ? ??뵵???鿡???? ?ؽ?Ʈ?? ?????? ???? ?? ?ִ?.

16.4 ???ڿ? ?ܾ? ????: 'letter-spacing', 'word-spacing' ?Ӽ?

'letter-spacing'

??:	normal \| \| inherit
???ʰ?:	normal
????:	??? ??????Ʈ??
????:	??
?????:	??? ????
?޵??:	visible(???̴?)

?? ?Ӽ??? ?ؽ?Ʈ ???ڵ?????? ???? ????? ?????Ѵ?. ?????? ?????? ?ǹ̸? ???��?:

normal(????): ???? ?۲??? ???????? ???? ????̴?. ?? ???? ??뵵?????? ?ؽ?Ʈ?? justify?ϱ? ???Ͽ? ???ڵ?????? ???? ?????? ????Ѵ?.
: ?? ???? ???ڵ?????? ????Ʈ(default) ???ݿ? ?߰??Ͽ? ???ڻ????? ?????? ?????Ѵ?. ?????? ?????? ?? ??????, Ư?? ???�� ?Ѱ???? ???? ?? ?ִ?. ??뵵?????? ???ڻ????? ?????? ?ؽ?Ʈ?? ????(justify)?ϱ? ???Ͽ? ?߰??????? ???? ?Ǵ? ???ҽ?ų ?? ????.

???ڻ????? ???? ?ִ? ??ɵ??? ??뵵???? ???? ?ٸ???, ????(justification: 'text-align' ?Ӽ? ????)?? ???Ͽ??? ?????? ?޴��?.

?? ????????, BLOCKQUOTE ??????Ʈ?? ?ȿ??? ???ڵ? ?????? '0.1em' ??ŭ ?????Ǿ???.

BLOCKQUOTE { letter-spacing: 0.1em }

???? ??????????, ??뵵???? ???? ?????? ???????? ???ϰ? ?Ͽ???:

BLOCKQUOTE { letter-spacing: 0cm } /* '0'?? ???? */

??????? ?? ???ڵ?????? ?????? ????Ʈ ???ݰ? ???? ???? ????, ??뵵?????? ????(ligature)?鸦 ??????? ???ƾ? ?Ѵ?.

?԰ݿ? ?????ϴ? ??뵵?????? 'letter-spacing' ?Ӽ????? 'normal'?? ?????? ?? ?ִ?.

'word-spacing'

??:	normal \| \| inherit
???ʰ?:	normal
????:	??? ??????Ʈ??
????:	??
?????:	??? ????
?޵??:	visible(???̴?)

?? ?Ӽ??? ?ܾ??????? ?????? ?????Ѵ?. ?????? ?????? ?ǹ̸? ???��?:

normal(????): ?????? ?۲ÿ?/?Ǵ? ??뵵???? ???ǵ? ???????? ?ܾ??????? ?????̴?.
: ?? ???? ?ܾ??????? ????Ʈ ???ݿ? ?߰??Ͽ? ?ܾ??????? ?????? ?????Ѵ?. ?????? ?????? ?? ?? ??????, Ư?? ???�� ?Ѱ???? ???? ?? ?ִ?.

?ܾ?????? ???? ?ֱ? ????? ??뵵???? ???? ?ٸ???, ????(justification: 'text-align' ?Ӽ? ????)?? ???ؼ??? ?????? ?޴��?.

?? ????????, H1 ??????Ʈ?? ???? ?? ?ܾ???? ?????? '1em' ??ŭ ?????Ǿ???.

H1 { word-spacing: 1em }

?԰ݿ? ?????ϴ? ??뵵?????? 'word-spacing' ?Ӽ????? 'normal'?? ?????? ?? ?ִ?.

16.5 ?빮??ȭ: 'text-transform' ?Ӽ?

'text-transform'

??:	capitalize \| uppercase \| lowercase \| none \| inherit
???ʰ?:	none
????:	??? ??????Ʈ??
????:	??
?????:	??? ????
?޵??:	visible(???̴?)

?? ?Ӽ??? ??????Ʈ ?ؽ?Ʈ?? ?빮??ȭ ȿ?????? ?????Ѵ?. ?????? ?????? ?ǹ̸? ???��?:

capitalize(?빮??ȭ): ?? ?ܾ??? ù??�� ???ڸ? ?빮?ڷ? ?Ѵ?.
uppercase(?빮??ȭ): ?? ?ܾ??? ??? ???ڵ? ?빮?ڷ? ?Ѵ?.
lowercase(?ҹ???ȭ): ?? ?ܾ??? ??? ???ڵ? ?ҹ??ڷ? ?Ѵ?.
none(??ȭ????): ?빮??ȭ ȿ?????? ????.

???????? ?? ??ҹ??? ??ȯ?? ?????? ?? ???? ?ٸ???. ??????Ʈ?? ???? ????? ?˱? ???? RFC 2070 ([RFC2070])?? ?????϶?.

?԰ݿ? ?????ϴ? ??뵵??????, Latin-1 ?????丮(repertoire)???? ???? ???? ???ڵ?? ISO 10646 ([ISO10646])?? ??ҹ??? ??ȯ ???̺??? ???Ͽ? ?????? ?Ͱ? ?ٸ? ??ȯ?? ?ϴ? ?????? ??????Ʈ?鿡??, 'text-transform' ???? 'none'???? ?????? ?? ?ִ?.

???? ????????, H1 ??????Ʈ ???? ??? ?ؽ?Ʈ?? ?빮?? ?ؽ?Ʈ?? ??ȯ?Ѵ?.

H1 { text-transform: uppercase }

16.6 ????: 'white-space' ?Ӽ?

'white-space'

??:	normal \| pre \| nowrap \| inherit
???ʰ?:	normal
????:	????????(block-level) ??????Ʈ??
????:	??
?????:	??? ????
?޵??:	visible(???̴?)

?? ?Ӽ??? ??????Ʈ ?ȿ??? ?????? ??? ??޵Ǵ��??? ?????ϸ?, ?????? ?????? ?ǹ̸? ???��?:

normal(????): ?? ???? ???? ????? ???? ?ڽ?(line box)???? ä??????? ?ٹٲ??? ????(collapse)?ϵ??? ??뵵???鿡?? ?????Ѵ?. ?????? ???? ?ȿ??? "\A"?? ?????? ?߰??? ?ٹٲ?(line break)???? ?????? ?? ?ִ?(??: HTML?? BR ??????Ʈ).
pre(???????): ?? ???? ??뵵?????? ???? ?????? ?????ϴ? ???? ?????Ѵ?. ???? ???? Ȥ?? ?????? ???��?? "\A"?? ???? ?? ?? ???��? ?ٷ? ?ٹٲ??Ѵ?.
nowrap(?ٹٲ? ????): ?? ???? ?????? 'normal'?????? ???? ???????? ??, ?????? ???? ?ȿ??? "\A"?? ???Ͽ? ?䱸???? ?ʴ? ?? ?ؽ?Ʈ?????? ?ٹٲ??? ?????ȴ?(??: HTML?? BR ??????Ʈ).

???? ???????? HTML???? PRE, P ??????Ʈ??? "nowrap" ??Ʈ????Ʈ???? ? ???? ?ۿ??? ???Ǵ��??? ?????ش?.

PRE { white-space: pre }
P { white-space: normal }
TD[nowrap] { white-space: nowrap }

?԰ݿ? ?????ϴ? ??뵵?????? ?????ڿ? ????? ??Ÿ?Ͻ?Ʈ?鿡?? 'white-space' ?Ӽ??? ?????? ?? ??????, ????Ʈ ??Ÿ?Ͻ?Ʈ?????? ?? ???? ?????Ǿ?? ?Ѵ?.

?????? ?????? ?????? ????()?? ???????? ???? ????? ??????.
(?????? )