¡Ø ±¤°í¼º±ÛÀº »çÀü µ¿ÀÇ ¾øÀÌ »èÁ¦ ÇÕ´Ï´Ù.
  ¹ÝÀÀÇü À¥ - ºäÆ÷Æ®(viewport) »ç¿ë¹ý ¹øÈ£ : 550 ¹ø±Û        Á¶È¸ : 432 ȸ
ÀÛ    ¼º    ÀÚ : Ȳȫ±¸  ¸ÞÀÏ º¸³»±â

¹ÝÀÀÇü À¥ (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 [½¬°í ½ÍÀº °³¹ßÀÚ] 

¸Þ¸ð³²±â±â ÇÑ±Û 150ÀÚ ¿µ¹®300ÀÚ À̳»
ÀÛ¼ºÀÚ         Æнº¿öµå                ÇöÀç  0 byte
[°ü·Ã±Û] ¾øÀ½ ÀÛ¼ºÀϽà : 2021-01-29 13:52:11
Copyright(c) 2003 xirom all right reserved vol.3
Contact xirom@xirom.net form more information