| Part 5 : ½ºÅ¸ÀÏ·Î ±ò²ûÇÏ°Ô ¹®¼ Á¤¸®Çϱâ | |||||||||||||||||||||
|
ÀÌÁ¦ ¹®¼ÀÇ ³»¿ëÀÌ º¸´Ù ±ò²ûÇÏ°Ô º¸À̵µ·Ï ¿©±â¿¡ Àû¿ëÇÒ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÑ´Ù. À¥ ¹®¼¿¡ ½ºÅ¸ÀÏÀ» Àû¿ëÇÏ¸é ¹®¼ÀÇ Æ÷¸ËÀ» Àϰü¼º ÀÖ°Ô À¯ÁöÇÒ ¼ö ÀÖ¾î ÀÌÈÄ ¹®¼ÀÇ ¼öÁ¤¿¡ ¼Ò¿äµÇ´Â ½Ã°£À» Å©°Ô ÁÙÀÏ ¼ö ÀÖ´Ù. ¿¹Á¦ ¹®¼¿¡¼´Â ´ÙÀ½°ú °°ÀÌ ¸ðµÎ ³×°¡ÁöÀÇ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÑ´Ù.
µå¸²À§¹ö¿¡¼ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÏ´Â ¹æ¹ýÀº Å©°Ô ¼¼°¡Áö À¯ÇüÀ¸·Î ºÐ·ùµÈ´Ù. ù ¹øÂ° ¹æ¹ýÀº »ç¿ëÀÚ°¡ Á÷Á¢ »õ·Î¿î ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÏ´Â °ÍÀ̰í(2, 3ÀÇ °æ¿ì), µÎ ¹øÂ°´Â <table>°ú °°ÀÌ ÀÌ¹Ì ³»ºÎÀûÀ¸·Î Á¸ÀçÇϴ ű׿¡¸¸ Àû¿ëÇÒ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÏ´Â °Í(1ÀÇ °æ¿ì), ±×¸®°í ¼¼ ¹øÂ°´Â ¸µÅ©¿¡ ´ëÇÑ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÏ´Â °ÍÀÌ´Ù(4ÀÇ °æ¿ì). 1ÀÇ ¹æ¹ý¿¡ ´ëÇÑ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÏ¿© º¸ÀÚ.
¿©±â¼´Â ¹®¼¿¡¼ 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' ¹Ú½º¿¡¼ ½ºÅ¸ÀÏÀ» Àû¿ëÇÒ Å±׸¦ ¼±ÅÃÇϰųª ¸¶¿ì½º·Î Á÷Á¢ ¿µ¿ªÀ» ¼±ÅÃÇÏ°í¼ ¸®½ºÆ® ¹Ú½º¿¡¼ ¿øÇÏ´Â ½ºÅ¸ÀÏÀ» ¼±ÅÃÇϸé ÇØ´ç ¿µ¿ªÀÌ ½ºÅ¸ÀÏ¿¡¼ Á¤ÀÇÇÑ Æ÷¸ËÀ¸·Î ¹Ù²î°Ô µÈ´Ù.
|