{"id":2671,"date":"2010-04-10T02:09:49","date_gmt":"2010-04-09T17:09:49","guid":{"rendered":"http:\/\/hyunsik.me\/wordpress\/?p=2671"},"modified":"2015-01-22T23:24:24","modified_gmt":"2015-01-22T14:24:24","slug":"%eb%84%a4%ec%9d%b4%eb%b2%84-%ea%b2%80%ec%83%89-ui-%eb%b3%80%ea%b2%bd%ec%8b%9c%ed%80%80%ec%8a%a4-%ea%b2%80%ec%83%89-%ec%a0%81%ec%9a%a9","status":"publish","type":"post","link":"http:\/\/hyunsik.me\/wordpress\/?p=2671","title":{"rendered":"\ub124\uc774\ubc84, \uac80\uc0c9 \ud398\uc774\uc9c0 UI \ubcc0\uacbd(\uc2dc\ud000\uc2a4 \uac80\uc0c9 \uc801\uc6a9)"},"content":{"rendered":"

\"\"<\/a><\/p>\n

2010\ub144 4\uc6d4 10\uc77c,
\n\ub124\uc774\ubc84\uac00 \uc2dc\ud000\uc2a4 \uac80\uc0c9\uc744 \uc624\ud508\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n

\ud06c\uac8c \ubcc0\ud55c \uc810\uc740 \ubb34\uc5c7\ubcf4\ub2e4\ub3c4 \uba54\ub274\uc785\ub2c8\ub2e4.
\n \uc0c1\ub2e8(\ud0ed \ubaa8\uc591) \uc758 \uac80\uc0c9 \uba54\ub274\uac00 \uc88c\uce21(\ud070 \ubc84\ud2bc \ubaa8\uc591) \uc73c\ub85c \uc774\ub3d9<\/span>\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n

\uba54\ub274\ub294 \ube14\ub85c\uadf8, \uc9c0\uc2ddin, \uc774\ubbf8\uc9c0, \ub3d9\uc601\uc0c1, \ub274\uc2a4, \uc0ac\uc774\ud2b8 \uc5d0 \ub300\ud55c \uac80\uc0c9\uc744 \uae30\ubcf8\uc73c\ub85c \ub450\uace0,
\n\uc608\uc804\uc5d0 \uc788\ub358 \ub098\uba38\uc9c0 \uba54\ub274\ub294 \ub354\ubcf4\uae30 \uc601\uc5ed\uc73c\ub85c \uc228\uaca8\uc838\uc788\ub124\uc694.
\n\uae00\uaf34\uc740 \uc804\ubd80 \ub098\ub214\uae00\uaf34\ub85c \ucc98\ub9ac\ub418\uc5c8\uace0,
\n\ud544\uc694\uc5c6\ub294 \ubd80\ubd84\uc5d0\ub294 \uc774\ubbf8\uc9c0\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc73c\ub824\uace0 \ub178\ub825\ud55c \uac83\uc73c\ub85c \ubcf4\uc5ec\uc9d1\ub2c8\ub2e4.
\n\uc88b\uc544\ud558\ub294 \uc2a4\ud0c0\uc77c\uc785\ub2c8\ub2e4. \uae54\ub054\ud558\ub124\uc694.<\/p>\n

\"\"<\/p>\n

\uc77c\ubc18 \uac80\uc0c9\uacfc \uc774\ubbf8\uc9c0\ub294 UI \uac00 \uc870\uae08 \ub2e4\ub978\ub370\uc694.
\n\uae30\ubcf8\uc801\uc73c\ub85c \ube14\ub85c\uadf8, \uc9c0\uc2ddiN, \ub274\uc2a4, \uc0ac\uc774\ud2b8\uc5d0 \ub300\ud55c \uac80\uc0c9\uacb0\uacfc\ub294 \uc704\uc640 \uac19\uc774 \ub098\uc635\ub2c8\ub2e4.<\/p>\n

\"\"<\/p>\n

\uc774\ubbf8\uc9c0\uc640 \ub3d9\uc601\uc0c1\uc5d0 \ub300\ud55c \uac80\uc0c9 \uacb0\uacfc\ub294 \uc704\uc640 \uac19\uc774 \ubcf4\uc785\ub2c8\ub2e4.
\n\ubc30\uacbd\uc744 \ud68c\uc0c9\ud1a4\uc73c\ub85c \ucc98\ub9ac\ud558\uc5ec, \uc774\ubbf8\uc9c0\ub098 \ub3d9\uc601\uc0c1\uc5d0 \ub300\ud55c \uac00\ub3c5\uc131\uc744 \ub192\uc600\ub2e4\uace0 \ud569\ub2c8\ub2e4.
\n\ub204\uad6c \uc0dd\uac01\uc778\uc9c0 \uc815\ub9d0 \uad1c\ucc2e\ub124\uc694.<\/p>\n

HTML \uc18c\uc2a4<\/span>\ub97c \uc0b4\ud3b4\ubcfc\uae4c\uc694?<\/p>\n

\ub124\uc774\ubc84 \uba54\uc778 \ud398\uc774\uc9c0\ub294 HTML\uc744 \uc798 \uc815\ub9ac\ud574\ub193\uc558\ub294\ub370,
\n\uc0c8\ub85c\uc6b4 \uac80\uc0c9 \ud398\uc774\uc9c0\ub294 HTML\uc744 \ub9c8\uce58 \uad6c\uae00\ucc98\ub7fc \uc815\ub82c\uc744 \ud480\uc5b4\uc11c \uc11c\ube44\uc2a4<\/span>\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.
\nHTML\uc744 \uc815\ub9ac\ud558\ub294\ub370 5\ucd08\ub3c4 \uc548\uac78\ub9b4 \ubfd0 \ub354\ub7ec \uc815\ub82c\uc744 \ud480\uc5b4\uc11c \uc11c\ube44\uc2a4 \ud55c\ub2e4\uace0 \ud574\uc11c
\n\uc815\ub82c\uc774 \ub41c \ud398\uc774\uc9c0\uc640 \ud2b9\ubcc4\ud55c \ucc28\uc774\uac00 \uc788\ub294 \uac74 \uc544\ub2d9\ub2c8\ub2e4\ub9cc,
\n\uc774\ub807\uac8c \uc815\ub82c\uc744 \ud480\uc5b4\uc11c \uc11c\ube44\uc2a4\ub97c \ub0b4\ubcf4\ub0b4\ub2c8 \uad1c\ud788 \uba4b\uc838\ubcf4\uc774\ub124\uc694.<\/p>\n

\"\"<\/p>\n

\uc544\ub798\uc640 \uac19\uc740 \ubc29\uc2dd\uc73c\ub85c \ube0c\ub77c\uc6b0\uc800\ubcc4\ub85c CSS \ub97c \ub2e4\ub974\uac8c \uc801\uc6a9<\/span>\ud55c \uac83 \uac19\uc2b5\ub2c8\ub2e4.
\n<html class=”ie7 win”\u00a0lang=”ko”>
\n<html class=”webkit safari chrome win” lang=”ko”>
\n\uac1c\uc778\uc801\uc778 \uc0dd\uac01\uc73c\ub85c\ub294 \ub3d9\uc77c CSS \ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ud5a5\uc73c\ub85c \uac00\ub294 \uac83\uc774 \uc88b\uc558\uc744 \ub4ef \ud55c\ub370,
\n\ub124\uc774\ubc84\ub77c\ub294 \ud070 \ud3ec\ud138\uc774 \ubb54\uac00 \uc774\uc720\uac00 \uc788\uc5c8\ub098 \ubd05\ub2c8\ub2e4.<\/p>\n

\ud504\ub860\ud2b8\ub294 \uc21c\uc218\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c\ub9cc \ub418\uc5b4\uc788\ub294 \uac83 \uac19\uc740\ub370\uc694.
\n\ub124\uc774\ubc84\uc758 \uc624\ud508 \ud504\ub85c\uc81d\ud2b8 \uc911 \ud558\ub098 \uc778 Jindo\uac00 \uae30\ubcf8 js\ud504\ub808\uc784\uc6cd\uc73c\ub85c include <\/span>\ub418\uc5b4\uc788\uc2b5\ub2c8\ub2e4.
\n\uacfc\uc5f0 Jquery\uac00 \ub0a0\ub77c\ub2e4\ub2c8\uace0 \uc788\ub294 \uc774 \uc0c1\ud669\uc5d0 \ud65c\uc131\ud654\ub420 \uc218\ub294 \uc5c6\uaca0\uc9c0\ub9cc
\n\ud65c\uc131\ud654 \ub420 \uac00\ub2a5\uc131\uc774 \ubcf4\uc778\ub2e4\uba74 \uacf5\ubd80\ud574\ubcf4\uc544\uc57c \uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

\"\"<\/p>\n

2010\ub144 4\uc6d4 10\uc77c \ud604\uc7ac \uae30\uc900\uc73c\ub85c \ub208\uc5d0 \ubcf4\uc774\ub294 js \ud30c\uc77c\uc740 3\uac00\uc9c0<\/span> \uc815\ub3c4\uc778\ub370\uc694.
\n\ubc29\uae08 \ub9d0\uc500\ub4dc\ub9b0 Jindo<\/span> \uc640 \ub610 \ud558\ub098\ub294 \uc88c\uce21\uc5d0 \uc788\ub294 \uae30\uac04 \uba54\ub274\uc5d0 \ub300\ud55c
\n \uc2ac\ub77c\uc774\ub354\ub97c \uc704\ud55c js \ud30c\uc77c<\/span>\uc778 \uac83 \uac19\uace0,
\n\ub610 \ud558\ub098\ub294 \ucd5c\uc0c1\ub2e8 GNB(Global Navigation Bar) \uc5d0 \ub300\ud55c js \ud30c\uc77c<\/span>\ub85c \ubcf4\uc785\ub2c8\ub2e4.<\/p>\n

\uc0c1\ub2e8 \uc624\ub978\ucabd \ubd80\ubd84\uc758 \uc0ac\uc804\/\ub274\uc2a4\/\uc99d\uad8c\/\ubd80\ub3d9\uc0b0\/\uc9c0\ub3c4\/\uc601\ud654\/ \ub354\ubcf4\uae30 \ubd80\ubd84\uc5d0 \ubcf4\uba74
\n\ub354\ubcf4\uae30\ub97c \ub20c\ub7ec\uc11c My\uba54\ub274\ub97c \uc124\uc815\ud560 \uc218 \uc788\ub294\ub370 \uadf8 \ubd80\ubd84 \ub54c\ubb38\uc5d0
\n\uc0c1\ub2e8 GNB\ub97c \uc704\ud55c js \ud30c\uc77c \ud558\ub098\ub97c \ub530\ub85c \ub9cc\ub4e0 \uac83\uc73c\ub85c \ubcf4\uc785\ub2c8\ub2e4.<\/p>\n

\uc11c\ubc84\ub2e8 \uc18c\uc2a4\ub97c \ubcf4\uace0 \uc788\ub294\uac8c \uc544\ub2c8\ub77c\uc11c \uc815\ud655\ud788 \uc5b4\ub5bb\uac8c \uad6c\uc131\ub418\uc5b4\uc788\ub294\uc9c0\ub294 \ubcfc \uc218 \uc5c6\uc5b4\uc11c \uc544\uc27d\ub124\uc694.
\nGNB\ub97c \uc704\ud55c js\uc640 \uc2ac\ub77c\uc774\ub354\ub97c \uc704\ud55c js\ub294 $\ub85c \ub3c4\ubc30\ub97c \ud55c \uac83\uc73c\ub85c \ubcf4\uc544
\njindo \ub97c \uc5f4\uc2ec\ud788 \uc0ac\uc6a9\ud55c \uac83\uc73c\ub85c \ubcf4\uc5ec\uc9d1\ub2c8\ub2e4.<\/p>\n

\uad6c\uae00 \uba54\uc778\uc740 <!DOCTYPE html> \ub85c HTML5 \ub85c \uc6b0\uc120 \uc120\uc5b8\uc744 \ud574\ub193\uc558\ub294\ub370,
\n\ub124\uc774\ubc84\ub294 HTML5\ub294 \uc544\ub2d9\ub2c8\ub2e4. HTML5\ub97c \uc4f0\uae30\uc5d0\ub294 \uad6c\uae00 \uba54\uc778\ubcf4\ub2e4 \ucf54\ub4dc\uac00 \uae38\uc5b4\uc11c \ubb38\uc81c\uac00 \uc788\uc5c8\uc744 \uac83\uc774\uace0,
\n\uc544\uc9c1 HTML5\ub97c \uc0ac\uc6a9\ud558\uae30\uc5d0 \uc870\uae08 \uc774\ub974\uae30\ub294 \ud569\ub2c8\ub2e4.<\/p>\n

\ubcf8 \ube14\ub85c\uadf8, HyunsikLog \ub3c4 \uac00\ub054 \uc9c4\ud589\ud558\ub294 \ud3ec\uc2a4\ud2b8\uc5d0 HTML5 \uad00\ub828 \ud0dc\uadf8\ub098 js \ub97c \uc0ac\uc6a9\ud558\uae30 \ub54c\ubb38\uc5d0
\nHTML5\ub85c \ud5e4\ub354 \uc120\uc5b8\uc744 \ud574\ub193\uc558\ub294\ub370\uc694.
\n\ud070 \uc758\ubbf8\uac00 \uc788\ub294\uc9c0\ub294 \ubaa8\ub974\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

\uce90\ub9ad\ud130 \uc14b\uc740 EUC-KR \uc744 \uc0ac\uc6a9<\/span>\ud558\uc600\ub124\uc694.
\n\ub124\uc774\ubc84 \uba54\uc778\uc774 UTF-8 \uc744 \uc0ac\uc6a9<\/span>\ud558\uace0 \uc788\ub294\ub370\uc694.
\n\uaf2d \uac19\uc740 \uce90\ub9ad\ud130 \uc14b\uc744 \uc0ac\uc6a9\ud574\uc57c \ud558\ub294 \uac74 \uc544\ub2c8\uc9c0\ub9cc
\n\uadf8\ub798\ub3c4 \uc65c \ub2e4\ub978 \uce90\ub9ad\ud130 \uc14b\uc744 \uc0ac\uc6a9\ud588\ub294\uc9c0 \uad81\uae08\ud574\uc9c0\ub124\uc694.<\/p>\n

\ucc28\uc774\uac00 \ub9ce\uc774 \uc788\ub124\uc694.
\n\uc11c\ub85c \ub2e4\ub978 \ud300\uc774 \uac1c\ubc1c\ud55c \uac83\uc77c\uae4c\uc694?<\/p>\n

\uc870\uae08 \ub354 \uae4a\uc774 \ubcf4\uace0 \uc2f6\uc740\ub370, \uc5b4\ub5bb\uac8c \uad6c\uc131\ub418\uc5b4 \uc788\ub294\uc9c0,\ufeff
\n\ud30c\uc77c \uce90\uc2dc\uac00 \uc548\ub418\ub294 \uc0c1\ud669\uc5d0\uc11c \uac80\uc0c9 \uacb0\uacfc\ub97c \uc5b4\ub5bb\uac8c
\n\ube68\ub9ac \ubfcc\ub9b4 \uc218 \uc788\ub294 \uac74\uc9c0 \uc790\uc138\ud788 \ubcf4\uace0 \uc2f6\uc740\ub370 \uc544\uc27d\ub124\uc694.<\/p>\n

\uac1c\uc778\uc801\uc73c\ub85c\ub294 \uc774\ubc88 \ub124\uc774\ubc84\uc758 \uac80\uc0c9 \uac1c\ud3b8\uc774 \uc88b\uc544 \ubcf4\uc785\ub2c8\ub2e4.
\n\uc774 \ud3ec\uc2a4\ud2b8\uc5d0 \ub300\ud574 \uac01\uc885 \ub313\uae00 \ud658\uc601\ud569\ub2c8\ub2e4.<\/p>\n

\uc88b\uc740 \uc2dc\uac04 \ub418\uc2ed\uc2dc\uc624.
\n\uac10\uc0ac\ud569\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"

2010\ub144 4\uc6d4 10\uc77c, \ub124\uc774\ubc84\uac00 \uc2dc\ud000\uc2a4 \uac80\uc0c9\uc744 \uc624\ud508\ud588\uc2b5\ub2c8\ub2e4. \ud06c\uac8c \ubcc0\ud55c \uc810\uc740 \ubb34\uc5c7\ubcf4\ub2e4\ub3c4 \uba54\ub274\uc785\ub2c8\ub2e4. \uc0c1\ub2e8(\ud0ed \ubaa8\uc591) \uc758 \uac80\uc0c9 \uba54\ub274\uac00 \uc88c\uce21(\ud070 \ubc84\ud2bc \ubaa8\uc591) \uc73c\ub85c \uc774\ub3d9\ud588\uc2b5\ub2c8\ub2e4. \uba54\ub274\ub294 \ube14\ub85c\uadf8, \uc9c0\uc2ddin, \uc774\ubbf8\uc9c0, \ub3d9\uc601\uc0c1, \ub274\uc2a4, \uc0ac\uc774\ud2b8 \uc5d0 \ub300\ud55c \uac80\uc0c9\uc744 \uae30\ubcf8\uc73c\ub85c \ub450\uace0, \uc608\uc804\uc5d0 \uc788\ub358 \ub098\uba38\uc9c0 \uba54\ub274\ub294 \ub354\ubcf4\uae30 \uc601\uc5ed\uc73c\ub85c \uc228\uaca8\uc838\uc788\ub124\uc694. \uae00\uaf34\uc740 \uc804\ubd80 \ub098\ub214\uae00\uaf34\ub85c \ucc98\ub9ac\ub418\uc5c8\uace0, \ud544\uc694\uc5c6\ub294 \ubd80\ubd84\uc5d0\ub294 \uc774\ubbf8\uc9c0\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc73c\ub824\uace0 \ub178\ub825\ud55c \uac83\uc73c\ub85c \ubcf4\uc5ec\uc9d1\ub2c8\ub2e4. \uc88b\uc544\ud558\ub294 \uc2a4\ud0c0\uc77c\uc785\ub2c8\ub2e4. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[176,8],"tags":[820,814,162,808,806,812,807,45,442,813,48,819,47,816,818,655,46,817,809,804,780,815,811,810,20,802,803,598,163,805,291],"jetpack_featured_media_url":"","views":"","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/2671"}],"collection":[{"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2671"}],"version-history":[{"count":1,"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/2671\/revisions"}],"predecessor-version":[{"id":6695,"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/2671\/revisions\/6695"}],"wp:attachment":[{"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2671"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}