¹ÝÀÀÇü À¥ - ºäÆ÷Æ®(viewport) »ç¿ë¹ý | ¹øÈ£ : 550 ¹ø±Û Á¶È¸ : 433 ȸ |
¹ÝÀÀÇü À¥ (responsive web)À̶õ ÇϳªÀÇ À¥»çÀÌÆ®·Î µ¥½ºÅ©Å¾ PC, ½º¸¶Æ®Æù, ÅÂºí¸´ PC µî Á¢¼ÓÇÏ´Â µð½ºÇ÷¹ÀÌÀÇ Á¾·ù¿¡ µû¶ó ȸéÀÇ Å©±â°¡ ÀÚµ¿À¸·Î º¯Çϵµ·Ï ¸¸µç À¥ ÆäÀÌÁö¸¦ ¸»ÇÕ´Ï´Ù.
¹Ìµð¾î Äõ¸®´Â CSS3 ºÎÅÍ Áö¿øÀÌ µÇ´Â CSS±â¼ú·Î ¹Ìµð¾î ŸÀÔ, ȸé Å©±â µîÀ» ±âÁØÀ¸·Î ´Ù¸¥ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ Àû¿ëÇÒ ¼ö ÀÖµµ·Ï ÇØÁÝ´Ï´Ù. À̸¦ ÀÌ¿ëÇؼ ȸé Å©±â°¡ º¯ÇÒ¶§ ½ºÅ¸ÀÏÀ» ¹Ù²îµµ·Ï Çؼ ¹ÝÀÀÇü À¥À» ±¸ÇöÇÒ ¼ö ÀÖ½À´Ï´Ù.
¸ð¹ÙÀÏ À¥À» ÀÛ¼ºÇÏ°Ô µÇ¸é ºäÆ÷Æ®(viewport)¶ó´Â °ÍÀ» °í·ÁÇÏ°Ô µË´Ï´Ù. ºäÆ÷Æ®´Â À¥ÆäÀÌÁö°¡ »ç¿ëÀÚ¿¡°Ô º¸¿©Áö´Â ¿µ¿ªÀ» ¸»ÇÕ´Ï´Ù. µ¥½ºÅ©Å¾ PC¿¡¼ ºê¶ó¿ìÀúÀÇ Å©±â¸¦ ÁÙÀ̸é À¥ÆäÀÌÁöÀÇ ³»¿ëÀÌ ´Ùº¸¿©ÁöÁö ¾Ê°í ½ºÅ©·Ñ Çؼ ºÁ¾ß µÇ´Â °æ¿ì°¡ ÀÖ½À´Ï´Ù. À̶§µµ ºê¶ó¿ìÀú¿¡ º¸¿©Áö´Â ºÎºÐÀÌ ºäÆ÷Æ®ÀÔ´Ï´Ù. µ¥½ºÅ©Å¾ PC´Â ºê¶ó¿ìÀúÀÇ Å©±â¸¦ ¹Ù²ã¼ ºäÆ÷Æ®ÀÇ Å©±â¸¦ ¹Ù²Ü ¼ö ÀÖ´Â °ÍÀÔ´Ï´Ù.
¹Ý¸é¿¡ ÈÞ´ëÆùÀ̳ª ÅÂºí¸´ÀÇ °æ¿ì´Â ºê¶ó¿ìÀúÀÇ Å©±â¸¦ º¯°æÇÒ ¼ö °¡ ¾ø½À´Ï´Ù.(¿äÁòÀº ¸ÖƼºä¸¦ Áö¿øÇÏ´Â ±â±âµµ ÀÖÁö¸¸, ÀϹÝÀûÀÌÁö´Â ¾Ê½À´Ï´Ù.) ÇÏÁö¸¸, ¿ö³« ´Ù¾çÇÑ ±â±âµéÀÌ Á¸ÀçÇϱ⠶§¹®¿¡, ºäÆ÷Æ®ÀÇ Å©±âµµ ´Ù¾çÇÕ´Ï´Ù.
ÈÞ´ëÆùÀ̳ª ÅÂºí¸´ÀÌ ³ª¿À±â ÀÌÀüÀÇ À¥ÆäÀÌÁö´Â µ¥½ºÅ©Å¾ PC¿ëÀ¸·Î¸¸ ¸¸µé¾ú±â ¶§¹®¿¡ °íÁ¤µÈ Å©±â¸¦ °¡Áö´Â °ÍÀÌ ´ëºÎºÐÀÌ ¾ú½À´Ï´Ù. ÀÌ·¸°Ô °íÁ¤µÈ Å©±â¸¦ °¡Áø À¥ÆäÀÌÁö¸¦ ȸéÀÌ ÀÛÀº ÈÞ´ëÆù¿¡¼ º¸¸é ÇÑ È¸é¿¡ ´Ùº¸ÀÌÁö ¾Ê°Ô µË´Ï´Ù.
´ëºÎºÐÀÇ ÈÞ´ëÆùµî ¸ð¹ÙÀÏ ±â±âÀÇ À¥ºê¶ó¿ìÀú¿¡¼ À¥ÆäÀÌÁö°¡ ±×·ÁÁö´Â ·»´õ¸µ ¿µ¿ªÀº »ç¿ëÀÚ¿¡°Ô º¸¿©Áö´Â ¿µ¿ªÀÎ ºäÆ÷Æ® º¸´Ù Å®´Ï´Ù. 1024 x 768 »çÀÌÁî¿¡ °íÁ¤µÇ¾î ÀÖ´Â À¥ÆäÀÌÁö¸¦ 320 x 568 »çÀÌÁ °¡Áö´Â ¾ÆÀÌÆù¿¡¼ º¸¸é ½ºÅ©·ÑÇؾ߸¸ ¸ðµÎ¸¦ º¼ ¼ö°¡ ÀÖ½À´Ï´Ù.
±×·¡¼ ¸ð¹ÙÀÏ À¥ºê¶ó¿ìÀú°¡ ÃëÇÏ´Â ±âº»Á¤Ã¥Àº ¸ðµÎ¸¦ º¸¿©ÁÖ±â À§ÇØ È¸éÀ» ÁÙ¿©¼ º¸¿©ÁÖ´Â °ÍÀÔ´Ï´Ù. ÀÌ·¯ÇÑ Á¤Ã¥Àº ³»¿ë Àüü¸¦ º¼ ¼ö´Â ÀÖÀ¸³ª ±ÛÀÚ°¡ ³Ê¹« ÀÛ¾ÆÁ®¼ º¸±â ¾î·Á¿öÁö´Â ´ÜÁ¡ÀÌ ÀÖ½À´Ï´Ù.
HTML5¿¡¼ ¼Ò°³µÈ ºäÆ÷Æ® <meta> ű׸¦ »ç¿ëÇÏ¸é ¸ð¹ÙÀÏ ±â±â¿¡¼ ½ÇÁ¦ ·»´õ¸µµÇ´Â ¿µ¿ª°ú ºäÆ÷Æ®ÀÇ Å©±â¸¦ Á¶ÀýÇÒ ¼ö ÀÖ½À´Ï´Ù. ¶ÇÇÑ ÁÜ ·¹º§µµ Á¶Á¤ÇÒ ¼ö ÀÖ½À´Ï´Ù. ¾Æ·¡´Â °¡Àå ÀϹÝÀûÀ¸·Î »ç¿ëµÇ´Â ¼³Á¤ ÀÔ´Ï´Ù.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width=device-width : ÆäÀÌÁöÀÇ ³Êºñ¸¦ ±â±âÀÇ ½ºÅ©¸° ³Êºñ·Î ¼³Á¤ÇÕ´Ï´Ù. Áï, ·»´õ¸µ ¿µ¿ªÀ» ±â±âÀÇ ºäÆ÷Æ®ÀÇ Å©±â¿Í °°°Ô ¸¸µé¾î ÁÝ´Ï´Ù.
- initial-scale=1.0 : óÀ½ ÆäÀÌÁö ·Îµù½Ã È®´ë/Ãà¼Ò°¡ µÇÁö ¾ÊÀº ¿ø·¡ Å©±â¸¦ »ç¿ëÇϵµ·Ï ÇÕ´Ï´Ù. 0~10 »çÀÌÀÇ °ªÀ» °¡Áý´Ï´Ù.
ÀÌ°Í¿Ü¿¡µµ ´ÙÀ½°ú °°Àº °ªÀ» ÁöÁ¤ÇÒ ¼ö ÀÖ½À´Ï´Ù.
- minimum-scale : ÁÙÀÏ ¼ö ÀÖ´Â ÃÖ¼Ò Å©±â¸¦ ÁöÁ¤ÇÕ´Ï´Ù. 0~10 »çÀÌÀÇ °ªÀ» °¡Áý´Ï´Ù.
- maximum-scale : ´Ã¸± ¼ö ÀÖ´Â ÃÖ´ë Å©±â¸¦ ÁöÁ¤ÇÕ´Ï´Ù. 0~10 »çÀÌÀÇ °ªÀ» °¡Áý´Ï´Ù.
- user-scalable : yes ¶Ç´Â no °ªÀ» °¡Áö¸ç »ç¿ëÀÚ°¡ ȸéÀ» È®´ë/Ãà¼Ò ÇÒ ¼ö ÀÖ´ÂÁö´Â ÁöÁ¤ÇÕ´Ï´Ù.
À§ÀÇ ÁÜ ·¹º§Àº 1ÀÌ ¿ø·¡Å©±âÀÌ°í, 0.5 ¶ó¸é 50% Ãà¼Ò¸¦ ¶æÇÕ´Ï´Ù.
±×·¯¹Ç·Î À§ÀÇ ¼³Á¤Àº ÆäÀÌÁö ³Êºñ¸¦ ÈÞ´ë±â±â ȸé³Êºñ¿¡ ¸ÂÃß°í, óÀ½ ·Îµù½Ã ÁÜÀ» ÇÏÁö ¾Ê´Â °ÍÀÔ´Ï´Ù. Àû¿ëÇÑ °á°ú´Â ´ÙÀ½°ú °°½À´Ï´Ù.
À̹ÌÁö´Â ȸéÅ©±âº¸´Ù Å©¹Ç·Î ´Ù º¸ÀÌÁö ¾ÊÁö¸¸, ÅؽºÆ® ¿µ¿ªÀ» º¸¸é ȸé Å©±â¸¦ ³ÑÁö ¾Ê°í ¾Æ·¡·Î wrap µÇ´Â °ÍÀ» º¼ ¼ö ÀÖ½À´Ï´Ù. ½ÇÁ¦ ·»´õ¸µ ¿µ¿ª°ú ºäÆ÷Æ®ÀÇ Å©±â°¡ °°¾ÆÁø °ÍÀÔ´Ï´Ù.
À̹ÌÁö¿¡ ´ëÇؼ´Â ¸ð¹ÙÀÏ¿¡¼ »ç¿ëÇϱâ À§Çؼ´Â Á» ´õ 󸮰¡ ÇÊ¿äÇÕ´Ï´Ù. ȸéÀÌ Å¬ ¶§´Â ÀÚ½ÅÀÇ Å©±â¸¦ À¯ÁöÇÏ°í ȸéÀÌ À̹ÌÁöÀÇ Å©±âº¸´Ù ÀÛ¾ÆÁö¸é ȸéÅ©±â¿¡ ¸ÂÃç¼ Å©±â°¡ ÁÙ¾îµéµµ·Ï CSS¸¦ ÁöÁ¤ÇÒ ¼ö ÀÖ½À´Ï´Ù.
img {
width: 100%;
height: auto;
}
ÀÌ·¸°Ô ÁöÁ¤ÇÑ °á°ú ÀÔ´Ï´Ù.
µ¥½ºÅ©Å¾ PC¿Í ¸ð¹ÙÀÏ ±â±â¿¡¼ ÀûÀýÈ÷ º¸ÀÌ´Â ¹ÝÀÀÇü À¥À» ¸¸µé±â À§Çؼ´Â ºäÆ÷Æ® ¸ÞŸ ű׸¦ »ç¿ëÇϴ°ÍÀÌ ½ÃÀÛÀÌ µÇ°Ú½À´Ï´Ù.
¡ØÂüÁ¶ : https://www.w3schools.com/css/css_rwd_viewport.asp
Ãâó: https://offbyone.tistory.com/110 [½¬°í ½ÍÀº °³¹ßÀÚ]
ÀÌ Àü ±Û | ¹ÝÀÀÇü À¥À» À§ÇÑ ¹Ìµð¾î Äõ¸® »ç¿ë¹ý(CSS media queries) |
´Ù À½ ±Û | À̸§ ġȯ ±ÛÀÚ Ä¡È¯ ÀüȹøÈ£ ġȯ |
[°ü·Ã±Û] | ¾øÀ½ | ÀÛ¼ºÀϽà : 2021-01-29 13:52:11 |
Copyright(c) 2003 xirom all right reserved vol.3 Contact xirom@xirom.net form more information |