W3C15 ????, ??트 ??타?構? ???? ??Trio 홈??????
???????? ???????? ??? ??????트 ??트????트 ???? ????
????
  1. ???화(formatting)
    1. ????
    2. ????(alignment)
    3. ????(float) ??????트
  2. ??트(font)
    1. ??트 ??타?? ??????트: TT, I, B, BIG, SMALL, STRIKE, S, U
    2. ??트 ??????(modifier) ??????트: FONT,BASEFONT
  3. ??(rule): HR ??????트

?? ?琉澍【??? ?? ?蹈??? ????(visual) ??????트?? ???화(formatting)?? ??? ?? ?? ?獵? ?瞿? HTML ??????트(element)?? ??트????트(attribute)?涌� ???? ?鱇? ????. ?? ?? ???? ???? ?念??? ???甄?.

15.1 ???화(formatting)

15.1.1 ????

??트????트?? ????

bgcolor = color [??拈??? ???? ????: CI]
?念??? ???甄?. ?? ??트????트?? ???? ??체(body) ?풔? 표(table) ??(cell)?? ?????? ?????磯?.

?? ??트????트?? ???? ??체(BODY ??????트) ?풔? 표(TABLE, TR, TH, TD ??????트)?? ?????? ?????磯?. ???? ?????? ?????歐? ?? ?? ?煞????? ??트????트?? BODY?? ??? ?? ?? ?獵?.

???? ?????? ??타?絿?트?? ???? ?? ?? ?????퓐? ?? ??트????트?? ?念??? ???? ?퓸???.

15.1.2 ????(alignment)

align ??트????트?? 표(table), ?譴???, ??????트(object), ???昞?, ?? ????(block) ??????트?? 화?? ?????? ?????? ?????求?. ?? ??트????트?? ???? HTML ??????트???? ???? ?? ?? ??????, ???占쏙옙? ??????트?? ???? ?? ???? ???? ?? ?????? ?摸???. ???茱�?? ???? ?灣?트???? align(????) ??트????트?? ?퓜? ???? ?鱇? ????.

??트????트?? ????

align = left | center | right | justify [??拈??? ???? ????: CI]
?念??? ???甄?. ?? ??트????트?? ?? ???? ???占쏙옙 ?? ?? ???????? ???? ??치?? ?????玖?, ?????? ????:
  • left: ?灣?트 ?????? ???却? ?牟? 표??.
  • center: ?灣?트 ?????? ?上淡? 표??.
  • right: ?灣?트 ?????? ?????却? ?牟? 표??.
  • justify: ?灣?트 ?????? ???却? ???上? 표??.

????트?? ?羞� ???? ???藪� ???? ?摸???, ???却??? ???????????? ?灣?트(ltr)???? ????트?? align=left?隔?, ?????却??? ?????????? ?灣?트(rtl)???? ????트?? align=right?甄?.

?念??? ????:
?? ?????? ????? 화?? ?上淡? ??치??킴.

?????? ?錚�?? 화?涌� ??치 ??키?占쏙옙?

???? ???, CSS?? ????臼?, ???? 효???? ?????? ?????? ????.


 ?????? ?錚�?? 화?涌� ??치 ??키?占쏙옙?
 

 
?????? ?錚�?? 화?涌� ??치 ??키?占쏙옙?

???茱� ??? H1 ??????? ?上淡? ??치 ?????? ?笭??灸?. ??????트?? class ??트????트?? ???? ?????占쏙옙? ?? ??타???? ???? ?????? ???? ?? ?獵?.


 ?????? ?錚�?? 화?涌� ??치 ??키?占쏙옙?
 

 


?念??? ????: 

?結? ?????構?, HTML?? align ??트????트?? ?????? 화???? ?????却? ???캭?키????:



 
... ?????? ?灣?트 ...

CSS?占쏙옙?:


 ?????? ?錚�?? 화?涌� ??치 ??키?占쏙옙?
 

 
... ?????? ?灣?트 ...

?念??? ????:
?狗??? ???昞??? ?????却? ???? ?狗???, DIV ??????트?? ?流??? ?????????.


 
... ?灣?트?? 첫??占쏙옙 ???? ...
 
... ?灣?트?? ?占쏙옙?占쏙옙 ???? ...
 
... ?灣?트?? ????占쏙옙 ???? ...

CSS??, ?灣?트 ???? 특???? ??체(parent) ??????트?? ???? ????(inherite)?퓜퓐?, ?????? ???? ??? ?? ?? ?獵?.


 ?????? ?錚�?? 화?涌� ??치 ??키?占쏙옙?
 

 

   
...?灣?트?? 첫??占쏙옙 ???? ...
   
...?灣?트?? ?占쏙옙?占쏙옙 ???? ...
   
...?灣?트?? ????占쏙옙 ???? ...

??체 ?????? ?上淡? ??치?歐? ???臼?, CSS??:


 ?????? ?錚�?? 화?涌� ??치 ??키?占쏙옙?
 

 ... ??체(body)?? ?上淡? ??치?홱?...

CENTER ??????트?? DIV ??????트?? align ??트????트?? "center"?? ???? ?? ?叩? ?? ????. ?? CENTER ??????트?? ?念??? ???甄?.

15.1.3 ????(float) ??????트

?譴????? ??????트?? ?占쏙옙??占쏙옙? ???? ?????? ?? ?斂?, ?풔? ?擔??????? ??????트?? ?? ?????? ???? ?? ?? ?獵? ?灣?트?? ?流占쏙옙??? ???? ???????? ?? ?却? ?????퓸? ??타?? ?? ?獵?.

??????트 ????(float)

??????트, ?譴???, 표(table), ??????(frame) ???? align ??트????트?? ??????트?? ???? 혹?? ?????? ?流占쏙옙??? ?????構??磯?. ??????트 ????(float)?? ?球??????? ?? ??(line)???? ?????磯?. ?? ??트????트?? ???? ???? ???占쏙옙?.

?念??? ????:
???? ?????? ?錚�?? IMG ??????트?? 화???? ???? ???? ?流占쏙옙??? ????(float)?求占쏙옙??? ???? ?娩?.

 my boat

?瞿? ???? ??트????트(attribute)?? ?? "center"?? ????求쨉?, ?甄? ????(float) ??키?? ?歌?, ??????트?? ???? ?流占쏙옙????? ?上淡? ??치 ??킨??. ?瀏???, P?? DIV????, ?? "center"?? ??????트?? ?????? ?上淡? ??치??킨??.

??????트 ?????? ?灣?트 ????

BR ??????트?? ?????求? ??트????트?? ??????트(object) ?????? ?灣?트 ?躍�?? ?????磯?.

??트????트?? ????

clear = none | left | right | all [??拈??? ???? ????: CI]
?念??? ???甄?. ?? ??????트?? ???臼? ???? ?摹侮?(line break) ????, ???? ???????? ???? ??(line)?? ??? ??타 ???? ?求占쏙옙??? ?????磯?. ?? ??트????트?? ?譴???, 표(table), ?? ??????트?? ?????? ??킨??. ?????? ????:
  • none: ???? ??(line)?? ?????????? ???滂홱?. ????트 ???甄?.
  • left: ???? ???? ???? ??????트 ???? ?? ???? ?流占쏙옙????? ???滂홱?.
  • right: ???? ???? ???? ??????트 ???? ?? ?????? ?流占쏙옙????? ???滂홱?.
  • all: ???? ???? ???? ??????트 ???? ?? ?? ?? ?流占쏙옙??? ???結??? ???滂홱?.

???? ???? ????????(scenario)????, ?灣?트?? BR?? ???臼? ???? ?侮? ?? ???? ?譴????? ???????? ?占쏙옙??.

*********  -------
|       |  -------
| image |  --

|       |
*********

???? clear ??트????트?? none???? ?????퓔?, BR ???? ???? ?譴????? ?????? ?流占쏙옙??? ?慕? ?틔??? ???滂홱?.

*********  -------
|       |  -------
| image |  --

|       |  ------
*********

?念??? ????:
???? ??트????트 clear?? left ?풔? all?? ?????퓔?, ???? ???? ?틔? 처???홱?.

*********  -------
|       |  -------
| image |  --

|       |
*********
-----------------

??타?絿?트?? ????臼?, ??? ?摹侮?(line break)???? ???? ?流占쏙옙?(margin)?? ???? ?????求? ?譴???, 표, ???? ?? ??????트?? ??????? ?謗??溝??? ???? ?? ?? ?獵?. CSS?? ?見? ?????? ???? ?? ?? ?獵?.

?? ?謗??? 특?? BR ??????트?? ?????歐? ???臼?, ??타?? ?????? id ??트????트?? ???? ?? ?? ?獵?.


 ...
 



...
*********  -------
|       |  -------
| table |  --

|       |
*********
-----------------
...

15.2 ??트(font)

???? HTML ??????트???? ??트 ?????? ?????磯?. ?陋孤??? ????念??? ???? ?틈?????, ?絹??? ??類�?募? ??타?絿?트?? ????求? ???? ????.

15.2.1 ??트 ??타?? ??????트:
혻혻혻혻TT, I, B, BIG, SMALL, STRIKE, S, U

TT | I | B | BIG | SMALL">
%fontstyle; | %phrase;) - - (%inline;)*>
%fontstyle; | %phrase;)
 %attrs;                              -- %coreattrs, %i18n, %events --
>

?????占쏙옙?: ?却? ??, ?????占쏙옙?: ?却? ??

?摸? ?????? ???? ?? ??트????트

??트(font) ??타??(style) ??????트?? 표???? ??逾�???? ???? ?摸???. ?????? ???? ???? ???? ?????甄?.

TT: ?米?타????(teletype)?? ???? ?????? ??????(monospace) ??트트?? 표??.
I: ???占쏙옙?(italic) ?灣?트 ??타?狗? 표??.
B: ????(bold) ??트 ??타?狗? 표??.
BIG: 큰 ???米? 표??.
SMALL: ???? ???米? 표??.
STRIKE?? S: ?念??? ???甄?. ???? 표??(strike-through) ??타?? 표??.
U: ?念??? ???甄?. ???? 친(underlined) ???米? 표??.

???? ?????? ???? ?灣?트 타?鍍??? ???? ?娩?.

bold,
italic, bold italic, teletype text, and
big and small text.

?? ?輧???? ?????? ???? 표???홱?.

?毛??? ??트 ??타???? 표?? ?? ????

??타?絿?트(style sheet)?? ????臼? ?占쏙옙? 풍???構? ?毛??? 효???? ???? ???? ?????求?. CSS?? 푸?????? ???占쏙옙? ?灣?트?? ?????? ?????狗???:


 


... 푸?????? ???占쏙옙? ?灣?트 ...

??트 ??타?? ??????트???? ?????構? ?謬???(nest)?퓸?? ?磯?. ?謬??? ?? ??트 ??타???? 표???? ??逾�???? ???? ?摸???.

15.2.2 ??트 ??환(modifier) ??????트: FONT, BASEFONT

FONT?? BASEFONT?? ?念??? ???甄?.

????(transitional) DTD?? ?????? ???퓔? ?????灸?.

??트????트?? ????

size = cdata [??拈??? ?蔘?: CN]
?念??? ???甄?. ?? ??트????트?? ??트(font)?? 크?綬� ?????玖?, ?????? ????:
  • 1?? 7 ???? ?????? ??트?? ???? 크??? ?????求쨉?, ??逾�???? ???? 표???? ?摸? ?? ?斂?, ??? 7 ?蹈??? 표?????? ???求? ??逾�???? ?獵?.
  • ??트 크???? ??????? ????. ?? ???? "+1"?見? ?? ?丙? 큰 ?????隔?, ?? ???? "-3"?見? ?? ?丙? ???? ?????見? ??? ???? 크??? 1?? 7 ?????? ???甄?.
color = color [??拈??? ???? ????: CI]
?念??? ???甄?. ?? ??트????트?? ???? ?????? ?????磯?.
face = cdata [??拈??? ???? ????: CI]
?念??? ???甄?. ?? ??트????트?? ??逾�???? ?????? ???? ?講??臼??? ?求? ?占쏙옙??? ?占쏙옙??? ??트 ?見????? ????? ?????磯?.
?摸? ?????? ???? ?? ??트????트

FONT ??????트?? ?? ?????? ?灣?트 ??트 크??? ?????? ?????킨??.

BASEFONT ??????트?? size ??트????트?? ????臼? ?羞� ??트 크?綬� ?????磯?. FONT?? ??트 크?綬� ?????玖?, BASEFONT?? ?????? ?羞� ??트 크?藪� ??????? ???? ???????. ???? BASEFONT?? ???????? ?刻?????, ????트 ?羞� ??트 크??? 3?甄?.

?念??? ????:
???? ?????? FONT???? ??? ?? ?? ?獵? 7 ??트 크??? ?????? ???隔? ???? ?娩?.

size=1
size=2
size=3
size=4
size=5
size=6
size=7

?甄? ?????? ???? 표?? ?? ???甄?.

?毛??? ??트 크???? 표?? ?? ????

?????? ?羞� ??트 크?? 3???? ???? ??????? ??트 크????? 효???? ?????獵? ?????甄?.

?羞� ??트?? ???? ?毛??? ??트 크????? 표?? ?? ????

?羞� ??트 크??? FONT ??????트?? ??????? ??트 크?? ???????? ????臼? ???? ?????? ?? ?餠???, ???(heading)?? ??????? ?苛占쏙옙?.

15.3 ??(rule): HR ??????트

HR - O EMPTY -- ???? ??(rule) -->
%coreattrs;                          -- id, class, style, title --
>

?????占쏙옙?: ?却? ??, ?????占쏙옙?: ??? ????

??트????트?? ????

align = left | center | right [??拈??? ???? ????: CI]
?念??? ???甄?. ?? ??트????트?? ???? ???? ???占쏙옙 ?? ?? ???? ?????? ?????玖?, ???? ?? ????:
  • left: ???? ???却? ?牟? 표??.
  • center: ???? ?上淡? 표??.
  • right: ???? ?????却? ?牟? 표??.

????트?? align=center?甄?.

noshade [??拈??? ???? ????: CI]
?念??? ???甄?. ?隔??? ?????퓔?, ?? ?恬?(boolean) ??트????트?? ??逾�?????? ???????? ?? ?????? ??("groove") ??? ???? ????(solid) ???????? 표???磯?.
size = pixels [??拈??? ???? ????: CI]
?念??? ???甄?. ?? ??트????트?? ???? ???見? ?????磯?. ????트 ???? ??逾�???? ???? ?摸???.
width = length [??拈??? ???? ????: CI]
?念??? ???甄?. ?? ??트????트?? ???? ?跏? ?????磯?. ????트 ?跏?? 100%, ?????美? ???? ??체?? 화?涌� ?占쏙옙? 확??홱?.
?摸? ?????? ???? ?? ??트????트

HR ??????트?? ???? ??逾�???? ???臼? ???? ???? 표???磯?.

?鳴? ?????? ???? ???結? ???鍍풔? ???? ?????? ???? ??逾�???? ???? ?摸???.

?念??? ????:
?? ?????? ???? ?流占쏙옙??? ?跏??? ?????? ?姆??? ?上淡? ???占쏙옙? ?? ???甄?. ?? ???? ???? ????트 ?占쏙옙??? ???? ???隔?, ?틔? ?寬??? 5 ?횝?(pixel)?? ???? ?? ???甄?. ???? ?틔? ???? ?琉???(shading) ???? ????(solid) ?????? 표???퓸???.
?? ?姆??? ?????? ???? 표?? ?? ???甄?.

?毛??羈??? ?姆??? 표?? ????

???????? ???????? ??? ??????트 ??트????트 ???? ????

?? Trio 홈?????? ????(http://trio.co.kr/webrefer/html/present/graphics.html)?? ???????? ???? ????? ??????.