À¥À» ÅëÇØ »õ·Î¿î âÁ¶¸¦ ²Þ²Ù´Â Àΰ£ - 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 | 2014.09.11 | Hit : 4562
ÆÐ·²·º½º ½ºÅ©·Ñ jQuery css JavaScript À¥µðÀÚÀÎ À¥»çÀÌÆ®
¸ñ·Ïº¸±âÀÌÀüº¸±â
90³â´ë ÃÊ¹Ý ´Ü¼øÇÑ ÇÏÀÌÆÛ ¸µÅ©·Î ±¸¼ºµÈ À¥»çÀÌÆ®¿¡¼­ºÎÅÍ È­¸éÀ» ±¸¼ºÇÏ´Â °Í¿¡ ´ëÇÑ °í¹ÎÀº Ç×»ó ÀÖ¾î¿Ô´Ù. ´ç½Ã¿£ ±×°ÍÀ» Áß¿äÇÏ°Ô »ý°¢ÇÏÁö´Â ¾Ê¾ÒÁö¸¸ ¸»ÀÌ´Ù. À¥ ±â¼úÀº Ç×»ó ÁøÈ­Çß°í ÁøÈ­Çϸ鼭 »ç¿ëÀÚ°¡ À¥¿¡¼­ ÇൿÇÏ´Â ¹æ½ÄÀ» ¹Ù²Ù¾î ¿Ô´Ù.
 
JavaScript ÇÁ·¹ÀÓ¿öÅ©Áß ÇϳªÀÎ jQuery°¡ ³Î¸® ¾²À̱⠽ÃÀÛÇϸ鼭 À̸¦ Ȱ¿ëÇÑ jQuery Ç÷¯±×ÀεéÀÌ À¥ µðÀÚÀÎÀÇ Å« ºÎºÐÀ» Â÷ÁöÇϱ⠽ÃÀÛÇß´Ù. ´Ü¼øÇÑ ±×·¡ÇÈ È¤Àº css style¿¡ jQuery°¡ °³ÀÔÇϸ鼭 À¥ ÆäÀÌÁö°¡ »ç¿ëÀÚÀÇ Çൿ¿¡ Á¦°¢±â ¹ÝÀÀÇÏ´Â ÀÌÀü¿¡ ¾ø´ø »ç¿ëÀÚ °æÇèÀ» ¸¸µé¾î ³»±â ½ÃÀÛÇÑ °ÍÀÌ´Ù.
 
ÆÐ·²·º½º Ç÷¯±×ÀÎÀº ¿©·¯°³ÀÇ ·¹À̾ °ãÃÄµÎ°í »ç¿ëÀÚÀÇ ¸¶¿ì½º Æ÷ÀÎÅÍ À§Ä¡¿¡ µû¶ó, ȤÀº ½ºÅ©·ÑÀÌ ³»·Á°¡°Å³ª ¿Ã¶ó°¨¿¡ µû¶ó ¿©·¯°³ÀÇ °ãÃĵР·¹À̾ Á¦À۱⠴ٸ¥ ¼Óµµ·Î ¿òÁ÷À̸ç ÀÔüÀûÀÎ È¿°ú¸¦ ÁØ´Ù. ƯÈ÷ ¼¼·Î·Î ±æÂßÇÑ ÇÑ ÆäÀÌÁö µðÀÚÀο¡ ÀûÇÕÇÏ´Ù. ÆÐ·²·º½º ½ºÅ©·ÑÀº ¿©·¯°¡Áö jQuery Ç÷¯±×Àΰú ¼¯¿© ½Ã³ÊÁö¸¦ ¹ßÈÖÇÑ´Ù. ¿ÀºêÁ§Æ®ÀÇ Å©±â¸¦ ¸ð´ÏÅÍÀÇ Å©±â¿¡ ¸Â°Ô Ç¥ÇöÇÏ¿© ¸ðµç ¸ð´ÏÅÍ¿¡¼­ µ¿ÀÏÇÑ °æÇèÀ» ¾È°ÜÁÖ°Ô µÈ´Ù.
 
ÆÐ·²·º½º ½ºÅ©·ÑÀº ´Ü¼øÈ÷ À§¿¡¼­ ¾Æ·¡·Î, ȤÀº ¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î ¸¶¿ì½ºÀÇ ÈÙÀ» µ¹¸®¸ç ÆäÀÌÁöÀÇ ÄÁÅÙÃ÷¸¦ ¼ÒºñÇÏ´Â ´ë½Å ³×ºñ°ÔÀ̼ÇÀ» Ŭ¸¯Çϰųª ½ºÅ©·Ñ¹Ù¸¦ ¸¶¿ì½º·Î Ŭ¸¯Çϰí õõÈ÷ ³»¸®´Â ÇüÅÂÀÇ »ç¿ëÀÚ °æÇèÀ» ¸¸µé¾î ³Â´Ù. ÈÙÀ» µ¹·Á ÆäÀÌÁö¸¦ ³»¸®¸é ÁÁÀº »ç¿ëÀÚ °æÇèÀ» ¾ò±â°¡ ½±Áö ¾Ê´Ù. ÈÙÀ» µ¹¸®¸é È­¸éÀ» ±¸¼ºÇÏ´Â ¿ÀºêÁ§Æ®µéÀÌ Àǵµ¿¡ ¸ÂÁö ¾Ê°Ô ¶Ò¶Ò ²÷°Ü Ç¥ÇöµÇ´Â °æ¿ì°¡ ¸¹±â ¶§¹®ÀÌ´Ù.
 
¿©·¯ ÇØ»óµµ¸¦ °¡Áø ¿©·¯¸íÀÇ »ç¿ëÀÚ¿¡°Ô °°Àº »ç¿ëÀÚ °æÇèÀ» ¾È°ÜÁÖ±â À§Çؼ­ ´Ü¼øÇÏ°Ô 1024px ȤÀº 960pxµîÀÇ °¡·Î °ø°£À» °íÁ¤ÇÏ´Â ¹æ¹ýÀ» »ç¿ëÇÏ´ø À¥ È­¸éÀÌ ¿©·¯°¡Áö Ç÷¯±×ÀÎÀ» »ç¿ëÇϸ鼭 »ç¿ëÀÚ°¡ ÀÛÀº ¸ð´ÏÅ͸¦ »ç¿ëÇÏ´ø Å« ¸ð´ÏÅ͸¦ »ç¿ëÇÏ´ø, ±æÂßÇÑ ¸ð´ÏÅ͸¦ »ç¿ëÇÏ´ø ³ÐÀûÇÑ ¸ð´ÏÅ͸¦ »ç¿ëÇÏ´ø ²Ë Âù È­¸éÀ» Á¦°øÇÔÀ¸·Î½á ÄÁÅÙÃ÷¸¦ È¿°úÀûÀ¸·Î Àü´ÞÇÒ ¼ö ÀÖ°Ô µÇ¾ú´Ù. À¥»çÀÌÆ®¸¦ ±¸¼ºÇÏ´Â ¹æ¹ýÀº ¿©·¯°¡Áö ±â¼ú¿¡ ÀÇÇØ ´Ù¾ç¼ºÀÌ »ý°å´Ù. ÁÁÀº »ç¿ëÀÚ °æÇèÀ» ³»±â À§ÇØ, ÄÁÅÙÃ÷¸¦ È¿°úÀûÀ¸·Î Àü´ÞÇϱâ À§ÇØ À¥ È­¸éÀ» Àß ±¸¼ºÇÏ¸é »çÀÌÆ®¿¡ ´ëÇÑ ½Å·Ú°¡ »ý±æ°ÍÀÌ¸ç ¾î¶² ¹æ½ÄÀ¸·Îµç »ç¿ëÀÚ¿Í »çÀÌÆ® ¸ðµÎ¿¡°Ô ±àÁ¤ÀûÀÎ ¿µÇâÀ» ¹ÌÄ¥ °ÍÀÌ´Ù.

 
ÆÐ·²·º½º È¿°ú Á¦´ë·Î ³»±â
 
MediumÀÇ µðÀÚÀ̳Ê, Dave Gamache°¡ Á¦¾ÈÇÏ´Â ÆÐ·²·º½º Á¦´ë·Î ¾²´Â ¹ý. °£´ÜÇÑ °Í¸¸ ¼Ò°³ÇÏ¿´À¸´Ï, º»¹®À» ²À È®ÀÎÇϽñæ.
 
ÇØ¾ß ÇÒ °Í :
 
- ºê¶ó¿ìÀú°¡ ¾Ö´Ï¸ÞÀÌ¼Ç Çϱâ ÁÁÀº È¿°úµéÀ» ½á¶ó. translate3d, scale, rotation, opacity¸¦ Á¦¿ÜÇϸé 60ÇÁ·¹ÀÓ ÀÌ»óÀÌ ³ª¿ÀÁö ¾ÊÀ» °¡´É¼ºÀÌ ³ô´Ù.
 - JS·Î ¾Ö´Ï¸ÞÀ̼ÇÀ» ÁÖ±â Àü¿¡, window.requestAnimationFrameÀ» ¸ÕÀú »ç¿ëÇØ¶ó. ÀÌ·¸°Ô ÇÏ¸é ºê¶ó¿ìÀú°¡ »õ·Î ±×¸®±â Àü¿¡ ¾Ö´Ï¸ÞÀ̼ÇÀ» ÁÙ ¼ö ÀÖ´Ù.
- ¹Ý¿Ã¸²À» Á¦´ë·Î ÇØ¶ó. 54.2356345234578px °°Àº °ªÀº ºÒÇÊ¿äÇÏ´Ù. ¼Ò¼ýÁ¡ µÑ° ÀÚ¸®·Îµµ ÃæºÐÈ÷ È¿°ú¸¦ º¼ ¼ö ÀÖ´Ù.
- ºäÆ÷Æ® ¾È¿¡ ÀÖ´Â ¿ä¼Òµé¸¸ ¾Ö´Ï¸ÞÀÌÆ®Çضó. È­¸é ¹Ù±ù¿¡ ÀÖ´Â ³à¼®µéÀ» ¿òÁ÷¿©ºÁ¾ß ¹«½¼ ¼Ò¿ëÀΰ¡?
- fixed, absolute positionÀÎ ¿ä¼Òµé¸¸ ¾Ö´Ï¸ÞÀÌÆ®Çضó. ÇÊÀÚ º»Àεµ ÀÌÀ¯´Â Àß ¸ð¸£Áö¸¸ ±×·¸°Ô ÇÏ¸é ÆÛÆ÷¸Õ½º°¡ È® ¿Ã¶ó°¡´Â °É °æÇèÇß´Ù°í.
- ¿ÀºêÁ§Æ® ¾È¿¡ ¸ðµç ¾Ö´Ï¸ÞÀ̼ÇÀ» Á¤ÀÇÇØ¶ó. ¹¹ ÀÌ·±´Ù°í ÇØ¼­ ÆÛÆ÷¸Õ½º°¡ ¿Ã¶ó°¡´Â °Ç ¾Æ´ÏÁö¸¸ ÀÌ·¸°Ô ÇÏ¸é ¸ðµç °Ô ÇÑ°á ½¬¿öÁø´Ù.
 
 
ÇÏÁö ¸»¾Æ¾ß ÇÒ °Í :
 
- background-size:cover´Â ÇÇÇØ¶ó. ƯÈ÷ ¾Ö´Ï¸ÞÀÌÆ® ÇÏ·Á´Â °æ¿ì¿¡´Â.
- ½ºÅ©·Ñ À̺¥Æ®¿¡ ¹Ù·Î bindÇÏÁö ¸¶¶ó. Æ÷Áö¼Ç ¾÷µ¥ÀÌÆ® ÇÒ ¶§¿¡´Â ÀÎÅ͹úÀ» Á¶±Ý µÖ¶ó, ¾È±×·¯¸é ¹ÌÄ£µíÀÌ Æ÷Áö¼Ç º¯°æ ½ÅÈ£°¡ °¡¼­ ÆÛÆ÷¸Õ½º¿¡ ¾Ç¿µÇâÀ» ÁØ´Ù. ¸Å 10ms Á¤µµ¸¶´Ù ¾÷µ¥ÀÌÆ® ÇØµµ ÃæºÐÇÏ´Ù.
- ¾öû³ª°Ô Å« À̹ÌÁö¸¦ ¾Ö´Ï¸ÞÀÌÆ® Çϰųª, Å©±â¸¦ È® ÁÙÀÌÁö ¸¶¶ó.
- (°¡±ÞÀû) Çѹø¿¡ ³Ê¹« ¸¹Àº °É µ¹¸®Áö ¸¶¶ó. ½ÇÁ¦·Î ¹º°¡ ¹®Á¦°¡ ¹ß»ýÇÑ ÀûÀº ¾ø¾úÁö¸¸, °¡´É¼ºÀÌ ³ô´Ù°í »ý°¢ÇÑ´Ù. parent¿Í child¿¡ ÇѲ¨¹ø¿¡ ¾Ö´Ï¸ÞÀ̼ÇÀ» ÁÙ ¶§ ¹ö¹÷ÀÌ´Â °æ¿ì°¡ ÀÖ¾ú´Ù.
 
 
Parallax´Â(Æä·²·¢½º) °Å¸®¿Í °¢µµ¿¡ µû¶ó »ç¹°ÀÌ ´Ù¸£°Ô º¸ÀÌ´Â Â÷À̸¦ ¸»ÇÕ´Ï´Ù. ¸»·Î´Â ÀÌÇØ°¡ Àß ¾ÈµÇ½Å´Ù±¸¿ä? ¾Æ·¡ ¿¹Á¦¸¦(¼Ò½º: wikipedia) º¸½Ã¸é ÀÌÇØ°¡ Á¶±Ý ´õ Àß µÇ½Ç °Í°°³×¿ä. “»ç¹°°ú ½Ã¼±ÀÇ °¢µµ” ±×¸®°í “»ç¹°°ú ½Ã¼±ÀÇ °Å¸®“¿¡ µû¶ó »ç¹°ÀÇ ¸ð½ÀÀÌ ´Ù¸£°Ô º¸ÀÌ´Â °ÍÀ» º¸¿©ÁÖ´Â ¿¹ÀÔ´Ï´Ù.




 
ÀÌ·¯ÇÑ ½Ã°¢ÀûÀÎ È¿°ú¸¦ À¥»çÀÌÆ®¿¡ Àû¿ëÇϸé À¥»çÀÌÆ®¸¦ ½ºÅ©·ÑÇÒ ¶§¸¶´Ù ½Ã½Ã°¢°¢À¸·Î º¯ÇÏ´Â È­¸éÀ» º¼ ¼ö Àֱ⠶§¹®¿¡ »ç¿ëÀÚµéÀº ÀÔü°¨À» ´À³¥ ¼ö ÀÖ½À´Ï´Ù.
 
°£´ÜÇÑ ¿¹·Î ¹é±×¶ó¿îµå À̹ÌÁö´Â(background image) ¸Ö¸® ÀÖ´Ù°í °¡Á¤Çϰí õõÈ÷ ¿òÁ÷À̵µ·Ï ÇÏ°í ¹é±×¶ó¿îµå À§¿¡ ÀÖ´Â Æ÷±×¶ó¿îµå À̹ÌÁö´Â(foreground image) ½Ã¼±°ú °¡±õ´Ù°í °¡Á¤ÇÏ¿© ¹é±×¶ó¿îµå º¸´Ù´Âºü¸£°Ô ¿òÁ÷ÀÎ´Ù¸é ¸¶¿ì½º·Î È­¸éÀ» ½ºÅ©·ÑÀ» ÇÒ ¶§¸¶´Ù µÎ°¡Áö ·¹À̾ ´Ù¸¥ ¼Óµµ·Î ¿òÁ÷À̱⠶§¹®¿¡ ÀÔü°¨À» ´À³¥ ¼ö ÀÖ´Â °ÍÀÔ´Ï´Ù.

 
Æ©Å丮¾ó,¼Ò½º
 


ÆÐ·²·º½º ½ºÅ©·Ñ¸µÀ¸·Î Á¦ÀÛµÈ À¥»çÀÌÆ®¸¦ º¸½Ã·Á¸é ¾Æ·¡ Á¦¸ñÀ» Ŭ¸¯Çϼ¼¿ä.

Posted by kimdirector | 2014.09.11 | Hit : 4562
Origin http://sir.co.kr/bbs/board.php?bo_table=pl_talk&wr_id=4187
Tags ÆÐ·²·º½º ½ºÅ©·Ñ jQuery css JavaScript À¥µðÀÚÀÎ À¥»çÀÌÆ®
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=99

COMMENT
Commented by kimdirector
2014.09.11 11:20:20 X
º» ³»¿ëÀº ±×´©º¸µå °³¹ßÀÚ °³¹ßÀÚ Ä¿¹Â´ÏƼ¿¡ µî·ÏµÈ ³»¿ëÀÔ´Ï´Ù. [Æä·¼·º½º È¿°ú Á¦´ë·Î³»±â] ºÎÅÍÀÇ ³»¿ëÀº ½ºÅ©·¦À» ÇØ µÐ »çÀÌÆ®ÀÇ ³»¿ëÀ» Ãß°¡Çؼ­ ÀÛ¼ºµÈ ³»¿ëÀÔ´Ï´Ù. URL¸¦ ¾Ë°í °è½Å ºÐÀÌ ÀÖÀ¸½Ã¸é ¾Ë·ÁÁֽñ⠹ٶø´Ï´Ù.
¸ñ·Ïº¸±â ÀÌÀüº¸±â
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 UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
Àü·« ŸÀÌÆ÷±×·¡ÇÇ µðÀÚÀÎ ¹ÙÅÁÈ­¸é ¾ÖÇø®ÄÉÀÌ¼Ç ÆÌij½ºÆ® µðÀÚÀÎ ¼Ò½º ¸®´º¾ó ¾ÆÀ̵ð¾î µðÀÚÀÎ ¶óÀ̺귯¸® ¹«·á ÀÎÅÍÆäÀ̽º ½À°ü °³ÀÎ Ç÷¡½Ã ºê·£µå ¾ÆÀ̵§Æ¼Æ¼ ÇÁ·¹ÀÓ ¼³Á¤ °³¹ßÀÚ À̺¥Æ® ¶óÀÌÇÁ½ºÅ¸ÀÏ isTalk ShareBoard ·Î°íµðÀÚÀÎ À¥Áø ¿Â¶óÀα¤°í Ä«¸Þ¶ó jQuery ¾ÆÀÌÆÐµå Ç÷§Æû UX ¼º°ø Creative ÅÂºí¸´ ¸®´õ½Ê ¾îÇРȨÆäÀÌÁö À¯¾Æ±³À° Á¦¾È¼­ À¥µðÀÚÀ̳Ê