½º¸¶Æ®Æù 2õ¸¸¸í ½Ã´ëÀÎ Áö±ÝÀº ¸ð¹ÙÀÏ À¥»çÀÌÆ® ÄÚµùÀº ÀÏ¹Ý À¥»çÀÌÆ® ÄÚµù¸¸Å ÇÏ°Ô µÇ´Â°Í °°Àºµ¥¿ä. ÃÖ±Ù 1,2³â »çÀÌ À¥À» ÀÌ¿ëÇÒ ¼ö ÀÖ´Â ´Ù¾çÇÑ ¸ð¹ÙÀÏ ±â±â°¡ µîÀåÇÏ¸é¼ ¹Ìµð¾î Äõ¸®¸¦ ÀÌ¿ëÇØ ´Ù¾çÇÑ ÇØ»óµµ¿¡ ¹ÝÀÀÇÏ´Â À¥À» ±¸ÇöÇÏ´Â ±â¼úÀÎ ¹ÝÀÀÇü À¥±îÁö ¸¸µé¾îÁö°Ô µÇ¾ú½À´Ï´Ù.
¸ð¹ÙÀÏ ÄÚµùÀº html5¿Í css3±îÁö ´Ù¾çÇÏ°Ô »ç¿ëÇÒ ¼ö ÀÖ¾î¼ Àç¹ÌÀÖ´Â°Í °°½À´Ï´Ù.
ÇÏÁö¸¸ ¸ð¹ÙÀÏ À¥»çÀÌÆ® ÄÚµùÀ» óÀ½ Á¢ÇϽô ºÐµéÀº ÀÏ¹Ý À¥»çÀÌÆ® ÄÚµù°ú Á¶±ÝÀº ´Ù¸¥ ºÎºÐ ¶§¹®¿¡ ³°ü¿¡ ºÀÂøÇÒ ¶§°¡ ÀÖÀ» °Í ÀÔ´Ï´Ù. Á¶±ÝÀ̳ª¸¶ µµ¿òÀÌ µÉ ¼ö Àֱ⸦ ±â´ëÇÏ¸é¼ Á¦°¡ °Ý¾ú´ø ºÎºÐµéÀ» ±âº»ÀûÀÎ°Í ºÎÅÍ Á¤¸® ÇØº¸·Á±¸¿ä.
ȸé ȸÀü½Ã ÆùÆ®»çÀÌÁî °íÁ¤
body {-webkit-text-size-adjust:none}
ÆäÀÌÁö°¡ ·£´õ¸µµÉ ¶§ ¸ð¹ÙÀÏ »çÆÄ¸®´Â ÅØ½ºÆ®ÀÇ Å©±â¸¦ ÀÚµ¿À¸·Î Á¶ÀýÇϴµ¥, À̶§ -webkit-text-size-adjust¸¦ ÀÌ¿ëÇØ ÅØ½ºÆ®ÀÇ Å©±â¸¦ °íÁ¤ ¶Ç´Â ¿øÇÏ´Â ´ë·Î Á¶ÀýÇÒ ¼ö ÀÖ½À´Ï´Ù. cssÀÇ body¿¡ Àû¾îÁÖ¸é ÇØ°áµË´Ï´Ù.
-webkit-text-size-adjustÀÇ 3°¡Áö ¼Ó¼º
auto : ȸéÀÇ Æø¿¡ ¸ÂÃß¾î¼ ÅØ½ºÆ®ÀÇ Å©±â¸¦ ÀÚµ¿À¸·Î Á¶Àý
none : ÆùÆ®»çÀÌÁî °íÁ¤
n% : ÆùÆ®»çÀÌÁ ÁöÁ¤µÈ»çÀÌÁî·Î º¯°æ
¸ð¹ÙÀÏ À¥ÆäÀÌÁö¸¦ °¡·ÎÅ©±â¿¡ ¸ÂÃß±â
½º¸¶Æ®Æù¿¡¼ ·£´õ¸µ ½ÃÄ×À»°æ¿ì ÅÍÄ¡¸¦ ÅëÇÑ È¸éÀÇ Å©±â°¡ º¯°æµÇÁö ¾Ê¾Æ¾ß Çϴµ¥, ÀÏ¹Ý À¥»çÀÌÆ®µéÀº ±× Å©±â°¡ pc¿¡ ¸Â°Ô Á¦À۵Ǿú±â ¶§¹®¿¡ »ó´ëÀûÀ¸·Î ÀÛÀº ¸ð¹ÙÀϵð½ºÇ÷¹À̷δ °¨´çÇϱâ Èûµé°Ô µË´Ï´Ù. ÀÌ·² ¶§ À§ÀÇ ¸ÞŸÅ±׷Πµð½ºÇ÷¹ÀÌ Å©±â¿¡ ¸ÂÃçÁú °ÍÀÔ´Ï´Ù.
width=device-width : Ç÷§Æû °¡·Î Å©±â¿¡ ¸ÂÃã
initial-scale : È®´ëºñÀ²
maximum-scale : ÃÖ´ëÈ®´ëºñÀ²
minimum-scale=1.0 : ÃÖ¼ÒÃà¼ÒºñÀ²
user-scalable : »ç¿ëÀÚ¿¡ ÀÇÇÑ È¸éÈ®´ë °¡´É¿©ºÎ (yes / no)
À¥ÆäÀÌÁö°¡ ºê¶ó¿ì¡µÈ ÈÄ ÁÖ¼ÒâÀ» »ç¶óÁö°Ô ÇÕ´Ï´Ù.
window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);
½º¸¶Æ®ÆùÀ¸·Î Á¢¼Ó½Ã ÇØ´ç ¸ð¹ÙÀÏ À¥ÆäÀÌÁö·Î ÀÚµ¿ ¸µÅ©µË´Ï´Ù.
var uAgent = navigator.userAgent.toLowerCase();
var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',
'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');
for(var i=0;i
ÆäÀÌÁöÀÇ Àüü ¹é±×¶ó¿îµåÀ̹ÌÁö¸¦ ³ÖÀ» °æ¿ì, background-size¸¦ »ç¿ëÇÕ´Ï´Ù. ÀÌ °æ¿ì´Â À̹ÌÁö°¡ ´Ã¾î³ª°Å³ª ÇØµµ ½Ã°¢ÀûÀ¸·Î ¹«¸®°¡ ¾ø¾î¾ß ÇÒ °Í°°½À´Ï´Ù. ±×¶óµ¥À̼ǵîÀÌ ÀÖ´Â bg´Â ´Ã¾î³ª¸é º¸±â ¾ÈÁÁ´õ¶ó±¸¿ä~
body {background:url(bg.png) repeat 0 0;background-size:100% 100%;}
À̹ÌÁö¸¦ ÇØ»óµµ¿¡ ¸Â°Ô Á¶ÀýÇÏ°í ½ÍÀ» °æ¿ì¿¡´Â max-width¸¦ »ç¿ëÇÕ´Ï´Ù.
h1 {width:auto;}
h1 img {max-width:100%;}
width°ªÀÌ 100%ÀÎ °æ¿ì border °ªÀ» ³ÖÀ¸¸é °¡·Î½ºÅ©·ÑÀÌ »ý°Ü ¹ö¸®´Ï Á¶½ÉÇØ¾ß°ÚÁÒ.
select, inputµî¿¡ ¿øÄ¡¾Ê´Â ±×¶óµ¥À̼ǰú ¶ó¿îµå°¡ 󸮵Ǿî Àִµ¥, ÀÌ form ¿ä¼ÒÀÇ ±âº»¼Ó¼ºÀ» ÃʱâÈÇÏ´Â ¹æ¹ýÀÔ´Ï´Ù.
border-radius:0px 0px; /* ¾ÆÀÌÆùÀÇ input ¶ó¿îµå ÃʱâÈ */
-webkit-appearance:none; /* form ¿ä¼ÒÀÇ µð¹ÙÀ̽º ±â¹Ý ½ºÅ¸ÀÏ ÃʱâÈ */
html5ÀÇ form ¿ä¼ÒÀÇ type¼Ó¼º(http://biew.co.kr/18 Âü°í)À» ÀÌ¿ëÇÑ »óȲ¿¡ ¸Â´Â ¾ÆÀÌÆù ÀÚÆÇ ·¹ÀÌÀÌ¿ôÀ» È£ÃâÇÒ ¼ö ÀÖ½À´Ï´Ù. (¾ÆÀÌÆùÀÇ °æ¿ìÀÔ´Ï´Ù.)
input type="email"
input type="url"
input type="time"
input type="date"
input type="datetime"
input type="number"
input type="tel"
input type="search"
input type="week"
html5ÀÇ »õ·Î¿î input ¼Ó¼ºÀÎ ÀԷ°ªÀ» ¼³¸íÇØÁÖ´Â placeholder ¼Ó¼ºµµ Ȱ¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ÀÌ´Â À¥Á¢±Ù¼º Áöħ( http://biew.co.kr/17 Âü°í)¿¡µµ Ç¥±âµÇ¾î ÀÖÀ¸¸ç À¥Á¢±Ù¼ºÀ» ³ôÀÏ ¼ö ÀÖ½À´Ï´Ù.
|