ȨÀ¸·Î | ¹«·áȸ¿ø°¡ÀÔ | ¾ÆÀ̵ð/ºñ¹øÃ£±â
ÃßõÀ½¾Ç¹æ¼Û
CSS Layout ¼öÆò & ¼öÁ÷ Á¤·Ä
1³â Àü
Elements °¡¿îµ¥ Á¤·Ä
<div>¿Í °°Àº ¡°Block¡± Element¿¡ width°¡ ¼³Á¤µÅÀÖ´Â °æ¿ì margin: auto; ¸¦ »ç¿ëÇØ ¼öÆòÀ¸·Î °¡¿îµ¥ Á¤·Ä ÇÒ ¼ö ÀÖ´Ù.
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Âü°í: width ¼Ó¼ºÀÌ ¼³Á¤µÇ¾î ÀÖÁö ¾Ê°Å³ª 100%·Î ¼³Á¤µÇ¾î ÀÖÀ¸¸é °¡¿îµ¥ Á¤·ÄµÇÁö ¾ÊÀ½.
Text °¡¿îµ¥ Á¤·Ä
Text Element´Â text-align: center; ¸¦ »ç¿ëÇØ ¼öÆòÀ¸·Î °¡¿îµ¥ Á¤·Ä ÇÒ ¼ö ÀÖ´Ù.
.center {
text-align: center;
border: 3px solid green;
}
Image °¡¿îµ¥ Á¤·Ä
Image´Â ¿ÞÂÊ, ¿À¸¥ÂÊ marginÀ» auto·Î ¼³Á¤Çϰí display: block; À¸·Î ¼³Á¤ÇÏ¸é µÈ´Ù.
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
ÁÂ/¿ìÃø Á¤·Ä — Using position
position: absolute; ¼³Á¤ ÈÄ right ¶Ç´Â left °ªÀ» 0À¸·Î ¼³Á¤ÇØ ÁÂ/¿ìÃø Á¤·ÄÇÒ ¼ö ÀÖ´Ù.
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Âü°í: absolute·Î ¼³Á¤ÇÑ element´Â Á¤»ó È帧¿¡¼­ Á¦°ÅµÇ¾î ´Ù¸¥ element¿Í °ãÄ¥ ¼ö ÀÖ´Ù.
ÁÂ/¿ìÃø Á¤·Ä — Using float
float: right; ¶Ç´Â float: left ¼Ó¼ºÀ» »ç¿ëÇØ ÁÂ/¿ìÃø Á¤·ÄÇÒ ¼ö ÀÖ´Ù.
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Âü°í: floatÀÌ ¼³Á¤µÈ element´Â ¸» ±×´ë·Î ºØ ¡°¶° Àִ¡± »óÅ·Π±× Å©±â°¡ »óÀ§ ÄÁÅ×ÀÌ³Ê elementº¸´Ù Ŭ °æ¿ì ÄÁÅ×ÀÌ³Ê ¹ÛÀ¸·Î overflow µÇ¾î º¸ÀδÙ. ÀÌ´Â ¡°clearfix¡± hackÀ» ÅëÇØ ÇØ°áÇÒ ¼ö ÀÖ´Ù.
¼öÁ÷À¸·Î °¡¿îµ¥ Á¤·Ä — Using padding
padding °ªÀ¸·Î top, bottom¿¡ ¿©À¯°ø°£À» ÁÖ¾î ¼öÁ÷À¸·Î °¡¿îµ¥ Á¤·ÄÇÒ ¼ö ÀÖ´Ù.
.center {
padding: 70px 0;
border: 3px solid green;
}
¼öÁ÷À¸·Î °¡¿îµ¥ Á¤·Ä — Using line-height
height¿Í line-height °ªÀ» µ¿ÀÏÇÏ°Ô ¼³Á¤ÇÏ´Â Æ®¸¯À¸·Î °¡¿îµ¥ Á¤·ÄÇÒ ¼öµµ ÀÖ´Ù.
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
¼öÁ÷À¸·Î °¡¿îµ¥ Á¤·Ä — Using position & transform
position: absolute; ·Î ¼³Á¤ÇØ ºÎ¸ð element·ÎºÎÅÍ top: 50% ¶³¾îÁø ÈÄ ÀÚ½ÅÀÇ heightÀÇ 50% ¸¸Å­ À§·Î ¿Ã¶ó°¡¸é ¼öÁ÷À¸·Î °¡¿îµ¥ Á¤·Ä µÈ´Ù.
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
ÃßõÃßõ : 61 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
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°¡Áö
 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.