ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î

CSS (Cascading Style Sheets) ¿Ïº® ¸¶½ºÅÍ
13³â Àü
HTML Àº ÇϳªÀÇ ÇÁ·Î±×·¥ ¾ð¾îÀÔ´Ï´Ù. CSS ¿«½Ã ¸¶Âù°¡Áö·Î ÇϳªÀÇ ÇÁ·Î±×·¥ ¾ð¾îÀÔ´Ï´Ù.

ÇÁ·Î±×·¥ ¾ð¾î¶ó°í Çؼ­ ¹«Áö ¾î·Á¿ï°Å¶õ »ý°¢Àº ¹ö¸³½Ã´Ù. HTML Àº ºñ±³Àû ½¬¿ì¸é¼­µµ ¸¸¸¸ÇÑ ÇÁ·Î±×·¡¹Ö ¾ð¾îÀÔ´Ï´Ù. CSS ´Â HTML º¸´Ù ¾à°£ ¾î·ÆÁö¸¸, ¿«½Ã³ª ¸¸¸¸ÇÕ´Ï´Ù.

µµ´ëü ¿Ö CSS ¸¦ ¹è¿ö¾ßÇÏ´Â °É±î¿ä? HTML, FTP, ȨÆäÀÌÁö °èÁ¤, µîµî... °ñÄ¡¾ÆÇÂ°Ô Çѵΰ¡Áö°¡ ¾Æ´Ñµ¥, ²À ÀÌ ¸¸¸¸Çϸ鼭µµ ¸¸¸¸ÇÏÁö ¾ÊÀº CSS ±îÁö ÇؾßÇϴ°ɱî¿ä?

CSS ¸¦ ÀÍÇô¾ß Á¦´ë·ÎµÈ µðÀÚÀÎÀ» ÇÒ ¼ö ÀÖ½À´Ï´Ù. ¶ó°í ¿©·¯ºÐ²² »ç»ó ÁÖÀÔÀ» ÇÏÁö ¾Ê°Ú½À´Ï´Ù. »Ó¸¸¾Æ´Ï¶ó CSS ÀÍÈ÷¶ó°í ¿©·¯ºÐ²² ±ÇÇÏÁöµµ ¾Ê½À´Ï´Ù. ´Ù¸¸ CSS ÀÇ ÇнÀÀÌ ÇÊ¿äÇÑ °æ¿ì, º» ¹®¼­¸¦ ÅëÇؼ­ ÀûÀº ½Ã°£ÅõÀÚ·Î ¸¹Àº °ÍÀ» ¾òÀ» ¼ö Àֱ⸦ ¹Ù¶ø´Ï´Ù.



ÀÚ ¾îµð Çѹø ÇØ º¼±î¿ä?

º» ¹®¼­¿¡¼­ ½ºÅ¸ÀÏ ½ÃÆ®¿¡ ´ëÇÑ ¿Ïº®ÇÑ ³»¿ëÀ» ´ãÁö´Â ¾Ê½À´Ï´Ù. ±×·¯³ª ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ÀÌÇØÇϱâ À§ÇÑ ±âº» ÀûÀÎ Áö½ÄÀ» Àü´ÞÇÏ°í À̸¦ ¹ÙÅÁÀ¸·Î ÀÀ¿ëÇÏ¸ç ½ÇÀü¿¡ »ç¿ëÇÒ ¼ö ÀÖ´Â ±â¹ýµéÀ» ÃæºÐÈ÷ ¼³¸íÀ» ÇÒ °ÍÀÔ´Ï´Ù.

º» ¹®¼­¸¦ ¼÷ÁöÇÏÁö°í ÇÊ¿äÇÒ ¶§¸¶´Ù ¹Ýº¹Çؼ­ ÇнÀÇÏ½Ã¸é ¸¹Àº µµ¿òÀÌ µÇ¸®¶ó È®½ÅÇÕ´Ï´Ù.

Cascading Style Sheets ¾ð¾î´Â CSS ·Î Ç¥ÇöÀ» Çϸç W3C ¿¡¼­ Á¦Á¤ÇÏ°í ÀÖ½À´Ï´Ù. HTML °ú ÇÔ²² ¾î¶»°Ô CSS ¸¦ »ç¿ëÇÏ´ÂÁö¿¡ ´ëÇؼ­ ¿©·¯ºÐ²² º¸¿©µå¸®°Ú½À´Ï´Ù.

HTML Àº ´ëÃæ ¾Æ¹«·¸°Ô³ª ÀÛ¼ºÇصµ À¥ºê¶ó¿ìÀú¿¡¼­´Â ´ëÃæ º¸ÀÔ´Ï´Ù. ±×·¯³ª CSS ´Â Ʋ¸³´Ï´Ù. CSS ¿¡¼­´Â ¿¡·¯ÀÇ ¹ß»ý ºóµµ°¡ ³ôÀ¸¸ç ¶Ç ¿¡·¯°¡ ÀÖÀ¸¸é À¥ºê¶ó¿ìÀú¿¡ Àß Ç¥ÇöµÇÁö ¾Ê½À´Ï´Ù.

¿¡·¯¸¦ üũÇÏ´Â ÇÁ·Î±×·¥À¸·Î ´ëÇ¥ÀûÀÎ HTML Tidy °¡ ÀÖ½À´Ï´Ù. °ü½ÉÀÌ ÀÖÀ¸½Ã¸é »ìÆ캸½Ã±â ¹Ù¶ø´Ï´Ù.



[*] ½ÃÀÛ

¿ì¼± ±ÛÀÚÀÇ »ö±ò°ú ¹è°æÀÇ »ö±òÀ» º¯°æÇÏ´Â °ÍÀ¸·Î ºÎÅÍ ½ÃÀÛÀ» ÇØ º¼±î¿ä?

À̸¦ À§Çؼ­ STYLE ű׸¦ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ¾Æ·¡¿Í °°½À´Ï´Ù.

<style type="text/css">
body { color: black; background: white; }
</style>

style ű״ ½ÃÀÛÅÂ±×¿Í ³¡Å±װ¡ ÀÖÀ¸¸ç ±× »çÀÌ¿¡ ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÏ´Â ¹®ÀåÀÌ µé¾î°©´Ï´Ù.

±×·¡°í ´ëºÎºÐÀÇ °æ¿ì style ű״ HTML ¹®¼­ÀÇ HEAD ºÎºÐ¿¡ ±â·ÏÀ» ÇÕ´Ï´Ù. °¡´ÉÇÑÇÑ HEAD ºÎºÐ¿¡ ±â·ÏÀ» ÇؾßÇÕ´Ï´Ù. ±×°ÍÀÌ Ç¥ÁØÀÔ´Ï´Ù. ¾î¿ ¼ö ¾ø´Â °æ¿ì, BODY ¾È¿¡ ³Ö¾îµµ ´ëºÎºÐÀÇ °æ¿ì Àß µ¿ÀÛÇÕ´Ï´Ù.

µû¶ó¼­ ´ÙÀ½°ú °°ÀÌ ÇÒ ¼ö ÀÖ½À´Ï´Ù.

<html>
<head>
<title> replace with your document's title </title>
<style type="text/css"> body { color: black; background: white; } </style>
</head>
<body>

replace with your document's content

</body>
</html>

À§ HTML ¹®ÀåÀ» º¸½Ã¸é style ű×ÀÇ ½ÃÀÛÅÂ±×¿Í ³¡ÅÂ±× »çÀÌ¿¡ ½ºÅ¸ÀÏ ¹®ÀåÀÌ ±â·ÏµÇ¾ú½À´Ï´Ù.

À§ ¿¹Á¦¿¡¼­ <style type="text/css"> ¿¡¼­ type="text/css" ´Â ¾ø¾îµµ µË´Ï´Ù µû¶ó¼­ <style> ·Î ÁÙ¿©¼­ ¾µ ¼ö ÀÖ½À´Ï´Ù.

<style> °ú </style> »çÀÌ¿¡´Â ½ºÅ¸ÀÏ ¹®ÀåÀÌ µé¾î°©´Ï´Ù. ÀÌ ½ºÅ¸ÀÏ ¹®ÀåÀº ½ºÅ¸ÀÏ ±Ô°Ý¿¡ ¸Âµµ·Ï ±â·ÏÀÌ µÇ¾î¾ßÇÕ´Ï´Ù. ±×·¸Áö ¾ÊÀ¸¸é ¿¡·¯°¡ ¹ß»ýÇÏ¿©¼­ À¥ºê¶ó¿ìÀú¿¡ ¾î¶»°Ô º¸¿©ÁúÁö ¿¹ÃøÇÒ ¼ö°¡ ¾ø½À´Ï´Ù.

±ÔÄ¢Àº ÅÂ±× À̸§À¸·Î ½ÃÀÛÀ» Çϸç { ¿Í } »çÀÌ¿¡ ¼Ó¼ºÀÌ ±â·ÏµË´Ï´Ù.

À§ ¿¹¿¡¼­´Â body űװ¡ ¹Ù·Î ½ºÅ¸ÀÏ ¹®Àå¿¡¼­ »ç¿ëµÈ ű×ÀÔ´Ï´Ù. body ű״ À¥ÆäÀÌÁöÀÇ ÀüüÀûÀΠǥÇöÀ» ´ã´çÇÕ´Ï´Ù.

body { ...¼Ó¼º°ª ... }

À§ ¿Í °°ÀÌ ±â·ÏÀ» ÇÏ´Â °ÍÀÌÁÒ.

¼Ó¼ºÀ» ÁöÁ¤ÇÒ ¶§¿¡´Â ¼Ó¼º À̸§À» ¸ÕÀú ±â·ÏÇÏ°í ÄÝ·ÐÀ» ±â·ÏÇÏ¸ç ±× ´ÙÀ½¿¡ ¼Ó¼ºÀÇ °ªÀ» Àû¾îÁÖ¸é µË´Ï´Ù.
¿¹¸¦ µé¸é "color: white" ¿Í °°À» °æ¿ì color °¡ ¼Ó¼ºÀÌ¸ç ±× ´ÙÀ½¿¡ ÄÝ·ÐÀÌ ¿Ô½À´Ï´Ù. ±×¸®°í ¼Ó¼ºÀÇ °ªÀÎ white (Ä®¶ó °ª) °¡ ±â·ÏµÇ¾ú½À´Ï´Ù. ÀÌ °ÍÀÌ ÇϳªÀÇ ¼Ó¼ºÀ» ÁöÁ¤ÇÏ´Â °ÍÀÔ´Ï´Ù.

¼Ó¼ºÀ» ÁöÁ¤ÇÏ¿´À¸¸é ¸¶¹«¸®´Â ¼¼¹ÌÄÝ·ÐÀ¸·Î ÇÕ´Ï´Ù. Áï, "color: white;" ¿Í °°ÀÌ ³¡¿¡ ¼¼¹ÌÄÝ·ÐÀ» Àû¾îÁÖ´Â °ÍÀÌÁÒ.

ÇϳªÀÇ Å±׿¡ ¼Ó¼ºÀº ¿©·¯°³ ÁöÁ¤ÇÒ ¼ö ÀÖ½À´Ï´Ù.

body { color: white; }

ÀÌ·¸°Ô body ű׿¡ color ¶ó´Â ÇϳªÀÇ ¼Ó¼ºÀ» ÁöÁ¤ÇÑ ´ÙÀ½ ¶Ç ¼Ó¼ºÀ» ÁöÁ¤ÇÒ ¼ö ÀÖ½À´Ï´Ù. ¿¹¸¦ µé¸é ¾Æ·¡¿Í °°½À´Ï´Ù.

body { color:white; background: black; }

À§ ó·³ ÅÂ±× À̸§À» Àû°í ±× ´ÙÀ½¿¡ { ¸¦ ¾²°í, ¼Ó¼º À̸§ color ¸¦ ¾²°í, ÄÝ·ÐÀ» ¾²°í, ¼Ó¼º °ª white ¸¦ ¾²°í ¼Ó¼ºÀÇ ³¡À» ³ªÅ¸³»´Â ; ¸¦ ¾²°í, ´Ù½Ã »õ·Î¿î ¼Ó¼º À̸§ backgournd ¸¦ ¾²°í ÄÝ·ÐÀ» Âï°í ¼Ó¼º°ªÀ» ÁöÁ¤ÇÏ°í ¼¼¹ÌÄÝ·ÐÀ» Âî°í... ¼Ó¼ºÀ» ´Ù ÁöÁ¤ÇßÀ¸¸é } ¸¦ ¾²°í.... ÀÌ¿Í °°ÀÌ ÇϳªÀÇ ¹®Àå(±ÔÄ¢)À» ¸¸µé ¼ö°¡ ÀÖ½À´Ï´Ù.



[*] CSS ¸µÅ© ¿¬°á

ÁÁÀº ½ºÅ¸ÀÏ ½ÃÆ®°¡ ¸¸µé¾îÁ³´Ù¸é ¿©·¯ºÐÀ» ÀÌ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ´Ù¸¥ ¿©·¯ ÆäÀÌÁö¿¡¼­ ¾²°íÀÚ ÇÒ °ÍÀÔ´Ï´Ù. À̶§ °¡Àå ÁÁÀº ¹æ¹ýÀÌ ¹Ù·Î CSS ¸µÅ©¸¦ °Å´Â °ÍÀÔ´Ï´Ù.

¾Æ·¡ÀÇ Äڵ带 º¸½Ê½Ã¿À.

<link type="text/css" rel="stylesheet" href="style.css">

À§ ¸µÅ©¿Í °°ÀÌ ½±°Ô »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. link ű״ HEAD ºÎºÐ(<head> ¿Í </head> »çÀÌ)¿¡ ±â·ÏµÇ´Â °ÍÀÌ ÁÁ½À´Ï´Ù.

´ÙÀ½Àº HTML ¹®¼­ ¿¹Á¦ÀÔ´Ï´Ù.

<html>
<head>
<title> replace with your document's title </title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>

replace with your document's content

</body>
</html>


À§ ¿¹Á¦¸¦ º¸¸é ¾Ë ¼ö ÀÖµíÀÌ link ű״ HEAD ºÎºÐ¿¡ ±â·ÏÀÌ µÇ¾î ÀÖ½À´Ï´Ù.


link ű×ÀÇ rel ¼Ó¼ºÀº ¹Ýµå½Ã "stylesheet" ¶ó°í Ç¥±âµÇ¾î¾ßÇÕ´Ï´Ù. ±×·¡¾ß À¥ºê¶ó¿ìÀú°¡ ¿Ã¹Ù·Î ÀνÄÀ» ÇÕ´Ï´Ù.

href ¼Ó¼º¿¡´Â ½ºÅ¸ÀÏ ½ÃÆ® ÆÄÀÏÀÇ URL ÁÖ¼Ò¸¦ ±â·ÏÇÕ´Ï´Ù.

½ºÅ¸ÀÏ ½ÃÆ® ÆÄÀÏÀº ´ÙÀ½°ú °°½À´Ï´Ù.

/* style.css - a simple style sheet */
body {
margin-left: 10%; margin-right: 10%;
color: black; background: white;
}

½ºÅ¸ÀÏ ½ÃÆ® ÆÄÀÏÀº ´ÙÀ½°ú °°½À´Ï´Ù.

[*] ÆäÀÌÁö ¿©¹é

margin-left, margin-right ¼Ó¼ºÀ» ÅëÇؼ­ ¿ÞÂÊ ¿À¸¥ÂÊ ¿©¹éÀ» ÁÙ ¼ö ÀÖ½À´Ï´Ù.

´ÙÀ½°ú °°½À´Ï´Ù.

<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
</style>

À§ ±¸¹®Àº ¿ÞÂÊ, ¿À¸¥ÂÊÀ¸·Î 10% ¾¿ ¿©¹éÀ» ÁÖ°í ÀÖ½À´Ï´Ù.




[*] µé¿©¾²±â

Á¦¸ñ°ú Çì´õ¸¦ Á» ´õ Àß º¸ÀÌ°Ô ÇÏ·Á¸é ¾î¶²½ÄÀ¸·Îµç Ç¥ÇöÀ» ÇؾßÇÕ´Ï´Ù. BODY ÅÂ±× »Ó¸¸ ¾Æ´Ï¶ó H1, H2 µî¿¡µµ ¿©¹éÀ» Á־ µé¿©¾²±â¸¦ ÇÒ ¼ö ÀÖ½À´Ï´Ù.

´ÙÀ½°ú °°½À´Ï´Ù.

<PRE xml:space="preserve"><style type="text/css"> body { margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%;} h2,h3,h4,h5,h6 { margin-left: -4%; }</style></PRE>
À§ ¿¹Á¦´Â body ¿Í h1, ±×¸®°í h2 ºÎÅÍ h6 ±îÁö ÃÑ 3°¡Áö ±ÔÄ¢ÀÌ ÀÖ½À´Ï´Ù.

À¥ ÆäÀÌÁö¿¡¼­ body ºÎºÐÀº 10% ÀÇ ¿©¹éÀÌ ÀÖ½À´Ï´Ù. ¿©±â¿¡ h1 ű׿¡ À½¼ö·Î ¿©¹é °ªÀ» ÁöÁ¤ÇÏ¸é µé¿© ¾²±â ÇüÅ·ΠǥÇöÀÌ µË´Ï´Ù.


[*] »ó, ÇÏ ¿©¹é

margin-top ¼Ó¼ºÀº À§ÂÊ ¿©¹éÀ» ³ªÅ¸³»¸ç margin-bottom Àº ¾Æ·¡ÂÊ ¿©¹éÀ» ³ªÅ¸³À´Ï´Ù. H2 ű׿¡ ±âº»ÀûÀÎ ¿©¹éÀ» ÁöÁ¤Çϱâ À§Çؼ­´Â ¾Æ·¡¿Í °°ÀÌ ÇϸéµË´Ï´Ù.

h2 { margin-top: 8em; margin-bottom: 3em; }

À§ ±¸¹®¿¡¼­ em Àº font ÀÇ Å©±â¸¦ ÁöÁ¤Çϴµ¥ »ç¿ëµË´Ï´Ù. 1 em Àº ÆùÆ®ÀÇ ³ôÀ̸¦ ³ªÅ¸³À´Ï´Ù. À¥ºê¶ó¿ìÀú¸¶´Ù pixels À̳ª points ÀÇ ¼öÄ¡ °è»êÀÌ Æ²¸³´Ï´Ù. °¡Àå ¾ÈÀüÇÑ ¹æ¹ýÀº em ÀÇ »ç¿ëÀÔ´Ï´Ù.


À§ ¿¹Á¦ ó·³ ±ÔÄ¢À» ¸¸µé¸é ¸ðµç H2 ű׿¡ ¿©¹éÀÌ ÁöÁ¤µË´Ï´Ù. ƯÁ¤ H2 ű׿¡¸¸ ¿©¹éÀÌ ÁöÁ¤µÇ°Ô ÇÏ·Á¸é ±ÔÄ¢¿¡ À̸§À» Áö¾î¾ßÇÕ´Ï´Ù. ´ÙÀ½°ú °°ÀÌ ÇÒ ¼ö ÀÖ½À´Ï´Ù.

h2.subsection { margin-top: 8em; margin-bottom: 3em; }

±ÔÄ¢¿¡ À̸§À» Áþ´Â °ÍÀº ¸ÕÀú ÅÂ±× À̸§À¸·Î ½ÃÀÛÀ» ÇÕ´Ï´Ù. ±×¸®°í Á¡À» Âï°í ±ÔÄ¢ÀÇ À̸§À» ±â·ÏÇÕ´Ï´Ù.

À§ ó·³ ±ÔÄ¢À» ¸¸µé¸é h2 ű׿¡ subsection À̶ó´Â ±ÔÄ¢À» ¸¸µç °ÍÀÔ´Ï´Ù. ±×¸®°í ÀÌÀÇ »ç¿ëÀº ´ÙÀ½°ú °°ÀÌ ÇÕ´Ï´Ù.

<PRE xml:space="preserve"><h2 class="subsection">Getting started</h2></PRE>


[*] Ä®¶ó ÁöÁ¤

Ä®¶ó¸¦ ÁöÁ¤ÇÏ´Â ¿¹Á¦´Â óÀ½ÀÇ body ű׿¡ ³ªÅ¸³ª ÀÖ½À´Ï´Ù.

´ÙÀ½°ú °°½À´Ï´Ù.

body {
color: black;
background: white;
}
strong { color: red }

À§ ¿¹Á¦¸¦ º¸½Ã¸é °Ë»ö ±Û¾¾¿¡ Èò ¹ÙÅÁÀ» Ç¥ÇöÇÏ´Â ±ÔÄ¢À» Á¤ÇÑ °ÍÀÔ´Ï´Ù. strong ű״ ºÓÀº »öÀ¸·Î ±Û¾¾¸¦ Ç¥ÇöÇÕ´Ï´Ù.



[*] º¸´õ¿Í ¹é±×¶ó¿îµå ÁöÁ¤

À§ º¸´õ¸¦ ÁöÁ¤ÇÏ´Â °ÍÀº ½±½À´Ï´Ù. H1~H6, P ÅÂ±× »Ó¸¸¾Æ´Ï¶ó DIV µî °¢Á¾ ű׿¡ º¸´õ¸¦ ³ªÅ¸³¾ ¼ö ÀÖ½À´Ï´Ù. ´ÙÀ½ÀÇ ¿¹¸¦ º¸½Ê½Ã¿À.

div.box { border: solid; border-width: thin; width: 100% }

À§ ¿¹Á¦´Â div ű׿¡ »ç¿ëÇÒ box ¶ó´Â À̸§ÀÇ ±ÔÄ¢À» ¸¸µç °ÍÀÔ´Ï´Ù. ´ÙÀ½°ú °°ÀÌ »ç¿ëµÉ ¼ö ÀÖ½À´Ï´Ù.

<div class="box">
The content within this DIV element will be enclosed
in a box with a thin line around it.
</div>

º¸´õÀÇ Å¸ÀÔ¿¡´Â dotted, dashed, solid, groove, ridge, insert, outset µîÀÌ ÀÖ½À´Ï´Ù. border-width ¼Ó¼ºÀº º¸´õ¸¦ ±×¸± ³Êºñ¸¦ ³ªÅ¸³À´Ï´Ù. µÎ±ú´Â thin, medium, thick µîÀÌ ÀÖÀ¸¸ç 0.1em °ú °°ÀÌ Á÷Á¢ ÁöÁ¤ÇÒ ¼ö ÀÖ½À´Ï´Ù.

¹é±×¶ó¿îµå ÁöÁ¤¿¡ ´ëÇؼ­´Â ¸¹Àº ¿¹Á¦¸¦ º¸¿©µå·È½À´Ï´Ù.'

´ÙÀ½°ú °°ÀÌ background ¼Ó¼ºÀ» ÁöÁ¤Çϱ⸸ ÇϸéµË´Ï´Ù.

div.box { border: solid; border-width: thin; width: 100%; background: white; }




[*] ¸µÅ©¿¡ Ä®¶ó Ç¥Çö

URL ¸µÅ©¿¡ ¿©·¯ºÐÀÌ ¿øÇÏ´Â Ä®¶ó¸¦ ÁöÁ¤ÇÏ´Â °ÍÀ¸·Î CSS ¼³¸íÀ» ¸¶Ä¡°íÀÚ ÇÕ´Ï´Ù.

ÇÏÀÌÆÛ ÅؽºÆ® ¸µÅ©(hypertext links)¸¦ ¸¸µé¶§ °¢ µ¿ÀÛº°·Î »ö±òÀ» ´Ù¸£°Ô ÁöÁ¤ÇÒ ¼ö ÀÖ½À´Ï´Ù. ÀÌ¹Ì ¹æ¹®ÇÑ ¸µÅ©ÀÇ °æ¿ì »ö±ò, ¶Ç´Â ¸¶¿ì½º°¡ ¸µÅ©¸¦ °¡¸£Å³¶§ÀÇ »ö±ò µîÀ» Ç¥ÇöÇÒ ¼ö ÀÖ½À´Ï´Ù. ´ÙÀ½À» º¸½Ê½Ã¿À.



<PRE xml:space="preserve"> :link { color: rgb(0, 0, 153) } /* for unvisited links */ :visited { color: rgb(153, 0, 153) } /* for visited links */ a:active { color: rgb(255, 0, 102) } /* when link is clicked */ a:hover { color: rgb(0, 96, 255) } /* when mouse is over link */</PRE>
¸µÅ©¿¡ ³ªÅ¸³ª´Â ¾ð´õ¶ó(¹ØÁÙ)ÀÎÀ» ¾ø¾Ö°í ½Í´Ù¸é ¾Æ·¡¿Í °°ÀÌ ÇϽøéµË´Ï´Ù.

<PRE xml:space="preserve"> a.plain { text-decoration: none }</PRE>
´ÙÀ½°ú °°ÀÌ »ç¿ëÇϽøéµË´Ï´Ù.

<PRE xml:space="preserve">This is <a class="plain" href="what.html">not underlined</a></PRE>



ÀÌ»óÀ¸·Î CSS ¿¡ ´ëÇÑ ¼³¸íÀ» ¸¶Ä¥±îÇÕ´Ï´Ù.

Ãʺ¸ÀÚ°¡ óÀ½¿¡ ÀÍÇô¾ßÇÒ °Í Áß Áß¿äÇÑ °ÍÀº CSS ¸¦ ±ÔÄ¢À» ÀÛ¼ºÇÏ´Â ¹®¹ý°ú LINK ¸¦ °Å´Â ¹æ¹ý ±×¸®°í ½ÇÁ¦·Î ű׿¡ ÀÀ¿ëÀ» ÇÏ´Â °ÍÀÔ´Ï´Ù.



CSS ¿Í ÇÔ²² ´õ¿í ¶Ù¾î³­ À¥ÆäÀÌÁö¸¦ ÀÛ¼ºÇϱ⸦ ¹Ù¶ø´Ï´Ù.
ÃßõÃßõ : 309 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,885
input ÀÔ·Â ÇÊµå ¾ÕµÚ °ø¹é ½Ç½Ã°£ Á¦°Å
2,884
Placeholder Æ÷Ä¿½º½Ã °¨Ãß±â
2,883
MySQL Áߺ¹µÈ µ¥ÀÌÅ͸¦ »èÁ¦
2,882
MySQL Áߺ¹ µ¥ÀÌÅÍ È®ÀÎ
2,881
sessionStorage.getItem ¿Í sessionStorage.setItem
2,880
Á¦ÀÌÄõ¸® ·£´ýÀ¸·Î ¹è°æ»ö º¯°æ
2,879
preg match¿¡ °üÇÑ Á¤±Ô½Ä
2,878
Stream an audio file with MediaPlayer ¿Àµð¿À ÆÄÀÏ ½ºÆ®¸®¹Ö Çϱâ
2,877
Audio Streaming PHP Code
2,876
PHP $ SERVER ȯ°æ º¯¼ö Á¤¸®
2,875
Vimeo (ºñ¸Þ¿À) API ¸¦ »ç¿ëÇÏ¿© Ç÷¹À̾î ÄÁÆ®·ÑÇϱâ
2,874
iframe »ç¿ë½Ã ÇÏ´Ü¿¡ ¹ß»ýÇÏ´Â °ø¹é Á¦°Å¹æ¹ý
2,873
¾ÆÀÌÇÁ·¹ÀÓ(iframe) Àüüȭ¸é °¡´ÉÇÏ°Ô Çϱâ
2,872
ºÎÆ®½ºÆ®·¦(bootstrapk)¿¡¼­ »ç¿ëÇÏ´Â class¸í Á¤¸®
2,871
ºÎÆ®½ºÆ®·¦ CSS
2,870
Å©·Ò¿¡¼­ ¸¶Áø Á¶Àý
2,869
PHP ÇöÀç ÆäÀÌÁöÀÇ µµ¸ÞÀθíÀ̳ª urlµîÀÇ Á¤º¸ ¾Ë¾Æ¿À±â
2,868
PHP preg match all()
2,867
PHP ·Î À¥ÆäÀÌÁö ±Ü¾î¿À±â ¸ðµç ¹æ¹ý ÃÑÁ¤¸®!
2,866
[PHP] ¿ø°ÝÁö ÆÄÀÏ ÁÖ¼Ò ³ëÃâ ¾ÈÇÏ°í curl·Î ´Ù¿î·Îµå ¹Þ±â
2,865
PHP ÇÔ¼ö Á¤¸®
2,864
¾ÆÀÌÇÁ·¹ÀÓ(iframe) ºñÀ² À¯ÁöÇϸ鼭 Å©±â Á¶ÀýÇÏ´Â ¹æ¹ý
2,863
PHP ¹è¿­¿¡¼­ ¹«ÀÛÀ§·Î Çϳª »Ì¾ÆÁÖ´Â array rand() ÇÔ¼ö
2,862
PHP Á¤±Ô½Ä Á¤¸®
2,861
PHP Á¤±Ô½ÄÀ» È°¿ëÇÑ ÅÂ±× ¹× ƯÁ¤ ¹®ÀÚ¿­ Á¦°Å ¹× ÃßÃâ ¹æ¹ý
2,860
php Å©·Ñ¸µ ¶Ç´Â ÆÄ½Ì ÇÔ¼ö, Á¤±Ô½Ä ¸ðÀ½
2,859
Á¦ÀÌÄõ¸® ±âº» ¸í·É¾î
2,858
À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
2,857
¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
2,856
[HTML5]¿¡¼­ frameset ´ëü ¹æ¹ý°ú iframe ¼Ó¼º
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.