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

Á¦ 2°­ - Style Sheet¶õ


À¥¿¡¼­ Style Sheet°¡ »ç¿ëµÈÁö´Â ¿À·¡Áö¸¸ Style SheetÀÇ °­·ÂÇÔ°ú Á߿伺Àº ¼Ò¼öÀÇ À¥ÆäÀÌÁö¿¡¼­¸¸ Ç¥ÇöµÉ »Ó °ÅÀÇ ÁÖ¸ñ¹ÞÁö ¸øÇß´Ù. Web ÆäÀÌÁö¸¦ dzºÎÇÏ°Ô Ç¥ÇöÇÔÀ¸·Î¼­ ÀÚ½ÅÀÇ ÆäÀÌÁö¸¦ µ¶Ã¢ÀûÀ¸·Î ¸¸µé·Á´Â À¥ ÆäÀÌÁöÀÇ ÀúÀÚµéÀº ÈξÀ °­·ÂÇÑ Style Sheetº¸´Ù´Â Netscape ÀÚüÀÇ Ãß°¡¼Ó¼ºµéÀ» »ç¿ëÇϱâ½ÃÀÛÇß´Ù. Web »ç¿ëÀÚÀÇ ´ëºÎºÐÀÌ Netscape ÀÚüÀÇ ±â´ÉÈ®ÀåÀ» ½±°Ô Á¢ÇÒ ¼ö ÀÖ´Â ¹Ý¸é¿¡ ¼Ò¼öÀÇ »ç¶÷µé¸¸ÀÌ Style SheetÀÇ °­·ÂÇÑ ±â´ÉÀ» Á¢ÇÒ ¼ö ÀÖ¾ú±â ¶§¹®¿¡ ÀÌ°ÍÀº »ó´çÈ÷ ÀÚ¿¬½º·¯¿î Çö»óÀ̾ú´Ù. ¿À´Ã³¯ Á¡Á¡ ´õ ¸¹Àº ºê·Î¿ìÀúµéÀÌ Style Sheet¸¦ ±¸ÇöÇÏ°í ÀÖÀ¸¸ç, Ç÷§Æû¿¡ µ¶¸³ÀûÀΠƯ¡À» À¯ÁöÇϸ鼭 À¥ ÆäÀÌÁö¸¦ ´Ù¾çÇÏ°Ô Ç¥ÇöÇÒ ¼ö ÀÖ´Â µ¶Æ¯ÇÑ Æ¯Â¡¶§¹®¿¡ Style Sheet¿¡ ´«±æÀ» µ¹¸®°íÀÖ´Ù. À¥ ÆäÀÌÁö¸¦ ´Ù¾çÇÏ°Ô Ç¥ÇöÇϱâ À§Çؼ­´Â ´õ ¸¹Àº HTML ű׸¦ »ç¿ëÇÔÇؾßÇϹǷΠStyle SheetÀÇ ÀÕÁ¡Àº ÀÌÁ¦ ºÐ¸íÇØ Á³´Ù. NetscapeÀÇ BODY ¼Ó¼ºÀº ÀÌÁ¦ À¥¿¡¼­ Æø³Ð°Ô »ç¿ëµÇ°í ÀÖÀ¸¸ç, HTML 3.2¿¡¼­´Â Ç¥ÁØÀÌ µÇ¾ú´Ù. ±×·¯³ª BGCOLOR, TEXT¿Í À¯»çÇÑ Å±׵éÀº Style Sheet ¸¸ÇÑ À¯¿¬¼ºÀ» Á¦°øÇÏÁö ¸øÇÑ´Ù. ´ëºÎºÐÀÇ ¹è°æ±×¸²Àº 16 »ö»ó¹Û µð½ºÇ÷¹ÀÌÇÏÁö ¸øÇÏ´Â ½Ã½ºÅÛ¿¡¼­´Â ÆäÀÌÁö¸¦ Àбâ Èûµé°Ô ¸¸µç´Ù. ¶Ç ¸¹Àº ÆäÀÌÁöµéÀÌ 256 »ö»ó¸¸À» Áö¿øÇÏ´Â ½Ã½ºÅÛ¿¡¼­ Àбâ Èûµé´Ù. ÀÌÁ¦±îÁö »ç¿ëÇÑ BODY ¼Ó¼ºÀ¸·Î À¥ ÆäÀÌÁö ÀúÀÚµéÀº ¹è°æ±×¸²À» »ç¿ëÇÏ´Â °ÍÀÌ Á¤¸» À̵æÀÎÁö¸¦ °áÁ¤ÇØ¾ß Çß´Ù. Style Sheet·Î À¥ ÆäÀÌÁöÀÇ ÀúÀÚµéÀº ¸¹Àº ¼öÀÇ ¼­·Î ´Ù¸¥ À̹ÌÁö¸¦ ¼­·Î ´Ù¸¥ Style Sheet³»¿¡ Á¦°øÇÔÀ¸·Î¼­ »ç¿ëÀÚ°¡ ÀÚ½ÅÀÇ ½Ã½ºÅÛ¿¡ µû¶ó 24-ºñÆ® Style Sheet³ª 8-ºñÆ® Style SheetÀ» ¼±ÅÃÇϵµ·Ï ÇÒ ¼ö ÀÖ´Ù. ¸¸¾à Á¦°øµÈ ¾î¶°ÇÑ Style Sheetµµ »ç¿ëÀÚ¿¡°Ô Àû´çÇÏÁö ¾Ê´Ù¸é, »ç¿ëÀÚ´Â ÀúÀÚÀÇ ½ºÅ¸ÀÏÀ» ¹«½ÃÇÏ¸é µÈ´Ù. Style Sheet´Â ÀúÀÚÀÇ Àú¼úÀ» º¸´Ù ¿©À¯·Ó°Ô ¸¸µé¼ö ÀÖ´Ù. ÀϹÝÀûÀ¸·Î <HR> ű׸¦ »ç¿ëÇϱâÀ§ÇØ <HR WIDTH="75%" SIZE=5 ALIGN=center>¸¦ »ç¿ëÇÒ ¼ö ÀÖÁö¸¸, ÀÌ°ÍÀº ÀúÀÚ¿¡°Ô ¾ÆÁÖ ¼º°¡½Å ÀÏÀÌ µÈ´Ù. Style Sheet·Î ÀúÀÚµé HR°ú °°Àº Ç¥ÇöÀû ű׵éÀ» ÀÏ´Ü Çѹø Á¤ÀÇÇÏ°í ÀÌ ½ºÅ¸ÀÏÀ» Àü »çÀÌÆ®¿¡ Àû¿ëÇÒ ¼ö ÀÖ´Ù. ¸¸¾à ÀúÀÚ°¡ WIDTH=50%ÀÎ °ÍÀÌ ´õ ³´´Ù°í °áÁ¤ÇÑ´Ù¸é ±×¶§ HTMLÀ» º¯°æÇϱâÀ§ÇØ ¼ö¹é°³ÀÇ ÆäÀÌÁö¸¦ º¯°æÇϱ⠺¸´Ù´Â Style Sheet¸¸À» Çѹø º¯°æÇÏ¸é µÈ´Ù. ÀÌ°Í »Ó¸¸¾Æ´Ï¶ó ÇϳªÀÇ ÆÄÀÏ¿¡ ¸ðµç ½ºÅ¸ÀÏ Á¤º¸°¡ Æ÷ÇԵǾî ÀÖ´Ù¸é Style Sheet¸¦ ³»·Á¹Þ´Â ½Ã°£À» ÁÙÀÏ ¼ö ÀÖ´Ù. Style Sheet´Â Style Sheet°¡ Á¦°øÇÒ ¼ö Àִ ǥÇö È¿°ú¶ó´Â ¸é¿¡¼­ ÈξÀ ´õ ¸¹Àº À¯¿¬¼ºÀ» Á¦°øÇÑ´Ù. »ö»ó(color), ¹è°æ(background), ¿©¹é(margin), °æ°è(border)¿Í°°Àº ¸¹Àº Ư¼º(property)µéÀÌ ¸ðµç ű׿¡ Àû¿ëµÉ ¼ö ÀÖ´Ù. HTML°ú ÀÚüÀÇ ±â´ÉÈ®ÀåÀ¸·Î´Â BGCOLOR¿Í °°ÀÌ ´ÜÁö ¸î°³ÀÇ Å±׿¡¼­¸¸ »ç¿ë°¡´ÉÇÑ ¼Ó¼º¿¡ ÀÇÁ¸ÇØ¾ß ÇÑ´Ù. Style Sheet´Â ÀÓÀÇÀÇ ½ºÅ¸ÀÏÀ» ¸ðµç ¹®´Ü, ¸ðµç ¼ÒÁ¦¸ñ, ¸ðµç °­Á¶¹®¿¡ Àû¿ëÇÒ ¼ö ÀÖ´Â À¯¿¬¼ºÀ» Á¦°øÇÑ´Ù. À¥ ÆäÀÌÁöÀÇ ÀúÀÚ´Â ¸¹Àº ºÎÁ¤ÀûÀÎ Ãø¸éÈ¿°ú¸¦ °®´Â <DD>³ª <IMG SRC="blank.gif" WIDTH=10 ALT="">¿Í °°Àº ºÎÀûÇÕÇÑ Å±׸¦ »ðÀÔÇÏÁö ¾Ê°íµµ Style Sheet·Î µé¿©¾²±â¸¦ ÇÒ ¼ö ÀÖ´Ù. ¶ÇÇÑ Ç¥³»¿¡ Àüü ÆäÀÌÁö¸¦ µÎÁö ¾Ê°íµµ ¿©¹éÀ» µÑ¼ö ÀÖ´Ù. Style Sheet¸¦ »ç¿ëÇÏ¸é ¿©·¯ °³ÀÇ ÆÄÀÏÀ» °Ë»öÇؼ­ ƯÁ¤ ¹®ÀÚ¿­À» ´ëÄ¡ÇÒ ÇÊ¿ä°¡ ¾ø´Ù. ¸¸¾à ¾î¶² »çÀÌÆ®ÀÇ ¸ðµç ¹®´ÜÀÇ µé¿©¾²±â¸¦ º¯°æÇÏ°í ½Í´Ù¸é ´ÜÁö Style SheetÀÇ ÇÑ Çุ º¯°æÇÏ¸é µÈ´Ù.
ÇöÀç CSS¸¦ Áö¿øÇÏ´Â ºê·Î¿ìÀú ÀÌ¹Ì Style Sheet¸¦ Áö¿øÇÏ´Â ¸î¸î ºê·Î¿ìÀú°¡ ÀÖ´Ù. °¡Àå µÎµå·¯Áø °ÍÀ¸·Î Netscape 4.0 ¹öÀüÀÌ ÀÖÀ¸¸ç ÀÌ¹Ì »ó´ç¼öÀÇ StyleÀ» Áö¿øÇÏ°í ÀÖ´Ù. ¶ÇÇÑ M$IE´Â 3.0ºÎÅÍ ºÎºÐÀûÀ¸·Î Style Sheet¸¦ Áö¿øÇÏ°í ÀÖÀ¸¸ç, 4.0¿¡¼­´Â Netscape°ú ¸¶Âù°¡Áö·Î ´ëºÎºÐÀÇ Style Sheet¸¦ Áö¿øÇÏ°í ÀÖ´Ù. Style Sheet´Â Emacs-W3¿Í Arena·Î Unix¿¡¼­´Â ¿À·¡Àü ºÎÅÍ Áö¿øµÇ¾î ¿ÔÀ¸¸ç, W3CÀÇ Amaya ºê·Î¿ìÀú´Â CSS¸¦ Æ÷ÇÔÇÏ´Â À¥ ÆäÀÌÁö¸¦ ÀÛ¼ºÇϱâÀ§ÇÑ WYSIWYG ¿¡µðÅÍ¿Í ´õºí¾î »ó´çÇÑ ºÎºÐÀ» Áö¿øÇÑ´Ù. CSS1À» ³Ñ¾î¼­...

CSS1¿¡´ëÇÑ ¾ÕÀ¸·ÎÀÇ ¸ñÇ¥´Â À¥ÆäÀÌÁöÀÇ Ãâ·Â, À½¼º¿¡´ëÇÑ ½ºÅ¸ÀÏ, Á¡ÀÚ Ãâ·Â, layout, positioning, ±Û²Ã°ú ÀåÄ¡¿¡ µ¶¸³ÀûÀÎ »ö»óÀ» Áö¿øÇÏ´Â °ÍÀÌ´Ù.



´ÙÀ½±Û: Á¦ 3°­ - CSS ¸Àº¸±â (12278)1996-06-03
ÀÌÀü±Û: Á¦ 1°­ - ¸ñÂ÷ (11903)1996-06-01

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



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