W3C8 ¹Ú½º(box) ¸ðµ¨Trio ȨÆäÀÌÁö 

¸ñÂ÷

CSS ¹Ú½º ¸ðµ¨Àº ¹®¼­°èÅë(tree)¿¡¼­ ¿¤·¹¸àÆ®¿¡ »ý¼ºµÈ »ç°¢Çü ¹Ú½º¸¦ ±â¼úÇÏ°í, º¸ÀÌ´Â ¾ç½ÄÈ­ ¸ðµ¨¿¡ µû¶ó¼­ ¹èÄ¡ÇÑ´Ù. ÆäÀÌÁö ¹Ú½º´Â ¹Ú½ºÀÇ Æ¯¼öÇÑ Á¾·ù·Î, ÆäÀÌÁöÈ­µÈ ¸Þµð¾Æ(paged media) Ç׸ñ¿¡ ±â¼úµÇ¾î ÀÖ´Ù.

8.1 ¹Ú½º(box) ±Ô°Ý

°¢ ¹Ú½º´Â ³»¿ë Áö¿ª(content area ¿¹: ÅؽºÆ®, À̹ÌÁö, µî)°ú ¼±ÅÃÀû ÁÖÀ§ÀÇ Æеù, Å׵θ®¿Í ¸¶Áø Áö¿ªµéÀ» °®´Â´Ù; °¢ Áö¿ª ¼Ó¼ºÀº ¾Æ·¡¿¡ ±× Á¤ÀÇ°¡ ±â¼úµÇ¾ú´Ù. ´ÙÀ½ µµÇ¥´Â ÀÌ Áö¿ªµéÀÌ ¾î¶»°Ô ¿¬°üµÇ°í, ¸¶Áø(margin), Å׵θ®(border)¿Í Æеù(padding)ÀÇ ¿ë¾î°¡ »ç¿ëµÇ´Â°¡¸¦ ¼³¸íÇÑ´Ù:

³»¿ë(content), Æеù(padding), Å׵θ®(border)°ú ¸¶Áø(margin)µéÀÇ °ü°è¸¦ ¼³¸íÇÏ´Â À̹ÌÁö(image)   [D]

¸¶Áø, Å׵θ®¿Í ÆеùÀº ¿ÞÂÊ, ¿À¸¥ÂÊ, ¸ÇÀ§°ú ¹Ù´Ú ºÎºÐµé·Î ³ª´µ¾î Áú ¼ö ÀÖ´Ù(¿¹: µµÇ¥¿¡¼­, ¿ÞÂÊ ¸¶Áø(margin)Àº "LM", ¿À¸¥ÂÊ Æеù(padding)Àº "RP", ¸ÇÀ§ Å׵θ®(border)´Â "TB", µîÀ¸·Î).

°¢ ³× Áö¿ªµé(³»¿ë, Æеù, Å׵θ®¿Í ¸¶Áø)ÀÇ ÁÖº¯À¸·Î ±¸ºÐµÇ´Â ºÎºÐÀ» ¸ð¼­¸®("edge")¶ó ºÎ¸£°í, °¢ ¹Ú½º´Â ³×°³ÀÇ ¸ð¼­¸®(edge)µéÀ» °®´Â´Ù:

³»¿ë ¸ð¼­¸®(content edge) ¶Ç´Â ³»ºÎ ¸ð¼­¸®(inner edge)
±× ¿¤·¹¸àÆ®ÀÇ ³»¿ëÀÇ Ç¥ÇöÀÇ ÁÖÀ§¸¦ µÑ·¯ ½Ñ´Ù.
Æеù ¸ð¼­¸®(padding edge)
¹Ú½º Æеù ÁÖÀ§¸¦ µÑ·¯ ½Ñ´Ù. ¸¸ÀÏ ÆеùÀÌ 0ÀÇ ³Êºñ¸¦ °¡Áö¸é, ±× Æеù ¸ð¼­¸®´Â ³»¿ë ¸ð¼­¸®¿Í °°´Ù. ¹Ú½ºÀÇ Æеù ¸ð¼­¸®´Â, ¹Ú½º¿¡ ÀÇÇÏ¿© Çü¼ºµÈ, ¿ë±âºí·°(containing block)ÀÇ ¸ð¼­¸®¸¦ Á¤ÀÇÇÑ´Ù.
Å׵θ® ¸ð¼­¸®(border edge)
¹Ú½º Å׵θ®ÀÇ ÁÖÀ§¸¦ µÑ·¯ ½Ñ´Ù. ¸¸ÀÏ Å׵θ®°¡ 0ÀÇ ³Êºñ¸¦ °¡Áö¸é, Å׵θ® ¸ð¼­¸®´Â ±× Æеù ¸ð¼­¸®¿Í °°´Ù.
¸¶Áø ¸ð¼­¸®(margin edge) ¶Ç´Â ¹Ù±ùÂÊ ¸ð¼­¸®(outer edge)
¹Ú½º ¸¶ÁøÀÇ ÁÖÀ§¸¦ µÑ·¯ ½Ñ´Ù. ¸¸ÀÏ ¸¶ÁøÀÌ 0ÀÇ ³Êºñ¸¦ °¡Áö¸é, ¸¶Áø ¸ð¼­¸®´Â ±× Å׵θ® ¸ð¼­¸®¿Í °°´Ù.

°¢ ¸ð¼­¸®´Â ¿ÞÂÊ, ¿À¸¥ÂÊ, ¸ÇÀ§, ¹Ù´Ú ¸ð¼­¸®·Î ³ª´­ ¼ö ÀÖ´Ù.

¹Ú½ºÀÇ ³»¿ë Áö¿ª¿¡ ´ëÇÑ Å©±âÀÎ ³»¿ë ³Êºñ¿Í ³»¿ë ³ôÀÌ´Â ¿©·¯°¡Áö ¿äÀο¡ µû¶ó ´Ù¸£´Ù: ¿¤·¹¸àÆ®°¡ »ý¼ºÇÏ´Â ¹Ú½ºÀÇ 'width' ¶Ç´Â 'height' ¼Ó¼ºÀ» ¼³Á¤Çϴ°¡, ±× ¹Ú½º°¡ ÅؽºÆ® ¶Ç´Â ´Ù¸¥ ¹Ú½º¸¦ Æ÷ÇÔÇϴ°¡, ±× ¹Ú½º°¡ Å×À̺í(table)Àΰ¡, µî ¹Ú½º ³Êºñ¿Í ³ôÀ̵éÀº º¸ÀÌ´Â ¾ç½ÄÈ­ ¸ðµ¨ ¼¼ºÎ»çÇ׿¡¼­ ´Ù·ð´Ù.

¹Ú½º ³Êºñ´Â ¿ÞÂÊ°ú ¿À¸¥ÂÊ ¸¶Áø, Å׵θ®, Æеù°ú ³»¿ë ³ÊºñµéÀÇ ÇÕ°è·Î ÁÖ¾îÁø´Ù. ¹Ú½º ³ôÀÌ´Â ¿ÞÂÊ°ú ¿À¸¥ÂÊ ¸¶Áø, Å׵θ®, Æеù°ú ³»¿ë ³ôÀ̵éÀÇ ÇÕ°è·Î ÁÖ¾îÁø´Ù.

¹Ú½º¿¡¼­ ¿©·¯ Áö¿ªÀÇ ¹è°æ ½ºÅ¸ÀÏÀº ´ÙÀ½°ú °°ÀÌ °áÁ¤µÈ´Ù:

8.2 ¸¶Áø, Æеù, Å׵θ®µéÀÇ ¿¹Á¦

ÀÌ ¿¹Á¦´Â ¸¶Áø(margin), Æеù(padding)°ú Å׵θ®(border)µéÀÌ ¾î¶»°Ô ÀÛ¿ëÇϴ°¡¸¦ ¼³¸íÇÑ´Ù. ¿¹Á¦ HTML ¹®¼­¿¡¼­:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>¸¶Áø, Æеù, Å׵θ®µéÀÇ ¿¹Á¦</TITLE>
      <STYLE type="text/css">
         UL {
            background: green;
            margin: 12px 12px 12px 12px;
            padding: 3x 3px 3px 3px;
            /* Å׵θ®µéÀÌ ¼³Á¤µÇÁö ¾ÊÀ½ */
         }
         LI {
           color: black;  /* ÅؽºÆ® »ö»óÀº °ËÁ¤ */
           background: gray;  /* ³»¿ë, Æеù(padding)Àº ȸ»ö */
           margin: 12px 12px 12px 12px;
           padding: 12px 0px 12px 12px; /* ¿À¸¥ÂÊÀº Æеù 0px ÀÓ */
           list-style: none   /* ¸ñ·Ï Ç׸ñ ¾Õ¿¡ ±×¸²¹®ÀÚµéÀÌ ¾øÀ½ */
           /* Å׵θ®µéÀÌ ¼³Á¤µÇÁö ¾ÊÀ½ */
        }
        LI.withborder {
           border-style: dashed;
           border-width: medium;  /* ¸ðµç ¸éµé¿¡  Å׵θ® ³Êºñ¸¦ ¼³Á¤ ÇÔ */
           border-color: black;
        }
     </STYLE>
  </HEAD>

  <BODY>
  <UL>
    <LI>First element of list
    <LI class="withborder">Second element of list is longer
      to illustrate wrapping.
    </UL>
  </BODY>
</HTML>

¹®¼­°èÅë¿¡¼­ÀÇ °á°ú´Â(´Ù¸¥ °ü°èµé Áß¿¡¼­) ÇÑ UL ¿¤·¹¸àÆ®¿¡ µÎ°³ÀÇ LI ÀÚ½Ä(child)µéÀ» °®´Â´Ù.

´ÙÀ½ µµÇ¥ÀÇ Ã¹¹ø°´Â ÀÌ ¿¹Á¦¿¡¼­ ¹«¾ùÀÌ »ý¼ºµÇ´Â°¡¸¦ ¼³¸íÇÑ´Ù. µÎ¹ø°´Â, UL ¿¤·¹¸àÆ®ÀÇ ¸¶Áø, Æеù°ú Å׵θ®µé»çÀÌÀÇ °ü°è¿Í, ±× ÀÚ½ÄÀÎ LI ¿¤·¹¸àÆ®¿ÍÀÇ °ü°è¸¦ ¼³¸íÇÑ´Ù.

¸ðü¿Í ÀÚ½Ä(child)ÀÇ ¸¶Áø(margin), Å׵θ®(border)¿Í Æеù(padding)µéÀÇ °ü°è¸¦ ¼³¸íÇÏ´Â À̹ÌÁö(image).   [D]

´ÙÀ½ÀÇ »çÇ׿¡ À¯ÀÇÇ϶ó:

8.3 ¸¶Áø(margin) ¼Ó¼º:
'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'margin'

¸¶Áø ¼Ó¼ºÀº ¹Ú½ºÀÇ ¸¶Áø Áö¿ª(margin area) ³Êºñ¸¦ ÁöÁ¤ÇÑ´Ù. ´Ù¸¥ ¸¶Áø ¼Ó¼ºÀº ±×µéÀÇ ÇØ´ç ¸é ¸¸À» °áÁ¤ÇÏ´Â µ¥ ¹ÝÇØ, 'margin' ¾à½Ä¼Ó¼ºÀº ³×¸éÀÇ ¸ðµç ¸¶ÁøµéÀ» ¼³Á¤ÇÑ´Ù.

´ÙÀ½ °ªµé Áß Çϳª°¡ µÉ ¼ö ÀÖ´Â ¼Ó¼º <margin-width> °ª ŸÀÔ(value type)ÀÇ Á¤ÀǸ¦ ÂüÁ¶Ç϶ó:

<±æÀÌ>
°íÁ¤µÈ ³Êºñ¸¦ ÁöÁ¤ÇÑ´Ù.
<¹éºÐÀ²>
¹éºÐÀ²Àº »ý¼ºµÈ ¹Ú½ºÀÇ ¿ë±âºí·°(containing block)ÀÇ ³Êºñ¿¡ ´ëÇÏ¿© °è»êµÈ´Ù. ÀÌ´Â 'margin-top'°ú 'margin-bottom'¿¡¼­ ÀÏÄ¡Çϸç, ÆäÀÌÁö ¹Ú½º ³ôÀ̸¦ ÂüÁ¶ÇÏ´Â ¹éºÐÀ² ÆäÀÌÁö ¹®¸Æ ¾È¿¡¼­´Â ¿¹¿ÜÀÌ´Ù.
auto
±â´ÉÀº ³Êºñ¿Í ¸¶ÁøÀÇ °è»ê Ç׸ñÀ» ÂüÁ¶Ç϶ó.

¸¶Áø ¼Ó¼ºÀÇ À½¼ö°ªÀº Çã¿ëµÇ³ª, ƯÁ¤ Àû¿ëÀÇ ÇÑ°èµéÀÌ ÀÖÀ» ¼ö ÀÖ´Ù.

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
°ª:  <margin-width> | inherit
ÃÖÃÊ°ª:  0
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  Æ÷ÇÔÇÑ ºí·°(block)ÀÇ ³Êºñ¸¦ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºµéÀº ¹Ú½ºÀÇ ¸ÇÀ§, ¿À¸¥ÂÊ, ¹Ù´Ú, ¿ÞÂÊ ¸¶ÁøÀ» ½Ã°è¹æÇâÀ¸·Î ¼³Á¤ÇÑ´Ù.

¿¹Á¦:

H1 { margin-top: 2em }
'margin'
°ª:  <margin-width>{1,4} | inherit
ÃÖÃÊ°ª:  ¾à½Ä¼Ó¼ºµé¿¡ Á¤ÀǵÇÁö ¾ÊÀ½
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  Æ÷ÇÔÇÑ ºí·°(block)ÀÇ ³Êºñ¸¦ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

'margin' ¼Ó¼ºÀº ½ºÅ¸ÀϽ¬Æ® ¾È¿¡¼­ ÇÑ ¹ø¿¡ 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'µéÀ» ¼³Á¤ÇÏ´Â ¾à½Ä¼Ó¼ºÀÌ´Ù.

°ªÀÌ Çϳª ¸¸ ÀÖÀ¸¸é, ¸ðµç ¸éµé¿¡ Àû¿ëµÈ´Ù.
°ªÀÌ µÎ°³ ÀÖÀ¸¸é, ¸ÇÀ§¿Í ¹Ù´Ú ¸¶ÁøÀº ù °ªÀ¸·Î, ¿À¸¥ÂÊ°ú ¿ÞÂÊ ¸¶ÁøÀº µÎ° °ªÀ¸·Î ¼³Á¤µÈ´Ù.
°ªÀÌ ¼¼°³ ÀÖÀ¸¸é, ¸ÇÀ§´Â ù °ªÀ¸·Î, ¿ÞÂÊ°ú ¿À¸¥ÂÊÀº µÎ° °ªÀ¸·Î, ¹Ù´ÚÀº ¼¼Â° °ªÀ¸·Î ¼³Á¤µÈ´Ù.
°ªÀÌ ³×°³ ÀÖÀ¸¸é, °¢°¢Àº ¸ÇÀ§, ¿À¸¥ÂÊ, ¹Ù´Ú, ¿ÞÂÊÀÇ ¼ø¼­(½Ã°è¹æÇâ)·Î ¼³Á¤µÈ´Ù.

¿¹Á¦:

BODY { margin: 2em }  /* ¸ðµç ¸¶ÁøµéÀ» 2emÀ¸·Î ¼³Á¤ */
BODY { margin: 1em 2em }  /* ¸ÇÀ§ & ¹Ù´Ú = 1em, ¿À¸¥ÂÊ & ¿ÞÂÊ = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

À§ ¿¹Á¦ÀÇ ¸¶Áö¸· ¸í·ÉÀº ¾Æ·¡ ¿¹Á¦¿Í °°´Ù:

BODY {
   margin-top: 1em;
   margin-right: 2em;
   margin-bottom: 3em;
   margin-left: 2em; /* ¹Ý´ëÂÊ(right)¿¡¼­ º¹»ç */
}

8.3.1 ¸¶ÁøµéÀÇ ÅëÇÕ

ÀÌ ±Ô°Ý¿¡¼­, ¸¶Áø(margin)µéÀÇ ÅëÇÕ(collapsing)ÀÇ Ç¥ÇöÀº, µÎ°³ÀÌ»óÀÇ ¹Ú½º(¼­·Î ¿·¿¡ Àְųª ³×½ºÆ®µÈ)µéÀÇ ÀÎÁ¢ ¸¶Áø(À̵éÀ» ºÐ¸®ÇÏ´Â ÆеùÀ̳ª Å׵θ® Áö¿ªÀÌ ¾Æ´Ñ)µéÀÌ ÅëÇյǾî, ´ÜÀÏÇÑ ¸¶ÁøÀ» Çü¼ºÇÑ´Ù.

CSS2¿¡¼­ ¼öÆò ¸¶ÁøµéÀº Àý´ë·Î ÅëÇÕµÇÁö ¾Ê´Â´Ù.

¼öÁ÷ ¸¶ÁøµéÀº ¹Ú½ºµé»çÀÌ¿¡¼­ ÅëÇÕµÉ ¼ö ÀÖ´Ù:

ÅëÇÕµÈ ¸¶ÁøÀÇ ¼³¸íÀº ¸¶Áø, Æеù, Å׵θ®ÀÇ ¿¹Á¦¸¦ ÂüÁ¶Ç϶ó.

8.4 Æеù(padding) ¼Ó¼º:
'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'padding'

Æеù ¼Ó¼ºµéÀº ¹Ú½ºÀÇ Æеù Áö¿ª ³Êºñ¸¦ ÁöÁ¤ÇÑ´Ù. Á¦ÀÛÀÚ°¡ Æеù ¼Ó¼ºÀ¸·Î ±× ÇØ´ç ¸é ¸¸À» ¼³Á¤Çϴµ¥ ¹ÝÇØ, ¾à½Ä¼Ó¼º 'padding'Àº ÇÑ ¹øÀÇ ¼³Á¤À¸·Î ¸ðµç ³×¸éµéÀÇ ÆеùÀ» ¼³Á¤ÇÑ´Ù.

¿©±â¼­ Á¤ÀÇµÈ ¼Ó¼ºÀº °ª ŸÀÔ <padding-width>¸¦ ÂüÁ¶Çϸç, ´ÙÀ½ Áß ÇÑ °ªÀ» °¡Áú ¼ö ÀÖ´Ù:

<±æÀÌ>
°íÁ¤µÈ ³Êºñ¸¦ ÁöÁ¤ÇÑ´Ù.
<¹éºÐÀ²>
¹éºÐÀ²Àº »ý¼ºµÈ ¹Ú½ºÀÇ ¿ë±âºí·°ÀÇ ³Êºñ¿¡ ´ëÇÏ¿©, ¶ÇÇÑ 'padding-top'°ú 'padding-bottom'¿¡ ´ëÇؼ­µµ °è»êµÈ´Ù.

¸¶Áø ¼Ó¼º°ú´Â ´Þ¸®, Æеù °ªÀº À½¼ö°ªÀÌ µÉ ¼ö´Â ¾ø´Ù. ¸¶Áø ¼Ó¼º°ú °°ÀÌ, ÆеùÀÇ ¹éºÐÀ² °ªÀº »ý¼ºµÈ ¹Ú½ºÀÇ ¿ë±âºí·°(containing block) ³ÊºñÀÇ ¼Ó¼ºµéÀ» ÂüÁ¶ÇÑ´Ù.

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
°ª:  <padding-width> | inherit
ÃÖÃÊ°ª:  0
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  Æ÷ÇÔÇÑ ºí·°ÀÇ ³Êºñ¸¦ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ¹Ú½ºÀÇ ¸ÇÀ§, ¿À¸¥ÂÊ, ¹Ù´Ú°ú ¿ÞÂÊ ÆеùÀ» ½Ã°è¹æÇâÀ¸·Î ¼³Á¤ÇÑ´Ù.

¿¹Á¦:

BLOCKQUOTE { padding-top: 0.3em }
'padding'
°ª:  <padding-width>{1,4} | inherit
ÃÖÃÊ°ª:  ¾à½Ä¼Ó¼ºµé¿¡ Á¤ÀǵÇÁö ¾ÊÀ½
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  Æ÷ÇÔÇÑ ºí·°ÀÇ ³Êºñ¸¦ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

'padding' ¼Ó¼ºÀº ½ºÅ¸ÀϽ¬Æ®¿¡¼­ Çѹø¿¡ 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'À» ¼³Á¤ÇÏ´Â ¾à½Ä¼Ó¼ºÀÌ´Ù.

°ªÀÌ Çϳª ¸¸ ÀÖÀ¸¸é, ¸ðµç ¸éµé¿¡ Àû¿ëµÈ´Ù.
°ªÀÌ µÎ°³À̸é, ¸ÇÀ§¿Í ¹Ù´Ú ÆеùÀº ù °ªÀ¸·Î, ¿À¸¥ÂÊ°ú ¿ÞÂÊ ÆеùÀº µÎ° °ªÀ¸·Î ¼³Á¤µÈ´Ù.
°ªÀÌ ¼¼°³À̸é, ¸ÇÀ§´Â ù °ªÀ¸·Î, ¿ÞÂÊ°ú ¿À¸¥ÂÊÀº µÎ° °ªÀ¸·Î, ¹Ù´ÚÀº ¼¼Â° °ªÀ¸·Î ¼³Á¤µÈ´Ù.
°ªÀÌ ³×°³À̸é, °¢°¢Àº ¸ÇÀ§, ¿À¸¥ÂÊ, ¹Ù´Ú, ¿ÞÂÊÀÇ ¼ø¼­(½Ã°è¹æÇâ)·Î ¼³Á¤µÈ´Ù.

Æеù Áö¿ªÀÇ Ç¥¸é »ö»ó ¶Ç´Â À̹ÌÁö´Â 'background' ¼Ó¼º¸¦ ÅëÇÏ¿© ÁöÁ¤ÇÑ´Ù:

¿¹Á¦:

H1 {
   background: white;
   padding: 1em 2em;
}

À§ ¿¹Á¦´Â ¼öÁ÷ Æеù('padding-top'¿Í 'padding-bottom')À» '1em'À¸·Î, ¼öÆò Æеù('padding-right'¿Í 'padding-left')¸¦ '2em'À¸·Î ¼³Á¤ÇÑ´Ù. ´ÜÀ§ 'em'Àº ±× ¿¤·¹¸àÆ®ÀÇ ±Û²Ã Å©±â(font size)¿¡ »ó´ëÀûÀÌ°í, '1em'Àº ±× »ç¿ë ±Û²ÃÀÇ Å©±â¿Í °°´Ù.

8.5 Å׵θ®(border) ¼Ó¼º

Å׵θ® ¼Ó¼ºµéÀº ¹Ú½ºÀÇ Å׵θ® Áö¿ª ³Êºñ, »ö»ó ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÑ´Ù. ÀÌ ¼Ó¼ºÀº ¸ðµç ¿¤·¹¸àÆ®¿¡ Àû¿ëµÈ´Ù.

ÁÖ¼®. ƯÈ÷ HTML¿¡¼­, »ç¿ëµµ±¸µéÀº, ÀϹÝÀûÀÎ("ordinary") ¿¤·¹¸àÆ®µé¿¡¼­¿Í´Â ´Ù¸£°Ô, ÀϺΠ¿¤·¹¸àÆ®(¿¹: button, menu, µî)¿¡¼­´Â, Å׵θ®µéÀ» Àоî Ç¥ÇöÇÒ ¼ö ÀÖ´Ù.

8.5.1 Å׵θ® ³Êºñ:
'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'border-width'

Å׵θ® ³Êºñ ¼Ó¼ºÀº Å׵θ® Áö¿ªÀÇ ³Êºñ¸¦ ÁöÁ¤ÇÑ´Ù, ÀÌ Ç׸ñ¿¡¼­ Á¤ÀÇµÈ ¼Ó¼ºÀº °ª ŸÀÔ <border-width>¸¦ ÂüÁ¶Çϸç, ´ÙÀ½ Áß ÇϳªÀÇ °ªÀ» °®´Â´Ù:

thin
¾ãÀº(thin) Å׵θ®.
medium
º¸Åë(medium) Å׵θ®.
thick
µÎ²¨¿î(thick) Å׵θ®.
<±æÀÌ>
Å׵θ®ÀÇ µÎ²²´Â ¸í½ÃÀûÀÎ °ªÀÌ´Ù. ¸í½ÃÀû Å׵θ® ³Êºñ´Â À½¼ö°¡ µÉ ¼ö ¾ø´Ù.

¾ÕÀÇ ¼¼°¡Áö °ªµéÀÇ Çؼ®Àº »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸£³ª, ´ÙÀ½ °ü°è¸¦ ÁؼöÇÏ¿©¾ß ÇÑ´Ù:

'thin' <='medium' <= 'thick'.

³ª¾Æ°¡, ÀÌ ³ÊºñµéÀº ÇÑ ¹®¼­¸¦ ÅëÇÏ¿© ±ÕÀÏÇÏ¿©¾ß ÇÑ´Ù.

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
°ª:  <border-width> | inherit
ÃÖÃÊ°ª:  medium
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºµéÀº ¹Ú½ºÀÇ ¸ÇÀ§, ¿À¸¥ÂÊ, ¹Ù´Ú, ¿ÞÂÊ Å׵θ® ³Êºñ¸¦ ½Ã°è¹æÇâÀ¸·Î ¼³Á¤ÇÑ´Ù.

'border-width'
°ª:  <border-width>{1,4} | inherit
ÃÖÃÊ°ª:  °¢ ¼Ó¼ºµéÀ» º¸¶ó
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ½ºÅ¸ÀϽ¬Æ®¿¡¼­ 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'¸¦ Çѹø¿¡ ¼³Á¤ÇÏ´Â ¾à½Ä¼Ó¼ºÀÌ´Ù.

°ªÀÌ Çϳª ¸¸ ÀÖÀ¸¸é, ¸ðµç ¸éµé¿¡ Àû¿ëµÈ´Ù.
°ªÀÌ µÎ°³À̸é, ¸ÇÀ§¿Í ¹Ù´Ú Å׵θ®´Â ù °ªÀ¸·Î, ¿À¸¥ÂÊ°ú ¿ÞÂÊ Å׵θ®´Â µÎ° °ªÀ¸·Î ¼³Á¤µÈ´Ù.
°ªÀÌ ¼¼°³À̸é, ¸ÇÀ§´Â ù °ªÀ¸·Î, ¿ÞÂÊ°ú ¿À¸¥ÂÊÀº µÎ° °ªÀ¸·Î, ¹Ù´ÚÀº ¼¼Â° °ªÀ¸·Î ¼³Á¤µÈ´Ù.
°ªÀÌ ³×°³À̸é, °¢°¢Àº ¸ÇÀ§, ¿À¸¥ÂÊ, ¹Ù´Ú, ¿ÞÂÊÀÇ ¼ø¼­(½Ã°è¹æÇâ)·Î ¼³Á¤µÈ´Ù.

¿¹Á¦:

¾Æ·¡ ¿¹Á¦¿¡¼­, ÁÖ¼®(comment)µéÀº °á°úÀûÀÎ ¸ÇÀ§, ¿À¸¥ÂÊ, ¹Ù´Ú, ¿ÞÂÊ Å׵θ®ÀÇ ³Êºñ¸¦ ¼ø¼­´ë·Î ³ªÅ¸³½´Ù:

H1 { border-width: thin }  /* thin thin thin thin */
H1 { border-width: thin thick }  /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thick */

8.5.2 Å׵θ®(border) »ö»ó:
'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', 'border-color'

Å׵θ® »ö»ó ¼Ó¼ºÀº ¹Ú½ºÀÇ Å׵θ® »ö»óÀ» ÁöÁ¤ÇÑ´Ù.

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
°ª:  <»ö»ó> | inherit
ÃÖÃÊ°ª:  ±× 'color' ¼Ó¼º°ª
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)
'border-color'
°ª:  <»ö»ó>{1,4} | transparent | inherit
ÃÖÃÊ°ª:  °¢ ¼Ó¼ºµéÀ» º¸¶ó
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

'border-color'´Â ³× Å׵θ®µéÀÇ »ö»ó ¼Ó¼ºÀ» ÁöÁ¤Çϸç, °ªµéÀº ´ÙÀ½ÀÇ Àǹ̸¦ °®´Â´Ù:

<»ö»ó>
»ö»ó°ªÀ» ÁöÁ¤ÇÑ´Ù.
transparent
ÀÌ Å׵θ®´Â ³Êºñ¸¦ °¡Áú ¼ö ÀÖÁö ¸¸ Åõ¸í(transparent)ÇÏ´Ù.

'border-color' ¼Ó¼ºÀº ³×°¡Áö °ªÀÇ Á¾·ùµé Áß ÇÑ°¡Áö¸¦ °¡Áú ¼ö ÀÖ°í, ±× °ªµéÀº, 'border-width'¿¡¼­¿Í °°Àº ¹æ½ÄÀ¸·Î, ´Ù¸¥ ¸éµéÀÇ »ö»óµéÀ» ¼³Á¤ÇÑ´Ù.

¿¤·¹¸àÆ®ÀÇ Å׵θ® »ö»óÀÌ Å׵θ® ¼Ó¼º¿¡¼­ ÁöÁ¤µÇÁö ¾Ê¾ÒÀ¸¸é, »ç¿ëµµ±¸µéÀº, Å׵θ® »ö»óÀÇ °è»êµÈ °ª°ú °°ÀÌ, ±× ¿¤·¹¸àÆ®ÀÇ 'color' ¼Ó¼º°ªÀ» »ç¿ëÇÏ¿©¾ß ÇÑ´Ù.

¿¹Á¦:

ÀÌ ¿¹Á¦¿¡¼­, Å׵θ®´Â µÎ²¨¿î °ËÁ¤ ½Ç¼±ÀÌ µÈ´Ù.

P {
   color: black;
   background: white;
   border: solid;
}

8.5.3 Å׵θ®(border) ½ºÅ¸ÀÏ:
'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', 'border-style'

ÀÌ Å׵θ® ½ºÅ¸ÀÏ ¼Ó¼ºµéÀº ¹Ú½º Å׵θ® ÁÙÀÇ ½ºÅ¸ÀÏ(solid, double, dashed, µî)À» ÁöÁ¤ÇÑ´Ù. ÀÌ Ç׸ñ¿¡¼­ Á¤ÀÇµÈ ¼Ó¼ºÀº <border-style> °ª ŸÀÔÀ» ÂüÁ¶Çϸç, ´ÙÀ½ Áß Çϳª°¡ µÉ ¼ö ÀÖ´Ù:

none
Å׵θ®°¡ ¾øÀ½. ÀÌ °ªÀº 'border-width'ÀÇ °è»êµÈ °ª¸¦ °­Á¦·Î '0'À¸·Î ¸¸µç´Ù.
hidden
'none'°ú °°À¸³ª, Å×À̺í(table) ¿¤·¹¸àÆ®ÀÇ Å׵θ®ÀÇ ÇØ»óµµ ¸¶Âû(conflict resolution)¿¡¼­´Â ¿¹¿ÜÀÌ´Ù.
dotted
Å׵θ®°¡ Á¡¼±ÀÌ´Ù.
dashed
Å׵θ®°¡ ªÀº ¼± Á¶°¢µéÀÇ ¿¬¼ÓÀÌ´Ù.
solid
Å׵θ®´Â ´ÜÀÏÇÑ ÁÙÀÌ´Ù.
double
Å׵θ®°¡ µÎ°³ÀÇ ½Ç¼±(solid) ÁÙ·Î µÈ´Ù. µÎ ÁÙµéÀÇ ÇÕ°è¿Í ±× »çÀÌÀÇ °ø°£Àº 'border-width'ÀÇ °ª°ú °°´Ù.
groove
Å׵θ®°¡ â(canvas)¿¡¼­ Á¶°¢(ÆÄÁø)µÈ °Íó·³ º¸ÀδÙ.
ridge
'grove'ÀÇ ¹Ý´ë: Å׵θ®°¡ â¿¡¼­ Æ¢¾î³ª¿Â °Íó·³ º¸ÀδÙ.
inset
Å׵θ®°¡ â¿¡¼­ Àüü ¹Ú½º°¡ ±ò·ÁÀÖ´Â(embed) °Íó·³ º¸ÀδÙ.
outset
'inset'ÀÇ ¹Ý´ë: Å׵θ®°¡ â¿¡¼­ Àüü ¹Ú½º°¡ Æ¢¾î³ª¿Â °Íó·³ º¸ÀδÙ.

¸ðµç Å׵θ®µéÀº ¹Ú½º ¹è°æÀÇ ¸ÇÀ§ ±×·ÁÁø´Ù. 'groove', 'ridge', 'inset', 'outset' °ªµé¿¡ µû¶ó ±×·ÁÁø Å׵θ®ÀÇ »ö»óÀº ±× ¿¤·¹¸àÆ®ÀÇ 'color' ¼Ó¼º¿¡ µû¶ó ´Ù¸£´Ù.

±Ô°Ý¿¡ ºÎÇÕÇÏ´Â HTML »ç¿ëµµ±¸µéÀº 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', 'outset'µéÀ» 'solid'·Î Çؼ®Çصµ µÈ´Ù.

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
°ª:  <border-style> | inherit
ÃÖÃÊ°ª:  none
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)
'border-style'
°ª:  <border-style>{1,4} | inherit
ÃÖÃÊ°ª:  °¢ ¼Ó¼ºµéÀ» º¸¶ó
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

'border-style' ¼Ó¼ºÀº ³× Å׵θ®ÀÇ ½ºÅ¸ÀÏÀ» ¼³Á¤ÇÑ´Ù. ÀÌ´Â ³×°¡Áö °ª ÁßÀÇ Çϳª°¡ µÉ ¼ö ÀÖÀ¸¸ç, ±× °ªµéÀº, À§¿¡ ±â¼úµÈ 'border-width'¿¡¼­¿Í °°ÀÌ ´Ù¸¥ ¸éµéÀ» ¼³Á¤ÇÑ´Ù.

¿¹Á¦:

#xy34 { border-style: solid dotted }

À§ ¿¹Á¦¿¡¼­, ¼öÆò Å׵θ®µéÀº 'solid'°¡ µÇ°í, ¼öÁ÷ Å׵θ®µéÀº 'dotted'°¡ µÈ´Ù.

Å׵θ® ½ºÅ¸ÀÏÀÇ ÃÖÃÊ°ªÀÌ 'none' À̹ǷÎ, Å׵θ® ½ºÅ¸ÀÏÀÌ ¼³Á¤µÇÁö ¾Ê´Â ÇÑ, Å׵θ®´Â º¸ÀÌÁö ¾Ê´Â´Ù.

8.5.4 Å׵θ®(border) ¾à½Ä¼Ó¼º:
'border-top', 'border-bottom', 'border-right', 'border-left', 'border'

'border-top', 'border-right', 'border-bottom', 'border-left'
°ª:  [ <'border-top-width'> || <'border-style'> || <»ö»ó> ] | inherit
ÃÖÃÊ°ª:  °¢ ¼Ó¼ºµéÀ» º¸¶ó
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ´Â ¹Ú½º ¸ÇÀ§, ¿À¸¥ÂÊ, ¹Ù´Ú, ¿ÞÂÊ Å׵θ®ÀÇ ³Êºñ, ½ºÅ¸ÀÏ, »ö»óÀ» ¼³Á¤ÇÏ´Â ¾à½Ä¼Ó¼ºÀÌ´Ù.

¿¹Á¦:

H1 { border-bottom: thick solid red }

À§ ¸í·ÉÀº H1 ¿¤·¹¸àÆ®ÀÇ ¾Æ·¡ÂÊ Å׵θ®ÀÇ ³Êºñ, ½ºÅ¸ÀÏ, »ö»ó¸¦ ¼³Á¤ÇÑ´Ù. »ý·«µÈ °ªÀº ±×µéÀÇ ÃÖÃÊ°ªµé·Î ¼³Á¤µÈ´Ù. ´ÙÀ½ ¸í·ÉÀº Å׵θ® »ö»óÀ» ÁöÁ¤ÇÏÁö ¾Ê¾ÒÀ¸¹Ç·Î, ÀÌ Å׵θ®´Â 'color' ¼Ó¼º¿¡ ÀÇÇÏ¿© ÁöÁ¤µÈ »ö»óÀ» °®´Â´Ù:

H1 { border-bottom: thick solid }
'border'
°ª:  [ <'border-width'> || <'border-style'> || <»ö»ó> ] | inherit
ÃÖÃÊ°ª:  °¢ ¼Ó¼ºµéÀ» º¸¶ó
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

'border' ¼Ó¼ºÀº ¹Ú½ºÀÇ ¸ðµç ³× Å׵θ®µé¿¡ °°Àº ³Êºñ, »ö»ó, ½ºÅ¸ÀÏÀ» ¼³Á¤ÇÏ´Â ¾à½Ä¼Ó¼ºÀÌ´Ù. 'margin', 'padding' ¼Ó¼ºÀÇ ¾à½Ä ¸í·Éµé°ú´Â ´Þ¸®, ÀÌ 'border' ¼Ó¼ºÀº ³× Å׵θ®µé¿¡ ´Ù¸¥ °ªµéÀ» ¼³Á¤ÇÒ ¼ö ¾ø´Ù. ±×·¸°Ô Çϱâ À§ÇÏ¿©¼­´Â, ÇϳªÀÌ»óÀÇ ´Ù¸¥ Å׵θ® ¼Ó¼ºµéÀ» »ç¿ëÇÏ¿©¾ß ÇÑ´Ù.

¿¹Á¦:

¿¹¸¦ µé¾î, ¾Æ·¡ ù¹ø° ¸í·ÉÀº ±× ´ÙÀ½¿¡ ÀÖ´Â ³×°³ÀÇ ¸í·Éµé¿¡ ÀÇÇÏ¿© ¼³Á¤µÈ °Í°ú °°´Ù:

P { border: solid red }

P {
   border-top: solid red;
   border-right: solid red;
   border-bottom: solid red;
   border-left: solid red
}

ÀÌ ¼Ó¼ºµéÀº, ¾î´À Á¤µµ ±â´É¼ºÀÌ ÁßøµÇ¾î ÀÖ¾î ¾î¶² ¸í·ÉµéÀ» ¾î¶² ¼ø¼­·Î ÁöÁ¤Çϴ°¡´Â Áß¿äÇÏ´Ù.

¿¹Á¦:

ÀÌ ¿¹Á¦¸¦ º¸ÀÚ:

BLOCKQUOTE {
   border-color: red;
   border-left: double;
   color: black
}

À§ ¿¹Á¦¿¡¼­, ¿ÞÂÊ Å׵θ®ÀÇ »ö»óÀº °ËÁ¤À̸ç, ´Ù¸¥ Å׵θ®µéÀº Àû»öÀÌ´Ù. ÀÌ´Â 'border-left'°¡ ³Êºñ, ½ºÅ¸ÀÏ, »ö»óÀ» ¼³Á¤ÇÏ¿´±â ¶§¹®ÀÌ´Ù. 'border-left' ¼Ó¼º¿¡ ÀÇÇÏ¿© »ö»ó°ªÀÌ ÁÖ¾îÁöÁö ¾Ê¾ÒÀ¸¹Ç·Î, ±× 'color' ¼Ó¼ºÀ¸·Î ºÎÅÍ °¡Á® ¿Â´Ù. 'color' ¼Ó¼ºÀÌ 'border-left' ¼Ó¼º ´ÙÀ½¿¡ ¼³Á¤µÇÁö ¾Ê¾Ò±â ¶§¹®ÀÌ´Ù.


ÆäÀÌÁö ¸ÇÀ§·Î¸ÇÀ§ÀÌ Trio ȨÆäÀÌÁö ¹®¼­()´Â ÀÚÀ¯·ÎÀÌ ¿¬°á »ç¿ëÀÌ °¡´ÉÇÔ.
(¼öÁ¤ÀÏ )