Part 5 : ½ºÅ¸ÀÏ·Î ±ò²ûÇÏ°Ô ¹®¼­ Á¤¸®Çϱâ
 

ÀÌÁ¦ ¹®¼­ÀÇ ³»¿ëÀÌ º¸´Ù ±ò²ûÇÏ°Ô º¸À̵µ·Ï ¿©±â¿¡ Àû¿ëÇÒ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÑ´Ù. À¥ ¹®¼­¿¡ ½ºÅ¸ÀÏÀ» Àû¿ëÇÏ¸é ¹®¼­ÀÇ Æ÷¸ËÀ» Àϰü¼º ÀÖ°Ô À¯ÁöÇÒ ¼ö ÀÖ¾î ÀÌÈÄ ¹®¼­ÀÇ ¼öÁ¤¿¡ ¼Ò¿äµÇ´Â ½Ã°£À» Å©°Ô ÁÙÀÏ ¼ö ÀÖ´Ù. ¿¹Á¦ ¹®¼­¿¡¼­´Â ´ÙÀ½°ú °°ÀÌ ¸ðµÎ ³×°¡ÁöÀÇ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÑ´Ù.

  1. ¸®½ºÆ®¸¦ »ç¿ëÇÑ °øÁö»çÇ× ³»¿ë¿¡ Àû¿ëÇÒ ½ºÅ¸ÀÏ
  2. ¹®¼­ÀÇ ¼±Åà ¿µ¿ª¿¡ Àû¿ëÇÒ ½ºÅ¸ÀÏ : content
  3. Ưº°È÷ °­Á¶ÇÒ ¿µ¿ª¿¡ Àû¿ëÇÒ ½ºÅ¸ÀÏ : accent
  4. ¸µÅ©¿¡ ´ëÇØ Àû¿ëÇÒ ½ºÅ¸ÀÏ

µå¸²À§¹ö¿¡¼­ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÏ´Â ¹æ¹ýÀº Å©°Ô ¼¼°¡Áö À¯ÇüÀ¸·Î ºÐ·ùµÈ´Ù. ù ¹øÂ° ¹æ¹ýÀº »ç¿ëÀÚ°¡ Á÷Á¢ »õ·Î¿î ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÏ´Â °ÍÀ̰í(2, 3ÀÇ °æ¿ì), µÎ ¹øÂ°´Â <table>°ú °°ÀÌ ÀÌ¹Ì ³»ºÎÀûÀ¸·Î Á¸ÀçÇϴ ű׿¡¸¸ Àû¿ëÇÒ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÏ´Â °Í(1ÀÇ °æ¿ì), ±×¸®°í ¼¼ ¹øÂ°´Â ¸µÅ©¿¡ ´ëÇÑ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÏ´Â °ÍÀÌ´Ù(4ÀÇ °æ¿ì). 1ÀÇ ¹æ¹ý¿¡ ´ëÇÑ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÏ¿© º¸ÀÚ.

Text ¡æ Custom Style ¡æ Edit Style Sheet ¡æ New¸¦ ¼±ÅÃÇÑ´Ù.

´ëÈ­»óÀÚ°¡ ³ª¿À´Âµ¥ 'Redefine HTML Tag'¸¦ ¼±ÅÃÇÏ°í ¾Æ·¡ÀÇ Ã¢¿¡ ULÀ» ¼±ÅÃÇÑ´Ù.

Type ¸ñ·Ï¿¡¼­ ÆùÆ® Å©±â´Â 10pt, Line Height´Â 150%·Î, Block ¸ñ·Ï¿¡¼­ Text Align Àº justify·Î ¼³Á¤ÇÑ´Ù.

¼³Á¤À» ¸¶Ä¡°í 'Done'À» Ŭ¸¯ÇÏ¸é ¹®¼­³» UL ű׷Π¸¸µé¾îÁø °øÁö»çÇ× ³»¿ëÀÇ Æ÷¸ËÀÌ ¹æ±Ý ½ºÅ¸ÀÏ¿¡¼­ Á¤ÀÇÇÑ ´ë·Î ¹Ù²ï´Ù.

¿©±â¼­´Â ¹®¼­¿¡¼­ UL ű׷ΠµÑ·¯½ÎÀÌ´Â ¸ðµç ÅØ½ºÆ®¿¡ Àû¿ëµÉ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÏ´Â °ÍÀÌ´Ù. â ¿ÞÂÊ¿¡´Â ÆùÆ®, ÅØ½ºÆ®, ÅØ½ºÆ® Æ÷¸Ë ¹× ±âŸ ½ºÅ¸ÀÏ¿¡¼­ ÁöÁ¤ÇÒ ¼ö ÀÖ´Â ¸ñ·ÏÀÌ Ç¥½ÃµÇ°í ¿À¸¥ÂÊ¿¡´Â °¢ ¸ñ·Ï¿¡¼­ ¼³Á¤ÇÒ ¼ö ÀÖ´Â ¼¼ºÎÀûÀÎ ½ºÅ¸ÀÏ ¿É¼ÇÀÌ Á¦°øµÈ´Ù. »ç¿ëÀÚ°¡ ÄÞº¸¹Ú½º³ª ¸®½ºÆ® ¹Ú½º¿¡¼­ Ç׸ñÀ» ¼±ÅÃÇϰųª ÀÔ·Â Çʵ忡 °ªÀ» ÀÔ·ÂÇÏ¸é µå¸²À§¹ö°¡ ±×¿¡ ÇØ´çÇÏ´Â HTML Äڵ带 »ý¼ºÇØÁֹǷΠ¸ðµç ½ºÅ¸ÀÏ ¿É¼ÇÀ» ¾ËÁö ¸øÇصµ ½±°Ô ¿øÇÏ´Â ¸ð¾çÀÇ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÒ ¼ö ÀÖ´Ù.

¶ÇÇÑ Line Height´Â ÁÙ °£°ÝÀ» ÁöÁ¤ÇÏ´Â ¿É¼ÇÀ¸·Î ¿©±â¼­´Â ÇöÀç ÆùÆ® Å©±âÀÎ 10 Æ÷ÀÎÆ®ÀÇ 1.5¹èÀÎ 15°¡ UL ű׿¡ ´ëÇØ Á¤ÀÇÇÑ ÁÙ °£°ÝÀÌ µÈ´Ù. ¶ÇÇÑ Text Align¿¡¼­ °í¸¥ Á¤·Ä(Justify)À» ¼±ÅÃÇÏ¿© Á¿쳡ÀÌ ´ëĪÀÌ µÇµµ·Ï ÇÏ¿´´Ù.

ÀÌ¿Í °°Àº ¼³Á¤À» ¸¶Ä¡°í OK ¹öưÀ» Ŭ¸¯ÇÏ¸é »ç¿ëÀÚÀÇ ¼±Åÿ¡ µû¶ó µå¸²À§¹ö°¡ »ý¼ºÇØ ³½ Äڵ带 º¼ ¼ö ÀÖ´Ù. ³ª¸ÓÁö, ¸®½ºÆ® À§¿Í ¾Æ·¡ÀÇ ÅØ½ºÆ®´Â UL űװ¡ ¾Æ´Ï±â ¶§¹®¿¡ º¯ÇÔÀÌ ¾ø´Â °ÍÀ» º¼ ¼ö ÀÖ´Ù.

³ª¸ÓÁö ½ºÅ¸Àϵµ À§¿Í µ¿ÀÏÇÑ ¹æ¹ýÀ¸·Î Á¤ÀÇÇÑ´Ù. À̶§ 2¿Í 3ÀÇ °æ¿ì´Â ½ºÅ¸ÀÏ ÆíÁý ´ëÈ­»óÀÚ¿¡¼­ ù ¹øÂ° Ç׸ñÀÎ 'Make Custom Style(class)'¸¦, 4ÀÇ °æ¿ì´Â 'Use CSS Selector'¸¦ ¼±ÅÃÇÑ´Ù. ¶Ç 2¿Í 3ÀÇ °æ¿ì Name¶õÀÇ ½ºÅ¸ÀϸíÀº ¾ðÁ¦³ª '.'·Î ½ÃÀÛÇØ¾ß ÇÑ´Ù. Áï, °¢°¢ .content¿Í .accent¶ó°í Àû¾îÁÖ¾î¾ß ÇÑ´Ù. 4ÀÇ °æ¿ì¿¡´Â ¸®½ºÆ® ¹Ú½º¿¡¼­ a:hover¸¦ ¼±ÅÃÇÑ´Ù.

°¢ ½ºÅ¸ÀÏ¿¡ ´ëÇÑ ¿É¼ÇÀº ¾Õ¼­ÀÇ Æ÷¸Ë¼³Á¤ ´Ü°è¿Í °°Àº ¹æ½ÄÀ¸·Î ¼³Á¤ÇØÁÖ¸é µÈ´Ù. 2ÀÇ °æ¿ì Text AlignÀº center·Î ÇÏ°í ³ª¸ÓÁö´Â ¼¼¹øÂ°¿¡¼­ÀÇ ¼³Á¤°ú µ¿ÀÏÇÏ°Ô ¼³Á¤ÇÑ´Ù. 3ÀÇ °æ¿ì ÆùÆ® Å©±â´Â 10pt, Line Height´Â 150%·Î, Weight´Â bold·Î ¼³Á¤ÇÑ´Ù. 4ÀÇ °æ¿ì´Â Ä¿¼­°¡ ÅØ½ºÆ® ¸µÅ© À§¿¡ ³õ¿´À» ¶§ ÇØ´ç ¸µÅ© ÅØ½ºÆ®¿¡ ´ëÇÑ ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÏ´Â °ÍÀ¸·Î ¿©±â¼­´Â ÆùÆ® Å©±â 10pt, DecorationÀº none, color´Â »¡°£»öÀ¸·Î ¼³Á¤ÇÑ´Ù.

³× °¡Áö ½ºÅ¸ÀÏ¿¡ ´ëÇÑ ¼³Á¤À» ¸ðµÎ ¸¶Ä¡¸é ½ºÅ¸ÀÏ ´ëÈ­»óÀÚ¿¡ »ç¿ëÀÚ°¡ Á÷Á¢ Á¤ÀÇÇÑ ½ºÅ¸ÀÏ ¸ñ·ÏÀÌ Ç¥½ÃµÈ´Ù. ÀÌÁ¦ 'Apply To' ¹Ú½º¿¡¼­ ½ºÅ¸ÀÏÀ» Àû¿ëÇÒ Å±׸¦ ¼±ÅÃÇϰųª ¸¶¿ì½º·Î Á÷Á¢ ¿µ¿ªÀ» ¼±ÅÃÇÏ°í¼­ ¸®½ºÆ® ¹Ú½º¿¡¼­ ¿øÇÏ´Â ½ºÅ¸ÀÏÀ» ¼±ÅÃÇϸé ÇØ´ç ¿µ¿ªÀÌ ½ºÅ¸ÀÏ¿¡¼­ Á¤ÀÇÇÑ Æ÷¸ËÀ¸·Î ¹Ù²î°Ô µÈ´Ù.

'Apply To'¿¡¼­ <body>¸¦ ¼±ÅÃÇÏ°í ¾Æ·¡ º¸ÀÌ´Â ¸®½ºÆ®¿¡¼­ content¸¦ ¼±ÅÃÇÑ´Ù

¹®¼­ÀÇ ³ª¸ÓÁö ÅØ½ºÆ® ¿µ¿ªÀ» ¸¶¿ì½º·Î ¼±ÅÃÇÏ°í ½ºÅ¸ÀÏ content¸¦ ¼±ÅÃÇÑ´Ù

°øÁö»çÇ× ³»¿ë Áß °­Á¶ÇϰíÀÚ ÇÏ´Â ´Ü¾î¸¦ ¼±ÅÃÇÏ°í ½ºÅ¸ÀÏ accent¸¦ ¼±ÅÃÇÑ´Ù

´Ù¸¥ ¹®¼­·Î ¸µÅ©½Ãų ÅØ½ºÆ® ¿µ¿ªÀ» ¼±ÅÃÇÏ°í¼­ Properties À©µµ¿ìÀÇ Link¿¡ ¿¬°áµÉ ¹®¼­ À̸§À» Àû¾îÁØ´Ù

³× °¡Áö ½ºÅ¸ÀÏ¿¡ ´ëÇÑ ¼³Á¤À» ¸ðµÎ ¸¶Ä¡¸é ½ºÅ¸ÀÏ ´ëÈ­»óÀÚ¿¡ »ç¿ëÀÚ°¡ Á÷Á¢ Á¤ÀÇÇÑ ½ºÅ¸ÀÏ ¸ñ·ÏÀÌ Ç¥½ÃµÈ´Ù.

¸ðµç ½ºÅ¸ÀÏÀ» Àû¿ëÇØ ¸¸µé¾îÁø ¹®¼­ÀÇ ¸ð½À. ƯÈ÷ ¹ø ½ºÅ¸ÀÏÀ» Àû¿ëÇÔÀ¸·Î½á Ä¿¼­°¡ ¸µÅ© À§¿¡ ÀÖÀ» ¶§ ¸µÅ© ÅØ½ºÆ®ÀÇ »ö±ò°ú ¸ð¾çÀÌ ¹Ù²î´Â °ÍÀ» º¼ ¼ö ÀÖ´Ù.

[´ÙÀ½À¸·Î] [ÀÌÀüÀ¸·Î] [À¥µðÀÚÀÎ ÆäÀÌÁö·Î] [¸ÞÀÎÆäÀÌÁö·Î]