HTML °Á STYLE SHEET ¹è°æÁ¦¾î
½ºÅ¸ÀϽÃÆ®ÀÇ ¹è°æ¿¡ °üÇÑ ¿É¼ÇÀº background-color ¿Í background-image ¿Í background-repeat ±×¸®°í background-attachment µîÀÌ ÀÖ½À´Ï´Ù.
±×Áß background-color´Â ´Ù¸¥ ¿É¼Çµé°ú °°ÀÌ ¾µ¼ö ¾ø´Â °ÍÀÓÀ» °¨¾ÈÇÑ´Ù¸é ±× Çü½ÄÀº embeded·Î´Â
<style type='text/css'> Àû¿ëµÉÅÂ±× {backgound-color:°ª(¶Ç´Â backgound-image;backgound-image:°ª;backgound-repeat:°ª;background-attachment:°ª)} </style> . . <Àû¿ëµÉű×> | |
inlineÀ¸·Î´Â
<Àû¿ëµÉÅÂ±× style="backgound-color:°ª(¶Ç´Â backgound-image;backgound-image:°ª;backgound-repeat:°ª;background-attachment:°ª)">
| |
¿ª½Ã ÆùÆ®Á¦¾î¿Í ¸¶Âù°¡Áö·Î ¿É¼Ç ÀüºÎ¸¦ ½áÁÙÇÊ¿ä´Â ¾ø½À´Ï´Ù. ±×°Ç ű׳ª ½ºÅ¸ÀϽÃÆ®³ª ÀüºÎ ¸¶Âù°¡ÁöÁÒ ¿øÇÏ´Â ¿É¼Ç¸¸ ½áÁÖ¸é µË´Ï´Ù.
¨ç ´Ü»ö ¹è°æ background-color
¾î¶°ÇÑ Å±×ÀÇ ´Ü»ö¹è°æÀ» ÀÔÈú¶§ ¾²ÀÌ´Â ¿É¼ÇÀÔ´Ï´Ù. µû¶ó¼ ¿É¼Ç°ªÀº »ö»óÀÌ µÇ°ÚÁÒ. ±×·¯¹Ç·Î background-color:»ö»óÀÔ´Ï´Ù. ȤÀº background:»ö»ó·Î ½áÁ൵ µË´Ï´Ù.
ÇÏÁö¸¸ ¿øÄ¢»ó background-color:»ö»óÀ¸·Î ±â¾ïÇØ µÎ½Ã´Â°Ô ³ªÀ»µí. Àû¿ëÇÒű׸¦ <font>·Î ½á¼ ¿¹Á¦¸¦ µé¾îº¸°Ú½À´Ï´Ù.
¾ÆÂü! embeded¹æ½Ä°ú inline¹æ½ÄÀÇ Â÷ÀÌ´Â ¾Æ½ÃÁÒ? Àû¿ëµÉű׸¦ <font>·Î ÇÑ´Ù¸é embeded¹æ½ÄÀº ¸ðµç <font>ű׿¡ ¹è°æÀ» ÀÔÈ÷°Ô µÇ°í inlineÀº ÇϳªÀÇ <font>ű׿¡¸¸ ÀÔÈù´Ù´Â°Å.
embeded¹æ½Ä |
inline¹æ½Ä |
<html> <head> <title>½ºÅ¸ÀϽÃÆ® ¿¹Á¦</title> <style type="text/css"> font {background-color:yellow} </style> </head> <body> <font>³ª´Â ÇÒ ¼ö ÀÖ´Ù</font> </body> </html>
|
<font style="background-color:yellow">³ª´Â ÇÒ ¼ö ÀÖ´Ù</font> | | |
<FORM>½ÇÇàȸé</FORM>
¾î¶§¿ä <font>ÅÂ±× ¹è°æ»öÀÌ ³ë¶þ°Ô µÆÁÒ? ¹°·Ð ´Ù¸¥ ű׿¡µµ Àû¿ë°¡´ÉÇÕ´Ï´Ù. Á¦°¡ ÀÚ²Ù <font>ű׿¡¸¸ ¿¹¸¦ µé¾îÁØ´Ù°í ¿©±â¿¡¸¸ Àû¿ëµÈ´Ù°í »ý°¢ÇÏÁö ¸¶¼¼¿ä. ½ºÅ¸ÀϽÃÆ®ÀÇ ¿É¼ÇµéÀº °ÅÀÇ ´ëºÎºÐÀÌ ¾Æ¹«Å±׸¦ °¡¸®Áö ¾Ê°í Àû¿ëÀÌ µÈ´ä´Ï´Ù.
¹è°æ °Á´ϱî background-color¿É¼ÇÀ» <body>ű׿¡´Ù°¡ °É¾îÁÖ¸é ¾î¶»°Ô µÉ±î¿ä? ´ç¿¬È÷ ȸéÀüü°¡ ¹è°æÀÌ ÀÔÇôÁö°ÚÁÒ. <font>ű×ÀÇ ¹è°æÀº ±ÛÀÚÁÖº¯¿¡ ÇÑÁ¤µÇ°ÚÁö¸¸ <body>ű×ÀÇ ¹è°æÀº È¸é ±×ÀÚü´Ï±î
embeded¹æ½Ä |
inline¹æ½Ä |
<html> <head> <title>½ºÅ¸ÀϽÃÆ® ¿¹Á¦</title> <style type="text/css"> body {background-color:yellow} </style> </head> <body> ³ª´Â ÇÒ ¼ö ÀÖ´Ù </body> </html>
|
<body style="background-color:yellow">³ª´Â ÇÒ ¼ö ÀÖ´Ù</font> | | |
<FORM>½ÇÇàȸé</FORM>
¾î¶§¿ä? ½Å±âÇÑ°¡¿ä?
¨è À̹ÌÁö ¹è°æ
À̹ÌÁö ¹è°æ¿¡ ¾²ÀÌ´Â ¿É¼ÇµéÀº ²Ï ¸¹´ä´Ï´Ù. ±×Áß¿¡ °¡Àå ±âº»ÀûÀΰÍÀº ¹¹´Ï¹¹´ÏÇصµ 'À̹ÌÁö ¹è°æÀ» ÇÏ°Ú´Ù'¶ó´Â background-image°ÚÁÒ. ¾îµð¿¡ ÀÖ´Â ¹è°æ±×¸²À» »ç¿ëÇÒ °ÍÀÎÁö¸¦ Á¤ÇØ¾ß Çϱ⠶§¹®¿¡ ¿É¼Ç°ªÀº ¹è°æ±×¸²ÀÇ ÁÖ¼Ò°¡ µË´Ï´Ù. url(ÁÖ¼Ò)ÀÌÁÒ. µû¶ó¼ ±× Çü½ÄÀº background-image:url(À̹ÌÁöÁÖ¼Ò)°¡ µÈ´ä´Ï´Ù. ÀÌ ¿ª½Ã background:url(À̹ÌÁöÁÖ¼Ò)¶ó°í Ç¥±âµµ °¡´ÉÇϳª ´Ù¸¥ ¹è°æ¿É¼Çµé°úÀÇ Çü½Ä ÅëÀϼºÀ» À§ÇØ Ã³À½°ÍÀ» ±â¾ïÇÏ½Ã´Â°Ô ÁÁ°Ú³×¿ä.
embeded¹æ½Ä |
inline¹æ½Ä |
<html> <head> <title>½ºÅ¸ÀϽÃÆ® ¿¹Á¦</title> <style type="text/css"> font {background-image:url(back.gif)} </style> </head> <body> <font>³ª´Â ÇÒ ¼ö ÀÖ´Ù</font> </body> </html>
|
<font style="background-image:url(back.gif)">³ª´Â ÇÒ ¼ö ÀÖ´Ù</font> | | |
<FORM>½ÇÇàȸé</FORM>
ÀÌÇصǽÃÁÒ? Á¦°¡ ´©Â÷ ¸»¾¸µå¸®´Â °ÅÁö¸¸ embeded¹æ½Ä¿Í inlineÀÇ Â÷À̸¦ ¿°µÎ¿¡ µÎ¼¼¿ä.
ÀÚ ±×·³ À̹ÌÁö ¹è°æÀ» <font>ű׸»°í <body>ű׿¡´Ù ÀÔÇôº¸ÁÒ
embeded¹æ½Ä |
inline¹æ½Ä |
<html> <head> <title>½ºÅ¸ÀϽÃÆ® ¿¹Á¦</title> <style type="text/css"> body {background-image:url(back.gif)} </style> </head> <body> ³ª´Â ÇÒ ¼ö ÀÖ´Ù </body> </html>
|
<body style="background-image:url(back.gif)">³ª´Â ÇÒ ¼ö ÀÖ´Ù</font> | | |
<FORM>½ÇÇàȸé</FORM>
¡Ø background-repeat
À̹ÌÁö ¹è°æÀ» ÁÖ´Â ½ºÅ¸ÀϽÃÆ®¿¡´Â ¿É¼ÇÀÌ ´õ ÀÖ½À´Ï´Ù. ¹è°æ±×¸²ÀÌ Àû¿ëµÉ¹üÀ§º¸´Ù Å©±â°¡ ÀÛÀº°æ¿ì ŸÀÏÇü½ÄÀ¸·Î ¹Ýº¹µÇ¾î ³ª¿À´Âµ¥ ±×°É Á¶ÀýÇÒ ¼ö ÀÖ´Â ¿É¼ÇÀÌ ÀÖÁÒ. background-repeat ÀÔ´Ï´Ù. ´Ü ÀÌ ¿É¼ÇÀº À̹ÌÁö¹è°æÀ» ÇÑ´Ù´Â ÀüÁ¦ÇÏ¿¡¼ À̹ǷΠbackground-image¿É¼ÇÀÌ ¾øÀÌ´Â ¾²Àϼö ¾ø½À´Ï´Ù.
¿É¼Ç°ª¿¡´Â
repeat-x : xÃàÀ¸·Î ¹Ýº¹ÀÌ µË´Ï´Ù.
repeat-y : yÃàÀ¸·Î ¹Ýº¹ÀÌ µË´Ï´Ù.
no-repeat : À̹ÌÁö°¡ Àû¿ëű×ÀÇ °ø°£º¸´Ù À۾Ƶµ ¹Ýº¹À» ½ÃÅ°Áö ¾Ê½À´Ï´Ù.
repeat-x¸¸ ¿¹¸¦ µé¾îº¸ÁÒ. ³ª¸ÓÁö´Â ű׿¬½ÀÀåÀ¸·Î ½ÇÇàÇغ¸¼¼¿ä.
embeded¹æ½Ä |
inline¹æ½Ä |
<html> <head> <title>½ºÅ¸ÀϽÃÆ® ¿¹Á¦</title> <style type="text/css"> body {background-image:url(back.gif);background-repeat:repeat-x} </style> </head> <body> ³ª´Â ÇÒ ¼ö ÀÖ´Ù </body> </html>
|
<body style="background-image:url(back.gif);background-repeat:repeat-x">³ª´Â ÇÒ ¼ö ÀÖ´Ù</font> | | |
<FORM>½ÇÇàȸé</FORM>
¡Ø background-attachment
ÀÌ ¿É¼Ç¶ÇÇÑ À̹ÌÁö ¹è°æ¿¡ ÇÑÇؼ ¾µ¼ö ÀÖ´Â ¿É¼ÇÀÔ´Ï´Ù. ¸»±×´ë·Î '¹è°æÀ» ºÙÀÌ´Â'¿ªÇÒÀ» Çϴµ¥ ȸéÀÌ Ä¿¼ ½ºÅ©·ÑÀ» ÇÒ °æ¿ì ¹è°æÀº µû¶ó¼ ¿òÁ÷ÀÌÁö ¾Ê°í °íÁ¤µÇ¾î ÀÖ´ä´Ï´Ù. µû¶ó¼ ¿É¼Ç°ªÀº fixedÀÌÁÒ.
ÀÌ°ÍÀº <body>ű׿¡¼ bgproperties=fixed¿Í ¿ªÇÒÀº °°À¸³ª ½ºÅ¸ÀϽÃÆ®´Â Á»´õ ´Ù¾çÇÑ Å±׿¡¼ ¾²ÀÏ ¼ö ÀÖ´Ù´Â°Ô ÀåÁ¡ÀÔ´Ï´Ù.
embeded¹æ½Ä |
inline¹æ½Ä |
<html> <head> <title>½ºÅ¸ÀϽÃÆ® ¿¹Á¦</title> <style type="text/css"> body {background-image:url(back.gif);background-attachment:fixed} </style> </head> <body> HTML TUTORÀÇ ½ºÅ¸ÀÏ°ÁÂÀÔ´Ï´Ù<br> ÀÌÇØÇϱ⠽±ÁÒ?<br> ÀÌ·¸°Ô ÀÏÀÏÈ÷ ½ÇÇàȸé±îÁö<br> º¸¿©ÁÖ¸é¼<br> °Á¸¦ ÇÏ´Â »çÀÌÆ® º¸¼Ì³ª¿ä?<br> Áö±ÝÀº<br> background-attachment:fixed<br> ÀÇ ¿¹Á¦Àε¥<br> ȸéÀ» ½ºÅ©·Ñ Çغ¸¼¼¿ä<br> ¹è°æÀº °íÁ¤µÇ¾îÀÖÁÒ?<br> </body> </html>
|
<body style="background-image:url(back.gif);background-attachment:fixed">HTML TUTORÀÇ ½ºÅ¸ÀÏ°ÁÂÀÔ´Ï´Ù<br> ÀÌÇØÇϱ⠽±ÁÒ?<br> ÀÌ·¸°Ô ÀÏÀÏÈ÷ ½ÇÇàȸé±îÁö<br> º¸¿©ÁÖ¸é¼<br> °Á¸¦ ÇÏ´Â »çÀÌÆ® º¸¼Ì³ª¿ä?<br> Áö±ÝÀº<br> background-attachment:fixed<br> ÀÇ ¿¹Á¦Àε¥<br> ȸéÀ» ½ºÅ©·Ñ Çغ¸¼¼¿ä<br> ¹è°æÀº °íÁ¤µÇ¾îÀÖÁÒ?<br> </font> | | |
<FORM>½ÇÇàȸé</FORM>
ÀÌ»óÀÔ´Ï´Ù. ¹è°æÁ¦¾î¿¡ °üÇÑ ½ºÅ¸ÀϽÃÆ®¿¡ °üÇÑ ¿É¼ÇÀº ³¡³µ½À´Ï´Ù. ÀÌ°Í¿Ü¿¡ ¿É¼ÇÀÌ ´õ ÀÖ´ÂÁö´Â ¸ð¸£°ÚÀ¸³ª Á¦°¡ ´Ù¸¥¿É¼ÇÀº ±â¾ïÀÌ ¾È³ª´Â °É·Î ºÁ¼´Â ÀÖ¾îºÃÀÚ º°·Î Áß¿äÇÏÁö ¾ÊÀº °ÍÀÏ°Ì´Ï´Ù. ¤Ñ¤Ñ;
ÀÚ, Á¦°¡ ³Ê¹« ÇÑÂÊ Å±׿¡¸¸ ¿¹Á¦¸¦ º¸¿©ÁÖ´Â °Í °°¾Æ¼ ÀÌ ¹è°æ¿É¼ÇÀ» ´Ù¸¥ ű׿¡ Àû¿ë½ÃÄÑ º¸°Ú½À´Ï´Ù.
À̹ø¿¡´Â inline¹æ½Ä¸¸ ¿¹¸¦ µé¾îº¼°Ô¿ä. embeded±îÁö ÀûÀ¸·Á´Ï ³Ê¹« °ø°£À» ¸¹ÀÌ Â÷ÁöÇϳ׿ä.--; ±Ã±ÝÇÏ¸é ¿©·¯ºÐµéÀÌ Á÷Á¢ embeded¹æ½ÄÀ¸·Î ¿¬½ÀÇغ¸¼¼¿ä. ±×Á¤µµ ³ë·ÂÀº ÀÖ¾î¾ß°ÚÁÒ?
ÀÚ, ¿ÞÂÊÀº inline¼Ò½ºÀÌ°í ¿À¸¥ÂÊÀº ½ÇÇàȸéÀÔ´Ï´Ù.
¹öÆ°À» ¸¸µå´Â <input>ÅÂ±×¿Í ÅؽºÆ® °ø°£À» ¸¸µå´Â <textarea>ű׸¦ Àú·¸°Ô ´Ù¾çÇÏ°Ô º¯È½ÃÄÑ ºÃ½À´Ï´Ù. ÁøÂ¥ ´ë´ÜÇÏÁö ¾Ê³ª¿ä?
°¡Àå À§¿¡°ÍÀº ´Ü»ö¹è°æÀ» ³ë¶õ»öÀ¸·Î ÁØ °ÍÀÌ°í
µÎ¹ø° °ÍÀº °Å±â¿¡´Ù Àú¹ø¿¡ ¹è¿î ÆùÆ®»ö»óÀ» Á¶ÀýÇÏ´Â ¿É¼Ç color¸¦ Ãß°¡ÇÑ°Ì´Ï´Ù.
¼¼¹ø°´Â ¹öÆ°¿¡´Ù°¡ À̹ÌÁö¹è°æÀ» ÁØ °ÍÀÌ°í
³×¹ø°´Â °Å±â¿¡´Ù°¡ ÆùÆ®»ö»ó Á¶Àý¿É¼ÇÀÎ color¸¦ »¡°£»öÀ¸·Î ÁöÁ¤ÇÑ °æ¿ìÀÔ´Ï´Ù.
´Ù¼¸¹ø°´Â <textarea>ÀÇ ¹è°æÀ» ½ºÅ¸ÀϽÃÆ®·Î ÁØ °æ¿ìÁö¿ä
ÀÌ·±½ÄÀ¸·Î Àú¹ø½Ã°£¿¡ ¹è¿î ¿É¼Ç±îÁö µ¿¿øÇØ °¡¸é¼ ÀÀ¿ëÇØ º¸¼¼¿ä. È¿°ú°¡ ¹«±Ã¹«Áø ÇÒ°Ì´Ï´Ù. ¹°·Ð ´Ù¸¥ ű׿¡´Ù°¡ Àû¿ë½ÃÄѵµ µÇ°ÚÁÒ