À¥À» ÅëÇØ »õ·Î¿î âÁ¶¸¦ ²Þ²Ù´Â Àΰ£ - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX





WEBDESK
Web Standard
HOME ¡µ WEBDESK ¡µ Web Standard
¸ð¹ÙÀÏ À¥ÆäÀÌÁö Á¦À۽à ±âº»ÀûÀÎ ÄÚµù ÆÁ
Posted by kimdirector | 2015.05.06 | Hit : 7437
¸ð¹ÙÀÏ  À¥ÆäÀÌÁö  ÄÚµù 
¸ñ·Ïº¸±âÀÌÀüº¸±â
½º¸¶Æ®Æù 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 Âü°í)¿¡µµ Ç¥±âµÇ¾î ÀÖÀ¸¸ç À¥Á¢±Ù¼ºÀ» ³ôÀÏ ¼ö ÀÖ½À´Ï´Ù.
Posted by kimdirector | 2015.05.06 | Hit : 7437
Origin http://biew.co.kr/20
Tags ¸ð¹ÙÀÏ  À¥ÆäÀÌÁö  ÄÚµù 
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=113

COMMENT
Commented by kimdirector
2015.05.06 14:01:44 X
¸ð¹ÙÀÏ À¥ ÆäÀÌÁö¸¦ óÀ½ Á¦ÀÛÇÏ´Â »ç¶÷µéÀ̶ó¸é ³õÄ¡±â ½¬¿î ºÎºÐµéÀÔ´Ï´Ù. Àß Âü°íÇϽñ⠹ٶó¸ç, Á¤´äÀº ¾Æ´Ï°ÚÁö¸¸, ¾Ë°í ÀÖÀ¸¸é µµ¿òÀÌ µÉ °Í °°½À´Ï´Ù. ¿À´Ã ÇÏ·çµµ ¸ÚÁø ÇÏ·ç ¸¸µå½Ã±â ¹Ù¶ø´Ï´Ù.
¸ñ·Ïº¸±â ÀÌÀüº¸±â
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile Work IT Information Web Identity Work Everyday Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
·Î°í ±âȹ µðÀÚÀÎ ¾ÆÀÌÆÐµå µðÀÚÀÎ Ç÷¡½Ã ¿ÀǼҽº ȣȯ¼º µðÅͶ÷½º ¸ð¹ÙÀÏ Å¬¶ó¿ìµå ½ºÆ¼ºêÀ⽺ ¾÷µ¥ÀÌÆ® À¥±âȹ ¾Û µðÁöÅÐ Æ®·»µå ÀÎÅÍÆäÀ̽º À¥ ¼Ò¸ðǰ LQ HTML5 CIP ºê·£µå ¸¶ÄÉÆÃ ¸ð¹ÙÀÏ ¾Û ·Îµå¸Ê ºñÁî´Ï½º ¼Ö·ç¼Ç 11¹ø°¡ ºê·Î½´¾î ÇÁ·Î±×·¡¸Ó ¸®´õ½Ê ½À°ü ¸ð¹ÙÀÏ ÄíÆù µðÀÚÀÎ ÆùÆ® »çÁø À¥µðÀÚÀÎ ¿öµå