¹ÝÀÀÇüÀ¥¿¡ ´ëÇÑ ¹Ìµð¾îÄõ¸®ÀÇ »ç¿ë | ¹øÈ£ : 553 ¹ø±Û Á¶È¸ : 665 ȸ |
±×·¡µµ ¸ÕÀú µð¹ÙÀ̽ºº° Çػ󵵿¡ ´ëÇؼ ±Ã±ÝÇÑ »ç¶÷ÀÌ ÀÖÀ» ¼ö ÀÖÀ¸´Ï ½Å»ó µð¹ÙÀ̽º±îÁö ¾÷µ¥ÀÌÆ®¸¦ Àß ÇØÁÖ°í ÀÖ´Â »çÀÌÆ®¸¦ 2°³ °øÀ¯ÇÏ°í ³Ñ¾î °©´Ï´Ù.
¹ÝÀÀÇüÀ¥À» Àû¿ëÇϱâ À§Çؼ´Â ¸ÕÀú meta viewport¸¦ ¼³Á¤ÇØ Áà¾ß ÇÕ´Ï´Ù.
meta viewportÀÇ width
¸¦ device-width
·Î ÁöÁ¤ÇÏ°í initial-scale
À» 1
·Î ¼³Á¤À» ÇØ Áà¾ß ÇÕ´Ï´Ù.
width=device-width
: ȸéÀÇ ³ÐÀ̸¦ µð¹ÙÀ̽º(´Ü¸»±â)ÀÇ ³ÐÀÌ·Î ÁöÁ¤initial-scale=1
: ±âº» »çÀÌÁ 1·Î ÁöÁ¤ÇÏ°Ú´Ù°í ¼±¾ð<meta name="viewport" content="width=device-width, initial-scale=1">
ÀÌ·¸°Ô ¼³Á¤ÇÏ¸é ´Ù¾çÇÑ Å©±âÀÇ È¸é¿¡¼µµ º¸±â¿¡ ÆíÇÑ ÅؽºÆ® Å©±â¿Í ·¹À̾ƿôÀ» À¯ÁöÇØ ÁÝ´Ï´Ù.
±âº»¼³Á¤À» ÇßÀ¸¸é À̹ø¿¡ ´Ù¾çÇÑ Å©±â(ÇØ»óµµ)ÀÇ µð¹ÙÀ̽º¿¡ µû¶ó CSS°¡ ´Ù¸£°Ô Àû¿ëµÉ ¼ö ÀÖ°Ô ¹Ìµð¾îÄõ¸®(Media Query)¸¦ ÁöÁ¤ÇØ¾ß ÇÕ´Ï´Ù.
Breakpoints´Â ºÎÆ®½ºÆ®·¦(Bootstrap)À» ÂüÁ¶ÇÏ¿´À¸¸ç ±×¿¡ ÇØ´çÇÏ´Â ¹Ìµð¾îÄõ¸®´Â ¾Æ·¡¿Í °°ÀÌ °¡·Î Çػ󵵿¡ µû¶ó 5°¡Áö·Î ±¸ºÐÇÒ ¼ö ÀÖ½À´Ï´Ù.
¹ÝÀÀÇü À¥°³¹ß¿¡ ÀÖ¾î¼ °í·ÁÇØ¾ß ÇÒ Á¡ÀÌ Àִµ¥ ¸ð¹ÙÀÏ ÆÛ½ºÆ® ·Î °³¹ßÀ» ÇÒ °ÍÀÌ³Ä ÇÏ´Â °ÍÀÔ´Ï´Ù.
¸ð¹ÙÀÏ ÆÛ½ºÆ® °³¹ßÀº È¸é ±¸Çö ½Ã ¸ÕÀú ¸ð¹ÙÀÏ È¸éÀ» ±âÁØÀ¸·Î µðÀÚÀÎ(CSS)À» ÇÏ°í Â÷Ãû ÅÂºí¸´ ȸé, µ¥½ºÆ®Å¾ ȸéÀ¸·Î µðÀÚÀÎÀ» ±¸ÇöÇÏ´Â °ÍÀ» ¸»ÇÕ´Ï´Ù.
¹ÝÀÀÇü À¥°³¹ß ½Ã ±Ù·¡ÀÇ Ãß¼¼´Â ¸ð¹ÙÀÏ ÆÛ½ºÆ®·Î °³¹ßÇÏ´Â Ãß¼¼À̱ä ÇÕ´Ï´Ù¸¸ »óȲ¿¡ µû¶ó¼ µ¥½ºÅ©Å¾ ÆÛ½ºÆ®(»ç½Ç µ¥½ºÅ©Å¾ ÆÛ½ºÆ®¶ó´Â ¸»À» Àß ¾²Áö´Â ¾Ê½À´Ï´Ù.)·Î °³¹ßÇÏ´Â °æ¿ìµµ ºó¹øÇÕ´Ï´Ù.
¹ÝÀÀÇü À¥°³¹ß¿¡ ÀÖ¾î¼ ¸ð¹ÙÀÏ ÆÛ½ºÆ® °³¹ßÀº ±Ù·¡¿¡ ¼±È£µÇ´Â ¹æ¹ýÀÔ´Ï´Ù.
¸ð¹ÙÀÏ ÆÛ½ºÆ®·Î °³¹ßÇÒ °æ¿ì´Â ¹Ìµð¾îÄõ¸®µµ max-width
°¡ ¾Æ´Ï¶ó min-width
¹æ½ÄÀ¸·Î ÁöÁ¤ÇÏ¿© »ç¿ëÇÏ°í CSSÀÇ Override Ư¼ºÀ» È°¿ëÇÏ¿© ¹Ìµð¾îÄõ¸®¸¦ ÀÛ¼ºÇÏ¸é µË´Ï´Ù.
576px
º¸´Ù ÀÛÀº ¸ðµç µð¹ÙÀ̽º¸¦ ±âº»À¸·Î CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù.576px
º¸´Ù Å« °æ¿ìÀÇ ¸ð¹ÙÀÏ µð¹ÙÀ̽º¿¡ ´ëÇÑ CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù.768px
º¸´Ù Å« °æ¿ìÀÇ Å×ºí¸´ µð¹ÙÀ̽º¿¡ ´ëÇÑ CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù.992px
º¸´Ù Å« °æ¿ìÀÇ µ¥½ºÅ©Å¾¿¡ ´ëÇÑ CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù.1200px
º¸´Ù Å« °æ¿ìÀÇ µ¥½ºÅ©Å¾¿¡ ´ëÇÑ CSS¸¦ ÀÛ¼º ÇÕ´Ï´Ù.// ±âº» CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù. (¼¼·Î¸ðµå ¸ð¹ÙÀÏ µð¹ÙÀ̽º)
// ±âº»À¸·Î ÀÛ¼ºµÇ´Â CSS´Â 576pxº¸´Ù ÀÛÀº ȸ鿡¼ ÀÛµ¿ µË´Ï´Ù.
// °¡·Î¸ðµå ¸ð¹ÙÀÏ µð¹ÙÀ̽º (°¡·Î Çػ󵵰¡ 576px º¸´Ù Å« ȸ鿡 Àû¿ë)
@media (min-width: 576px) { ... }
// ÅÂºí¸´ µð¹ÙÀ̽º (°¡·Î Çػ󵵰¡ 768px º¸´Ù Å« ȸ鿡 Àû¿ë)
@media (min-width: 768px) { ... }
// Å×½ºÅ©Å¾ (°¡·Î Çػ󵵰¡ 992px º¸´Ù Å« ȸ鿡 Àû¿ë)
@media (min-width: 992px) { ... }
// Å«È¸é µ¥½ºÅ©Å¾ (°¡·Î Çػ󵵰¡ 1200px º¸´Ù Å« ȸ鿡 Àû¿ë)
@media (min-width: 1200px) { ... }
¸¸¾à@media (min-width: 768px) { ... }
±îÁö¸¸ ÀÛ¼ºÇÏ°í@media (min-width: 992px) { ... }
¿Í @media (min-width: 1200px) { ... }
¿¡ ´ëÇÑ ¹Ìµð¾îÄõ¸®¸¦ ÀÛ¼ºÇÏÁö ¾Ê¾Ò´Ù¸é@media (min-width: 768px) { ... }
¿¡ Á¤ÀÇµÈ CSS°¡ Å×½ºÅ©Å¾°ú ūȸéÀÇ µ¥½ºÅ©Å¾ÀÇ Å©±â¿¡µµ µ¿ÀÏÇÏ°Ô Àû¿ëÀÌ µË´Ï´Ù.
¸ð¹ÙÀÏÆÛ½ºÆ®¿¡ ¹Ý´ëµÇ´Â °³¹ß ¹æ¹ýÀ¸·Î ¿¹Àü¿¡ ¸¹ÀÌ »ç¿ëµÇ¾ú´ø ¹æ½ÄÀÔ´Ï´Ù. µ¥½ºÅ©Å¾ ȸéÀÌ Áß¿äÇϰųª ¶Ç´Â ±âÁ¸¿¡ °³¹ßµÇ¾î ÀÖ´ø µ¥½ºÅ©Å¾ ȸéÀÇ CSS¿¡ ¸ð¹ÙÀÏ È¸é¿¡ ´ëÇÑ Ãß°¡ °³¹ßÀ» ÇØ¾ß ÇÒ °æ¿ì¿¡ ¸¹ÀÌ »ç¿ëÇÕ´Ï´Ù. ÀÌ·²°æ¿ì ¸ð¹ÙÀÏ ÆÛ½ºÆ®·Î °³¹ßÇÏ´Â °Í°ú ¹Ý´ë·Î ¹Ìµð¾îÄõ¸®µµ min-width
°¡ ¾Æ´Ï¶ó max-width
¹æ½ÄÀ¸·Î ÁöÁ¤ÇÏ¿© »ç¿ë ÇÕ´Ï´Ù.
576px
º¸´Ù ÀÛÀº ¸ðµç µð¹ÙÀ̽º¸¦ ±âº»À¸·Î CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù.576px
º¸´Ù Å« °æ¿ìÀÇ ¸ð¹ÙÀÏ µð¹ÙÀ̽º¿¡ ´ëÇÑ CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù.768px
º¸´Ù Å« °æ¿ìÀÇ Å×ºí¸´ µð¹ÙÀ̽º¿¡ ´ëÇÑ CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù.992px
º¸´Ù Å« °æ¿ìÀÇ µ¥½ºÅ©Å¾¿¡ ´ëÇÑ CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù.1200px
º¸´Ù Å« °æ¿ìÀÇ µ¥½ºÅ©Å¾¿¡ ´ëÇÑ CSS¸¦ ÀÛ¼º ÇÕ´Ï´Ù.// ¼¼·Î¸ðµå ¸ð¹ÙÀÏ µð¹ÙÀ̽º (°¡·Î Çػ󵵰¡ 576px º¸´Ù ÀÛÀº ȸ鿡 Àû¿ë)
@media (max-width: 575px) { ... }
// °¡·Î¸ðµå ¸ð¹ÙÀÏ µð¹ÙÀ̽º (°¡·Î Çػ󵵰¡ 768px º¸´Ù ÀÛÀº ȸ鿡 Àû¿ë)
@media (max-width: 767px) { ... }
// ÅÂºí¸´ µð¹ÙÀ̽º (°¡·Î Çػ󵵰¡ 992px º¸´Ù ÀÛÀº ȸ鿡 Àû¿ë)
@media (max-width: 991px) { ... }
// Å×½ºÅ©Å¾ (°¡·Î Çػ󵵰¡ 1200px º¸´Ù ÀÛÀº ȸ鿡 Àû¿ë)
@media (max-width: 1199px) { ... }
// ±âº» CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù.
// ±âº»À¸·Î ÀÛ¼ºµÇ´Â CSS´Â 1199pxº¸´Ù Å« ȸ鿡¼ ÀÛµ¿ µË´Ï´Ù.
¸¸¾à @media (max-width: 767px) { ... }
±îÁö¸¸ ÀÛ¼ºÇÏ°í@media (max-width: 575px) { ... }
¿¡ ´ëÇÑ ¹Ìµð¾îÄõ¸®¸¦ ÀÛ¼ºÇÏÁö ¾Ê¾Ò´Ù¸é..@media (max-width: 767px) { ... }
¿¡ Á¤ÀÇµÈ CSS°¡ ¼¼·Î¸ðµå ¸ð¹ÙÀÏ µð¹ÙÀ̽º¿Í °¡·Î¸ðµå ¸ð¹ÙÀÏ µð¹ÙÀ̽ºÀÇ Å©±â¿¡µµ µ¿ÀÏÇÏ°Ô Àû¿ëÀÌ µË´Ï´Ù.
³ª¸ÓÁö´Â CSSÀÇ Override±â´ÉÀ» »ç¿ëÇÏÁö ¾Ê°í ÁöÁ¤µÈ Çػ󵵸¦ ¼³Á¤ÇÏ¿© »ç¿ëÇÏ´Â ¹æ¹ýÀÔ´Ï´Ù.
¹Ìµð¾îÄõ¸®¸¦ °¡Àå ÀÛÀº ÇØ»óµµ¿Í °¡Àå Å« ÇØ»óµµÀÇ ¹üÀ§¸¦ ¸íÈ®È÷ ÁöÁ¤ÇÏ¿© »ç¿ë ÇÕ´Ï´Ù. ÀÌ·²°æ¿ì ¹Ìµð¾îÄõ¸®´Â min-width
¿Í max-width
¸¦ µ¿½Ã¿¡ ÁöÁ¤ÇÏ¿© »ç¿ë ÇÕ´Ï´Ù.
576px
º¸´Ù ÀÛÀº ¸ðµç µð¹ÙÀ̽º¸¦ ±âº»À¸·Î CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù.576px
º¸´Ù Å©°í 767px
º¸´Ù ÀÛÀº ¸ð¹ÙÀÏ µð¹ÙÀ̽º¿¡ ´ëÇÑ CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù.768px
º¸´Ù Å©°í 991px
º¸´Ù ÀÛÀº Å×ºí¸´ µð¹ÙÀ̽º¿¡ ´ëÇÑ CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù.992px
º¸´Ù Å«°í 1199px
º¸´Ù ÀÛÀº µ¥½ºÅ©Å¾¿¡ ´ëÇÑ CSS¸¦ ÀÛ¼ºÇÕ´Ï´Ù.1200px
º¸´Ù Å« °æ¿ìÀÇ µ¥½ºÅ©Å¾¿¡ ´ëÇÑ CSS¸¦ ÀÛ¼º ÇÕ´Ï´Ù.// ¼¼·Î¸ðµå ¸ð¹ÙÀÏ µð¹ÙÀ̽º (°¡·Î Çػ󵵰¡ 576px º¸´Ù ÀÛÀº ȸ鿡 Àû¿ë)
@media (max-width: 575px) { ... }
// °¡·Î¸ðµå ¸ð¹ÙÀÏ µð¹ÙÀ̽º (°¡·Î Çػ󵵰¡ 576pxº¸´Ù Å©°í 768px º¸´Ù ÀÛÀº ȸ鿡 Àû¿ë)
@media (min-width: 576px) and (max-width: 767px) { ... }
// ÅÂºí¸´ µð¹ÙÀ̽º (°¡·Î Çػ󵵰¡ 768pxº¸´Ù Å©°í 991px º¸´Ù ÀÛÀº ȸ鿡 Àû¿ë)
@media (min-width: 768px) and (max-width: 991px) { ... }
// µ¥½ºÅ©Å¾ (°¡·Î Çػ󵵰¡ 992pxº¸´Ù Å©°í 1199px º¸´Ù ÀÛÀº ȸ鿡 Àû¿ë)
@media (min-width: 992px) and (max-width: 1199px) { ... }
// Å«È¸é µ¥½ºÅ©Å¾ (°¡·Î Çػ󵵰¡ 1200px º¸´Ù Å« ȸ鿡 Àû¿ë)
ÀÌ Àü ±Û | robots ¹èÁ¦ |
´Ù À½ ±Û | ¹ÝÀÀÇü À¥¿¡¼ÀÇ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ¹ÝÀÀÇüÀ¸·Î »ç¿ëÇϱâ |
[°ü·Ã±Û] | ¾øÀ½ | ÀÛ¼ºÀϽà : 2021-01-29 14:03:30 |
Copyright(c) 2003 xirom all right reserved vol.3 Contact xirom@xirom.net form more information |