| 14 ??타?絿?트(style sheet) | |
| ???????? | ???????? | ??? | ??????트 | ??트????트 | ???? | ???? |
??타?絿?트?? ?? ?????悶??? ?傷? ??환???? ?羚?, ???????? ?輧??? ????求? 확?? ?��??? ?羚???. ???? ???滂풔? ?????? 환?占�????, ??????? ?????? 표?????? ?? ???占쏙옙 ?????? ?占쏙옙?????. ???? ?杉? ?篤? ???? ???? 활?? ?????? ????涌�??, HTML?? ???祁??? ????? ?????? ?퓸???, ?????湄??? HTML?? ??타???? ?獵쨉? ?????? ?曼??狗??? ????杉?. ?? ???????? 표???? ?????磯募? ?천????? ????????, ?瀏??? ?求? ??????? ????치 ???? ???? ????? ?????杉?. ?絹? ????? ??? ??????? ?瘤? ??? ?? ?? ????????, ?瞿? ??????? ?錚� ?? ????歐? ???? ?孤??潔??쨉?, ???藪�?? ?틔? ???流??? ???鍍퓸? ?羚???.
?絹? ??????? ?? ?????????? ???茱�?? 크?? ??????키??, 탄?占쏙옙??? ?????構?, ??호 ?????????? ???풔? ?��??? ?攬???陋?, ????悶??? ??????? ?羚???.
??타?絿?트(style sheet)?? ?絹? ???????? ?莫??構? ???첼? HTML?? ???? ?? 표?? ????? ??? ???榴?. ??타?絿?트?? ?灣?트 ???? ?????? ???? 크??, ?涌� ???? ????, ?灣?트?? ????? ????, ??트 크??? ??타?構? ??타 ?摸? ???占쏙옙??流? ???? ?????構??臼???.
???? ???, ???? "special.css"??? 화?狗? ???? ?? 占쏙옙?? CSS ??타?絿?트??, ?????? ???? ?????? ?袈?????, ?流占쏙옙??? ???? ???? ?????? ?????磯?.
P.special {
color: green;
border: solid red;
}
?????渼? ?? ??타?絿?트?? LINK ??????트?? HTML ?????? ?悶??? ???? ??킬 ?? ?獵?.
?? ?????? ?袈? ?灣?트?? ???占쏙옙?.
HTML 4?? ???? ??타?絿?트 ????? ?????磯?.
?莩?? ??타?絿?트?? 특?? ?瀕??(media)?? ?瀕?? ???占쏙옙 ?????????? ???? ?? ?? ?獵?. ??크???? ????歐? ???臼? ???? ?? ?? ??타?絿?트?? ?占쏙옙? ?? ?? ??? ?? ?? ??????, ????(speech-based) ?????????? ???? ?逾�?? ????. ?? ?蹈??? ???? ?????? ?瀕?틸? ?羚??? ??타?絿?트?? ????홱?. ?甄? ??逾�?????? ?????? ?? ??타?絿?트?? ???臼? ????? ?? ?斂? ?磯?. ??타?絿?트 ?????? ???? ??타?絿?트 ?효??? ?瀕?틘? ?????求? ????? ???? ?? ?? ?獵?.
?????? ?????? ?????? ?? HTML ??????트 ?효? 표???? ???? ???占쏙옙? ???? ??킬 ?? ?令????臼?, ?? ?????? ???構? ?獵?. ?瀏??? ?? 표?? ?????? ??逾�???? ?? ??????트?? 표???? ?? ?? ?? ?瘤? ??? ?? ?? ?獵?.
???? ???, ?????渼? ???????? ?????? ?? ?? ?????? ??타?絿?트?? ???? ?????? ??占쏙옙?. ?肩? ???, ???? ?효? ???????構? ?????? ??타?? ??????, ??占쏙옙??? ?????? ?? ??타?絿?트?? ?譴? ?????歐? ??????, ???? ?? ??타?絿?트?? ????求? ?沽? ???? ?????????? ???? ?????? ???颯?킬 ?? ?獵?. ???????? ????求? ???? ??타?絿?트?? ?? 효???? ????킬 ???甄?.
?玲?: CSS2 ?占쏙옙? A. HTML 4?? ???? ??타?絿?트 ?揷??? ????트 ??타?絿?트???? ?球??????? ????풔? ?? ??????트?? ????트 ??타?? ???????? ?獵?. ?????楣? ?????渼? ???? ???茱� ?????? ?悶??? 찾?? ?? ???? ???甄?.
HTML ?????? ?? ?효? ?????????? ??타?絿?트 ???? ?? ?? ?斂?, ?풔? ??타?絿?트?? ?占쏙옙?(import) ?? ?? ?獵?.
?錚� ??타?絿?트 ??諍� HTML?? ???? ??? ?? ?? ?獵?. ?????? ??타?絿?트 ????見? ??占쏙옙??? ??????? ?却占쏙옙 ??? ?? ???犬?, ?摸? ?????? 특화 ?? ?却占쏙옙 ?? ???? ?? ?獵?. ?? ?蹈??? ??타?? ???? 카?????絹? ??타?絿?트(???米? CSS: "Cascading Style Sheet": ?????? CSS1)?? ?????涌�?? ????磯?.
??타?? ???????? ?????? ??타?絿?트 ??楮� ???? ?摸???.
?????渼? HTML ?????? ???? ?? ??타?? ?????? ??타?絿?트 ??低� ?????臼??? ?磯?.
?????渼? ?????? ????트 ??타?絿?트 ??低� ?????歐? ???臼?, META ??????트?? ????磯?.
???? ???, ????트?? CSS?? ?????歐? ???臼?, ?????渼? ???? ?????? ?????? HEAD ?효? ?臼??? ?磯?,
????트 ??타?絿?트 ???? HTTP ??????? ???? ?? ?? ?獵?. ???? META ?????? ???? HTTP ????? ????.
Content-Style-Type: text/css
??逾�???? ?????? ????트 ??타?絿?트 ??低� ???? ?丙瓦� ???? ?????臼??? ?磯?(???? ???? ????).
?????? style ??트????트?? ?????求? ??????트?? ?????構? ?????? ????트 ??타?絿?트 ??載� ???풩퓸? ???? ?????? ?摸??? ???? ???? ???甄?. ???????? ??逾�???? "text/css" ????트?? ???????? ?茄???, ????트 ??타?絿?트 ??? ?????? ?澁?(META ?????? ????????) ???耭??磯?.
style ??트????트?? ???? ??????트?? ??타?? ?????? ?????磯?. ?占쏙옙??? ??타?? ?????? ??타?絿?트 ???? ????트 ??타?絿?트 ????? ?羚?????. ??타?? ???????? ?????? ??타?絿?트 ??楮� ???? ?摸???.
??타?絿?트?? ???????? ?駕??歐??
CSS????, ?摸? ?????? "name: value" ????? ?????? ????賦?(;)???? ?占쏙옙??홱?.
style ??트????트?? ???? HTML ??????트?? 특???? ??타???? ?????臼? ??? ?? ?? ?獵?. ???? ?? ??타???? ???? ??????트?涌�?? ?母? ??? ?? ???見?, ?????渼? ?? ?????? ?母? ???? ????? ???臼? STYLE ??????트?? ????磯?. ?????? 탄?占쏙옙??? ???漫? ?????渼? ?甁? ??타?絿?트 ?효? ??타?溝勇� ?????臼??? ?磯?.
STYLE - - %stylesheet -- ??타?? ???? --> %i18n; -- lang, dir, ????(title)?? ?途? ??? -- type %ContentType; REQUIRED -- ??타?? ????? ????트 타??(content type)-- media %MediaDesc; IMPLIED -- ?瀕?틉涌� ????? ???臼? ???? -- title %Text; IMPLIED -- ???? ???? -- >
?????占쏙옙?: ?却? ??, ?????占쏙옙?: ?却? ??
??트????트?? ????
STYLE ??????트?? ?????微? ?????? ???(head) ?효? ??타?? ?????? ???? ?? ?? ?令????磯?. HTML?? ?????? HEAD ?琉? ?효? STYLE ??????트?? ?錚� ?????? ???????.
??타?絿?트?? ???????? ?苛? ??逾�??, ?풔? STYLE ??????트?? ?? ??타?絿?트 ??低� ???????? ?苛? ???, STYLE ??????트?? ?????? ???上???磯?. ?????? ?????? ?灣?트 ?占쏙옙????? 표???求? ???? ?????甄?. ?瞿? ??타?絿?트 ?????? ?蹈駙? ???? ?苛? ??逾�?????? ???? ???薩? ?????? ?????磯?.
??타?? ?????? ?????? ??타?絿?트 ??楮� ???? ?摸???.
?瞿? ??타?絿?트 ??????? style ??트????트???? ???? STYLE ??????트???? ???? ?????? ???? ?? ?? ?獵?. ???? ???, CSS?? STYLE ??????트 ?효??? ?틔??? ???????? ???? ?? ?? ?獵?.
??타?? 표??(rule)?? ?占쏙옙 ?????? 특???? ????(inheritance)?? ?? ?? ??칙?? ??타?絿?트 ??楮� ???? ?摸???.
???? ???????? ???? ???? ?? H1 ??????트 ?????? ?流占쏙옙?(border)?? ?斂?, ???????? ???諍� ?????? CSS STYLE ?????臼???.
?? ??타?? ?????? 특?? 클??(class)?? ???? H1 ??????트?? ?? ?????狗??? ?????? ???? ?????玖? ?홱?.
?? H1?? ???? ?? ??타???? ?????? ????.
?? H1?? ???? ?? ??타???? ?????? ???? ????.
??????????, H1?? ?? ??타?? ?????? ?????? ???? ?占쏙옙?탄??(instance)?? ?? ???? ??키?? ????, id ??트????트?? ?????玖?:
?? H1?? ???? ?? ??타???? ?????? ???? ????.
?? H1?? ???? ?? ??타???? ?????? ????.
?? H1?? ???? ?? ??타???? ?????? ???? ????.
HTML?? ???? ??? ??????트?? ??타?? ?????? ?????? ?? ??????, ????????(block-level) ?? ?占쏙옙???(inline) ?餠? ?錚� 표?? ?퓜見? ???? ?苛? DIV?? SPAN, ?? ??????트???? 특?? ?????求?. ??타?絿?트?? ???蘭퓔?, ?絹? ??????트?? ????微? HTML?? ?? ???? 확?? ?? ?? ?獵?. 특?? class?? id ??트????트?? ???? ??? ?? ?? ???? ?瀏??求?.
???? ?????? ?????? ?? ????美? ???? ?鍮�?? ??트 ??타?狗? ?????歐? ???臼? SPAN ??????트?? ????臼???.
The first few words of this paragraph are in small-caps.
???? ???????? ???? ????? ??? ?琉??? ????? ?狗??? ???昞??? ???타? ?????歐? ???臼?, DIV?? class ??트????트?? ????臼???. ?? ??타?? ?????? class ??트????트?? ???? ?????占쏙옙?, ?? ?????? ?摸? ?????? ?摸? ??? ?琉???? ???臼? ?? ??? ?? ?? ?獵?.
Chieftain ??품???? ???? ?痢� ?????? ?????甄?. ?? ???????? Chieftain?? ???? ??품?涌� ???漫? ?錚�?? ???????求占쏙옙??? ?????磯?.
Chieftain?? Commander 품????? ??체 ?玖?, Commander 품????? ?????? ?類�?? ???? ?? ???? ????표?? ???? ???? ???甄?.
???? ???, ?瀏??? ???占쏙옙???, ?米????? ??크??, ??駙? ??치(handheld device), ????(speech-based) ??????, ???? ??치?楮�?? ?????? 표?? ?? ??, HTML?? ?瀕?? 특?????? ?????? ?????? ?????微? ?????? ???? ?? ?? ?斂? ?磯?. media ??트????트?? ?????????占쏙옙?, ?????渼? ??逾�???? ??타?絿?트?? ?????????? ?占쏙옙? ???? ?? ?? ?斂? ?磯?. ?腔??? ?瀕?? ???????? ????? ?????灸?.
???? ???? ?????? H1 ??????트?? ????홱?. ???? 회?퓻??? ????(projected) ?? ??, ??? ?占쏙옙?탄??(instance)???? 푸?????? ?품?, ?占쏙옙? ?? ?? ??? ?占쏙옙?탄?????? ?上淡? ??치 ?? ???甄?.
?? ?????? ???? ??占쏙옙? ???풔? ??占쏙옙?涌� ???? 효???? ?煞??臼???.
??逾�???? ???? ??치(device)?? ????풔? ??타?絿?트?? ???? ??트????(network)?? ???? ?占쏙옙? 표???臼? ?占쏙옙??? ???? ?? ?? ?殮? ??????, ?瀕?? ????(control)?? ?甁? ??타?絿?트?? ???? ?? ?? 특?? ??肩鍛?. ???? ??? ???? ???????? ???? 표???? ???? ??타?絿?트?? ?占쏙옙???? ???? ?? ?獵?. ?瀕?틸? ???? 카?????絹??? ?????灸?.
?????渼? ??타?絿?트?? HTML ?????? ?占쏙옙? ?? ?? ?獵쨉?, ?甄? ?載�?? ?????? ?????磯?.
HTML?? ?????米? ?臼??? ???????? ?甁? ??타?絿?트(style sheet)?? ?????? ???? ???? ?? ?斂? ?磯?. ??타?絿?트 ???? ?????? ?甁? ??타?絿?트???? ?錚�?? ?謗??求占쏙옙??? ?????磯?. ???? ???, CSS?? "cascade" ????(rule) ??.
?????渼? ??체(alternate) ??타?絿?트??? ?恬???? ??호 ??타???? ?載�?? ??타?絿?트?勇� ???? ?? ?? ?獵?. ????渼? ?隔孤? ?? ??호???? ???? ???? ?????求? ???? ???? ?? ?? ?獵?. ???? ??? ?????渼? ???? ??크???? ???臼? ???? ?? ??타?絿?트?? ?????構?, ?占쏙옙??? ???? ????美? ???? 큰 ??트?? ????求? ?摸? ??타?絿?트?? ???? ?? ?? ?獵?. ??逾�???? ????微? ??체 ??타?絿?트?? ?????? ?????? ????臼??? ?磯?.
?????渼? ??체 ??타?絿?트??? ???? ?毬??? ??호(preferred) ??타?絿?트?? ???? ?? ?? ?獵?. ??逾�???? ????微? ?摸? ??체?? ???????? ?苛? ??, ???????? ??호 ??타?絿?트?? ?????臼??? ?磯?.
?????渼? ???????? ??호 ??타?絿?트?? ?????臼? ?? ???? ??체 ??타?絿?트???? ?毬??? ??타?? ?見?(style name)???? ???? ???? ?? ?獵?. ????微? ?見??????? ??타???? ?????玖?, ??逾�???? ?六? ???? ?見??? ???? ??? ??타?絿?트?? ?????臼??? ?磯?. ??逾�???? ?摸? ??타?? ?見??? ???? ??체 ??타?絿?트???? ???????? ?刻틴??磯?. ?甁? ??타?絿?트?? ???????? ??타?絿?트 ?????? ?見? ???? ????? ?????臼???.
?????渼? ??逾�???? ?煞??????? ??체 ??타?絿?트?? ?????瞞? ?求? ??????(persistent) ??타?絿?트?? ???? ?? ?? ?獵?.
??逾�???? ?錚� ??타?絿?트?? ???? ?? ??, ?瀕?? ??????(media descriptor)?? ?傷??構? ?????臼??? ?磯?.
??逾�???? ????微? ???????? ??타?絿?트?? ?????? ?????? ?歌? ?? ???? ?羚?? ?磯?. ?肩? ??? ??逾�???? ?錚� ??????(persistent) ?풔? ??체 ??타?絿?트?? ???????? ???틴??磯?.
?????渼? LINK ??????트(element)?? ???? ??트????트(attribute)?? ?甁? ??타?絿?트(style sheet)?? ?????磯?.
??逾�???? ????微? ??체 ??타?? ??????占쏙옙??? ?????? ???隔? ?求? ?????? ?????臼??? ?磯?. title ??트????트?? ???? ?? ?????? ?見??? ??천?홱?.
?? ?????? ???? mystyle.css 화?臼? ?獵? ??????(persistent) ??타?絿?트?? ?????臼???.
title ??트????트?? ???????? ???????? ??호 ??타?絿?트?? ?????.
rel ??트????트?? 키???? "alternate"?? ?煞? ?????占쏙옙? ??체 ??타?絿?트?? ?????.
?煞? ?????? ????? ?甁? ??타?絿?트?? ?????灸?.
?????渼? ??호(preferred) ??타?絿?트?? ?????歐? ???臼? META ??????트?? ??? ?? ?? ?獵?.
???? ???, ?? ???????? ??호 ??타?絿?트?? "compact"?? ?????歐? ???臼?, ?????渼? HEAD ?효? ???? ???? ???? ??킬 ?? ?獵?.
??호 ??타?絿?트?? HTTP ???(header)?? ???? ?? ???? ?獵?. ?? META ?????? ?틔? HTTP ????? ?????求?.
Default-Style: "compact"
???? ?寬? ?鵑??? META ???? ?풔? HTTP ????? ??호 ??타?絿?트?? ???? ?杉摸?, ???? ?????? ????홱?. HTTP ????? ?? ?????? ???臼? ?????? HEAD ???? ???? ???????? ?磯?.
???? ?寬? ?鵑??? LINK ??????트?? ??호 ??타?絿?트?? ???? ?杉摸?, 첫??占쏙옙 ???? ????홱?.
META ?풔? HTTP ????? ???? ?? ??호 ??타?絿?트?? LINK ??????트???? ???? ???? ???? ?? ?沽? ?占쏙옙?臼? ????홱?.
CSS?? ???? 카?????絹?(cascading) ??타?絿?트 ?????? ??타?? ?????? ???? ???????? ???? ?途? 혼???求? ???? ????磯?. ?瀏???, ??? ??타?絿?트 ?????? 카?????絹??? ?????????? ???? ?틈求?. 카???��?(cascade)?? ?????歐? ???臼?, ?????渼? LINK??(혹??) STYLE ??????트?勇� ?????磯?. ?? ??타?? ?????? HEAD ?효? ??타?? ?摸? ??????트???? ?????? 카???��?홱?.
?玲?: ?? ?蹈駙??? ?摸? ????? ???? ??타?絿?트?? ?錚�?? 카???��?(cascade)?求占쏙옙??? ???????? ?刻年?. ?????渼? ??타?絿?트 ?????? 혼???? ???瞞??磯?.
???? ????????, "compact"?? ?見??????? ?? ??체 ??타?絿?트?? ?????臼???. ???? ????微? "compact" ??타???? ?????玖?, ??逾�???? ??????(persistent) ??타?絿?트 "common.css"?? ???絹寬??? ?甁? ??타?絿?트???? ?????臼??? ?磯?. ???? ????微? "big print" ??타???? ?????玖?, ?????? ??타?絿?트 "common.css"?? ??체 ??타?絿?트 "bigprint.css" ???? ???? ?? ???甄?.
???? 카???��?(cascade) ?????? LINK?? STYLE ??????트 ?寬????? ????홱?.
카?????絹?(cascade)?? ?摸? ?瀕?틸? ????풔? ??타?絿?트???? ???? ?? ?? ?獵?. LINK?? STYLE ?? ?? media ??트????트?? ???? ??? ?? ?? ?獵?. ??逾�???? ???? ?瀕?틸? ??????? ?苛? ??타?絿?트???? ?禿? ???????磯?.
???? ????????, ???? ?????? ???? ?? ?獵? "corporate" ??타?絿?트?? 카?????絹躍� ?????臼??쨉?, ?毬??? ?占쏙옙藪� ?????構?, ?毬??? ?講??? ???품?, ?毬??? ????(speech-based) ??????(???????? ???悶????? ?? ?? ??????)?? ???? ???甄?. "techreport" ??타?絿?트?? ??? ?瀕??(media)?? ????홱?. STYLE ??????트?? ???? ????(?? ?占쏙옙?? ??크?????? ???풍? ?恬? 표?????? ?????? ?苛占쏙옙?.
??逾�???? ?????? 표???歐? ???臼?, ???? ??? ??트?? ????(family), ??타??(style), 크??(size), ??(line)?? ????, ???? ???? ?? ??타?? 특??(property) ???? 찾?? ?却娥� ?獵?. ?????? ????? ??타?絿?트 ??楮� ???? ?美???, ???? ?????? ?球??????? ????홱?.
카?????絹?(cascade)????? ???? ??타?? ???????? ??? ??????트?? ???? ???? ?? ?? ???홱?. ?? ????? ??逾�???? ?錚� ?????? ???? ?? ???寬??? ?????歐? ???臼? ?????? 특???? ???? ?????構??磯?. ???? ?????? ?煞????? ???玖?, ???? ?丙?? ??타?? 특???? ????(inherited)?풔占쏙옙? ?틈璣??? ??????. ??? 특???? ???瀕풔? ???? ?틈求?. ?絹? 특?????? ???臼?, ??타?絿?트 ???? 특?? ??????트?? ?????? ???? ?? ????트 ?????? ?????磯?.
???? ?? 특???? ???瀕풔? ???見?, ??逾�???? ?隔??? ?????? ???? ?? ???寬??? ?畺? ???? ???? ???? ?? ??????트?? ?????磯?. ?? ?????? ???? ?? ?? ?獵? ?????? 찾?? ?? ???? ??撻홱?. ?? ????? ??타?絿?트?? ?????構? ?????溝????磯?. ???? ??? ?????微? BODY ??????트?? ????풔? ?????? ???????? BODY ???? ??? ??????트?? ??트 ?????? ???? ?? ?? ?獵?.
?瞿? ??타?絿?트 ?????? ?蹈駙? ???? ?苛?(non-conforming) ??逾�?????? ?????微? STYLE ??????트?? ?????? ???薩綬� ????求? ?????? ?????磯?.
?? ?????? ?蹈駙? ???? ?苛? ???? ??逾�?????? 확???? ?灣?트?? 표?????? ?茄??? ?歐? ???臼?, CSS???? STYLE ??????트?? ?????? ?錚�?? ??타???占쏙옙??? ?????磯?.
?? ?琉??? ???? ???(Link header) ?茄躍� ?????求? HTTP ?????? ?蹈駙? ?????求? ??逾�???涌� ?? ????홱?. HTTP 1.1?? [RFC2616]?? ???? ?? ?牟? ???? ???? ???(Link header) ?茄躍� ???????? ?苛占쏙옙?(19.6.3 ?? ????)?? ?沽? ?????灸?.
?? ???? ?????湄??? ??타?絿?트?? ?????????? ???占쏙옙 ????풩??? ?????? ?????求? ???? ?????求募? ?? ???甄?. HTTP Link ????? ???? ??트????트?? ?????? ???? LINK ??????트?? ???? 효???? ???占쏙옙?. ???? ???? ??????? ???? ?占쏙옙?? ???? ????(multiple) LINK ??????트?? ?????磯?.
???? ???: