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

[CSS] ¹Ú½º ¼¼·Î °¡¿îµ¥ Áß¾Ó Á¤·Ä 6°¡Áö
3³â Àü
1. position: absolute; 50%·Î ¹Ð°í px·Î ´ç±â±â.
//html 1¹ø~3¹ø
<div class="box">
Àú´Â ºÎ¸ðÀÇ ¼¼·Î Áß¾Ó¿¡ À§Ä¡ÇÒ ¿¹Á¤ÀÔ´Ï´Ù :D
</div>
//css
.box {
position:absolute;
top:50%; left:50%;
margin-top:-100px; margin-left:-100px;
width:200px; height:200px;
}
¡Ø °¡¿îµ¥ Á¤·Ä½ÃÅ°°í ½ÍÀº ´ë»óÀ» ¿ÞÂÊ, À§·ÎºÎÅÍ ¹Ý(50%) À§Ä¡·Î ¹Ð¾î³½ ÈÄ ´ë»óÀÇ Å©±â Àý¹Ý °ª¸¸Å­ ´ç±â´Â ¹æ¹ý. °¡Àå Åë»óÀûÀÎ(?) ¹æ¹ý.
- ÀåÁ¡ : ¸·Èû¾ø´Â ÇÏÀ§ ¹öÀü ȣȯ.
- ´ÜÁ¡ : ´ë»óÀÇ width, height °ªÀÌ À¯µ¿ÀûÀÌÁö ¾Ê´Ù. (px·Î °íÁ¤ ÈÄ ¹Ý ±æÀ̸¸Å­ ´ç°ÜÁÖ¾î¾ß ÇϹǷÎ!!)

​2. position: absolute; 50%·Î ¹Ð°í
translateÀ¸·Î ´ç±â±â.
//css
.box {
position:absolute;
top:50%; left:50%;
transform: translate(-50%, -50%);
}
¡Ø ¸¶Âù°¡Áö·Î ¹Ý(50%) À§Ä¡·Î ¹Ð¾î³½ ÈÄ ´ë»óÀÇ Å©±â Àý¹Ý °ª¸¸Å­ ´ç±â´Â ¹æ¹ý.
- ÀåÁ¡ : width¿Í height°¡ °íÁ¤µÇÁö ¾Ê¾Æµµ »ç¿ë °¡´ÉÇÏ´Ù.
- ´ÜÁ¡ : transformÀÇ Å©·Î½º ºê¶ó¿ì¡ÀÌ ¾È ÁÁ´Ù. prefix ÇÊ¿ä. IE 8 ÀÌÇÏ´Â Àû¿ëµÇÁö ¾Ê´Â´Ù.

3. position ¸ðµç ¹æÇâ¿¡¼­ ´ç±â´Â ¹æ¹ý.
//css
.box {
position:absolute;
top:0; left:0; bottom:0; right:0;
height:10%; // ÀÓÀÇ·Î ÁØ Å©±â.
margin:10% auto;
}
¡Ø div¸¦ ¸ðµç ¹æÇâ¿¡¼­ ´ç±ä ÈÄ( À̶§ div´Â Àü È­¸é¿¡ ²Ë Â÷°Ô µÈ´Ù.) height °ªÀ» ÁÖ¸é Àüü ºÎ¸ðÀÇ °¡¿îµ¥¿¡ À§Ä¡ÇÏ°Ô µÊ.
- ÀåÁ¡ : Å©±â°¡ °¡º¯ÀûÀÎ ¹Ú½º¸¦ ¼¼·Î Áß¾Ó Á¤·ÄÇÒ ¼ö ÀÖ´Ù.
- ´ÜÁ¡ : IE7 ÀÌÇÏ´Â ÀÛµ¿ÇÏÁö ¾Ê´Â´Ù.

​4. table-cell·Î ¸¸µé¾î ¼¼·Î Áß¾Ó Á¤·Ä ½ÃÅ°±â.
//html
<div class="wrapper">
<div class="box">
<div>Àú´Â ºÎ¸ðÀÇ ¼¼·Î Áß¾Ó¿¡ À§Ä¡ÇÒ ¿¹Á¤ÀÔ´Ï´Ù :D</div>
</div>
</div>
//css
.wrapper {
display:table;
}
.box {
display:table-cell;
vertical-align:middle;
}
¡Ø Àüü °¨½Ñ ¹Ú½º¸¦ table·Î ¸¸µç ÈÄ ¾ÈÀÇ ¹Ú½º¸¦ table-cell·Î ¸¸µé¾î ±× ¾ÈÀÇ °³Ã¼¸¦ vertical-align:middle·Î Áß¾Ó Á¤·Ä ½ÃÅ°´Â ¹æ¹ý. ÇÑ ÁÙ¿¡ ¿©·¯ ¿ä¼Ò¸¦ ³Ö¾î¾ß ÇÒ ¶§´Â display: table ´ë½Å display: inline-tableÀ» »ç¿ëÇÒ ¼öµµ ÀÖ´Ù.
- ÀåÁ¡ : Å©±â°¡ °¡º¯ÀûÀÎ ¹Ú½º¸¦ ¼¼·Î Áß¾Ó Á¤·ÄÇÒ ¼ö ÀÖ´Ù.
.wrapperÀÇ °ø°£ÀÌ ¾ø¾îµµ ³»¿ëÀÌ À߸®Áö ¾Ê´Â´Ù.
- ´ÜÁ¡ : IE7 ÀÌÇÏ´Â ÀÛµ¿ÇÏÁö ¾Ê´Â´Ù. ¾à°£ ÅÂ±× ´Ü°è°¡ ±í¾îÁø´Ù.

5. float ¼Ó¼ºÀ» ÀÌ¿ëÇÏ´Â ¹æ¹ý.
//html
<body>
<div id="floater"></div>
<div id="box"> Content Here </div>
</body>
//css
body { height: 500px; }
#floater {
float:left;
height:50%;
margin-bottom:-120px;
}
#box {
clear:both;
height:240px;
position:relative;
}
¡Ø floater¶ó´Â º¸ÀÌÁö ¾Ê´Â div¸¦ bodyÀÇ 50%ÀÇ ³ôÀ̸¦ °®°Ô ÇÑ´Ù. ±× ¹Ù·Î ¾Æ·¡¿¡ clear ¼Ó¼ºÀ» ³ÖÀº box°¡ À§¿¡ floater¹ØÀ¸·Î ¿À°ÔÇϸé ÀÚ±â Å©±âÀÇ ¹Ý¸¸Å­ Áß°£¿¡¼­ floaterÀÇ marginÀ¸·Î ´ç°ÜÁö°Ô µÈ´Ù.
* margin-top À̳ª margin-left´Â À½¼ö °ªÀ¸·Î ´ç±â¸é ½º½º·Î°¡ ±× ¹æÇâÀ¸·Î ´ç°ÜÁöÁö¸¸, right³ª bottomÀº º»ÀÎÀÌ ¾Æ´Ñ ±× ´ÙÀ½¿¡ ¿À´Â ¿ä¼Ò°¡ ´ç°ÜÁö°Ô ÇÑ´Ù.
- ÀåÁ¡ : ¸ðµç ºê¶ó¿ìÀú¿¡¼­ ÀÛµ¿ÇÑ´Ù.
- ´ÜÁ¡ : °ø°£ÀÌ Á¼À» ¶© ÄÜÅÙÃ÷°¡ À߸®°í ½ºÅ©·Ñ¹Ù°¡ ³ªÅ¸³­´Ù.

6. :before·Î °¡»ó ÄÜÅÙÃ÷¸¦ ³Ö¾î Áß¾Ó Á¤·Ä ½ÃÅ°±â.
//html
<div class="wrapper">
<div class="box"> Àú´Â ºÎ¸ðÀÇ ¼¼·Î Áß¾Ó¿¡ À§Ä¡ÇÒ ¿¹Á¤ÀÔ´Ï´Ù. :D</div>
</div>
//css
.wrapper {
height: 100%;
text-align: center;
}
.wrapper:before {
content: ""; display: inline-block;
width: 1px; height: 100%;
margin-right: 0; vertical-align: middle;
}
.box {
display: inline-block; vertical-align: middle;
}
¡Ø 100% ³ôÀ̸¦ °¡Áø ºÎ¸ðÀÇ ¾Õ¿¡, 100% ³ôÀ̸¦ °¡Áø ¹Ú½º Çϳª¸¦ ³õ´Â´Ù. ±× ¹Ú½º¿¡ vertical-align:middleÀ» Á༭ ±× ¾ÈÀÇ ¹Ú½º°¡ ¼¼·Î °¡¿îµ¥ Á¤·Ä µÇµµ·Ï ÇÏ´Â °Í.
- ÀåÁ¡ : Å©±â°¡ °¡º¯ÀûÀÎ ¹Ú½º¸¦ ¼¼·Î Áß¾Ó Á¤·ÄÇÒ ¼ö ÀÖ´Ù.
- ´ÜÁ¡ : IE7 ÀÌÇÏ´Â ÀÛµ¿ÇÏÁö ¾Ê´Â´Ù.

ÃßõÃßõ : 120 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
425
MySQL Áߺ¹µÈ µ¥ÀÌÅ͸¦ »èÁ¦
424
MySQL Áߺ¹ µ¥ÀÌÅÍ È®ÀÎ
423
¾ÆÀÌÇÁ·¹ÀÓ(iframe) Àüüȭ¸é °¡´ÉÇÏ°Ô Çϱâ
422
ºÎÆ®½ºÆ®·¦(bootstrapk)¿¡¼­ »ç¿ëÇÏ´Â class¸í Á¤¸®
421
ºÎÆ®½ºÆ®·¦ CSS
420
Å©·Ò¿¡¼­ ¸¶Áø Á¶Àý
419
À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
418
¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
[CSS] ¹Ú½º ¼¼·Î °¡¿îµ¥ Áß¾Ó Á¤·Ä 6°¡Áö
416
CSS Layout ¼öÆò & ¼öÁ÷ Á¤·Ä
415
[JQuery] textbox focus on offÀ϶§ ¼ýÀÚ ÄÞ¸¶ º¸¿©ÁÖ±â
414
[HTML5] <video> - DOMÀ¸·Î Á¦¾îÇϱâ
413
HTML5 video ű׿¡¼­ ¿µ»ó Á¿ì¹ÝÀü
412
ÅؽºÆ® ÁٹٲÞ, ±ÛÀÚÀÚ¸£±â CSS
411
jQuery Mobile¿¡¼­ À¯¿ëÇÑ ÄÚµå 10°¡Áö.
410
jQuery Mobile¿¡¼­ À¯¿ëÇÑ ÄÚµå 10°¡Áö.
409
[jQuery]¹öÆ° È°¼ºÈ­, ºñÈ°¼ºÈ­
408
jQuery show() / hide() / toggle() »ç¿ë¹ý
407
jquery ¿©·¯°¡Áö À̺¥Æ®
406
³×À̹ö ¿ÀÇÂAPI À½¼ºÇÕ¼º API »ç¿ëÇÏ´Â PHP »ùÇÃÄÚµå
405
[CSS] - Input clear `X ` ¹öÆ° Á¦°Å ( IE, Chrome, Firefox )
404
[Mobile] - ¸ð¹ÙÀÏÀ¥ Href ű׼Ӽºµé
403
jQuery ¿À¸¥ÂÊ ¿µ¿ªÀÇ ³ôÀ̸¦ ¿ÞÂÊ ¿µ¿ªÀÇ ³ôÀÌ¿Í µ¿ÀÏÇÏ°Ô Çϱâ
402
jquery¿¡¼­ Å×ÀÌºí¿¡ ¸¶¿ì½º ¿À¹ö½Ã ÇØ´ç ÇàÀÇ ¹è°æ»ö»ó º¯°æÇϱâ
401
jquery ½ºÅ©¸³Æ®³» ƯÁ¤°ª È®ÀÎÇϱâ (µð¹ö±ë)
400
jquery cookie (jquery.cookie.js)
399
jquery ´Ù¸¥¹öÀü Ãß°¡ »ç¿ë½Ã Ãæµ¹ ¹æÁö (Ä«Æä24 ½º¸¶Æ®µðÀÚÀÎ ±âº»³»Àå jquery 1.4.4 ¹öÀü°ú Ãæµ¹½Ã ÇØ°á¹æ¹ý)
398
[jQuery] animate()¿¡¼­ stop()ÀÇ Á߿伺
397
javascript audioÆÄÀÏ Àç»ý
396
[jQuery.$ajax]mysql + php ¼­¹ö¿¡¼­ json µ¥ÀÌÅÍ ¾ò¾î¿À±â
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.