³¯Â¥: 1996-06-05 | ±Û¾´ÀÌ: µµ¾Æ | 17838 ¹ø | ÇÁ¸°Æ® | ¸ÞÀϷκ¸³»±â

Á¦ 5°­ - CSSÀÇ Æ¯¼º


  1. Ư¼º Á¤ÀÇ¿¡ »ç¿ëµÇ´Â ¹®¹ý
  2. ÆùÆ® Ư¼º
  3. »ö»ó°ú ¹è°æ Ư¼º
  4. ¹®Àå Ư¼º
  5. »óÀÚ Æ¯¼º
  6. ºÐ·ù Ư¼º
  7. ´ÜÀ§

Ư¼º Á¤ÀÇ¿¡¼­ »ç¿ëµÇ´Â ¹®¹ý
<Foo>
FooÀÇ °ª. °øÅë ÇüÀº ´ÜÀ§ Àý¿¡¼­ ³íÀÇÇÏ°Ú´Ù.
Foo
¹®ÀÚÀûÀ¸·Î Ç¥½ÃµÇ´Â Å°¿öµå. ½°Ç¥¿Í Slash ¶ÇÇÑ ¹®ÀÚÀûÀ¸·Î Ç¥½ÃµÈ´Ù.
A B C
¼ø¼­´ë·Î A°¡ ¹ß»ýÇÏ°í B, C°¡ ¹ß»ý
A | B
A ³ª B °¡ ¹ß»ý
A || B
¼ø¼­´ë·Î A³ª B ¶Ç´Â µÑ´Ù ¹ß»ý
[ Foo ]
[ ]´Â ¾ÆÀÌÅÛÀ» ÇÔ²² ¹­´Âµ¥ »ç¿ë
Foo*
Foo°¡ "0"¹øÀÌ»ó ¹Ýº¹
Foo+
Foo°¡ ÇѹøÀÌ»ó ¹Ýº¹
Foo?
Foo´Â Á¶°ÇºÎ
Foo{A,B}
Foo´Â Àû¾îµµ A¹ø ¹ß»ýÇÏ°í ¸¹¾Æ¾ß B¹ø ¹ß»ý

±Û²Ã Ư¼º
±Û²Ã ÁöÁ¤(Font Family)
¹®¹ý font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
°¡´ÉÇÑ°ª <family-name>
  • »ç¿ë°¡´ÉÇÑ ÀÓÀÇÀÇ ÆùÆ®
<generic-family>
  • serif (¿¹, Times)
  • sans-serif (¿¹, Arial³ª Helvetica)
  • cursive (¿¹, Zapf-Chancery)
  • fantasy (¿¹, Western)
  • monospace (¿¹, Courier)
ÃʱⰪ ºê·Î¿ìÀú¿¡ ÀÇÁ¸
Àû¿ë¹üÀ§ ¸ðµçű×
»ó¼Ó µÊ

±Û²ÃÁöÁ¤¿¡´Â ƯÁ¤ ±Û²ÃÀ̳ª ³»Á¤µÈ ±Û²ÃÀ» ÁöÁ¤ÇÑ´Ù. ÁöÁ¤ÇÑ ±Û²ÃÀÌ ³»Á¤µÈ ±Û²Ã°ú °°¾Æ¼­´Â ¾ÈµÈ´Ù. ¿©·¯°³ÀÇ ±Û²ÃÀ» ÁöÁ¤ÇÒ ¼ö ÀÖÀ¸¸ç, ±Û²ÃÀ» ÁöÁ¤Çß´Ù¸é ÁöÁ¤ÇÑ ±Û²ÃÀÌ ¾øÀ» °æ¿ì¿¡ »ç¿ëµÇµµ·Ï ³»Á¤ ±Û²ÃÀ» À̾î ÁöÁ¤ÇØ¾ß ÇÑ´Ù.

°£´ÜÇÑ font-familyÀÇ ¼±¾ðÀº ´ÙÀ½°ú °°´Ù.

P { font-family: "New Century Schoolbook", Times, serif }

óÀ½ ÁöÁ¤µÈ µÎ°³´Â ƯÁ¤ÇÑ ±Û²Ã(New Century Schoolbook°ú Times)À̶ó´Â °Í¿¡ ÁÖÀÇÇϱ⠹ٶõ´Ù. ±×·¯³ª ÀÌµé µÑ´Ù serif ±Û²ÃÀ̹ǷΠ³»Á¤ ±Û²ÃÀº µÎ°³ÀÇ ±Û²Ã Áß ¾î´À Çϳªµµ ÀÌ ½Ã½ºÅÛ¿¡ Á¸ÀçÇÏÁö´Â ¾ÊÁö¸¸ ´ëÄ¡ÇÒ ¼ö ÀÖ´Â serif±Û²ÃÀ» °¡Áö°í ÀÖ´Â °æ¿ì¸¦ À§ÇØ ÁöÁ¤µÇ¾ú´Ù.

°ø¹éÀ» Æ÷ÇÔÇÏ´Â ±Û²Ã¸íÀº Å« µû¿ÈÇ¥³ª ÀÛÀº µû¿ÈÇ¥·Î °¨½Î¾ß ÇÑ´Ù.

font-family´Â ¶ÇÇÑ font Ư¼º¿¡¼­ »ç¿ëµÉ ¼öµµ ÀÖ´Ù.


±Û²Ã ¼Ó¼º(Font Style)
¹®¹ý font-style: <value>
°¡´ÉÇÑ°ª normal | italic | oblique
ÃʱⰪ normal
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó µÊ

font-style Ư¼ºÀº ±Û²ÃÀÌ normal, italic ¶Ç´Â oblique Áß Çϳª·Î Ãâ·ÂµÇµµ·Ï ÇÑ´Ù. font-style ¼±¾ðÀ»À§ÇÑ °£´ÜÇÑ Style Sheet´Â ´ÙÀ½°ú °°´Ù.

H1 { font-style: oblique }
P  { font-style: normal }

±Û²Ã º¯Çü(Font Variant)
¹®¹ý font-variant: <value>
°¡´ÉÇÑ°ª normal | small-caps
ÃʱⰪ normal
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó µÊ

font-variant Ư¼ºÀº ±Û²ÃÀÌ normal ·Î Ãâ·ÂµÉ °ÍÀÎÁö small-caps·Î Ãâ·ÂµÉ °ÍÀÎÁö¸¦ °áÁ¤ÇÑ´Ù. Small-caps´Â ´Ü¾îÀÇ ¸ðµç ¹®ÀÚ¸¦ ¼Ò¹®ÀÚº¸´Ù ¾à°£ Å« ´ë¹®ÀÚ·Î Ãâ·ÂÇÑ´Ù. CCSÀÇ ´ÙÀ½ ¹öÀüÀº condensed, expanded, small-caps numeralsÀ̳ª »ç¿ëÀÚº¯Çü°ú °°Àº ¹®ÀÚº¯ÇüÀ» Áö¿øÇÒ °ÍÀÌ´Ù. font-variant ÁöÁ¤ÀÇ °£´ÜÇÑ ¿¹´Â ´ÙÀ½°ú °°´Ù.

SPAN { font-variant: small-caps }

±Û²Ã µÎ²²(Font Weight)
¹®¹ý font-weight: <value>
°¡´ÉÇÑ°ª normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
ÃʱⰪ normal
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó µÊ

font-weight Ư¼ºÀº ±Û²ÃÀÇ µÎ²²¸¦ ÁöÁ¤Çϴµ¥ »ç¿ëµÈ´Ù.bolder¿Í lighter´Â »ó¼ÓµÈ °¡ÁßÄ¡¿Í ¿¬°üÀÌ ÀÖ´Â ¹Ý¸é ´Ù¸¥ °ªµéÀº Àý´ë ±Û²Ã °¡ÁßÄ¡ÀÌ´Ù.

ÁÖÀÇ: ¸ðµç ±Û²ÃÀÌ 9°¡ÁöÀÇ µÎ²²¸¦ °®´Â °ÍÀº ¾Æ´Ï¹Ç·Î ÀÌ µÎ²²µé Áß ¸î¸îÀº ÇÒ´çµÇ¸é¼­ ÇÔ²² ¹­¿© »ç¿ëµÈ´Ù. ¸¸¾à Á¤ÀÇµÈ µÎ²²¸¦ »ç¿ëÇÒ ¼ö ¾øÀ¸¸é ´ÙÀ½°ú °°Àº ±ÔÄ¢À» ±Ù°Å·Î µÎ²²¸¦ ´ëÄ¡ÇÑ´Ù.

  • 500Àº 400·Î ¹Ù²ï´Ù. ¹Ý´ëÀÎ °æ¿ìµµ ¸¶Âù°¡ÁöÀÌ´Ù.
  • 100-300Àº ´ÙÀ½À¸·Î ¾ãÀº µÎ²²³ª ±½Àº µÎ²²·Î ´ëÄ¡µÈ´Ù.
  • 600-900Àº º¸´Ù ±½Àº °ÍÀÌ ÀÖÀ¸¸é º¸´Ù ±½Àº °ÍÀ¸·Î ´ëÄ¡µÇ¸ç ±×·¸Ä¡ ¾ÊÀ¸¸é ´ÙÀ½À¸·Î ¾ãÀº °ÍÀ¸·Î ´ëÄ¡µÈ´Ù.

font-weightÁöÁ¤ ¿¹:

H1 { font-weight: 800 }
P  { font-weight: normal }

±Û²Ã Å©±â(Font Size)
¹®¹ý font-size: <absolute-size> | <relative-size> | <length> | <percentage>
°¡´ÉÇÑ°ª
  • <absolute-size>
    • xx-small | x-small | small | medium | lar ge | x-large | xx-large
  • <relative-size>
    • larger | smaller
  • <length>
  • <percentage> (¿Ü°û ű׿¡ ´ëÇÑ)
ÃʱⰪ medium
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó µÊ

font-size Ư¼ºÀº Ãâ·ÂµÇ´Â ±Û²ÃÀÇ Å©±â¸¦ º¯°æÇϴµ¥ »ç¿ëµÈ´Ù. lenght´Â µû¾çÇÑ Çػ󵵿¡ ¸ÂÃç Á¶Á¤Çϱâ Èûµé±â ¶§¹®¿¡ °¡±ÞÀû »ç¿ëÇÏÁö ¾Ê´Â°Ô ÁÁ´Ù.

±Û²Ã Å©±â¸¦ º¯°æÇÏ´Â ¸î°¡Áö ¿¹´Â ´ÙÀ½°ú °°´Ù.

H1     { font-size: large }
P      { font-size: 12pt }
LI     { font-size: 90% }
STRONG { font-size: larger }

ÀúÀÚµéÀº Microsoft Internet Explorer  3.x°¡ ¿Ü°û ±Û²Ã¿¡´ëÇØ ¹éºÐÀ²À» Àû¿ëÇÏÁö ¾Ê°í M$IEÀÇ ³»Á¤ ±Û²Ã¿¡´ëÇÑ ¹éºÐÀ²·Î À߸ø Àû¿ëÇÏ°í ÀÖÀ½À» ¹ß°ßÇß´Ù. ÀÌ°ÍÀº

H1 { font-size: 200% }
¿Í °°Àº ±ÔÄ¢À» Àû¿ëÇÏ¸é ¸¸µé¾îÁöÁö¸¸ ±Û²ÃÀÇ Å©±â°¡ ¿Ü°û ű׿¡ »ç¿ëµÈ ÆùÆ®°¡ ¾Æ´Ï¶ó M$IEÀÇ ³»Á¤ ±Û²Ã¿¡ºñÇØ µÎ¹è°¡ µÇ´Â H1űװ¡ ¸¸µé¾îÁø´Ù´Â Á¡¿¡¼­ ´Ù¼Ò ¹®Á¦°¡ ÀÖ´Ù. ÀÌ °æ¿ì ´ëºÎºÐ BODY°¡ ¿Ü°û űװ¡ µÇ¸ç º¸Åë "medium" Å©±âÀÇ ±Û²ÃÀ» »ç¿ëÇÑ´Ù. ¹Ý¸é¿¡ M$IE¿¡¼­ H1 ű׿¡ ´ëÇÑ ³»Á¤µÈ ±Û²ÃÀÇ Å©±â´Â "xx-large"À̹ǷΠÁö³ªÄ¡°Ô Å« ±Û²ÃÀÌ ³ªÅ¸³»°ÔµÈ´Ù. ÀÌ·¯ÇÑ ÀǵµÇÏÁö ¾ÊÀº ¹ö±×°¡ ÀÖÀ¸¹Ç·Î À¥ ÆäÀÌÁö ÀúÀÚ´Â font-size¿¡¼­ ¹éºÐÀ»À» »ç¿ëÇϴµ¥ ÁÖÀǸ¦ ±â¿ï¿©¾ß ÇÑ´Ù.


±Û²Ã(Font)
¹®¹ý font: <value>
°¡´ÉÇÑ°ª [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
ÃʱⰪ Á¤ÀǵÇÁö ¾ÊÀ½
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó µÊ

font Ư¼ºÀº ÁÙ°£°Ý»Ó¸¸¾Æ´Ï¶ó ¾à½ÄÀ¸·Î ±Û²Ã Ư¼ºÀ» º¯°æÇϴµ¥ »ç¿ëµÈ´Ù. ¿¹¸¦µé¾î

P { font: italic bold 12pt/14pt Times, serif }

´Â ¹®´ÜÀÇ ¼Ó¼ºÀ» ÁÙ°£°ÝÀ» 14 Æ÷ÀÎÆ®·Î ÇÏ°í ±Û²ÃÀº Å©±â°¡ 12 Æ÷ÀÎÆ®ÀÎ Times ¶Ç´Â Serif¸¦ »ç¿ëÇÏ¸ç ±ÛÀÚ ¼Ó¼ºÀ» ¶Ñ°Å¿î ÀÌŸ¯Ã¼·Î ÁöÁ¤ÇÑ´Ù.


»ö»ó°ú ¹è°æ Ư¼º
»ö»ó(Color)
¹®¹ý color: <color>
ÃʱⰪ ºê·Î¿ìÀú¿¡ ÀÇÁ¸
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó µÊ

color Ư¼ºÀ¸·Î À¥ ÆäÀÌÁöÀÇ ÀúÀÚ´Â ÀÓÀÇÀÇ Å±׿¡´ëÇÑ »ö»óÀ» ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù. »ö»óÇ¥´Â »ö»ó ÀýÀ» ÂüÁ¶Çϱ⠹ٶõ´Ù. °£´ÜÇÑ ¿¹´Â ´ÙÀ½°ú °°´Ù.

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

¹è°æ»ö»ó(Background Color)
¹®¹ý background-color: <value>
°¡´ÉÇÑ°ª <color> | transparent
ÃʱⰪ transparent
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

background-color Ư¼ºÀº °¢ ű×ÀÇ ¹è°æ »ö»óÀ» ¼³Á¤ÇÑ´Ù. °£´ÜÇÑ ¿¹´Â ´ÙÀ½°ú °°´Ù.

BODY { background-color: white }
H1   { background-color: #000080 }

¶ÇÇÑ ¾à½ÄÀ¸·Î ¹è°æ(background) Ư¼ºÀ» »ç¿ëÇÒ ¼öµµ ÀÖ´Ù. ¹è°æ(background) Ư¼ºÀº ÇöÀç background-color Ư¼ºº¸´Ù ´õ Àß Áö¿øµÈ´Ù.


¹è°æ±×¸²(Background Image)
¹®¹ý background-image: <value>
°¡´ÉÇÑ°ª <url> | none
ÃʱⰪ ¾øÀ½
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

background-image Ư¼ºÀº °¢ ű×ÀÇ ¹è°æ±×¸²À» ¼³Á¤ÇÑ´Ù. °£´ÜÇÑ ¿¹´Â ´ÙÀ½°ú °°´Ù.

BODY { background-image: url(/images/foo.gif) }
P    { background-image: url(http://www.htmlhelp.com/bg.png) }

¹è°æ±×¸²À» Á¤ÀÇÇÏ´Â °æ¿ì À̹ÌÁö¸¦ ·ÎµùÇÏÁö ¾Ê´Â ºÎºÐµéÀ» À§ÇØ À¯»çÇÑ Æ¯¼ºÀÎ background color ¶ÇÇÑ Á¤ÀǵǾî¾ß ÇÑ´Ù.

¶ÇÇÑ ¾à½ÄÀ¸·Î ¹è°æ(background) Ư¼ºÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù. ÀÌ Æ¯¼ºÀº ÇöÀç background-image Ư¼ºº¸´Ù ´õ Àß Áö¿øµÈ´Ù.


¹è°æ±×¸² ¹Ýº¹(Background Repeat)
¹®¹ý background-repeat: <value>
°¡´ÉÇÑ°ª repeat | repeat-x | repeat-y | no-repeat
ÃʱⰪ repeat
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

background-repeat Ư¼ºÀ¸·Î ÁöÁ¤µÈ ¹è°æ±×¸²(background image)ÀÌ ¾ó¸¶³ª ¹Ýº¹µÇ¾î¾ß ÇÏ´ÂÁö¸¦ ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù. repeat-x·Î ¹è°æ±×¸²Àº ¼öÆò ¹Ýº¹µÇ¸ç ¹Ý¸é¿¡ repeat-y·Î´Â ¼öÁ÷À¸·Î ¹Ýº¹ÇÑ´Ù. °£´ÜÇÑ ¿¹´Â ´ÙÀ½°ú °°´Ù.

BODY { background: white url(candybar.gif);
       background-repeat: repeat-x }

À§ÀÇ ¿¹¿¡¼­ ¹è°æ±×¸²Àº ´ÜÁö ¼öÆòÀ¸·Î¸¸ ¹Ýº¹µÉ °ÍÀÌ´Ù.

¶ÇÇÑ ¾à½ÄÀ¸·Î ¹è°æ(background) Ư¼ºÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù. ÀÌ Æ¯¼ºÀº ÇöÀç background-repeat Ư¼ºº¸´Ù ´õ Àß Áö¿øµÈ´Ù.


¹è°æ±×¸² ½ºÅ©·Ñ(Background Attachment)
¹®¹ý background-attachment: <value>
°¡´ÉÇÑ°ª scroll | fixed
ÃʱⰪ scroll
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

background-attachment Ư¼ºÀ¸·Î ÁöÁ¤µÈ ¹è°æ±×¸²(background image) À» ³»¿ëµû¶ó ½ºÄÚ·Ñ ½Ãų°ÍÀÎÁö, ĵ¹Ù½º¿¡´ëÇØ °íÁ¤ ½Ãų °ÍÀÎÁö¸¦ °áÁ¤ÇÑ´Ù. °£´ÜÇÑ ¿¹´Â ´ÙÀ½°ú °°´Ù.

BODY { background: white url(candybar.gif);
       background-attachment: fixed }

¶ÇÇÑ ¾à½ÄÀ¸·Î ¹è°æ(background) Ư¼ºÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù. ÀÌ Æ¯¼ºÀº ÇöÀç background-attachment Ư¼ºº¸´Ù ´õÀß Áö¿øµÈ´Ù.


¹è°æ±×¸² À§Ä¡(Background Position)
¹®¹ý background-position: <value>
°¡´ÉÇÑ°ª [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
ÃʱⰪ 0% 0%
Àû¿ë¹üÀ§ ºí·°ÅÂ±×¿Í ´ëġű×
»ó¼Ó ¾ÈµÊ

background-position Ư¼ºÀ¸·Î ÁöÁ¤µÈ ¹è°æ±×¸²(background image)ÀÇ ÃʱâÀ§Ä¡¸¦ ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù. ÀÌ Æ¯¼ºÀº ºí·°Å±×(block-level elements)¿Í ´ëġű׿¡¸¸ Àû¿ëµÈ´Ù.(´ëġű״ º»ÁúÀûÀÎ ¼Ó¼º, Â÷¿øÀÌ ¾Ë·ÁÁø ű׵éÀÌ´Ù. HTML¿¡¼­ ´ëġű״ IMG, INPUT, TEXTAREA, SELECT¿Í OBJECTµîÀÌ´Ù.)

¹è°æ±×¸² À§Ä¡¸¦ ÇÒ´çÇÏ´Â °¡Àå ½¬¿î ¹æ¹ýÀº ´ÙÀ½°ú °°Àº Å°¿öµå¸¦ »ç¿ëÇÏ´Â °ÍÀÌ´Ù.

  • ¼öÆò Å°¿öµµ(Horizontal keywords) (left, center, right)
  • ¼öÁ÷ Å°¿öµå(Vertical keywords) (top, center, bottom)

¹éºÐÀ²°ú ±æÀÌ°¡ ¹è°æ±×¸²ÀÇ À§Ä¡¸¦ ÇÒ´çÇϴµ¥ »ç¿ëµÈ´Ù. ¹éºÐÀ²Àº ű×ÀÇ Å©±â¿¡´ëÇÑ »ó´ëÀûÀÎ Å©±âÀÌ´Ù. ±æÀÌ°¡ Çã¿ëµÇÁö¸¸ À̵éÀº ¼­·Î ´Ù¸¥ Çػ󵵸¦ ó¸®Çϴµ¥ À־ º»ÁúÀûÀÎ ¾àÁ¡ÀÌ Àֱ⶧¹®¿¡ °¡±ÞÀû »ç¿ëÇÏÁö¾Ê±â ¹Ù¶õ´Ù.

¹éºÐÀ²À̳ª ±æÀ̸¦ »ç¿ëÇÒ ¶§ ¼öÆò À§Ä¡¸¦ ¸ÕÀú ÁöÁ¤ÇÏ°í ¼öÁ÷À§Ä¡¸¦ ÁöÁ¤ÇØ¾ß ÇÑ´Ù. 20% 65%Àº ¹è°æ±×¸²ÀÇ ¼öÆòÀ¸·Î 20%, ¾Æ·¡·Î 65%µÇ´Â ÁöÁ¡À» °¢ ű×ÀÇ ¼öÆòÀ¸·Î 20%, ¾Æ·¡·Î 65% µÇ´Â ÁöÁ¡¿¡ µÎµµ·Ï ¸¸µç´Ù. 5px 10pxÀº ¹è°æ±×¸²ÀÇ Á»ó´ÜÀ» °¢ ű×ÀÇ Á»ó´ÜÀ¸·ÎºÎÅÍ ¿ìÃøÀ¸·Î 5 Çȼ¿ ¾Æ·¡·Î 10 Çȼ¿µÇ´Â ÁöÁ¡¿¡ µÎµµ·Ï ¸¸µç´Ù.

¸¸¾à ¼öÆò °ª¸¸ÀÌ ÁöÁ¤Çϸé, ¼öÁ÷ °ªÀº 50%°¡ µÉ °ÍÀÌ´Ù. ±æÀÌ¿Í ¹éºÐÀ²ÀÇ Á¶ÇÕÀº Çã¿ëµÇÁö¸¸ À̶§ ±æÀÌ´Â À½¼ö¸¸ °¡´ÉÇÏ´Ù. ¿¹¸¦µé¾î 10% -2cmÀº Çã¿ëµÈ´Ù. ±×·¯³ª ¹éºÐÀ²°ú ±æÀÌ´Â Å°¿öµå·Î´Â Á¶ÇÕÇÒ ¼ö ¾ø´Ù.

Å°¿öµå´Â ´ÙÀ½°ú °°ÀÌ Çؼ®µÈ´Ù.

  • top left = left top = 0% 0%
  • top = top center = center top = 50% 0%
  • right top = top right = 100% 0%
  • left = left center = center left = 0% 50%
  • center = center center = 50% 50%
  • right = right center = center right = 100% 50%
  • bottom left = left bottom = 0% 100%
  • bottom = bottom center = center bottom = 50% 100%
  • bottom right = right bottom = 100% 100%

¸¸¾à ¹è°æ±×¸²ÀÌ Äµ¹Ù½º¿¡´ëÇØ °íÁ¤(fixed)µÈ´Ù¸é, °¢ ÅÂ±× ´ë½Å¿¡ ĵ¹Ù½º¿¡´ëÇÑ À§Ä¡¿¡ ³õ¾îÁø´Ù.

¶ÇÇÑ ¾à½ÄÀ¸·Î ¹è°æ(background)Ư¼ºÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù. ÀÌ Æ¯¼ºÀº ÇöÀç background-position Ư¼ºº¸´Ù ´õ Àß Áö¿øµÈ´Ù.


¹è°æ(Background)
¹®¹ý background: <value>
°¡´ÉÇÑ°ª <background-color> || <background-image> || <background-repeat> || <background-a ttachment> || <background-position>
ÃʱⰪ Á¤ÀǵÇÁö ¾ÊÀ½
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

backgroundƯ¼ºÀº ÈξÀ ÀÚ¼¼ÇÑ ¹è°æ°ü·Ã Ư¼ºÀÇ ¾à½ÄÇ¥ÇöÀ¸·Î »ç¿ëµÈ´Ù. backgroundÀÇ ¼±¾ð¿¡´ëÇÑ ¿¹´Â ´ÙÀ½°ú °°´Ù.

BODY       { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE      { background: #0c0 url(leaves.jpg) no-repeat bottom right }

ÁöÁ¤µÇÁö ¾ÊÀº °ªÀº ÃʱâÄ¡°¡ »ç¿ëµÈ´Ù. ¿¹¸¦µé¾î À§¿¡¼­ óÀ½ ¼¼°³ÀÇ ±ÔÄ¢ÀÇ background-position Ư¼ºÀº 0% 0%À¸·Î ¼³Á¤µÉ °ÍÀÌ´Ù.


¹®Àå Ư¼º(Text Properties)
´Ü¾î°£°Ý(Word Spacing)
¹®¹ý word-spacing: <value>
°¡´ÉÇÑ°ª normal | <length>
ÃʱⰪ normal
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó µÊ

word-spacing Ư¼ºÀº ´Ü¾î»çÀÌÀÇ °£°ÝÀ» Á¤ÀÇÇÑ´Ù. °ªÀº ±æÀÌ(length) Çü½ÄÀ¸·Î ÁÖ¾îÁö¸ç, À½¼öµµ »ç¿ëÇÒ ¼ö ÀÖ´Ù.

¿¹

P EM   { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }

±ÛÀÚ°£°Ý(Letter Spacing)
¹®¹ý letter-spacing: <value>
°¡´ÉÇÑ°ª normal | <length>
ÃʱⰪ normal
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó µÊ

letter-spacing Ư¼ºÀº ±ÛÀÚ »çÀÌÀÇ °£°ÝÀ» Á¤ÀÇÇÑ´Ù. °ªÀº ±æÀÌ(length) Çü½ÄÀ¸·Î ÁÖ¾îÁö¸ç À½¼öµµ »ç¿ë°¡´ÉÇÏ´Ù. 0·Î ¼³Á¤ÇÔÀ¸·Î¼­ Çà°£ °í¸£±â(justification)¸¦ ¹æÁöÇÒ ¼ö ÀÖ´Ù.

¿¹:

H1     { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }

¹®ÀÚÀå½Ä(Text Decoration)
¹®¹ý text-decoration: <value>
°¡´ÉÇÑ°ª none | [ underline || overline || line-through || blink ]
ÃʱⰪ none
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

text-decoration Ư¼ºÀ¸·Î ´Ù¼¸°¡Áö ¼Ó¼º(underline, overline, line-through, blink ¶Ç´Â ³»Á¤ °ªÀÎ none)Áß Çϳª·Î ¹®ÀÚ¸¦ Àå½ÄÇÒ ¼ö ÀÖ´Ù.

¿¹¸¦µé¾î, ´ÙÀ½°ú °°Àº ¹æ¹ýÀ¸·Î ¹ØÁÙÀÌ ¾ø´Â ¸µÅ©¸¦ ¸¸µé ¼ö ÀÖ´Ù.

A:link, A:visited, A:active { text-decoration: none }

¼öÁ÷Á¤·Ä(Vertical Alignment)
¹®¹ý vertical-align: <value>
°¡´ÉÇÑ°ª baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
ÃʱⰪ baseline
Àû¿ë¹üÀ§ ÀζóÀΠű×
»ó¼Ó ¾ÈµÊ

vertical-align Ư¼ºÀº ¿Ü°û ű׳ª ÅÂ±× Çà¿¡´ëÇÑ ÀζóÀΠű×ÀÇ ¼öÁ÷ À§Ä¡¸¦ º¯°æÇϴµ¥ »ç¿ëµÈ´Ù.(ÀζóÀΠű״ ¾ÕµÚ·Î ¾î¶°ÇÑ ÁٹٲÞ(Line Break)µµ °®Áö ¾Ê´Â ű׵éÀÌ´Ù. ¿¹¸¦µé¾î HTML¿¡¼­´Â EM, A¿Í IMGÀÌ´Ù.)

°ªÀº °¢ ű×ÀÇ ÁÙ°£°Ý(line-height) Ư¼º¿¡´ëÇÑ ¹éºÐÀ²(percentage)ÀÌ´Ù. ÁÙ°£°Ý(line-heigh)Àº ¿Ü°û ű×ÀÇ ±âÀúÇà À§·Î ÁöÁ¤µÈ ¾ç¸¸Å­ ű×ÀÇ ±âÀú¶óÀÎÀ» ²ø¾î ¿Ã¸°´Ù. À½¼öµµ »ç¿ë°¡´ÉÇÏ´Ù.

°ªÀº ¶ÇÇÑ Å°¿öµåÀÏ ¼öµµ ÀÖ´Ù. ´ÙÀ½ÀÇ Å°¿öµå´Â ¿Ü°û ű׿¡´ëÇÑ »ó´ëÀû À§Ä¡¸¦ º¯°æÇÑ´Ù.

  • baseline (ű׳ª ¿Ü°û ű×ÀÇ ±âÀúÇàÀ¸·Î Á¤·ÄÇÑ´Ù)
  • middle (¿Ü°û ű×ÀÇ x-³ôÀÌ(¹®ÀÚ xÀÇ ³ôÀÌ)ÀÇ ¹ÝÀ» ±âÀúÇàÀ¸·Î ű×ÀÇ Áß°£ÁöÁ¡À¸·Î Á¤·ÄÇÑ´Ù.)
  • sub (¾Æ·¡Ã·ÀÚ(subscript))
  • super (À­Ã·ÀÚ(superscript))
  • text-top (ű׳ª ¿Ü°û ű×ÀÇ ±Û²ÃÀÇ »ó´Ü¿¡ Á¤·ÄÇÑ´Ù.)
  • text-bottom (ű׳ª ¿Ü°û ű×ÀÇ ±Û²ÃÀÇ ÇÏ´Ü¿¡ Á¤·ÄÇÑ´Ù.)

ÅÂ±× Çà¿¡´ëÇÑ »ó´ëÀû À§Ä¡¿¡ ¿µÇâÀ» ¹ÌÄ¡´Â Å°¿öµå´Â ´ÙÀ½°ú °°´Ù.

  • top (ÇØ´ç ÇàÀÇ °¡Àå Å« ¿ä¼Ò·Î ¿ä¼ÒÀÇ »ó´Ü¿¡ Á¤·ÄÇÑ´Ù.)
  • bottom (ÇØ´ç ÇàÀÇ °¡Àå Å« ¿ä¼Ò·Î ¿ä¼ÒÀÇ ÇÏ´Ü¿¡ Á¤·ÄÇÑ´Ù.)

vertical-align Ư¼ºÀº ±×¸²À» Á¤·ÄÇϴµ¥ ƯÈ÷ À¯¿ëÇÏ´Ù. ´ÙÀ½Àº ¸î¸î ¿¹ÀÌ´Ù.

IMG.middle { vertical-align: middle }
IMG        { vertical-align: 50% }
.exponent  { vertical-align: super }

¹®ÀÚº¯È¯(Text Transformation)
¹®¹ý text-transform: <value>
°¡´ÉÇÑ°ª none | capitalize | uppercase | lowercase
ÃʱⰪ none
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó µÊ

text-transform Ư¼ºÀ¸·Î ´ÙÀ½°ú °°Àº ³×°¡Áö ¼Ó¼ºÁß Çϳª¿¡ÀÇÇØ ¹®ÀÚ¸¦ º¯È¯ÇÒ ¼ö ÀÖ´Ù.

  • capitalize (°¢´Ü¾îÀÇ Ã¹±ÛÀÚ¸¦ ´ë¹®ÀÚ·Î ¸¸µç´Ù.)
  • uppercase (°¢´Ü¾îÀÇ ¸ðµç ±ÛÀÚ¸¦ ´ë¹®ÀÚ·Î ¸¸µç´Ù.)
  • lowercase (°¢´Ü¾îÀÇ ¸ðµç ±ÛÀÚ¸¦ ¼Ò¹®ÀÚ·Î ¸¸µç´Ù.)
  • none (ÃʱⰪ)

¿¹:

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

text-transform Ư¼ºÀº ´ÜÁö À¯ÀÇÇÒ ¹®ÀÚ¿¡¸¸ »ç¿ëÇØ¾ß ÇÑ´Ù. ¿¹¸¦µé¾î, ±¹°¡¸íÀ̳ª ÀθíÀ» ´ë¹®ÀÚ·Î ¸¸µé±â À§ÇØ text-transformÀ» »ç¿ëÇÏ´Â °ÍÀº ¹Ù¶÷Á÷ÇÏÁö ¸øÇÏ´Ù.


¹®´ÜÁ¤·Ä(Text Alignment)
¹®¹ý text-align: <value>
°¡´ÉÇÑ°ª left | right | center | justify
ÃʱⰪ ºê·Î¿ìÀú¿¡ ÀÇÁ¸
Àû¿ë¹üÀ§ ºí·° ű×
»ó¼Ó µÊ

text-align Ư¼ºÀº ű׳» ¹®ÀåÀ» Á¤·ÄÇÏ´Â °ÍÀ¸·Î ºí·° ű×(block-level elements)(P, H1 µîµî)¿¡¸¸ Àû¿ëµÉ ¼ö ÀÖ´Ù. ÀÌ·¯ÇÑ Æ¯¼ºÀº ¹®´Ü, Á¦¸ñ, ºÐÇÒ¿¡´ëÇÑ HTMLÀÇ ALIGN°ú ±â´ÉÀûÀ¸·Î À¯»çÇÏ´Ù.

°£´ÜÇÑ ¿¹´Â ´ÙÀ½°ú °°´Ù.

H1          { text-align: center }
P.newspaper { text-align: justify }

µé¿©¾²±â(Text Indentation)
¹®¹ý text-indent: <value>
°¡´ÉÇÑ°ª <length> | <percentage>
ÃʱⰪ 0
Àû¿ë¹üÀ§ ºí·° ű×
»ó¼Ó µÊ

text-indent Ư¼ºÀº ű׳» ùÇàÀÇ µé¿©¾²±â¸¦ Á¤ÀÇÇÏ´Â °ÍÀ¸·Î ºí·°Å±×(block-level elements) (P, H1µîµî)¿¡¸¸ Àû¿ëµÉ¼ö ÀÖ´Ù. °ªÀº ±æÀÌ(length)³ª ¹éºÐÀ²(percentage)À̾î¾ß ÇÏ¸ç ¹éºÐÀ²Àº ¿Ü°û ÅÂ±× Æø¿¡´ëÇÑ »ó´ë °ªÀÌ´Ù. text-indentÀÇ °¡ÀåÀϹÝÀûÀÎ »ç¿ëÀº ¹®´ÜÀ» µé¿©¾²±â ÇÏ´Â °ÍÀÌ´Ù.

P { text-indent: 5em }

ÁÙ°£°Ý(Line Height)
¹®¹ý line-height: <value>
°¡´ÉÇÑ°ª normal | <number> | <length> | <percentage>
ÃʱⰪ normal
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó µÊ

line-height Ư¼ºÀ¸·Î ¹®Àå ±âÀúÇà »çÀÌÀÇ °ø°£À» Á¶Á¤ÇÒ ¼ö ÀÖ´Ù. °ªÀÌ ¼ýÀÚÀÎ °æ¿ì ÁÙ°£°ÝÀº ű׳» ±Û²Ã Å©±â¿¡ °ªÀ» °öÇÑ °ªÀ̵ȴÙ. ¹éºÐÀ²Àΰæ¿ì ű׳» ±Û²Ã Å©±â¿¡´ëÇÑ »ó´ë°ªÀ̸ç, À½¼ö´Â Çã¿ëµÇÁö ¾Ê´Â´Ù.

ÁÙ°£°Ý ¶ÇÇÑ ±Û²Ã Å©±â¿Í ÇÔ²² ±Û²Ã(font) Ư¼º³»¿¡ ÁÖ¾îÁú ¼ö ÀÖ´Ù.

line-height Ư¼ºÀº ´ÙÀ½°ú °°ÀÌ ´õºí ½ºÆäÀ̽º¿¡ »ç¿ëµÉ ¼ö ÀÖ´Ù.

P { line-height: 200% }

»óÀÚ Æ¯¼º
À­¿©¹é(Top Margin)
¹®¹ý margin-top: <value>
°¡´ÉÇÑ°ª <length> | <percentage> | auto
ÃʱⰪ 0
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

margin-top Ư¼ºÀº ±æÀÌ(length)³ª ¹éºÐÀ²(percentage)À» ÁöÁ¤ÇÔÀ¸·Î¼­ °¢ ű×ÀÇ À­ ¿©¹éÀ» ¼³Á¤ÇÑ´Ù. ¹éºÐÀ²Àº ¿Ü°ûű×ÀÇ Æø¿¡´ëÇÑ »ó´ë°ªÀ̸ç À½¼öµµ Çã¿ëµÈ´Ù.

¿¹¸¦µé¾î, ´ÙÀ½°ú °°Àº ±ÔÄ¢Àº ¹®¼­ÀÇ À­¿©¹éÀ» Á¦°ÅÇÑ´Ù.

BODY { margin-top: 0 }

ÁÖÀÇ: ¼öÁ÷¿©¹éÀ» Á¶Á¤ÇÏ´Â °ÍÀº ÃÖ´ë ¿©¹é°ú ¼­·Î Ãæµ¹À» ÀÏÀÇų ¼ö ÀÖ´Ù.


¿ìÃø¿©¹é(Right Margin)
¹®¹ý margin-right: <value>
°¡´ÉÇÑ°ª <length> | <percentage> | auto
ÃʱⰪ 0
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

margin-right Ư¼ºÀº ±æÀÌ(length)³ª ¹éºÐÀ²(percentage)À» ÁöÁ¤ÇÔÀ¸·Î¼­ °¢ ű×ÀÇ ¿ìÃø¿©¹éÀ» ¼³Á¤ÇÑ´Ù. À½ÀÇ ¿©¹éµµ ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù.

¿¹:

P.narrow { margin-right: 50% }

ÁÖÀÇ: ¼öÁ÷¿©¹éÀ» Á¶Á¤Çصµ º°´Ù¸¥ Ãæµ¹Àº ¾ø´Ù.


¾Æ·¡¿©¹é(Bottom Margin)
¹®¹ý margin-bottom: <value>
°¡´ÉÇÑ°ª <length> | <percentage> | auto
ÃʱⰪ 0
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

margin-bottom Ư¼ºÀº ±æÀÌ(length)³ª ¹éºÐÀ²(percentage)À» ÁöÁ¤ÇÔÀ¸·Î¼­ ű×ÀÇ ¾Æ·¡¿©¹éÀ» ¼³Á¤ÇÑ´Ù. ¹éºÐÀ²Àº ¿Ü°û ÅÂ±× Æø¿¡´ëÇÑ »ó´ë°ªÀ̸ç À½¼öÀÇ ¿©¹éµµ °¡´ÉÇÏ´Ù.

¿¹:

DT { margin-bottom: 3em }

ÁÖÀÇ: ¼öÁ÷¿©¹éÀ» Á¶Á¤ÇÏ´Â °ÍÀº ÃÖ´ë ¿©¹é°ú ¼­·Î Ãæµ¹À» ÀÏÀÇų ¼ö ÀÖ´Ù.


ÁÂÃø¿©¹é(Left Margin)
¹®¹ý margin-left: <value>
°¡´ÉÇÑ°ª <length> | <percentage> | auto
ÃʱⰪ 0
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

margin-left Ư¼ºÀº ±æÀÌ(length)³ª ¹éºÐÀ²(percentage)À» ÁöÁ¤ÇÔÀ¸·Î¼­ ű×ÀÇ ÁÂÃø¿©¹éÀ» ¼³Á¤ÇÑ´Ù. ¹éºÐÀ²Àº ¿Ü°ûÅÂ±× Æø¿¡´ëÇÑ »ó´ë °ªÀ̸ç À½¼öÀÇ ¿©¹éµµ Çã¿ëµÈ´Ù.

¿¹:

ADDRESS { margin-left: 50% }

ÁÖÀÇ: ¼öÁ÷¿©¹éÀ» Á¶Á¤Çصµ º°´Ù¸¥ Ãæµ¹Àº ¾ø´Ù.


¿©¹é(Margin)
¹®¹ý margin: <value>
°¡´ÉÇÑ°ª [ <length> | <percentage> | auto ]{1,4}
ÃʱⰪ Á¤ÀǵÇÁö ¾ÊÀ½
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

margin Ư¼ºÀº 1-4 °³ÀÇ °ªÀ» ÁöÁ¤ÇÔÀ¸·Î¼­ ű×ÀÇ ¿©¹éÀ» ¼³Á¤ÇÑ´Ù. ¿©±â¼­ °¢°¢ÀÇ °ªµéÀº ±æÀÌ(length), ¹éºÐÀ²(percentage) ¶Ç´Â ÀÚµ¿(auto)Áß ÇϳªÀÌ´Ù. ¹éºÐÀ²Àº ¿Ü°û ű×ÀÇ Æø¿¡´ëÇÑ »ó´ë °ªÀ̸ç À½ÀÇ ¿©¹éµµ Çã¿ëµÈ´Ù.

¸¸¾à 4°³ÀÇ °ªÀÌ ÁÖ¾îÁö¸é, À̵éÀº °¢°¢ À­¿©¹é, ¿ìÃø¿©¹é, ¾Æ·¡¿©¹é, ÁÂÃø¿©¹é¿¡ Àû¿ëµÈ´Ù. ÇϳªÀÇ °ª¸¸ ÁÖ¾îÁö¸é ¸ðµç ¿©¹é¿¡ Àû¿ëµÈ´Ù. µÎ°³³ª ¼¼°³ÀÇ °ªÀÌ ÁÖ¾îÁö¸é »ý·«µÈ °ªÀº ¹Ý´ëÂÊ ¿©¹éÀ» µû¸¥´Ù.

¿©¹éÁÖ±âÀÇ ¿¹:

BODY { margin: 5em }             /* all margins 5em */
P    { margin: 2em 4em }         /* top and bottom margins 2em,
                                    left and right margins 4em */
DIV  { margin: 1em 2em 3em 4em } /* top margin 1em,
                                    right margin 2em,
                                    bottom margin 3em,
                                    left margin 4em */

ÁÖÀÇ: ¼öÁ÷ ¿©¹éÀ» Á¶Á¤ÇÏ´Â °ÍÀº ÃÖ´ë ¿©¹éÀ» »ç¿ëÇÏ´Â °æ¿ì Ãæµ¹À» ÀÏÀÇų¼öÀÖÁö¸¸ ¼öÆò ¿©¹éÀº ¾î¶°ÇÑ Ãæµ¹µµ ¹ß»ýÇÏÁö ¾Ê´Â´Ù.

margin Ư¼ºÀ» »ç¿ëÇÔÀ¸·Î¼­ ¸ðµç ¿©¹éÀ» ¼³Á¤ÇÒ ¼ö ÀÖ´Ù. ¶Ç ´Ù¸¥ ¹æ¹ýÀ¸·Î margin-top, margin-bottom, margin-left°ú margin-right¸¦ »ç¿ëÇÒ ¼ö ÀÖ´Ù.


À§ °æ°è ¿©¹é(Top Padding)
¹®¹ý padding-top: <value>
°¡´ÉÇÑ°ª <length> | <percentage>
ÃʱⰪ 0
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

padding-top Ư¼ºÀº top border¿Í ¼±ÅÃÀÚ ³»¿ë »çÀÌ¿¡ ¾ó¸¶ÀÇ ¿©¹éÀ» µÑ °ÍÀΰ¡¸¦ ¼³Á¤ÇÑ´Ù. °ªÀº ±æÀÌ(length)À̰ųª¹éºÐÀ²(percentage)ÀÌ´Ù. ¹éºÐÀ²Àº ¿Ü°û ű×ÀÇ Æø¿¡´ëÇÑ »ó´ë°ªÀÌ´Ù. À½ÀÇ ¿©¹éÀº Çã¿ëµÇÁö ¾Ê´Â´Ù.


¿ìÃø °æ°è ¿©¹é(Right Padding)
¹®¹ý padding-right: <value>
°¡´ÉÇÑ°ª <length> | <percentage>
ÃʱⰪ 0
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

padding-right Ư¼ºÀº ¿ìÃø °æ°è(right border)¿Í ¼±ÅÃÀÚ ³»¿ë »çÀÌ¿¡ ¾ó¸¶ÀÇ °ø¹éÀ» µÑ °ÍÀΰ¡¸¦ ¼³Á¤ÇÑ´Ù. °ªÀº ±æÀÌ(length)À̰ųª¹éºÐÀ²(percentage)ÀÌ´Ù. ¹éºÐÀ²Àº ¿Ü°û ű×ÀÇ Æø¿¡´ëÇÑ »ó´ë°ªÀÌ´Ù. À½ÀÇ ¿©¹éÀº Çã¿ëµÇÁö ¾Ê´Â´Ù.


¾Æ·¡ °æ°è ¿©¹é(Bottom Padding)
¹®¹ý padding-bottom: <value>
°¡´ÉÇÑ°ª <length> | <percentage>
ÃʱⰪ 0
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

padding-bottom Ư¼ºÀº ¾Æ·¡°æ°è(bottom border)¿Í ¼±ÅÃÀÚ ³»¿ë »çÀÌ¿¡ ¾ó¸¶ÀÇ °ø¹éÀ» µÑ °ÍÀΰ¡¸¦ ¼³Á¤ÇÑ´Ù. °ªÀº ±æÀÌ(length)À̰ųª¹éºÐÀ²(percentage)ÀÌ´Ù. ¹éºÐÀ²Àº ¿Ü°û ű×ÀÇ Æø¿¡´ëÇÑ »ó´ë°ªÀÌ´Ù. À½ÀÇ ¿©¹éÀº Çã¿ëµÇÁö ¾Ê´Â´Ù.


ÁÂÃø°æ°è ¿©¹é(Left Padding)
¹®¹ý padding-left: <value>
°¡´ÉÇÑ°ª <length> | <percentage>
ÃʱⰪ 0
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

padding-left Ư¼ºÀº ÁÂÃø°æ°è(left border)¿Í ¼±ÅÃÀÚ ³»¿ë »çÀÌ¿¡ ¾ó¸¶ÀÇ °ø¹éÀ» µÑ °ÍÀΰ¡¸¦ ¼³Á¤ÇÑ´Ù. °ªÀº ±æÀÌ(length)À̰ųª¹éºÐÀ²(percentage)ÀÌ´Ù. ¹éºÐÀ²Àº ¿Ü°û ű×ÀÇ Æø¿¡´ëÇÑ »ó´ë°ªÀÌ´Ù. À½ÀÇ ¿©¹éÀº Çã¿ëµÇÁö ¾Ê´Â´Ù.


°æ°è¿©¹é(Padding)
¹®¹ý padding: <value>
°¡´ÉÇÑ°ª [ <length> | <percentage> ]{1,4}
ÃʱⰪ 0
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

padding Ư¼ºÀº padding-top, padding-right, padding-bottom°ú padding-left Ư¼º¿¡´ëÇÑ ¾à½Ä Ç¥ÇöÀÌ´Ù.

ű×ÀÇ °æ°è¿©¹é(padding)Àº °æ°è(border)¿Í ÅÂ±× ³»¿ë»çÀÌÀÇ °ø¹éÀÇ ¾çÀÌ´Ù. ÇÑ°³¿¡¼­ ³×°³±îÁöÀÇ °ªÀÌ ÁÖ¾îÁö¸ç °¢°¢ÀÇ °ªÀº ±æÀÌ(length)À̰ųª¹éºÐÀ²(percentage)ÀÌ´Ù. ¹éºÐÀ²Àº ¿Ü°û ű×ÀÇ Æø¿¡´ëÇÑ »ó´ë°ªÀÌ´Ù. À½ÀÇ ¿©¹éÀº Çã¿ëµÇÁö ¾Ê´Â´Ù.

¿¹¸¦µé¾î ´ÙÀ½°ú °°Àº ±ÔÄ¢À¸·Î À§ °æ°è ¿©¹éÀ» 2emÀ¸·Î, ¿ì °æ°è ¿©¹éÀ» 4emÀ¸·Î ¾Æ·¡ °æ°è ¿©¹éÀ» 5emÀ¸·Î, Á °æ°è ¿©¹éÀ» 4emÀ¸·Î ¼³Á¤ÇÒ ¼ö ÀÖ´Ù.

BLOCKQUOTE { padding: 2em 4em 5em }

À§ °æ°è Æø(Top Border Width)
¹®¹ý border-top-width: <value>
°¡´ÉÇÑ°ª thin | medium | thick | <length>
ÃʱⰪ medium
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

border-top-width Ư¼ºÀº ű×ÀÇ À§ °æ°è(top border) ÆøÀ» ÁöÁ¤Çϴµ¥ »ç¿ëµÈ´Ù. °ªÀº ±Û²Ã Å©±â¿¡ ¿µÇâÀ» ¹ÞÁö ¾Ê´Â ¼¼°³ÀÇ Å°¿öµåÁß ÇϳªÀ̰ųª »ó´ëÀûÀÎ ÆøÀ» ´Þ¼ºÇϴµ¥ »ç¿ëÇÒ ¼ö ÀÖ´Â ±æÀÌ(length)ÀÌ´Ù. À½¼ö´Â Çã¿ëµÇÁö ¾Ê´Â´Ù.

¶ÇÇÑ ¾à½ÄÀ¸·Î border-top, border-width, borderÁß Çϳª¸¦ »ç¿ëÇÒ ¼ö ÀÖ´Ù.


¿ì °æ°è Æø(Right Border Width)
¹®¹ý border-right-width: <value>
°¡´ÉÇÑ°ª thin | medium | thick | <length>
ÃʱⰪ medium
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

border-right-width Ư¼ºÀº ű×ÀÇ ¿ì °æ°è(right border) ÆøÀ» ÁöÁ¤Çϴµ¥ »ç¿ëµÈ´Ù. °ªÀº ±Û²Ã Å©±â¿¡ ¿µÇâÀ» ¹ÞÁö ¾Ê´Â ¼¼°³ÀÇ Å°¿öµåÁß ÇϳªÀ̰ųª »ó´ëÀûÀÎ ÆøÀ» ´Þ¼ºÇϴµ¥ »ç¿ëÇÒ ¼ö ÀÖ´Â ±æÀÌ(length)ÀÌ´Ù. À½¼ö´Â Çã¿ëµÇÁö ¾Ê´Â´Ù.

¶ÇÇÑ ¾à½ÄÀ¸·Î border-top, border-width, borderÁß Çϳª¸¦ »ç¿ëÇÒ ¼ö ÀÖ´Ù.


¾Æ·¡ °æ°è Æø(Bottom Border Width)
¹®¹ý border-bottom-width: <value>
°¡´ÉÇÑ°ª thin | medium | thick | <length>
ÃʱⰪ medium
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

border-bottom-width Ư¼ºÀº ű×ÀÇ ¾Æ·¡°æ°è(bottom border) ÆøÀ» ÁöÁ¤Çϴµ¥ »ç¿ëµÈ´Ù. °ªÀº ±Û²Ã Å©±â¿¡ ¿µÇâÀ» ¹ÞÁö ¾Ê´Â ¼¼°³ÀÇ Å°¿öµåÁß ÇϳªÀ̰ųª »ó´ëÀûÀÎ ÆøÀ» ´Þ¼ºÇϴµ¥ »ç¿ëÇÒ ¼ö ÀÖ´Â ±æÀÌ(length)ÀÌ´Ù. À½¼ö´Â Çã¿ëµÇÁö ¾Ê´Â´Ù.

¶ÇÇÑ ¾à½ÄÀ¸·Î border-top, border-width, borderÁß Çϳª¸¦ »ç¿ëÇÒ ¼ö ÀÖ´Ù.


ÁÂ °æ°è Æø(Left Border Width)
¹®¹ý border-left-width: <value>
°¡´ÉÇÑ°ª thin | medium | thick | <length>
ÃʱⰪ medium
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

border-left-width Ư¼ºÀº ű×ÀÇ Á °æ°è(left border) ÆøÀ» ÁöÁ¤Çϴµ¥ »ç¿ëµÈ´Ù. °ªÀº ±Û²Ã Å©±â¿¡ ¿µÇâÀ» ¹ÞÁö ¾Ê´Â ¼¼°³ÀÇ Å°¿öµåÁß ÇϳªÀ̰ųª »ó´ëÀûÀÎ ÆøÀ» ´Þ¼ºÇϴµ¥ »ç¿ëÇÒ ¼ö ÀÖ´Â ±æÀÌ(length)ÀÌ´Ù. À½¼ö´Â Çã¿ëµÇÁö ¾Ê´Â´Ù.

¶ÇÇÑ ¾à½ÄÀ¸·Î border-top, border-width, borderÁß Çϳª¸¦ »ç¿ëÇÒ ¼ö ÀÖ´Ù.


°æ°è Æø(Border Width)
¹®¹ý border-width: <value>
°¡´ÉÇÑ°ª [ thin | medium | thick | <length> ]{1,4}
ÃʱⰪ Á¤ÀǵÇÁö ¾ÊÀ½
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

border-width Ư¼ºÀº Çϳª¿¡¼­ ³×°³ÀÇ °ªÀ» ÁöÁ¤ÇÔÀ¸·Î¼­ °æ°è ÆøÀ» ¼³Á¤Çϴµ¥ »ç¿ëµÈ´Ù. °¢°¢ÀÇ °ªÀº Å°¿öµåÀ̰ųª ±æÀÌ(length)À̸ç À½¼ö´Â Çã¿ëµÇÁö ¾Ê´Â´Ù.

³×°³ÀÇ °ªÀÌ ÁÖ¾îÁö¸é °¢°¢ À§ °æ°è Æø, ¿ì°æ°è Æø, ¾Æ·¡°æ°è Æø, Á°æ°è ÆøÀÇ ¼øÀ¸·Î Àû¿ëµÈ´Ù. ÇϳªÀÇ °ªÀÌ ÁÖ¾îÁö¸é ¸ðµç ¹æ¸é¿¡ °°Àº °ªÀÌ Àû¿ëµÈ´Ù. µÎ°³ ¶Ç´Â ¼¼°³ÀÇ °ªÀÌ ÁÖ¾îÁö¸é ºüÁø °ªÀº ¹Ý´ëÃø¿¡¼­ ÃëÇØÁø´Ù.

ÀÌ Æ¯¼ºÀº border-top-width, border-right-width, border-bottom-width°ú border-left-width Ư¼ºÀÇ ¾à½ÄÇ¥ÇöÀÌ´Ù.

¶ÇÇÑ °£´ÜÇÏ°Ô border Ư¼ºÀ» »ç¿ëÇÒ ¼öµµ ÀÖ´Ù.


°æ°è »ö»ó(Border Color)
¹®¹ý border-color: <value>
°¡´ÉÇÑ°ª <color>{1,4}
ÃʱⰪ The value of the color property
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

border-color Ư¼ºÀº ÅÂ±× °æ°è(border)ÀÇ »ö»óÀ» ¼³Á¤ÇÑ´Ù. Çϳª¿¡¼­ ³×°³ÀÇ »ö»ó °ª(color values)ÀÌ ÁöÁ¤µÈ´Ù. ³×°³°¡ ÁöÁ¤µÇ¸é °¢°¢ À§ °æ°è, ¿ì °æ°è, ¾Æ·¡ °æ°è, Á °æ°èÀÇ »ö»óÀ¸·Î ÁöÁ¤µÈ´Ù. ÇϳªÀÇ °ª¸¸ ÁöÁ¤µÇ¸é ¸ðµç °æ°è°¡ °°Àº °ªÀ¸·Î ¼³Á¤µÈ´Ù. µÎ°³ ¶Ç´Â ¼¼°³°¡ ÁÖ¾îÁö¸é ºüÁø °ªÀº ¹Ý´ëÃø °æ°è°ªÀ» ÃëÇÑ´Ù.

¶ÇÇÑ ¾à½ÄÀ¸·Î border Ư¼ºÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù.


°æ°è ½ºÅ¸ÀÏ(Border Style)
¹®¹ý border-style: <value>
°¡´ÉÇÑ°ª [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
ÃʱⰪ none
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

border-style Ư¼ºÀº ÅÂ±× °æ°è(border)ÀÇ ½ºÅ¸ÀÏÀ» ¼³Á¤Çϴµ¥ »ç¿ëµÈ´Ù. ÀÌ Æ¯¼ºÀÌ ÁöÁ¤µÇ¾î¾ß¸¸ °æ°è¸¦ º¼ ¼ö ÀÖ´Ù.

Çϳª¿¡¼­ ³×°³ÀÇ Å°¿öµå°¡ ÁöÁ¤µÈ´Ù. ³×°³°¡ ÁöÁ¤µÇ¸é °¢°¢ À§ °æ°è, ¿ì °æ°è, ¾Æ·¡ °æ°è, Á °æ°èÀÇ ½ºÅ¸ÀÏ·Î ÁöÁ¤µÈ´Ù. ÇϳªÀÇ °ª¸¸ ÁöÁ¤µÇ¸é ¸ðµç °æ°è°¡ °°Àº °ªÀ¸·Î ¼³Á¤µÈ´Ù. µÎ°³ ¶Ç´Â ¼¼°³°¡ ÁÖ¾îÁö¸é ºüÁø °ªÀº ¹Ý´ëÃø °æ°è°ªÀ» ÃëÇÑ´Ù.

¶ÇÇÑ ¾à½ÄÀ¸·Î border Ư¼ºÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù.


À§ °æ°è(Top Border)
¹®¹ý border-top: <value>
°¡´ÉÇÑ°ª <border-top-width> || <border-style> || <color>
ÃʱⰪ Á¤ÀǵÇÁö ¾ÊÀ½
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

border-top Ư¼ºÀº ÅÂ±× À§ °æ°èÀÇ Æø(width), ½ºÅ¸ÀÏ(style)°ú »ö»ó(color)À» ¼³Á¤Çϴµ¥ »ç¿ëµÇ´Â ¾à½ÄÇ¥ÇöÀÌ´Ù.

´ÜÁö ÇϳªÀÇ border-style °ª¸¸ÀÌ ÁöÁ¤µÇ¾î¾ß ÇÑ´Ù´Â °ÍÀ» ÁÖÀÇÇϱ⠹ٶõ´Ù.

¶ÇÇÑ ¾à½ÄÀ¸·Î border Ư¼ºÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù.


¿ì °æ°è(Right Border)
¹®¹ý border-right: <value>
°¡´ÉÇÑ°ª <border-right-width> || <border-style> || <color>
ÃʱⰪ Á¤ÀǵÇÁö ¾ÊÀ½
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

border-right Ư¼ºÀº ÅÂ±× ¿ì °æ°èÀÇ Æø(width), ½ºÅ¸ÀÏ(style)°ú »ö»ó(color)À» ¼³Á¤Çϴµ¥ »ç¿ëµÇ´Â ¾à½ÄÇ¥ÇöÀÌ´Ù.

´ÜÁö ÇϳªÀÇ border-style °ª¸¸ÀÌ ÁöÁ¤µÇ¾î¾ß ÇÑ´Ù´Â °ÍÀ» ÁÖÀÇÇϱ⠹ٶõ´Ù.

¶ÇÇÑ ¾à½ÄÀ¸·Î border Ư¼ºÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù.


¾Æ·¡ °æ°è(Bottom Border)
¹®¹ý border-bottom: <value>
°¡´ÉÇÑ°ª <border-bottom-width> || <border-style> || <color>
ÃʱⰪ Á¤ÀǵÇÁö ¾ÊÀ½
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

border-bottom Ư¼ºÀº ¾Æ·¡ °æ°èÀÇ Æø(width), ½ºÅ¸ÀÏ(style)°ú »ö»ó(color)À» ¼³Á¤Çϴµ¥ »ç¿ëµÇ´Â ¾à½ÄÇ¥ÇöÀÌ´Ù.

´ÜÁö ÇϳªÀÇ border-style °ª¸¸ÀÌ ÁöÁ¤µÇ¾î¾ß ÇÑ´Ù´Â °ÍÀ» ÁÖÀÇÇϱ⠹ٶõ´Ù.

¶ÇÇÑ ¾à½ÄÀ¸·Î border Ư¼ºÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù.


ÁÂ °æ°è(Left Border)
¹®¹ý border-left: <value>
°¡´ÉÇÑ°ª <border-left-width> || <border-style> || <color>
ÃʱⰪ Á¤ÀǵÇÁö ¾ÊÀ½
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

border-left Ư¼ºÀº Á °æ°èÀÇ Æø(width), ½ºÅ¸ÀÏ(style)°ú »ö»ó(color)À» ¼³Á¤Çϴµ¥ »ç¿ëµÇ´Â ¾à½ÄÇ¥ÇöÀÌ´Ù.

´ÜÁö ÇϳªÀÇ border-style °ª¸¸ÀÌ ÁöÁ¤µÇ¾î¾ß ÇÑ´Ù´Â °ÍÀ» ÁÖÀÇÇϱ⠹ٶõ´Ù.

¶ÇÇÑ ¾à½ÄÀ¸·Î border Ư¼ºÀ» »ç¿ëÇÒ ¼ö ÀÖ´Ù.


°æ°è(Border)
¹®¹ý border: <value>
°¡´ÉÇÑ°ª <border-width> || <border-style> || <color>
ÃʱⰪ Á¤ÀǵÇÁö ¾ÊÀ½
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

border Ư¼ºÀº ÅÂ±× °æ°èÀÇ Æø(width), ½ºÅ¸ÀÏ(style)°ú »ö»ó(color)À» ¼³Á¤Çϴµ¥ »ç¿ëµÇ´Â ¾à½ÄÇ¥ÇöÀÌ´Ù.

°æ°è¸¦ ¼±¾ðÇÏ´Â °£´ÜÇÑ ¿¹´Â ´ÙÀ½°ú °°´Ù.

H2        { border: groove 3em }
A:link    { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active  { border: thick double red }

border Ư¼ºÀº ´ÜÁö ¸ðµç ³× ¹æÇâÀÇ °æ°è¿¡´ëÇؼ­¸¸ ¼³Á¤µÉ ¼ö ÀÖ´Ù. Áï, ÇϳªÀÇ °æ°èÆø°ú °æ°è ½ºÅ¸Àϸ¸ ÁÖ¾îÁ®¾ß ÇÑ´Ù. ű×ÀÇ ³× ¹æÇâ °æ°è¿¡ ¼­·Î ´Ù¸¥ °ªÀ» ÁÖ±âÀ§Çؼ­´Â border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width ¶Ç´Â border-left-width Áß Çϳª ÀÌ»óÀÇ Æ¯¼ºÀ» »ç¿ëÇØ¾ß ÇÑ´Ù.


Æø(Width)
¹®¹ý width: <value>
°¡´ÉÇÑ°ª <length> | <percentage> | auto
ÃʱⰪ auto
Àû¿ë¹üÀ§ ºí·° ÅÂ±×¿Í ´ëÄ¡ ű×
»ó¼Ó ¾ÈµÊ

°¢°¢ÀÇ ºí·° ű×(block-level)³ª ´ëÄ¡ ű×(replaced element)¿¡ ±æÀÌ(length), ¹éºÐÀ²(percentage)À̳ª auto¿Í °°Àº °ÍÀ¸·Î ÁöÁ¤µÈ ÆøÀÌ ÁöÁ¤µÉ ¼ö ÀÖ´Ù. (´ëÄ¡ ű×(replaced element)´Â º»ÁúÀûÀÎ ¼Ó¼ºÀ̳ª Â÷¿øÀÌ ¾Ë·ÁÁø ű×ÀÌ´Ù. HTML¿¡¼­ ´ëÄ¡ ű״ IMG, INPUT, TEXTAREA, SELECT¿Í OBJECT°¡ ÀÖ´Ù.) width Ư¼º¿¡´ëÇÑ Ãʱ⠰ªÀº autoÀ̸ç, ű×ÀÇ º»·¡ÀÇ ÆøÀ» ÀÚµ¿À¸·Î ÆÇÁ¤ÇÑ´Ù(¿¹, ÅÂ±× ÀÚüÀÇ Æø, ¿¹¸¦µé¾î ±×¸²ÀÇ Æø). ¹éºÐÀ²Àº ¿Ü°û ű×ÀÇ Æø¿¡´ëÇÑ »ó´ë°ªÀ̸ç À½ÀÇ °ªÀº Çã¿ëµÇÁö ¾Ê´Â´Ù.

ÀÌ Æ¯¼ºÀ¸·Î submit°ú reset ¹öÆ°°ú °°Àº INPUT ű×ÀÇ °øÅë ÆøÀ» ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù.

INPUT.button { width: 10em }

³ôÀÌ(Height)
¹®¹ý height: <value>
°¡´ÉÇÑ°ª <length> | auto
ÃʱⰪ auto
Àû¿ë¹üÀ§ ºí·° ÅÂ±×¿Í ´ëÄ¡ ű×
»ó¼Ó ¾ÈµÊ

°¢°¢ÀÇ ºí·° ű×(block-level)³ª ´ëÄ¡ ű×(replaced element)¿¡ ±æÀÌ(length)À̳ª auto¿Í °°Àº °ÍÀ¸·Î ÁöÁ¤µÈ ³ôÀÌ°¡ ÁöÁ¤µÉ ¼ö ÀÖ´Ù. (´ëÄ¡ ű×(replaced element)´Â º»ÁúÀûÀÎ ¼Ó¼ºÀ̳ª Â÷¿øÀÌ ¾Ë·ÁÁø ű×ÀÌ´Ù. HTML¿¡¼­ ´ëÄ¡ ű״ IMG, INPUT, TEXTAREA, SELECT¿Í OBJECT°¡ ÀÖ´Ù.) height Ư¼º¿¡´ëÇÑ Ãʱ⠰ªÀº autoÀ̸ç, ű×ÀÇ º»·¡ ³ôÀ̸¦ ÀÚµ¿À¸·Î ÆÇÁ¤ÇÑ´Ù(¿¹, ÅÂ±× ÀÚüÀÇ ³ôÀÌ, ¿¹¸¦µé¾î ±×¸²ÀÇ ³ôÀÌ). À½ÀÇ °ªÀº Çã¿ëµÇÁö ¾Ê´Â´Ù.

width Ư¼º°ú ÇÔ²² »ç¿ëÇÔÀ¸·Î¼­ height Ư¼ºÀº ±×¸²ÀÇ Å©±â¸¦ Á¶Á¤Çϴµ¥ »ç¿ëµÉ ¼ö ÀÖ´Ù.

IMG.foo { width: 40px; height: 40px }

´ëºÎºÐÀÇ °æ¿ì¿¡ ±×¸² ÆíÁý ÇÁ·Î±×·¥À» ÀÌ¿ëÇؼ­ ±×¸²ÀÇ Å©±â¸¦ Á¶Á¤ÇÒ °ÍÀ» ±Ç°íÇÑ´Ù. ¿Ö³ÄÇÏ¸é ºê·Î¿ìÀú°¡ °í Ç°Áú·Î ±×¸²À» Á¶ÀýÇÏÁö ¸øÇÏ´Â °æ¿ì°¡ ÀÖÀ¸¸ç, Å©±â°¡ ÁÙ¾îµç ±×¸²¶§¹®¿¡ »ç¿ëÀÚ°¡ ºÒÇÊ¿äÇÏ°Ô Å« ÆÄÀÏÀ» ³»·Á¹Þ´Â °æ¿ì°¡ Àֱ⠶§¹®ÀÌ´Ù. ±×·¯³ª »ç¿ëÀÚÀÇ ½Ã½ºÅÛ»óÀÇ ¹®Á¦¸¦ ±Øº¹ÇϱâÀ§ÇØ »ç¿ëÀÚ Á¤ÀÇ ½ºÅ¸ÀÏ¿¡ »ç¿ëÇÒ °æ¿ì width¿Í height Ư¼ºÀº À¯¿ëÇÑ ¿É¼ÇÀÌ´Ù.


Float
¹®¹ý float: <value>
°¡´ÉÇÑ°ª left | right | none
ÃʱⰪ none
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

float Ư¼ºÀ¸·Î ÀúÀÚ´Â ÅÂ±× ÁÖº¯ÀÇ ¹®ÀåÀ» ·¦(wrap)½Ãų ¼ö ÀÖ´Ù. ÀÌ°ÍÀº HTML 3.2¿¡¼­ IMGÀÇ ALIGN=left, ALIGN=right¿Í ¸ñÀû»ó µ¿ÀÏÇÏ´Ù. ±×·¯³ª CSS1Àº ¸ðµç ű׿¡´ëÇÑ "float"¸¦ Çã¿ëÇÑ´Ù. ¹Ý¸é¿¡ HTML 3.2¿¡¼­´Â images¿Í tables¿¡¼­¸¸ Çã¿ëÇÏ°í ÀÖ´Ù.


Clear
¹®¹ý clear: <value>
°¡´ÉÇÑ°ª none | left | right | both
ÃʱⰪ none
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

clear Ư¼ºÀº ű×ÀÇ ¾î¶² Ãø¿¡ floating ű׸¦ Çã¿ëÇÒ °ÍÀÎÁö¸¦ ÁöÁ¤ÇÑ´Ù. left °ªÀ¸·Î ÀÓÀÇÀÇ floating ÅÂ±× ¾Æ·¡ÀÇ Å±װ¡ floating ű×ÀÇ ÁÂÃøÀ¸·Î À̵¿ÇÑ´Ù. rightµµ ¿ìÃøÀÇ floating ű׿¡´ëÇØ À¯»çÇÏ°Ô µ¿ÀÛÇÑ´Ù. ´Ù¸¥ °ªÀº noneÀ̸ç ÀÌ °ÍÀÌ Ãʱ⠰ªÀÌ´Ù. ¸¶Áö¸· both´Â floating ÅÂ±× ¾Æ·¡ÀÇ Å±׸¦ floating ÅÂ±× ¾çÃøÀ¸·Î À̵¿ ½ÃŲ´Ù. ÀÌ Æ¯¼ºÀº ±â´ÉÀûÀ¸·Î HTML 3.2ÀÇ <BR CLEAR=left|right|all|none>¿Í À¯»çÇÏÁö¸¸ CSS1Àº ¸ðµç ű׿¡´ëÇØ Àû¿ëµÈ´Ù.


ºÐ·ù Ư¼º(Classification Properties)
È­¸éÃâ·Â(Display)
¹®¹ý display: <value>
°¡´ÉÇÑ°ª block | inline | list-item | none
ÃʱⰪ block
Àû¿ë¹üÀ§ ¸ðµç ű×
»ó¼Ó ¾ÈµÊ

display Ư¼ºÀº ´ÙÀ½ ³×°³ÀÇ °ªÁß Çϳª·Î ű׸¦ Á¤ÀÇÇÑ´Ù.

  • block (ÅÂ±× ¾ÕµÚ¿¡¿¡¼­ °³Çà)
  • inline (ÅÂ±× ¾ÕµÚ¿¡¼­ °³ÇàÇÏÁö ¾ÊÀ½)
  • list-item (¸ñ·Ï Ç¥½ÄÀÌ Ãß°¡µÇ´Â Á¡À» Á¦¿ÜÇÏ°í block°ú µ¿ÀÏ)
  • none (È­¸éÃâ·Â ¾øÀ½)

°¢°¢ÀÇ Å±׵éÀº ÀüÇüÀûÀ¸·Î HTML »ç¾ç¿¡¼­ Á¦¾ÈµÈ Ç¥Çö¹ý¿¡µû¶ó ºê·Î¿ìÀú¿¡ÀÇÇØ ³»Á¤µÈ display °ªÀ» °®´Â´Ù.

display Ư¼ºÀº ºÎÀû´çÇÑ Çü½ÄÀ» °®´Â ű׵éÀ» È­¸é¿¡ Ãâ·Â½Ãų ¼ö Àֱ⶧¹®¿¡ À§Ç轺·¯¿ï ¼öÀÖ´Ù. none °ªÀ» »ç¿ëÇÏ´Â °ÍÀº ÁöÁ¤µÈ ÅÂ±×¿Í ÀÌ ÅÂ±× ³»ÀÇ Å±׵éÀ» Ãâ·ÂÇÏÁö ¾Ê°ÔµÈ´Ù.


°ø¹é(Whitespace)
¹®¹ý white-space: <value>
°¡´ÉÇÑ°ª normal | pre | nowrap
ÃʱⰪ normal
Àû¿ë¹üÀ§ ºí·° ű×
»ó¼Ó µÊ

white-space Ư¼ºÀº ÅÂ±× ³»ÀÇ °ø¹éÀ» ¾î¶»°Ô ó¸®ÇÒ °ÍÀΰ¡¸¦ °áÁ¤ÇÑ´Ù. ÀÌ Æ¯¼ºÀº ´ÙÀ½ ¼¼°¡Áö °ªÁß Çϳª¸¦ °®´Â´Ù.

  • normal (¿©·¯°³ÀÇ °ø¹éÀ» Çϳª·Î ¸¸µç´Ù.)
  • pre (¿©·¯°³ÀÇ °ø¹éÀ» ±×´ë·Î Ãâ·ÂÇÑ´Ù.)
  • nowrap (<BR> ÅÂ±× ¾øÀÌ´Â ·¦(line wrap)À» Çã¿ëÇÏÁö ¾Ê´Â´Ù.)

¸ñ·Ï Çü½Ä(List Style Type)
¹®¹ý list-style-type: <value>
°¡´ÉÇÑ°ª disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
ÃʱⰪ disc
Àû¿ë¹üÀ§ display °ªÀ¸·Î list-itemÀ» °®´Â ű×
»ó¼Ó µÊ

list-style-type Ư¼ºÀº ¸ñ·Ï Ç¥½ÄÀÇ Çü½ÄÀ» ÁöÁ¤ÇÑ´Ù. list-style-image Ư¼ºÀÌ noneÀ̰ųª ±×¸² ÀûÀç°¡ »ç¿ëµÇÁö ¾Ê´Â´Ù¸é list-style-type Ư¼ºÀÌ »ç¿ëµÈ´Ù.

¿¹:

LI.square { list-style-type: square }
UL.plain  { list-style-type: none }
OL        { list-style-type: upper-alpha }  /* A B C D E etc. */
OL OL     { list-style-type: decimal }      /* 1 2 3 4 5 etc. */
OL OL OL  { list-style-type: lower-roman }  /* i ii iii iv v etc. */

¸ñ·Ï ±×¸²(List Style Image)
¹®¹ý list-style-image: <value>
°¡´ÉÇÑ°ª <url> | none
ÃʱⰪ none
Àû¿ë¹üÀ§ display °ªÀ¸·Î list-itemÀ» °®´Â ű×
»ó¼Ó µÊ

list-style-image Ư¼ºÀº ±×¸² ÀûÀ縦 »ç¿ëÁßÀÏ ¶§ ¸ñ·Ï Ç¥½ÄÀ¸·Î »ç¿ëµÉ ±×¸²À» ÁöÁ¤Çϸç list-style-type Ư¼º¿¡¼­ ÁöÁ¤µÈ Ç¥½ÄÀ» ´ëÄ¡ÇÑ´Ù.

¿¹:

UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x  { list-style-image: url(x.png) }

¸ñ·Ï À§Ä¡(List Style Position)
¹®¹ý list-style-position: <value>
°¡´ÉÇÑ°ª inside | outside
ÃʱⰪ outside
Àû¿ë¹üÀ§ display °ªÀ¸·Î list-itemÀ» °®´Â ű×
»ó¼Ó µÊ

list-style-position Ư¼ºÀº °ªÀ¸·Î inside³ª outside¸¦ ÃëÇϸç outside°¡ ³»Á¤Ä¡ÀÌ´Ù. ÀÌ Æ¯¼ºÀº ¸ñ·Ï¿¡´ëÇÑ ¸ñ·Ï Ç¥½Ã¸¦ ¾îµð¿¡ µÑ°ÍÀΰ¡¸¦ °áÁ¤ÇÑ´Ù. ¸¸¾à inside°¡ »ç¿ëµÈ´Ù¸é ±× ÇàÀº µé¿©¾²±â ¾øÀÌ ¸ñ·Ï Ç¥½Ä ¾Æ·¡¿¡ ·¦(wrap)µÉ °ÍÀÌ´Ù. Ç¥½ÃÇÑ ¿¹¸¦ º¸¸é ´ÙÀ½°ú °°´Ù.

Outside Ç¥Çö:
 * ¸ñ·Ï 1
   ¸ñ·ÏÀÇ µÎ¹ø° ÁÙ

Inside rendering:
 * ¸ñ·Ï 1
 ¸ñ·ÏÀÇ µÎ¹ø° ÁÙ

¸ñ·Ï ½ºÅ¸ÀÏ(List Style)
¹®¹ý list-style: <value>
°¡´ÉÇÑ°ª <list-style-type> || <list-style-position> || <url>
ÃʱⰪ Á¤ÀǵÇÁö ¾ÊÀ½
Àû¿ë¹üÀ§ display °ªÀ¸·Î list-itemÀ» °®´Â ű×
»ó¼Ó µÊ

list-style Ư¼ºÀº list-style-type, list-style-position°ú list-style-image Ư¼ºÀÇ ¾à½Ä Ç¥ÇöÀÌ´Ù.

¿¹:

LI.square { list-style: square inside }
UL.plain  { list-style: none }
UL.check  { list-style: url(/LI-markers/checkmark.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }

´ÜÀ§(Units)
±æÀÌ ´ÜÀ§(Length Units)

±æÀÌ °ªÀº +(Á¶°ÇºÎ)³ª -¿¡ ÀÌ¾î ¼ýÀÚ³ª, ´ÜÀ§¸¦ ³ªÅ¸³»´Â µÎ ¹®ÀÚ·ÎµÈ ¾à¾î¸¦ À̾ ¾´´Ù. ±æÀÌ´Â ¾î¶°ÇÑ °ø¹éµµ Æ÷ÇÔÇؼ­´Â ¾ÈµÈ´Ù. ¿¹¸¦µé¾î 1.3 em´Â Ÿ´çÇÑ ±æÀÌ°¡ ¾Æ´ÏÁö¸¸ 1.3emÀº Ÿ´çÇÑ °ªÀÌ´Ù. 0Àº ´ÜÀ§¸¦ ÇÊ¿ä·Î ÇÏÁö ¾Ê´Â´Ù.

CSS1¿¡¼­´Â »ó´ëÀû, Àý´ëÀû ±æÀÌ°¡ Áö¿øµÈ´Ù. »ó´ëÀû ´ÜÀ§´Â ´Ù¸¥ ±æÀÌ Æ¯¼º¿¡´ëÇÑ »ó´ëÀû ±æÀ̸¦ ³ªÅ¸³»¸ç ¼­·Î ´Ù¸¥ ¸Åü¿¡´ëÇØ Á¶Á¤Çϱ⠿ëÀÌÇϹǷΠ¼±È£µÈ´Ù. ´ÙÀ½°ú °°Àº »ó´ëÀû ´ÜÀ§¸¦ »ç¿ëÇÒ ¼ö ÀÖ´Ù.

  • em (ems, ÅÂ±× ±Û²ÃÀÇ ³ôÀÌ)
  • ex (x-height, ¹®ÀÚ "x"ÀÇ ³ôÀÌ)
  • px (pixels, ĵ¹Ù½º Çػ󵵿¡ »ó´ëÀûÀÎ)

Àý´ëÀû ´ÜÀ§´Â Ãâ·Â ¸Åü¿¡ Å©°Ô ÀÇÁ¸ÇÏ¸ç µû¶ó¼­ »ó´ëÀû ´ÜÀ§º¸´Ù ´ú À¯¿ëÇÑ´Ù. ´ÙÀ½°ú °°Àº Àý´ëÀû ´ÜÀ§¸¦ »ç¿ëÇÒ ¼ö ÀÖ´Ù.

  • in (inches; 1in=2.54cm)
  • cm (centimeters; 1cm=10mm)
  • mm (millimeters)
  • pt (points; 1pt=1/72in)
  • pc (picas; 1pc=12pt)

¹éºÐÀ²(Percentage Units)

¹éºÐÀ²Àº +(Á¶°ÇºÎ)³ª -¿¡ ÀÌ¾î ¼ýÀÚ, %¸¦ À̾ ¾´´Ù. ¹éºÐÀ² °ª¿¡´Â ¾î¶°ÇÑ °ø¹éµµ Æ÷ÇԵǾ´Â ¾ÈµÈ´Ù.

¹éºÐÀ²Àº °¢°¢ÀÇ Æ¯¼º¿¡´ëÇØ Á¤ÀÇµÈ ´Ù¸¥ °ª¿¡´ëÇÑ »ó´ë °ªÀÌ´Ù. ¾ÆÁÖ Á¾Á¾ ¹éºÒÀ² °ªÀº ű׳» ±Û²Ã Å©±âÀÇ »ó´ë°ªÀÌ´Ù.


»ö»óÇ¥(Color Units)

»ö»óÀº Å°¿öµå³ª ¼ýÀÚ·Î ±¸¼ºµÈ RGB °ªÀÌ´Ù.

16°³ÀÇ Å°¿öµå´Â Windows VGA ÆÈ·¹Æ®¿¡¼­ ÃëÇØÁö¸ç °¢°¢ Çϴûö(aqua), °ËÁ¤»ö(black), ÆĶõ»ö(blue), ºÐÈ«»ö(fuchsia), ȸ»ö(gray), ³ì»ö(green), ¿¬µÎ»ö(lime), ¹ã»ö(maroon), û»ö(navy), ȲÅä»ö(olive), ÀÚÁÖ»ö(purple), »¡°£»ö(red), Àº»ö(silver), ±ºÃ»»ö(teal), Èò»ö(white), ³ë¶õ»ö(yellow)ÀÌ´Ù.

RGB »ö»óÀº ´ÙÀ½ ³×°¡Áö ¹æ¹ýÁß ÇϳªÀÇ ¹æ¹ýÀ¸·Î Ç¥ÇöµÈ´Ù

  • #rrggbb (¿¹, #00cc00)
  • #rgb (¿¹, #0c0)
  • rgb(x,x,x) ¿©±â¼­ x´Â 0-255 »çÀÌÀÇ °ªÀÌ´Ù.(¿¹, rgb(0,204,0))
  • rgb(y%,y%,y%) ¿©±â¼­ y´Â 0.0-100.0»çÀÌÀÇ °ªÀÌ´Ù.(¿¹, rgb(0%,80%,0%))

À§ÀÇ ¸ðµç ¿¹´Â µ¿ÀÏÇÑ »ö»óÀ» ÁöÁ¤ÇÏ°í ÀÖ´Ù.

Douglas R. JacobsonÀÌ ºü¸£°Ô ÂüÁ¶ÇÒ ¼ö ÀÖ´Â RGB »ö»ó Ç¥ (61 kB)¸¦ ¸¸µé¾ú´Ù.


URLs

URL °ªÀº url(foo)¿¡ÀÇÇØ ÁÖ¾îÁö¸ç ¿©±â¼­ foo´Â URLÀÌ´Ù. URLÀº ÀÛÀº µû¿ÈÇ¥, Å« µû¿ÈÇ¥·Î °¨½Ò ¼ö ÀÖÀ¸¸ç, URLÀÇ ¾ÕµÚ¿¡ °ø¹éÀ» Æ÷ÇÔÇÒ ¼ö ÀÖ´Ù.

URL ³»ÀÇ °ýÈ£, ½°Ç¥, °ø¹é, ÀÛÀº µû¿ÈÇ¥, Å« µû¿ÈÇ¥´Â ¿ª½½·¡½¬¿¡ÀÇÇØ EscapeµÇ¾î¾ß ÇÑ´Ù. ºÎºÐÀûÀÎ URLÀº HTML ¼Ò½º°¡ ¾Æ´Ï¶ó Style Sheet ¼Ò½º¿¡´ëÇÑ »ó´ë URL·Î Çؼ®µÈ´Ù.

¿¹:

BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url("Ulalume".png) } /* quotes in URL escaped */


´ÙÀ½±Û: Á¦ 6°­ - HTML°úÀÇ ¿¬°á (16007)1996-06-06
ÀÌÀü±Û: Á¦ 4°­ - CSS ±¸Á¶¿Í ±ÔÄ¢ (12888)1996-06-04

¼¼»ó»ç´Â À̾߱â



RSS ±¸µ¶ (À͸í | ȸ¿ø | °­Á | Æ÷·³)
(C) 1996 ~ 2017 QAOS.com All rights reserved.