 |
|
|  |
¸¶Áø(margin)°ú ÆÐµù(padding)ÀÇ »ç¿ë¹ý ¹× Â÷ÀÌÁ¡ |
|
|
 |
13³â Àü
|
CSS¿¡¼ ¿©¹é¿¡ °ü·ÃµÈ ¼Ó¼ºÀº µÎ°¡Áö°¡ Àִµ¥ ¹Ù·Î ¸¶Áø(margin)°ú ÆÐµù(padding)ÀÔ´Ï´Ù. marginÀº ¿ÜºÎ ¿©¹éÀÇ Å©±â¸¦ Á¤Çϰí paddingÀº ¾ÈÂÊ ¿©¹éÀ» ÁöÁ¤ÇØ ÁÝ´Ï´Ù. ±×·³ ÀÌÁ¦ºÎÅÍ ÀÚ¼¼È÷ ¾Ë¾Æº¸µµ·Ï ÇϰڽÀ´Ï´Ù.
1. »ç¿ë¹ý
¸¶Áø°ú ÆÐµùÀº "¾ÈÂÊ¿©¹é", "¿ÜºÎ¿©¹é" À̶ó´Â Â÷ÀÌÁ¡ÀÌ ÀÖÀ» »Ó µÑÀÇ »ç¿ëÇÏ´Â ¹æ½ÄÀº °°½À´Ï´Ù. ´ÜÀ§´Â ÀϹÝÀûÀ¸·Î pxÀ» »ç¿ëÇÕ´Ï´Ù
margin-top:40px; /* »ó´Ü 40px ¿©¹é */
margin-bottom:40px; /* ÇÏ´Ü 40px ¿©¹é */
margin-right:40px; /* ¿ìÃø 40px ¿©¹é */
margin-left:40px; /* ÁÂÃø 40px ¿©¹é */
ÀÌ·±½ÄÀ¸·Î À§Ä¡¸¦ Á÷Á¢ ÁöÁ¤Çؼ »ç¿ëÇϰųª ¾Æ·¡¿Í °°ÀÌ ¼öÄ¡¸¸ ÀÔ·ÂÇØ¼ »ç¿ëÇÕ´Ï´Ù.
margin:40px; /* »ç¹æ 40px ¿©¹é */
margin:40px 50px; /* »óÇÏ 40px, Á¿ì 50px ¿©¹é */
margin:20px 40px 30px; /* »ó´Ü 20px, Á¿ì 40px, ÇÏ´Ü 30px ¿©¹é */
margin:20px 50px 40px 30px; /* »ó´Ü 20px, ¿ìÃø 50px, ÇÏ´Ü 40px, ÁÂÃø 30px ¿©¹é */
paddingÀÇ »ç¿ë¹ýÀº margin¿¡ ÆÐµùÀ¸·Î¸¸ ¹Ù²Ù¾î ÀûÀ¸¸é µË´Ï´Ù.
paddingÀ» »ç¿ëÇÒ¶§´Â À¯ÀÇÇØ¾ßÇÒ Á¡ÀÌÀÖ½À´Ï´Ù. margin(¿ÜºÎ¿©¹é)Àº ±×³É »ç¿ëÇØµµ ·¹À̾ƿô¿¡´Â º° ÁöÀåÀ» ¾ÈÁÖÁö¸¸ paddingÀ» »ç¿ëÇÒ ¶§´Â Ç¥ Å©±â¸¦ »ý°¢Çذ¡¸ç °ªÀ» Áà¾ß ·¹À̾ƿô¿¡ ÀÌ»óÀÌ ¾ø°Ô µË´Ï´Ù. ¸¸¾à ǥũ±â´Â ±×´ë·Î À¯ÁöÇÑä padding(¾ÈÂÊ¿©¹é)À» 5px¸¸Å ÁÖ·Á¸é Ç¥ÀÇ ³Êºñ(width)¿Í ³ôÀÌ(height)¸¦ °¢°¢ 5px¸¸Å ÁÙ¿©ÁÖ¼¼¿ä.
|
|
̵̧ : 281 |
̵̧
¸ñ·Ï
|
|
|  |
|