ÅØ½ºÆ® 1



letter - spacing

word - spacing

text - decoration

text - shadow

vertical-align


±ÛÀÚÀÇ °£°Ý(letter-spacing)

SELECTOR { letter-spacing : "normal" ¶Ç´Â "±ÛÀÚ°£ÀÇ °£°Ý °ª"}

  • letter-spacingÀº ±ÛÀÚ »çÀÌÀÇ °£°ÝÀ» ¸»ÇÕ´Ï´Ù.
  • ¼Ó¼º°ªÀ¸·Î´Â ¼ýÀÚ¿¡ ´ÜÀ§¸¦ »ç¿ëÇϸç À½¼ö°ªµµ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ÀÌ ±æÀÌÀÇ ´ÜÀ§´Â ±ÛÀÚ °£°ÝÀÇ µðÆúÆ® °ø°£¿¡ Ãß°¡ÇÏ¿© ±ÛÀÚ °£°ÝÀÇ °ø°£À» ÁöÁ¤ÇÕ´Ï´Ù.
  • ±âº» ¹®ÀÚ °Å¸®¿¡¼­ ´õÇØÁÖ´Â °ªÀ» ÁöÁ¤ÇÏ´Â »ó´ëÀû ±æÀÌ ´ÜÀ§ÀÎ emÀ¸·Î Ç¥±âÇϸé Àû¿ëÇϱ⠽±½À´Ï´Ù.
  • 1em À̶ó´Â °ÍÀº ±âº» ±Û²Ã Çϳª¸¸Å­ÀÇ °£°ÝÀ» ¶ç¿ì¸é¼­ Àû¿ëµÇ´Â °ÍÀ» ¸»ÇÕ´Ï´Ù. ±×·¸´Ù¸é 0.5emÀ̶ó¸é ±Û²Ã ¹Ý¸¸Å­¸¸ ¶ç¾îÁö¸é¼­ Àû¿ëÇ϶ó´Â Àǹ̰ÚÁÒ?

¼Ó¼º Browser
normal

±ÛÀÚ°£ÀÇ °£°ÝÀÌ normalÀÔ´Ï´Ù.

1em

±ÛÀÚ°£ÀÇ °£°ÝÀÌ 1emÀÔ´Ï´Ù.

2em

±ÛÀÚ°£ÀÇ °£°ÝÀÌ 2emÀÔ´Ï´Ù.

-0.1em

À½¼öÀÇ °ªÀ» »ç¿ëÇϴϱî Á¶±Ý ´ä´äÇÏÁÒ?



´Ü¾îÀÇ °£°Ý(word-spacing)

SELECTOR { letter-spacing : "normal" ¶Ç´Â "´Ü¾î°£ÀÇ °£°Ý °ª(¼ýÀÚ¿Í ´ÜÀ§»ç¿ë)"}

  • word-spacingÀº ´Ü¾î¿Í ´Ü¾î »çÀÌÀÇ °£°ÝÀ» ¼³Á¤ÇÏ´Â ±â´ÉÀ» °®°í ÀÖ½À´Ï´Ù.
  • ¹®¼­¿¡¼­ ´Ü¾î¿Í ´Ü¾î »çÀÌ¿¡ ½ºÆäÀ̽º°¡ ÀԷµǴ °÷ÀÇ Å©±â¸¦ ¼³Á¤ÇÕ´Ï´Ù.
  • ÀÌ ¼Ó¼ºÀº Netscape 6¿¡¼­ óÀ½À¸·Î Áö¿øÇϰí ÀÖÀ¸¸ç, ÀͽºÇ÷η¯ ¿ª½Ã 6.0ºÎÅÍ Áö¿øÇϰí ÀÖ½À´Ï´Ù.

< STYLE type="text/css">
.ONE {word-spacing: none}
.TWO {word-spacing: 10px}

< /STYLE >


none : < font class="one">´Ü¾î¿Í ´Ü¾î »çÀÌÀÇ °£°Ý< /font >< p >
10px : < font class="two">´Ü¾î¿Í ´Ü¾î »çÀÌÀÇ °£°Ý< /font >

´Ü¾î¿Í ´Ü¾î »çÀÌÀÇ °£°Ý Á¶Àý {word-spacing} none : ´Ü¾î¿Í ´Ü¾î »çÀÌÀÇ °£°Ý

10px : ´Ü¾î¿Í ´Ü¾î »çÀÌÀÇ °£°Ý


"Browser°¡ Netscape´Â 6, Explorer´Â 6.0¿¡¼­¸¸ º¸ÀÔ´Ï´Ù. Àú´Â ¾Èº¸¿©¿ä. ¤Ð.¤Ð."



±ÛÀÚÀÇ Àå½Ä(text-decoration)

SELECTOR { text-decoration : ¼Ó¼º°ª}

¼Ó¼º°ª ¢Ñ none, underline , overline, line-through, blink

    text-decorationÀº ÅØ½ºÆ®¸¦ ¾î¶»°Ô ÇØ¼­ º¸¿©ÁÙ °ÍÀΰ¡¸¦ ¸»ÇÕ´Ï´Ù.

    1. none : ÅØ½ºÆ®¸¦ ±×³É º¸¿©ÁÝ´Ï´Ù.(±âº»°ª)
    2. underline : ÅØ½ºÆ®¿¡ ¹ØÁÙÀ» ±×¾î¼­ º¸¿©ÁÝ´Ï´Ù.
      (HTMLÀÇ < U >...< /U >¿Í ºñ½ÁÇÕ´Ï´Ù.)
    3. overline : ÅØ½ºÆ®¿¡ À­ÁÙÀ» ±×¾î¼­ º¸¿©ÁÝ´Ï´Ù.(³Ý½ºÄÉÀÌÇÁ 4.7¿¡¼­´Â À­ÁÙÀ» ³ªÅ¸³»´Â overlineÀÌ Áö¿øµÇÁö ¾Ê½À´Ï´Ù.)
    4. line-througn: ÅØ½ºÆ®¸¦ °üÅëÇÏ¿© Áß¾Ó¿¡ ÁÙÀ» ±×¾î ÁÝ´Ï´Ù.
      (HTMLÀÇ < STRIKE >...< /STRIKE >¿Í ºñ½ÁÇÕ´Ï´Ù.)
    5. blink : ÅØ½ºÆ®°¡ ±ôºýÀÌ°Ô º¸¿©ÁÝ´Ï´Ù.(¿¾³¯¿¡´Â ³Ý½ºÄÉÀÌÇÁ¿¡¼­¸¸ Áö¿øµÇ¾ú¾ú´Âµ¥.. ÇöÀç´Â ³Ý½ºÄÉÀÌÇÁ°¡ 6.1·Î ¾÷±×·¹À̵åµÇ¸é¼­ ÀÌ blinkűװ¡ Áö¿øµÇÁö ¾Ê½À´Ï´Ù.)

¼Ó¼º Browser
none

±ÛÀÚ¿¡ ¾Æ¹«·± ±â´ÉÀ» ÇÏÁö ¾Ê½À´Ï´Ù.(±âº»°ª)

underline

±ÛÀÚ¿¡ ¹ØÁÙÀ» ±ß´Â ±â´ÉÀÔ´Ï´Ù.

overline

±ÛÀÚ¿¡ À­ÁÙÀ» ±ß´Â ±â´ÉÀÔ´Ï´Ù.

line-through

±ÛÀÚ Áß¾ÓÀ¸·Î ÁÙÀ» ±ß´Â ±â´ÉÀÔ´Ï´Ù.

blink

±ÛÀÚ¸¦ ±ôºýÀÔ´Ï´Ù.



±ÛÀÚ¿¡ ±×¸²ÀÚÈ¿°ú Àå½Ä(text-shadow)

SELECTOR { text-shodow : none | [»ö»ó,|| ±æÀÌ(±×¸²ÀÚ ¹üÀ§), ±æÀÌ, ±æÀÌ , ±æÀÌ]}

¼Ó¼º°ª ¢Ñ none, »ö»ó, ±æÀÌ

    text-shadow´Â ÅØ½ºÆ®¿¡ ±×¸²ÀÚ È¿°ú¸¦ ÁÝ´Ï´Ù.

    • none : ±×¸²ÀÚ È¿°ú°¡ ³ªÅ¸³ªÁö ¾Ê½À´Ï´Ù.(±âº»°ª)
    • ¼Ó¼º(»ö»ó, ±æÀÌ)ÀÇ »ç¿ëÀ¸·Î ³ªÅ¸³ª´Â ±×¸²ÀÚ°¡ ÇØ´ç ¿ä¼ÒÀÇ ¹Ú½º ¹üÀ§¸¦ ³Ñ´Â´Ù°í ÇØµµ ¹Ú½º Å©±â´Â º¯ÇÔ¾øÀÌ ±×¸²ÀÚ´Â ¸ðµÎ Ãâ·ÂµË´Ï´Ù.
    • ±×¸®°í ÄĸÓ(,)·Î ±¸ºÐÇÏ¿© ¿©·¯ °³ÀÇ ±×¸²ÀÚ¸¦ ÇѲ¨¹ø¿¡ ³ªÅ¸³¾ ¼öµµ ÀÖ½À´Ï´Ù.
    • »öÀ̸§Àº Á÷Á¢ ÀÔ·ÂÇϰųª, RGB°ªÀ¸·Î ÀÔ·ÂÇϰí, ±×¸²ÀÚÀÇ ¹üÀ§´Â "¼ýÀÚ + ´ÜÀ§"¸¦ »ç¿ëÇØ¼­ ³ªÅ¸³À´Ï´Ù.
    • °¢°¢ÀÇ ¼Ó¼º°ªÀº ¸ðµÎ °ø¹éÀ¸·Î ±¸ºÐÇÏ°í »ö ¼³Á¤ ¼Ó¼º°ªÀº ¸Ç µÚ¿¡ ¿Ã ¼öµµ ÀÖ½À´Ï´Ù.
    • ÇÏÁö¸¸ ÀÌ ±×¸²ÀÚÈ¿°ú´Â ¾ÆÁ÷±îÁö ÀͽºÇ÷η¯¿Í ³Ý½ºÄÉÀÌÇÁ¿¡¼­ ¸ðµÎ Áö¿øÇϰí ÀÖÁö ¾Ê½À´Ï´Ù.

    1. ù¹øÂ° "¼ýÀÚ + ´ÜÀ§" ¢Ñ ÅØ½ºÆ®¿¡¼­ ¿À¸¥ÂÊÀ¸·Î ¾ó¸¶³ª ¶³¾îÁ®¼­ ±×¸²ÀÚ¸¦ ³ªÅ¸³¾ °ÍÀΰ¡
    2. µÎ¹øÂ° "¼ýÀÚ + ´ÜÀ§" ¢Ñ±×¸²ÀÚÀÇ ±æÀ̸¦ ¾ó¸¶³ª ³ªÅ¸³¾ °ÍÀΰ¡¸¦ ¼³Á¤ÇÕ´Ï´Ù. ÀÌ °ªÀ» À½¼ö(-)·Î ¼³Á¤ÇÏ¸é ¿ÞÂʰú À§ÂÊÀ¸·ÎÀÇ °Å¸®°¡ µË´Ï´Ù.
    3. ¼¼¹øÂ° "¼ýÀÚ + ´ÜÀ§" ¢Ñ³ªÅ¸³¯ ±×¸²ÀÚÀÇ ºí·¯(blur)È¿°ú(=À½¿µÈ¿°ú)ÀÇ °æ°è¸¦ ¼³Á¤ÇÕ´Ï´Ù.
    4. ¼¼¹øÂ° "¼ýÀÚ + ´ÜÀ§" ¢Ñ±×¸²ÀÚ À½¿µ»öÀ» ¼³Á¤

    ¡Ú ºê¶ó¿ìÀú¿¡¼­ Áö¿øÇÏÁö ¾Ê±â¶§¹®¿¡..±× È¿°ú¸¦ º¼ ¼ö°¡ ¾ø±º¿ä. ¿¹Á¦´Â ÀÌ·¸½À´Ï´Ù.

    H1 { text-shadow: 0.2em 0.2em }
    H2 { text-shadow: 3px 3px 5px red }
    H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
    SPAN.glow { background: white; color:white; text-shadow:black 0px 0px 5px;}


±ÛÀÚ¸¦ ¼öÁ÷Á¤·Ä(vertical-align)

SELECTOR { text-decoration : ¼Ó¼º°ª}

¼Ó¼º°ª ¢Ñ baseline, sub, super, middle, text-top, text-bottom, top, bottom

    vertical-alignÀº À̹ÌÁö³ª ±Û²ÃÀÇ ¼öÁ÷Á¤·ÄÀ» ¸»ÇÕ´Ï´Ù. baselineÀÌ ±âº»°ªÀÔ´Ï´Ù. vertical-alignÀº ÁöÁ¤ÇÑ ¿ä¼Ò¸¦ Á¤·ÄÇÏ´Â ¸ñÀûÀ¸·Î »ç¿ëµÇ´Â °ÍÀÌ ¾Æ´Ï¶ó ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ ¿·¿¡ »ç¿ëµÈ ³»¿ëµéÀ» ¼öÁ÷ Á¤·Ä ÇÏ´Â µ¥ ÀÖ½À´Ï´Ù.

    1. baseline : ±× ¸ðüÀÇ baselineÀ¸·Î ±× ¿¤·¹¸àÆ®ÀÇ ±âÃÊ ¶óÀÎ(baseline: ¶Ç´Â ±× ¿¤·¹¸àÆ®°¡ baselineÀ» °®°í ÀÖÁö ¾ÊÀ¸¸é bottom)¿¡ Á¤·ÄÇÕ´Ï´Ù.
    2. sub : ¾Æ·¡Ã·ÀÚ¸¦ ¸¸µì´Ï´Ù.
    3. super :À­Ã·ÀÚ¸¦ ¸¸µì´Ï´Ù.
    4. middle: ±× ¸ðüÀÇ ±âÃÊ ¶óÀÎ(baseline) ´õÇϱâ x-heightÀÇ ¹Ý¿¡ ±× ¿¤·¹¸àÆ®ÀÇ Á߽ɼ±À» ¼öÁ÷À¸·Î Á¤·ÄÇÕ´Ï´Ù. À̹ÌÁö¿Í ÇÔ²²ÇÒ ¶§´Â ÅØ½ºÆ®¸¦ Áß¾Ó¿¡ ¸ÂÃä´Ï´Ù.
    5. text-top :¸ðü ¿¤·¹¸àÆ®ÀÇ ÆùÆ® ¸Ç À§(top)¿¡ ±× ¿¤·¹¸àÆ®ÀÇ ¸Ç À§¿¡ Á¤·ÄÇÕ´Ï´Ù. À̹ÌÁö¿Í ÇÔ²² ÇÒ °æ¿ì ÅØ½ºÆ®¸¦ ¸Ç À§¿¡ ¸ÂÃä´Ï´Ù.
    6. text-bottom : ¸ðü ¿¤·¹¸àÆ®ÀÇ ÆùÆ® ¸Ç ¾Æ·¡(bottom)¿¡ ±× ¿¤·¹¸àÆ®ÀÇ ¸Ç À§¿¡ Á¤·ÄÀ» ÇÕ´Ï´Ù.
    7. top : ±× ÁÙÀÇ °¡Àå Ű Å« ¿¤¸®¸àÆ® Áß¿¡¼­ ¸Ç À§¿¡ Á¤·ÄÇÕ´Ï´Ù.
    8. bottom : ±× ÁÙ¿¡¼­ °¡Àå ³·Àº(lowest) ¿¤·¹¸àÆ®¸¦ ±× ¿¤·¹¸àÆ®ÀÇ ¸Ç ¾Æ·¡(bottom)¿¡ Á¤·ÄÇÕ´Ï´Ù.

baseline < font style="vertical-align:baseline;color:blue" >±× ¸ðüÀÇ baselineÀ¸·Î< /font >±× ¿¤·¹¸àÆ®ÀÇ ±âÃÊ ¶óÀÎ(baseline: ¶Ç´Â ±× ¿¤·¹¸àÆ®°¡ baselineÀ» °®°í ÀÖÁö ¾ÊÀ¸¸é bottom)¿¡ Á¤·Ä(align)ÇÕ´Ï´Ù.
±× ¸ðüÀÇ baselineÀ¸·Î±× ¿¤·¹¸àÆ®ÀÇ ±âÃÊ ¶óÀÎ(baseline: ¶Ç´Â ±× ¿¤·¹¸àÆ®°¡ baselineÀ» °®°í ÀÖÁö ¾ÊÀ¸¸é bottom¿¡ Á¤·ÄÇÕ´Ï´Ù.
sub < font style="vertical-align:sub;color:blue" >¾Æ·¡Ã·ÀÚ< /font >´Â ÀÌ·¸°Ô Ç¥ÇöµÇ¾îÁý´Ï´Ù.
¾Æ·¡Ã·ÀÚ´Â ÀÌ·¸°Ô Ç¥ÇöµÇ¾îÁý´Ï´Ù.
super < font style="vertical-align:super;color:blue" >À­Ã·ÀÚ< /font >´Â ÀÌ·¸°Ô Ç¥ÇöµÇ¾îÁý´Ï´Ù.
À­Ã·ÀÚ´Â ÀÌ·¸°Ô Ç¥ÇöµÇ¾îÁý´Ï´Ù.
middle < img src="±×¸².gif" style="vertical-align:middle" >À̹ÌÁö¿Í ÇÔ²² ÇÒ °æ¿ì ÅØ½ºÆ®¸¦ Áß¾Ó¿¡ ¸ÂÃä´Ï´Ù.
À̹ÌÁö¿Í ÇÔ²² ÇÒ °æ¿ì ÅØ½ºÆ®¸¦ Áß¾Ó¿¡ ¸ÂÃä´Ï´Ù.
text-top < img src="±×¸².gif" style="vertical-align:text-top" >À̹ÌÁö¿Í ÇÔ²² ÇÒ °æ¿ì ÅØ½ºÆ®¸¦ ¸Ç À§¿¡ ¸ÂÃä´Ï´Ù.
À̹ÌÁö¿Í ÇÔ²² ÇÒ °æ¿ì ÅØ½ºÆ®¸¦ ¸Ç À§¿¡ ¸ÂÃä´Ï´Ù.
text-bottom < img src="±×¸².gif" style="vertical-align:text-bottom" >À̹ÌÁö¿Í ÇÔ²² ÇÒ °æ¿ì ÅØ½ºÆ®¸¦ ¸Ç ¾Æ·¡¿¡ ¸ÂÃä´Ï´Ù.
À̹ÌÁö¿Í ÇÔ²² ÇÒ °æ¿ì ÅØ½ºÆ®¸¦ ¸Ç ¾Æ·¡¿¡ ¸ÂÃä´Ï´Ù.
top < font style="color:blue;font-size:50px">±× ÁÙÀÇ< /font >
< font style="color:green;font-size:20px">°¡Àå Ű Å« ¿¤¸®¸àÆ®µé Áß¿¡¼­< /font>
< font style="vertical-align:top;color:red" >¸Ç À§(top)¿¡ Á¤·ÄÇÕ´Ï´Ù.< /font >
±× ÁÙÀǰ¡Àå Ű Å« ¿¤¸®¸àÆ®µé Áß¿¡¼­¸Ç À§(top)¿¡ Á¤·ÄÇÕ´Ï´Ù.
bottom < font style="color:blue;font-size:50px">±× ÁÙÀÇ< /font >
< font style="color:green;font-size:20px">°¡Àå Ű Å« ¿¤¸®¸àÆ®µé Áß¿¡¼­< /font>
< font style="vertical-align:bottom;color:red" >¸Ç ¾Æ·¡(bottom)¿¡ Á¤·ÄÇÕ´Ï´Ù.< /font >
±× ÁÙÀǰ¡Àå ³·Àº ¿¤¸®¸àÆ®µé Áß¿¡¼­¸Ç ¾Æ·¡(bottom)¿¡ Á¤·ÄÇÕ´Ï´Ù.

"top°ú bottom"¼Ó¼ºÀº Explorer 6.0À̻󿡼­ Áö¿øµÇ´Â°Í °°½À´Ï´Ù. Browser°¡ 5.0¿¡¼­´Â Ç¥ÇöµÇ¾îÁöÁö ¾Ê´Â±º¿ä. Âü°íÇϼ¼¿ä.