ȨÀ¸·Î | ¹«·áȸ¿ø°¡ÀÔ | ¾ÆÀ̵ð/ºñ¹øÃ£±â
ÃßõÀ½¾Ç¹æ¼Û
CSS ¸¶Áø(margin) ¼Ó¼º, ÆÐµù(padding) ¼Ó¼º
11³â Àü

- CSS ¹Ú½º ¸ðµ¨


CSS ¿¡¼­´Â °¢°¢ÀÇ ¿ä¼Ò¿¡ »ý¼ºµÈ »ç°¢Çü ¿µ¿ªÀ» '¹Ú½º'¶ó°í Ç¥ÇöÇÏ°í ³×¿µ¿ªÀ¸·Î ±¸¼ºµÈ´Ù.


•¿ä¼Ò¿¡ Æ÷ÇÔµÈ '³»¿ë'(content)
•³»¿ë°ú º¸´õ »çÀÌÀÇ ¿©¹éÀÎ 'ÆÐµù'(padding)
•Å׵θ®¼±À» Ç¥½ÃÇÏ´Â 'º¸´õ'(border)
•º¸´õ¿Í ´Ù¸¥ ¿ä¼Ò »çÀÌÀÇ ¿©¹éÀÎ '¸¶Áø'(margin)


¹Ú½ºÀÇ Æø°ú ³ôÀÌ´Â ¾Æ·¡¿Í °°ÀÌ °è»ê


•¹Ú½ºÀÇ Æø = Á¿ìÀÇ ¸¶Áø + Á¿ìÀÇ Å׵θ® + Á¿ìÀÇ ÆÐµù + ³»ºÎ¿µ¿ªÀÇ Æø
•¹Ú½ºÀÇ ³ôÀÌ = »óÇÏÀÇ ¸¶Áø + »óÇÏÀÇ Å׵θ® + »óÇÏÀÇ ÆÐµù + ³»ºÎ¿µ¿ªÀÇ ³ôÀÌ



- ¸¶Áø(margin) °ü·Ã¼Ó¼º



•¼Ó¼º : margin-top, margin-right, margin-bottom, margin-left
•°ª : ±æÀÌ, ÆÛ¼¾Æ®, auto, inherit
•±âº»°ª : 0
•Àû¿ë´ë»ó : ¸ðµç ¿ä¼Ò(Ç¥ ³»ºÎ¿ä¼ÒÁ¦¿Ü)


p{  
margin-top: 15px;  
margin-right: 10px;  
margin-bottom: 15px;  
margin-left: 10px;
}

¶Ç´Ù¸¥ ¹æ¹ýÀº ¸¶Áø°ªÀ» Àϰý ÁöÁ¤ ÇÒ¼ö°¡ ÀÖ´Ù. °ªÀº °ø¹é¹®ÀÚ·Î ±¸ºÐÇÏ¿© º¹¼öÁöÁ¤ÇÒ ¼ö ÀÖ°í ÁöÁ¤ÇÏ´Â °ª¿¡ µû¶ó Àû¿ë´ë»óÀÌ ´Þ¶óÁø´Ù.


•°ªÀÌ ÇÑ °³ : '»óÇÏÁ¿ì'
•°ªÀÌ µÎ °³ : '»óÇÏ' 'Á¿ì'
•°ªÀÌ ¼¼ °³ : '»ó' 'Á¿ì' 'ÇÏ'
•°ªÀÌ ³× °³ : '»ó' '¿ì' 'ÇÏ' 'ÁÂ'



p{
margin: 10px;
}
p{
margin: 10px 10px;
}
p{
margin: 10px 10px 10px;
}
p{
margin: 10px 10px 10px 10px;
}


¸¶Áø°ú ºí·Ï ·¹º§ ¿ä¼Ò Áß¾Ó Á¤·Ä


ºí·Ï ·¹º§ ¿ä¼ÒÀÇ Á¿츶Áø °ª¿¡ 'auto'¸¦ ÁöÁ¤Çϸé Áß¾Ó Á¤·Ä ÇÒ¼ö ÀÖ´Ù.


/* div Áß¾ÓÁ¤·Ä ½Ã۱â */
div#test1{  
width: 700px;  
margin-right: auto;  
margin-left: auto;
}
div#test2{  
width: 700px;  
margin:0 auto;
}


- ÆÐµù(padding) °ü·Ã¼Ó¼º



•¼Ó¼º : padding-top, padding-right, padding-bottom, padding-left
•°ª : ±æÀÌ, ÆÛ¼¾Æ®, auto, inherit
•±âº»°ª : 0
•Àû¿ë´ë»ó : ¸ðµç ¿ä¼Ò(Å×ÀÌºí °ü·Ã ¿ä¼Ò Áß ¼¿ ¿ä¼Ò ÀÌ¿Ü Á¦¿Ü)

p{  
padding-top: 5px;  
padding-right: 5px;  
padding-bottom: 5px;  
padding-left: 5px;
}

¶Ç´Ù¸¥ ¹æ¹ýÀº ÆÐµù°ªÀ» Àϰý ÁöÁ¤ ÇÒ¼ö°¡ ÀÖ´Ù. °ªÀº °ø¹é¹®ÀÚ·Î ±¸ºÐÇÏ¿© º¹¼öÁöÁ¤ÇÒ ¼ö ÀÖ°í ÁöÁ¤ÇÏ´Â °ª¿¡ µû¶ó Àû¿ë´ë»óÀÌ ´Þ¶óÁø´Ù.


•°ªÀÌ ÇÑ °³ : '»óÇÏÁ¿ì'
•°ªÀÌ µÎ °³ : '»óÇÏ' 'Á¿ì'
•°ªÀÌ ¼¼ °³ : '»ó' 'Á¿ì' 'ÇÏ'
•°ªÀÌ ³× °³ : '»ó' '¿ì' 'ÇÏ' 'ÁÂ'



p{
padding: 10px;
}
p{
padding: 10px 10px;
}
p{
padding: 10px 10px 10px;
}
p{
padding: 10px 10px 10px 10px;
}
ÃßõÃßõ : 277 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
3,030
 Á¦ÀÌÄõ¸® ±âº» ¸í·É¾î
3,029
 À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
3,028
 ¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
3,027
 [HTML5]¿¡¼­ frameset ´ëü ¹æ¹ý°ú iframe ¼Ó¼º
3,026
 HTML <Audio> »ç¿ë¹ý
3,025
 À©µµ¿ì10 ½Ã½ºÅÛÆÄÀÏ ¼Õ»ó (Ãʰ£´Ü ¿À·ù º¹±¸¹æ¹ý!!)
3,024
 PHP ÆÄÀÏ Á¸Àç ¿©ºÎ ÆÄ¾ÇÇϱâ(·ÎÄà ÆÄÀÏ Á¸Àç ¹× ¿ø°ÝÁö ÆÄÀÏ Á¸Àç)
3,023
 [CSS] ¹Ú½º ¼¼·Î °¡¿îµ¥ Áß¾Ó Á¤·Ä 6°¡Áö
3,022
 CSS Layout ¼öÆò & ¼öÁ÷ Á¤·Ä
3,021
 ¿©·¯ µµ¸ÞÀÎµé °£ ÄíŰ °øÀ¯Çϱâ
3,020
 ÅÂ±× »çÀÌ¿¡ ÀÖ´Â ÅØ½ºÆ®¸¦ ÃßÃâ
3,019
 [JQuery] textbox focus on offÀ϶§ ¼ýÀÚ ÄÞ¸¶ º¸¿©ÁÖ±â
3,018
 ÄíŰ »ý¼º,°¡Á®¿À±â,»èÁ¦
3,017
 »ç¿ëÀÚ ÇÔ¼ö ¸ðÀ½
3,016
 ¸¶¿ì½º,Űº¸µå Á¦ÇÑ ( ¿À¸¥ÂÊŬ¸¯,µå·¡±×,¿µ¿ª¼±Åõî..)
3,015
 [HTML5] <video> - DOMÀ¸·Î Á¦¾îÇϱâ
3,014
 HTML5 video ű׿¡¼­ ¿µ»ó Á¿ì¹ÝÀü
3,013
 PHP - ƯÁ¤ ÅÂ±× ¹× ¹®ÀÚ¿­ ÃßÃâ, Á¦°Å
3,012
 [PHP] define°ú definedÀÇ Â÷ÀÌ
3,011
 ¿ìŬ¸¯ ¿Ïº®Â÷´Ü ½ºÅ©¸³Æ®
3,010
 iframe ³ôÀÌ 100% ¸ÂÃß±â
3,009
 curl ÇÔ¼ö¸¦ ÀÌ¿ëÇÑ HTTP REFERER º¯°æ
3,008
 À©µµ¿ì10 ½Ã½ºÅÛ ÆÄÀÏ ¹× Dism °Ë»ç
3,007
 ÅؽºÆ® ÁٹٲÞ, ±ÛÀÚÀÚ¸£±â CSS
3,006
 jQuery Mobile¿¡¼­ À¯¿ëÇÑ ÄÚµå 10°¡Áö.
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æÄ§
Copyright (C) musictrot All rights reserved.