¹ÝÀÀÇü À¥À» À§ÇÑ ¹Ìµð¾î Äõ¸® »ç¿ë¹ý(CSS media queries) | ¹øÈ£ : 551 ¹ø±Û Á¶È¸ : 614 ȸ |
¹Ìµð¾î Äõ¸®´Â ȸé(screen), Ƽºñ(tv), ÇÁ¸°ÅÍ(print)¿Í °°Àº ¹Ìµð¾î ŸÀÔ(media type)°ú Àû¾îµµ Çϳª ÀÌ»óÀÇ Ç¥Çö½Ä(expression)À¸·Î ±¸¼ºµË´Ï´Ù. Ç¥Çö½ÄÀº width, height, color¿Í °°Àº ¹Ìµð¾î Ư¼º(media feature)µéÀ» ÀÌ¿ëÇÏ¿© ±× Ư¼ºµéÀÇ »óÅ¿¡ µû¶ó ´Ù¸¥ ½ºÅ¸ÀÏ ½ÃÆ®¸¦ Àû¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ¹Ìµð¾î Äõ¸®´Â CSS3¿¡ Æ÷ÇԵǾî ÀÖÀ¸¸ç, ÄÁÅÙÃ÷ÀÇ º¯°æ¾øÀÌ ÁַΠȸéÀÇ Å©±â¿¡ µû¶ó ½ºÅ¸ÀÏ ½ÃÆ®¸¦ ´Þ¸®ÇÏ¿© ÀûÀýÇÑ ¸ð¾çÀ» º¸¿©ÁÙ ¼ö ÀÖ½À´Ï´Ù.
¹Ìµð¾î Äõ¸®´Â µÎ °¡Áö ¹æ¹ýÀ¸·Î »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.
ù ¹ø°´Â <link> ¿ä¼Ò¿¡ »ç¿ëÇÏ¿© Ư¼ºÀÌ Á¶°Ç¿¡ ¸ÂÀ»¶§ css ÆÄÀÏÀ» ºÒ·¯¿É´Ï´Ù. media¼Ó¼ºÀÇ "screen and (max-width: 768px)"ÀÇ Àǹ̴ ¹Ìµð¾î ŸÀÔÀÌ ½ºÅ©¸°ÀÌ°í, ȸéÀÇ ÃÖ´ë ³Êºñ°¡ 768px·Î ÁöÁ¤ÇÏ´Â °ÍÀÔ´Ï´Ù. ±×·¯¹Ç·Î ȸéÀÇ ³Êºñ 768px ÀÌÇÏ À϶§°¡ Àû¿ëÀÌ µË´Ï´Ù.
<link rel="stylesheet" media="screen and (max-width: 768px)" href="mystyle.css" />
µÎ ¹ø°´Â ½ºÅ¸ÀÏ ½ÃÆ®³»¿¡¼ @media ¸¦ »ç¿ëÇÕ´Ï´Ù. °á°ú´Â À§¿Í µ¿ÀÏÇÑ Á¶°ÇÀÌ°í, ±× Á¶°ÇÀÌ ¸ÂÀ¸¸é {...} ¾ÈÀÇ ½ºÅ¸ÀÏÀÌ Àû¿ëµË´Ï´Ù.
@media screen and (max-width: 768px) {
body {
background-color: lightgreen;
}
}
@media (max-width: 768px) {...} ó·³ ¹Ìµð¾î ŸÀÔÀ» »ý·«Çϸé all ÀÌ ±âº»°ªÀÌ µÇ¾î ¸ðµç ¹Ìµð¾î ŸÀÔ¿¡ Àû¿ëÀÌ µË´Ï´Ù.
¹Ìµð¾î ŸÀÔ¿¡ »ç¿ëµÇ´Â °ªÀ» ¿©·¯Á¾·ù°¡ ÀÖÁö¸¸ À¥ »çÀÌÆ®¸¦ ¸¸µå´Âµ¥´Â screenÀ» »ç¿ëÇϰųª all À» »ç¿ëÇϴ°ÍÀÌ ÀϹÝÀûÀÔ´Ï´Ù.
¹Ìµð¾î Ư¼º¿¡¼ max-width ¿Í min-width °¡ °¡Àå ÀϹÝÀûÀ¸·Î ¾²ÀÔ´Ï´Ù. ±×¿Ü height, color, orientation(ȸéÀÇ °¡·Î ¼¼·Î ¹æÇâ) µîÀÌ ÀÖ½À´Ï´Ù.
¹ÝÀÀÇü À¥À» ¸¸µé¶§ ½ºÅ¸ÀÏÀ» ÀÛ¼ºÇÏ´Â ±âÁØÀ¸·Î ¸ð¹ÙÀÏÀ» ¿ì¼±ÇÒ°ÍÀÎÁö, µ¥½ºÅ©Å¾À» ¿ì¼±ÇÒ °ÍÀÎÁö°¡ ¸ÕÀú °í·ÁµÇ¾îÁö´Â ÆíÀÔ´Ï´Ù.
¸ð¹ÙÀÏÀ» ¿ì¼±ÇÒ °æ¿ì ´ÙÀ½°ú °°Àº ¼ø¼·Î ÀÛ¼ºÀÌ µË´Ï´Ù.
/* ¸ð¹ÙÀÏ¿¡ Àû¿ëµÉ ½ºÅ¸ÀÏÀ» ¸ÕÀú ÀÛ¼ºÇÕ´Ï´Ù. */ @media screen and (min-width: 769px) { /* µ¥½ºÅ©Å¾¿¡¼ »ç¿ëµÉ ½ºÅ¸ÀÏÀ» ¿©±â¿¡ ÀÛ¼ºÇÕ´Ï´Ù. */ }
µ¥½ºÅ©Å¾À» ¿ì¼±ÇÒ °æ¿ì¿¡´Â ´ÙÀ½°ú °°Àº ¼ø¼·Î ÀÛ¼ºÀÌ µË´Ï´Ù.
/* µ¥½ºÅ©Å¾¿¡¼ »ç¿ëµÉ ½ºÅ¸ÀÏÀ» ¸ÕÀú ÀÛ¼ºÇÕ´Ï´Ù. */ @media screen and (max-width: 768px) { /* ¸ð¹ÙÀÏ¿¡ »ç¿ëµÉ ½ºÆ®ÀÏ ½ÃÆ®¸¦ ¿©±â¿¡ ÀÛ¼ºÇÕ´Ï´Ù. */ }
¹Ìµð¾î Äõ¸®´Â °ÅÀÇ ¸ðµç ÃֽŠºê¶ó¿ìÀú¿¡¼ Àß µ¿ÀÛÇÕ´Ï´Ù. ÀÎÅÍ³Ý ÀͽºÇ÷η¯´Â 9¹öÀü ºÎÅÍ Áö¿øÇÕ´Ï´Ù. ¸¸¾à ÀÚ½ÅÀÌ Á¦ÀÛÇÏ´Â ¹ÝÀÀÇü À¥ÀÌ IE8 ÀÌÇÏ¿¡¼µµ µ¿ÀÛÀ» ÇÏ¿©¾ß ÇÑ´Ù¸é polyfill À» »ç¿ëÇÏ¿©¾ß ÇÕ´Ï´Ù.
¡Ø Âü°í : PolyfillÀº À¥ °³¹ß¿¡¼ ¿À·¡µÈ ºê¶ó¿ìÀú°¡ Áö¿øÇÏÁö ¾Ê´Â Ư¼ºÀ» Áö¿øÇÏ°Ô ÇØÁÖ´Â ±â¼úÀ» ¶æÇÕ´Ï´Ù.
´ÙÀ½Àº µÎ °¡Áö´Â IE8 ÀÌÇÏ¿¡¼ ¹Ìµð¾î Äõ¸®¸¦ »ç¿ëÇÏ°Ô ÇØÁÖ´Â polyfill ÀÔ´Ï´Ù. ÀÌ ¶óÀ̺귯µéÀº ¹Ìµð¾î Äõ¸®¸¦ 100% Áö¿øÇØÁÖÁö´Â ¸øÇÕ´Ï´Ù. Á¦ÇÑ »çÇ×À» Àß È®ÀÎÇؾßÇÒ °ÍÀÔ´Ï´Ù.
* respond.js´Â IE 6~8 ¹öÀü¿¡¼ ¹Ìµð¾îÄõ¸®¸¦ Çؼ®ÇÒ ¼ö ÀÖµµ·Ï ¸¸µé¾îÁÖ´Â ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸®ÀÔ´Ï´Ù. ´ÙÀ½ »çÀÌÆ®¿¡¼ ´Ù¿î ¹ÞÀ» ¼ö ÀÖ½À´Ï´Ù(https://github.com/scottjehl/Respond/). MIT ¶óÀ̼¾½º·Î ¹èÆ÷µË´Ï´Ù.
¹Ìµð¾î Äõ¸®¸¦ ºÒ·¯¿À±â À§Çؼ @import¿Í <style> ¿ä¼Ò´Â »ç¿ëÇÒ ¼ö ¾ø½À´Ï´Ù. <link> ¿ä¼ÒÀÇ media¼Ó¼ºÀ» »ç¿ëÇÏ´ø°¡ <link> ¿ä¼Ò·Î ºÒ·¯¿À´Â ½ºÅ¸ÀÏ ½ÃÆ® ³»¿¡ ¹Ìµð¾î Äõ¸®¸¦ ±â¼úÇÏ¸é µË´Ï´Ù.
»ç¿ëÇغ» °á°ú ¾ÈÁ¤ÀûÀ¸·Î µ¿ÀÛÀ» ÇÏ´Â°Í °°½À´Ï´Ù. ºê¶ó¿ìÀúÀÇ Å©±â¸¦ ÁÙÀ̰ųª ´Ã¸±°æ¿ì ¹ÝÀÀµµ ºü¸¥Æí ÀÔ´Ï´Ù.
- Å×½ºÆ® ¿ë ½ºÅ¸ÀÏ ½ÃÆ® ÀÔ´Ï´Ù.(mystyle.css)
@media screen and (max-width: 768px) {
body {
background-color: lightgreen;
}
}
- ½ºÅ¸ÀÏÀ» ºÎ¸£´Â ºÎºÐ°ú respond.min.js ÆÄÀÏÀ» Æ÷ÇÔÇÏ´Â ºÎºÐÀÔ´Ï´Ù. À̺κп¡¼´Â IE Á¶°ÇºÎ ÁÖ¼®À» »ç¿ëÇÏ¿´½À´Ï´Ù. ÀÌ°ÍÀº IE ¿¡¼´Â Àǹ̰¡ ÀÖ°í ´Ù¸¥ ºê¶ó¿ìÀú¿¡¼´Â ÁÖ¼®À¸·Î 󸮵˴ϴÙ. [if lte IE 8]ÀÇ Àǹ̴ IE 8 º¸´Ù À۰ųª °°Àº ¹öÀü¿¡¼ ½ÇÇàµÈ´Ù´Â ¶æÀÔ´Ï´Ù.
<link rel="stylesheet" type="text/css" href="./mystyle.css" /> <!--[if lte IE 8]> <script type="text/javascript" src="./respond.min.js"></script> <![endif]-->
* css3-mediaqueries.js´Â IE6-9 ±îÁö Áö¿øÇÑ´Ù°í ¹®¼¿¡ ³ª¿ÍÀÖ½À´Ï´Ù. À̰͵µ MIT ¶óÀ̼¾½º·Î ¹èÆ÷µË´Ï´Ù. ´ÙÀ½ URL¿¡¼ ´Ù¿î ¹ÞÀ» ¼ö ÀÖ½À´Ï´Ù(https://github.com/weblinc/media-match).
¹Ìµð¾î Äõ¸®¸¦ ºÒ·¯¿À±â À§Çؼ @import¿Í <style> ¿ä¼Ò, ±×¸®°í <link> ¿ä¼ÒÀÇ media¼Ó¼ºÀ» »ç¿ëÇÒ ¼ö ¾ø½À´Ï´Ù. <link> ¿ä¼Ò·Î ºÒ·¯¿À´Â ½ºÅ¸ÀÏ ½ÃÆ® ³»¿¡ ¹Ìµð¾î Äõ¸®¸¦ ±â¼úÇÏ¿©¾ß ÇÕ´Ï´Ù.
ÀÌ ¶óÀ̺귯¸®´Â ÀÚ¼¼È÷ Å×½ºÆ® Çغ¸Áö´Â ¸øÇߴµ¥, ºê¶ó¿ìÀú¿¡¼ âÀÇ Å©±â¸¦ µå·¡±×Çؼ ¸®»çÀÌÁî ÇÒ¶§ ¹ÝÀÀÀÌ »ó´çÈ÷ ´Ê¾ú½À´Ï´Ù.
¹ÝÀÀÇü À¥À» Á¦ÀÛÇÏ´Â °æ¿ì IE8 ÀÌÇÏ ¹öÀüÀÇ ÀÎÅÍ³Ý ÀͽºÇ÷η¯ÀÇ Áö¿øÀº CSS ÀÇ ¹®Á¦ »Ó¸¸ ¾Æ´Ï¶ó, ÀÚ¹Ù½ºÅ©¸³Æ® ¹× ÆäÀÌÁö°¡ ·»´õ¸µµÇ´Â ¸ð¾çµµ ¹®Á¦¸¦ ¸¹ÀÌ ÀÏÀ¸Åµ´Ï´Ù. ¹ÝÀÀÇüÀÌµç ¾Æ´Ïµç IE8 ÀÌÇÏÀÇ ÀÎÅÍ³Ý ÀͽºÇ÷η¯´Â ´õÀÌ»ó »ç¿ëÇÏÁö ¾Ê´Â°ÍÀÌ Á¦ÀÛÀÚ³ª »ç¿ëÀÚ ¸ðµÎ¿¡°Ô À̵æÀÏ°Í °°½À´Ï´Ù.
¡Ø Å×½ºÆ® ¼Ò½º
Ãâó: https://offbyone.tistory.com/121 [½¬°í ½ÍÀº °³¹ßÀÚ]
ÀÌ Àü ±Û | ¹ÝÀÀÇü À¥¿¡¼ÀÇ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ¹ÝÀÀÇüÀ¸·Î »ç¿ëÇϱâ |
´Ù À½ ±Û | ¹ÝÀÀÇü À¥ - ºäÆ÷Æ®(viewport) »ç¿ë¹ý |
[°ü·Ã±Û] | ¾øÀ½ | ÀÛ¼ºÀϽà : 2021-01-29 13:53:24 |
Copyright(c) 2003 xirom all right reserved vol.3 Contact xirom@xirom.net form more information |