Javascript & JQuery & CSS > ¿©¹éó¸® - padding , margin , box-sizing µî·ÏÀÏ : 2017-07-14 17:24 Á¶È¸¼ö : 53,129HTML ¿ä¼Ò´Â ¹Ú½º(box)·Î ÀÌ·ç¾îÁ® ÀÖ½À´Ï´Ù. ¹Ú½º À§¿¡ ¹Ú½º¸¦ ¾ñ°Å³ª ¹Ú½ºµéÀ» ¹è¿ÇÏ¿© ¹®¼¸¦ ¸¸µé¾î ³ª°©´Ï´Ù.
¿¹¸¦ µé¾î ´ÙÀ½°ú °°ÀÌ Äڵ带 ÀÛ¼ºÇß´Ù¸é
body ¹Ú½º À§¿¡ header ¹Ú½º°¡ ÀÖ°í, header ¹Ú½º À§¿¡ h1 ¹Ú½º°¡ ÀÖ´Â °ÍÀÔ´Ï´Ù.1. ¹Ú½ºÀÇ ±¸¼º ÇϳªÀÇ ¹Ú½º´Â ¹Ù±ù ¿©¹é ¿µ¿ª, Å׵θ® ¿µ¿ª, ¾ÈÂÊ ¿©¹é ¿µ¿ª, ³»¿ë ¿µ¿ªÀ¸·Î ±¸¼ºµË´Ï´Ù. ´ÙÀ½Àº °¢ ¿µ¿ªÀ» »ìÆ캸±â À§ÇÑ °£´ÜÇÑ ¿¹Á¦ÀÔ´Ï´Ù. »öÀÌ ÀÖ´Â ¸ðµç ¿µ¿ªÀÌ h1 ¿ä¼ÒÀÔ´Ï´Ù. °¢ »öÀÌ ³ªÅ¸³»´Â ¿µ¿ªÀº ´ÙÀ½°ú °°½À´Ï´Ù. ¨ç : ¹Ù±ù ¿©¹é ¿µ¿ª(Margin Area) ¨è : Å׵θ® ¿µ¿ª(Border Area) ¨é : ¾ÈÂÊ ¿©¹é ¿µ¿ª(Padding Area) ¨ê : ³»¿ë ¿µ¿ª(Content Area) °¢ ¿µ¿ªÀ» ²Ù¹Ð ¶§ »ç¿ëÇÏ´Â ¼Ó¼ºÀº ´ÙÀ½°ú °°½À´Ï´Ù. .¹Ù±ù ¿©¹é : margin ¼Ó¼º .Å׵θ® : border ¼Ó¼º .¾ÈÂÊ ¿©¹é : padding ¼Ó¼º .¹Ú½ºÀÇ °¡·Î Å©±â : width ¼Ó¼º .¹Ú½ºÀÇ ¼¼·Î Å©±â : height ¼Ó¼º .¹Ú½ºÀÇ Å©±â ±âÁØ : box-sizing ¼Ó¼º .¹Ú½ºÀÇ ¹è°æ : background ¼Ó¼º 2. padding - Å׵θ®¿Í ¹®´Ü°£°Ý ¾ÈÂÊ ¿©¹é paddingÀº HTMLÅ×ÀÌºí¿¡¼ ´Ù·é cellpadding¿Í °°Àº ¿ªÈ°À» ÇÑ´ä´Ï´Ù. ¹®´ÜÀÇ ¾ÈÂÊ ¿©¹éÀ» ³ªÅ¸³À´Ï´Ù. padding-top : ÀÂÊ padding-bottom : ¾Æ·§ padding-left : ¿ÞÂÊ padding-right : ¿À¸¥ÂÊ {padding:°ª1(»óÇÏÁÂ¿ì ¸ðµÎÇØ´ç)} {padding:°ª1(»óÇÏ),°ª2(Á¿ì)} {padding:°ª1(»ó),°ª2(Á¿ì),°ª3(ÇÏ)} {padding:°ª1(»ó),°ª2(¿ì),°ª3(ÇÏ),°ª4(ÁÂ)} 3. margin margin ¼Ó¼ºÀº ¹Ù±ùÂÊ ¿©¹éÀ» ³ªÅ¸³À´Ï´Ù. margin-top : top margin-right : right margin-bottom : bottom margin-left :left ¾Æ·¡ Ç¥´Â Å×½ºÆ® Çغ» ¿¹Á¦ ¼³¸í ÀÔ´Ï´Ù. margin ¼Ó¼ºÀ» »ç¿ëÇÏ¿© center Á¤·Ä ÇÏ´Â ¹æ¹ý block ¿ä¼ÒµéÀº left, right margin "auto" ¸¦ »ç¿ëÇؼ center-align(°¡¿îµ¥ Á¤·Ä) ÇÒ¼ö ÀÖ´Ù. .center { margin-left: auto; margin-right: auto; margin:auto; width: 50%; height:200px; background-color: #b0e0e6; }
div ¼Ó¼º Áß¾ÓÁ¤·Ä ¿¹Á¦ ÀÔ´Ï´Ù.
¸¸¾à width °ªÀÌ 100%¸é center-align È¿°ú°¡ ¾ø´Ù. 4. box-sizing - ¹Ú½ºÀÇ Å©±â ±âÁØ ¸¸¾à ³×¸ð³ ¿µ¿ªÀÇ ¿ä¼Ò°¡ Á¸ÀçÇÏ°í ±× ¿µ¿ªÀÇ Å©±â°¡ width °ªÀÌ 300px ±×¸®°í height °ªÀÌ 300px À̶ó°í °¡Á¤Çغ¸°Ú½À´Ï´Ù. À̶§ Á¤ÇØÁø width °ª°ú height °ªÀº ³»ºÎÀÇ padding ¶Ç´Â border¿¡ ¿µÇâÀ» ¹Þ¾Æ »ç¿ëÀÚ°¡ ¼³Á¤ÇÑ À§ °ªº¸´Ù ´õ Ä¿Áö´Â °æ¿ì°¡ »ý±æ ¼ö ÀÖ½À´Ï´Ù. ÀÌ ¶§ cssÀÇ box-sizing ¼Ó¼ºÀº ¹Ú½º ÇüÅ ·¹À̾î´Â Å©±â¸¦ °áÁ¤ÇÏ´Â ¹æ¹ýÀ» °áÁ¤ÇÏ¸ç ³»ºÎ ¿µ¿ªÀÇ padding, border °ªÀ» Àüü width ¶Ç´Â height¿¡ Æ÷ÇÔ½ÃųÁö¸¦ ¼±ÅÃÇÒ ¼ö ÀÖ°ÔÇÕ´Ï´Ù. box-sizing ¼Ó¼º ¼±Åà °¡´É °ª 1. box-sizing: content-box; // ±âº»¼³Á¤°ªÀ¸·Î padding, border ¿µ¿ªÀ» Á¦¿ÜÇÑ Å©±â¸¦ width, height·Î°¡Áü 2. box-sizing: border-box; // padding ¶Ç´Â border ¿µ¿ªÀ» Æ÷ÇÔÇÏ¿© width, height¸¦ °áÁ¤ ¿©±â¼, content-box´Â ±âº»°ªÀÔ´Ï´Ù. border-box¸¦ »ç¿ëÇÒ °æ¿ì ³»ºÎ ·¹À̾îÀÇ °íÁ¤µÈ °ª¿¡ ¿µÇâÀ» ¹ÌÄ¡´Â ´Ù¸¥ ¿ä¼Ò¸¦ ¹èÁ¦ÇÒ ¼ö ÀÖ½À´Ï´Ù. Áï border-box¸¦ »ç¿ëÇÏ¸é ¾ðÁ¦µçÁö ¶È°°Àº Å©±â¸¦ °¡Áö´Â ·¹À̾ƿôÀ» ¸¸µé ¼ö ÀÖ´Ù´Â Å« ÀåÁ¡ÀÌ ÀÖ½À´Ï´Ù. ´Ù½Ã ¸»ÇØ width 200px·Î ¼³Á¤½Ã Ç×»ó 200pxÀ» À¯ÁöÇØÁÝ´Ï´Ù.
|