¹ÝÀÀÇü À¥¿¡¼ÀÇ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ¹ÝÀÀÇüÀ¸·Î »ç¿ëÇϱâ | ¹øÈ£ : 552 ¹ø±Û Á¶È¸ : 716 ȸ |
¹ÝÀÀÇü À¥À» ¸¸µé±â À§Çؼ CSS3 ¹Ìµð¾î Äõ¸®¸¦ ÀÌ¿ëÇÏ¿© ȸé Å©±â¿¡ µû¶ó Àû¿ëÇÏ´Â ½ºÅ¸ÀÏÀ» ´Þ¸®ÇÏ´Â ¹æ¹ýÀº "¹ÝÀÀÇü À¥À» À§ÇÑ ¹Ìµð¾î Äõ¸® »ç¿ë¹ý(CSS media queries)" ¿¡¼ ¾Ë¾Æ º¸¾Ò¾ú½À´Ï´Ù.
ȸé Å©±â¿¡ µû¶ó ½ºÅ¸ÀÏ ½ÃÆ®¸¦ º¯°æÇÏ¿© ÆäÀÌÁö³»ÀÇ ¿ä¼ÒµéÀÇ »çÀÌÁ ´Ã¸®°í ÁÙÀ̰ųª, À§Ä¡¸¦ º¯°æÇÏ°í, º¸À̰ųª °¨Ã߰ųª ÇÏ´Â ÀÛ¾÷À» ÇÒ ¼ö ÀÖ½À´Ï´Ù. ¿øÇÏ´Â µðÀÚÀÎÀÌ ÀÌ·¯ÇÑ °Íµé »Ó¸¸ ¾Æ´Ï¶ó Á¦¸ñÀÇ ±æÀ̸¦ ÁÙÀ̰ųª, À̹ÌÁö¸¦ ±³Ã¼Çϰųª, ƯÁ¤ ¿ä¼Ò¸¦ Ŭ¸¯ÇßÀ» ¶§ÀÇ µ¿ÀÛÀ» º¯°æÇϰųª Çϴ°ÍÀÌ ÇÊ¿äÇÏ´Ù¸é CSS¸¸À¸·Î´Â ±¸ÇöÇϱⰡ Èûµì´Ï´Ù.
PC¿¡¼ º¸¿©ÁÙ °Í°ú ÈÞ´ë±â±â¿¡¼ º¸¿©ÁÙ°ÍÀ» µû·Î ¸¸µé°í, °¢°¢¿¡ ÇÊ¿äÇÑ À̺¥Æ®¸¦ ÀÚ¹Ù½ºÅ©¸³Æ®·Î ±¸ÇöÇÑ ÈÄ È¸é Å©±â¿¡ µû¶ó ¼û±â°Å³ª º¸¿©ÁÖ´Â CSS¸¦ ÀÌ¿ëÇؼ ó¸®ÇÒ ¼öµµ ÀÖ½À´Ï´Ù. ÇÏÁö¸¸ ÀÌ ¹æ¹ýÀº °°Àº ÄÁÅÙÃ÷ ¸¦ Áߺ¹Çؼ µÎ ¼¼Æ® ´Ù¿î·Îµå ÇØ¾ß ÇϹǷΠ½Ã°£°ú µ¥ÀÌÅÍ°¡ ¸¹ÀÌ ¼Ò¸ðµÉ ¼ö ÀÖ½À´Ï´Ù. µÉ ¼ö ÀÖÀ¸¸é ÇϳªÀÇ ÄÁÅÙÃ÷¸¦ Àß Á¶ÀÛÇؼ ´Ù¸£°Ô º¸¿©ÁÖ´Â°Ô ÁÁÀ» °ÍÀÔ´Ï´Ù.
window.mediaMatch() ÇÔ¼ö´Â ¹Ìµð¾î Äõ¸®¿¡¼ »ç¿ëµÇ´Â °Í°ú µ¿ÀÏÇÑ Ç¥Çö½ÄÀ» »ç¿ëÇÏ¿© Á¶°Ç¿¡ µû¶ó ´Ù¸¥ ½ºÅ©¸³Æ®¸¦ ½ÇÇàÇÒ ¼ö ÀÖ½À´Ï´Ù.
¸ÕÀú mql.matches ÇÁ·ÎÆÛƼ¸¦ ÀÌ¿ëÇÏ¿© Ç¥Çö½ÄÀÌ ÂüÀÎÁö È®ÀÎÇÒ ¼ö ÀÖ½À´Ï´Ù.
var mql = window.matchMedia("screen and (max-width: 768px)"); if (mql.matches) { console.log("ȸéÀÇ ³Êºñ°¡ 768px º¸´Ù ÀÛ½À´Ï´Ù."); } else { console.log("ȸéÀÇ ³Êºñ°¡ 768px º¸´Ù Å®´Ï´Ù."); }
¸®½º³Ê¸¦ ºÙ¿©¼ »çÀÌÁî°¡ º¯ÇÒ ¶§ÀÇ À̺¥Æ® ¹ß»ýÀ» °¨ÁöÇÒ ¼ö ÀÖ½À´Ï´Ù.
var mql = window.matchMedia("screen and (max-width: 768px)"); mql.addListener(function(e) { if(e.matches) { console.log('¸ð¹ÙÀÏ È¸é ÀÔ´Ï´Ù.'); } else { console.log('µ¥½ºÅ©Å¾ ȸé ÀÔ´Ï´Ù.'); } });
window.matchMedia() ÇÔ¼ö´Â CSS3 ¹Ìµð¾î Äõ¸® ó·³ °ÅÀÇ ¸ðµç ÃֽŠºê¶ó¿ìÀú¿¡¼ Áö¿øÇÕ´Ï´Ù. ÀÎÅÍ³Ý ÀͽºÇ÷η¯´Â 10 ¹öÀü ºÎÅÍ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. media query °¡ IE 9 ºÎÅÍ »ç¿ëÇÒ ¼ö Àִ°Ͱú ºñ±³Çϸé Â÷ÀÌ°¡ ÀÖ½À´Ï´Ù. IE 9 ÀÌÇÏ¿¡¼ mediaMatch¸¦ »ç¿ëÇÏ·Á¸é polyfill À» »ç¿ëÇØ¾ß ÇÕ´Ï´Ù.
¿À·¡µÈ ºê¶ó¿ìÀú¸¦ Áö¿øÇØ¾ß ÇÑ´Ù¸é ÀÚ¹Ù½ºÅ©¸³Æ® API, Áö¿ø µÇ´Â CSS, ±× ¿Ü¿¡µµ ¸¹Àº third party ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸®µéÀÇ ¹öÀüµéÀÌ ¸ðµÎ ȣȯ µÇµµ·Ï ¸ÅĪ ½ÃÅ°´Â °ÍÀº »ó´çÈ÷ ±î´Ù·Î¿î ÀÛ¾÷ÀÌ µË´Ï´Ù.
¸¹ÀÌ »ç¿ëµÇ´Â jQuery´Â IE 9 ÀÌ»óÀ» »ç¿ëÇÑ´Ù¸é 3.x ´ë ¹öÀüÀ» »ç¿ëÇÏ´Â °ÍÀÌ ÁÁ½À´Ï´Ù. IE 6 ~ 8±îÁö Áö¿øÇØ¾ß ÇÑ´Ù¸é 1.x ´ë ¹öÀüÀ» »ç¿ëÇØ¾ß ÇÕ´Ï´Ù.
mediaMatch() ¸¦ IE 9 ¿¡¼ µ¿ÀÛÇϵµ·Ï ÇØÁÖ´Â polyfill ÀÔ´Ï´Ù.
https://github.com/paulirish/matchMedia.js/
´ÙÀ½°ú °°ÀÌ »ç¿ëÇÕ´Ï´Ù.
<!--[if IE 9]> <script type="text/javascript" src="./matchMedia.js"></script> <script type="text/javascript" src="./matchMedia.addListener.js"></script> <![endif]-->
IE 8 ÀÌÇ϶ó¸é Á» º¹ÀâÇØ Áý´Ï´Ù. ÀÌ ±¸°£¿¡¼´Â CSS3 ¹Ìµð¾î Äõ¸®µµ µ¿ÀÛÀ»ÇÏÁö ¾Ê°í, matchMedia()µµ µ¿ÀÛÀ» ÇÏÁö ¾Ê½À´Ï´Ù. µÎ °¡Áö ¸ðµÎ polyfillÀ» »ç¿ëÇØ¾ß ÇÕ´Ï´Ù. À̸¦ À§Çؼ respond.js ¿Í Media.match µî ¸î°¡Áö¸¦ Á¶ÇÕÇØ ºÃ´Âµ¥, °³°³ÀÇ ¼º´ÉÀÌ ÁÁÀº °ÍµéÀº Ãæµ¹ÀÌ ÀÖ¾î¼ µ¿ÀÛÀ» ÇÏÁö ¾Ê¾Ò½À´Ï´Ù. ¼º´ÉÀº ±×¸® ÁÁÁö ¸øÇÏÁö¸¸ µ¿ÀÛÀº ÇÏ´Â Á¶ÇÕÀÌ ¾Æ·¡ÀÇ Media.match ¿Í css3-mediaqueries.js ÀÇ Á¶ÇÕÀÎ °Í °°½À´Ï´Ù.
IE 9 ~ 6 polyfillÀÎ Media.match ÀÔ´Ï´Ù.
https://github.com/weblinc/media-match
´ÙÀ½°ú °°ÀÌ »ç¿ëÇÏ¿´½À´Ï´Ù. css3-mediaqueries.js ´Â ¹Ìµð¾î Äõ¸®°¡ IE 8 ÀÌÇÏ¿¡¼ µ¿ÀÛÇϵµ·Ï ÇØÁÖ´Â polyfill ÀÔ´Ï´Ù.
<!--[if lte IE 8]> <script type="text/javascript" src="./media.match.min.js"></script> <script type="text/javascript" src="./css3-mediaqueries.js"></script> <![endif]-->
Å×½ºÆ® À̹ÌÁö ÀÔ´Ï´Ù.
matchMedia()¸¦ »ç¿ëÇÏÁö ¾Ê°í µ¿ÀÏÇÑ ÀÛ¾÷À» ÇÒ ¼ö ÀÖ´Â ´Ù¸¥ ´ë¾ÈÀÌ ÀÖ½À´Ï´Ù. ºê¶ó¿ìÀúÀÇ resize À̺¥Æ®¸¦ Á÷Á¢ ó¸®Çؼ µ¿ÀÏÇÑ ±â´ÉÀ» Á¦°øÇÏ´Â ¶óÀ̺귯¸®·Î SimpleStateManager °¡ ÀÖ½À´Ï´Ù. ºê¶ó¿ìÀúÀÇ ´Ù¾çÇÑ »óÅ¿¡ À̺¥Æ®¸¦ ó¸®ÇÒ ¼ö ÀÖ´Â ±â´ÉÀ» °¡Áö°í ÀÖ½À´Ï´Ù. ±×·±µ¥ 3.x ¹öÀüÀº ³»ºÎÀûÀ¸·Î mediaMatch() ¸¦ »ç¿ëÇÏ°í ÀÖ¾î¼ IE 9 ÀÌÇÏ¿¡¼´Â polyfillÀÌ ÇÊ¿äÇÕ´Ï´Ù. 2.x ¹öÀü¿¡¼´Â mediaMatch() ¸¦ »ç¿ëÇÏÁö ¾ÊÀ¸¹Ç·Î ¸ðµç ¹öÀü¿¡¼ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.
https://github.com/SimpleStateManager/SimpleStateManager
https://github.com/SimpleStateManager/SimpleStateManager/tree/2.5.0
¡Ø Âü°í ¶óÀ̺귯¸®
matchMedia()¿Í ¹Ìµð¾î Äõ¸®¸¦ Æí¸®ÇÏ°Ô »ç¿ëÇÒ ¼ö ÀÖµµ·Ï µµ¿ÍÁÖ´Â ¶óÀ̺귯¸® ÀÔ´Ï´Ù.(IE 9 ÀÌÇÏ¿¡¼´Â polyfillÀÌ ÇÊ¿äÇÕ´Ï´Ù.)
http://wicky.nillia.ms/enquire.js/
IE 6~8 ¹öÀü¿¡¼ ¹Ìµð¾îÄõ¸®¸¦ Çؼ®ÇÒ ¼ö ÀÖµµ·Ï ¸¸µé¾îÁÖ´Â ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸®ÀÔ´Ï´Ù.
https://github.com/scottjehl/Respond/
¡Ø Å×½ºÆ®¿¡ »ç¿ëµÈ ¼Ò½º
Ãâó: https://offbyone.tistory.com/122 [½¬°í ½ÍÀº °³¹ßÀÚ]
ÀÌ Àü ±Û | ¹ÝÀÀÇüÀ¥¿¡ ´ëÇÑ ¹Ìµð¾îÄõ¸®ÀÇ »ç¿ë |
´Ù À½ ±Û | ¹ÝÀÀÇü À¥À» À§ÇÑ ¹Ìµð¾î Äõ¸® »ç¿ë¹ý(CSS media queries) |
[°ü·Ã±Û] | ¾øÀ½ | ÀÛ¼ºÀϽà : 2021-01-29 13:54:35 |
Copyright(c) 2003 xirom all right reserved vol.3 Contact xirom@xirom.net form more information |