{"id":949,"date":"2012-07-24T17:18:13","date_gmt":"2012-07-24T08:18:13","guid":{"rendered":"http:\/\/brain.dailyon.net\/?p=948"},"modified":"2012-07-24T17:18:13","modified_gmt":"2012-07-24T08:18:13","slug":"%eb%af%b8%eb%94%94%ec%96%b4-%ec%bf%bc%eb%a6%acmedia-query","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=949","title":{"rendered":"\ubbf8\ub514\uc5b4 \ucffc\ub9ac(Media Query)"},"content":{"rendered":"

\ubbf8\ub514\uc5b4 \ucffc\ub9ac(Media Query)<\/strong><\/p>\n

<\/strong>\ucd9c\ucc98 ;?http:\/\/blog.naver.com\/PostView.nhn?blogId=insidebig&logNo=40144656994<\/a><\/p>\n

\ud604\uc7ac\uc758 \ubbf8\ub514\uc5b4 \ucffc\ub9ac\uac00 \uc788\uae30\uae4c\uc9c0 \uadf8 \uc2dc\uc791\uc740 \ub180\ub78d\uac8c\ub3c4 10\uc5ec\ub144 \uc804\uc73c\ub85c \uac70\uc2ac\ub7ec \uc62c\ub77c\uac04\ub2e4.<\/p>\n

\uc5ec\uae30\uc5d0 \ub354\uc6b1 \ub180\ub77c\uc6b4 \uc0ac\uc2e4\uc740 W3C(World Wide Web Consortium)\uac00 \ub2e4\uac00\uc62c \ubbf8\ub798\uc0ac\ud68c\uc5d0?\ub300\ud574?\uc815\ud655\ud558\uac8c \uc608\uce21\ud588\ub2e4\ub294 \uc810\uc774\ub2e4.<\/p>\n

W3C\uac00 1999\ub144 \uc774\uc804\uc5d0 \uc774\ubbf8, \uc6f9\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\ub294 \uc7a5\uce58\uc758 \ub2e4\uc591\uc131\uc774 \uc810\uc810 \ucee4\uc9c0\ub294 \ud604\uc7ac\uac19\uc740 \uc0c1\ud669\uc774 \uc624\ub9ac\ub780 \uac83\uc744 \uc815\ud655\ud788 \uc608\uce21\ud55c \uac83\uc774\ub2e4.<\/p>\n

\uadf8\ub9ac\uace0?\uadf8 \uc0c1\ud669\uc5d0 \ub300\ud55c \uace0\uc2ec\uc758 \uacb0\uacfc\ubb3c\uc774 \ubc14\ub85c \uc624\ub798\ub418\uace0 \uc775\uc219\ud55c \ud45c\uc900 HTML 4.01\uc5d0 \ud3ec\ud568\ub41c?\ubbf8\ub514\uc5b4 \ud0c0\uc785 \uc120\uc5b8\uc778 \uac83\uc774\ub2e4.<\/p>\n

(\ubbf8\ub514\uc5b4 \ucffc\ub9ac\uc758 \uc804\uc2e0\uc774\ub77c \ubcfc \uc218 \uc788\uc9c0\uc54a\uc744\uae4c)<\/p>\n

\ud558\uc9c0\ub9cc?\ubbf8\ub514\uc5b4 \ud0c0\uc785\uc744 \uc120\uc5b8\ud558\ub294 \ubc29\uc2dd\uc740 \uc2e4\uc81c\ub85c \ub9ce\uc774 \uc0ac\uc6a9\ub418\uc9c0 \uc54a\uc558\ub294\ub370,<\/p>\n

\ubbf8\ub514\uc5b4 \ud0c0\uc785 \ub9cc\uc73c\ub85c\ub294 \ud574\ub2f9 \uae30\uae30\uc758 \ud2b9\uc131\uc744 \uc815\ud655\ud788 \ud30c\uc545\ud558\uc5ec \uc54c\ub9de\uc740 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\uc2dc\ud0a4\uae30 \uc5b4\ub824\uc6e0\ub358 \ubb38\uc81c\uc810\uc774 \uc788\uc5c8\uae30 \ub54c\ubb38\uc774\ub2e4.<\/p>\n

CSS3\uc5d0\ub294 \uc774\ub7f0 \ubbf8\ub514\uc5b4 \ud0c0\uc785\uc758 \ub2e8\uc810\uc744 \uac1c\uc120\ud558\uc5ec, \ub354 \uad6c\uccb4\uc801\uc778 \uc870\uac74\uc5d0\uc11c \ud544\uc694\ud55c \uc2a4\ud0c0\uc77c\uc744 \uc815\ud655\ud558\uac8c \uc801\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud655\uc7a5\ud558\uc600\ub294\ub370<\/p>\n

\uc774\ub97c?\ubbf8\ub514\uc5b4?\ucffc\ub9ac\ub77c\uace0 \ud55c\ub2e4. \uadf8\ub9ac\uace0 \uc774 \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \uc774\uc6a9\ud55c \uc6f9\uc744?\ubc18\uc751\ud615 \uc6f9\ub514\uc790\uc778(responsive web design)\uc774\ub77c\uace0 \ud558\ub294\ub370,<\/p>\n

\ubc18\uc751\ud615 \uc6f9\ub514\uc790\uc778 = \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub294 \uc544\ub2c8\ub77c\uace0 \ud55c\ub2e4. \uc774\uc5d0 \ub300\ud55c \ub0b4\uc6a9\uc740 \uc544\ub798\uc5d0\uc11c \ud55c\ubc88 \ub354 \uc5b8\uae09\ud558\uaca0\ub2e4.<\/p>\n

 <\/p>\n

 <\/p>\n

\"\"<\/p>\n

\ucd9c\ucc98 \ud83d\ude15http:\/\/www.metabrain.com\/responsive-web-designrwd\/<\/a><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

\ud2b9\uc815 \ud574\uc0c1\ub3c4\uc5d0 \ucd5c\uc801\ud654\uc2dc\ud0a8 \uc6f9\uc0ac\uc774\ud2b8\ub294 \ud574\uc0c1\ub3c4\uac00 \ub2e4\ub978 \ub514\ubc14\uc774\uc2a4\uc5d0\uc11c \uc811\uc18d\ud560 \uacbd\uc6b0 \uc704\uc758 \uc0ac\uc9c4\uc5d0\uc11c \ubcf4\ub2e4\uc2dc\ud53c \uadf8 \uad6c\uc870\uc640 \uc2a4\ud0c0\uc77c\uc774 \ud750\ud2b8\ub7ec\uc9c0\uae30 \ub9c8\ub828\uc774\ub2e4.<\/p>\n

\ud558\uc9c0\ub9cc \uc774\ub97c \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub85c \uc5b4\ub290\uc815\ub3c4 \ucee4\ubc84\uac00 \uac00\ub2a5\ud558\ub2e4\ub294 \ud76c\uc18c\uc2dd!<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\ubbf8\ub514\uc5b4 \ucffc\ub9ac\uc5d0 \ub300\ud55c \uad6d\ub0b4\uc678 \ud604\ud669 \ubc0f \uc608\uc81c<\/strong><\/p>\n

 <\/p>\n

\uacb0\ub860\ubd80\ud130 \ub9d0\ud558\uc790\uba74, \ud574\uc678\uc5d0\uc11c\ub294 \uc774\ubbf8 \ud65c\ubc1c\ud558\uac8c \uc5f0\uad6c\ub418\uc5b4 \ud65c\uc6a9\ub418\uace0 \uc788\uc73c\uba70 \uad6d\ub0b4\uc5d0\uc11c\ub3c4 \uadf8 \uc2dc\ub3c4\uac00 \ub4dc\ubb3c\uc9c0\ub9cc \uacf3\uacf3\uc5d0 \ubcf4\uc774\uace0 \uc788\ub2e4.<\/span><\/p>\n

(\uc774\ub294 \uc62c\ud574 \uc911\uc21c\ucbe4\uc5d0 \uc788\uc5c8\ub358 \ubaa8 \ucee8\ud37c\ub7f0\uc2a4\uc758 \uac15\uc758\uc5d0 \uadfc\uac70\ud55c \ub0b4\uc6a9\uacfc \ub9e4\uc77c \ubaa8\ub2c8\ud130\ub9c1\ud558\uace0 \uc788\ub294 \ud2b8\ub80c\ub4dc\ubd84\uc11d\uc744 \ud1a0\ub300\ub85c \ud55c \uac1c\uc778\uc801\uc778 \uc758\uacac\uc784\uc744 \ubc1d\ud78c\ub2e4.)<\/p>\n


\n<\/span><\/p>\n

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

\uc880 \uc624\ub798\ub41c \uc790\ub8cc\uc774\uae34 \ud558\uc9c0\ub9cc NHN\uc758 \uc6f9\ud45c\uc900\ud654\ud300 \ud648\ud398\uc774\uc9c0?http:\/\/html.nhndesign.com\/<\/a><\/span><\/p>\n


\n<\/span><\/p>\n

 <\/p>\n

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

\ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \uc801\uc6a9\ud55c \uc2e0\ud604\uc11d\ub2d8 \uc6f9\uc0ac\uc774\ud2b8?http:\/\/hyeonseok.com\/<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

\"\"<\/p>\n

\uc774\ubaa8\uc158\uc5d0\uc11c \uc81c\uc791\ud588\uc5c8\ub358 CJ\uc81c\uc77c\uc81c\ub2f9 \uc0ac\uc774\ud2b8\uc758 \uc6b0\uce21\uc601\uc5ed\uc758 \uc720\ub3d9\uc131\uc774 \uc720\uc0ac\ud574 \ubcf4\uc774\uc9c0\ub9cc \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \uc774\uc6a9\ud55c \uac83\uc778\uc9c0\ub294 \uac1c\uc778\uc801\uc73c\ub85c \ud655\uc778\ud55c \ubc14 \uc5c6\ub2e4.<\/p>\n

(\uc544\uc2dc\ub294 \ubd84\uc740 \uc9c0\uc2dd\uacf5\uc720 \ubd80\ud0c1\ub4dc\ub9bd\ub2c8\ub2e4)?http:\/\/www.cj.co.kr\/<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

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

\ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \uc801\uc6a9\ud55c \uc608\uc81c\uc0ac\uc774\ud2b8\ub9cc \ub530\ub85c \ubaa8\uc544\ub193\uc740 \ub7ec\ube14\ub9ac\ud55c \uc0ac\uc774\ud2b8!!?http:\/\/mediaqueri.es\/<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

\uad00\ub828\uc790\ub8cc \ubc0f \uc608\uc2dc \uc0ac\uc774\ud2b8 (\ucd9c\ucc98 : NHN \uc6f9\ud45c\uc900\ud654\ud300 \ud648\ud398\uc774\uc9c0)<\/p>\n

 <\/p>\n

 <\/p>\n

http:\/\/www.w3.org\/TR\/css3-mediaqueries\/<\/a>?: \uc2e4\uc81c CSS3\uc758 \ud45c\uc900\uc744 \uc81c\uc815\ud558\uace0 \uc788\ub294 w3\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \ubbf8\ub514\uc5b4\ucffc\ub9ac \ub9e4\ub274\uc5bc\uc785\ub2c8\ub2e4.
\nhttp:\/\/webdesignerwall.com\/tutorials\/css3-media-queries<\/a>?: \ud65c\uc6a9 \uc608\uc81c\uc640 \uc608\uc2dc \uc0ac\uc774\ud2b8
\nhttp:\/\/hicksdesign.co.uk<\/a>?: \ube0c\ub77c\uc6b0\uc800 \uc0ac\uc774\uc988\ub97c \uc904\uc5ec\ubcf4\uba74 \ub808\uc774\uc544\uc6c3\uc774 \ubcc0\uacbd\ub429\ub2c8\ub2e4.
\nhttp:\/\/colly.com<\/a>?: width\uc5d0 \ub530\ub77c \ud55c\uc904\uc5d0 \ub098\uc624\ub294 \ub9ac\uc2a4\ud2b8 \uc218\uac00 \ub2ec\ub77c\uc9d1\ub2c8\ub2e4.
\nhttp:\/\/www.alistapart.com\/d\/responsive-web-design\/ex\/ex-site-FINAL.html<\/a>?: width\uc5d0 \ub530\ub77c \ub808\uc774\uc544\uc6c3\uc774 \ubcc0\uacbd\ub429\ub2c8\ub2e4.
\nhttp:\/\/html.nhndesign.com<\/a>?: \uc6f9\ud45c\uc900\ud654\ud300\uc758 \ud648\ud398\uc774\uc9c0\uc785\ub2c8\ub2e4. \uc5ed\uc2dc width\uc5d0 \ub530\ub77c \ucee8\ud150\uce20\uc758 \ubc30\uce58\uac00 \ub2ec\ub77c\uc9c0\uba70, \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub3c4 \ub0b4\uc6a9\uc774 \uc27d\uac8c \ud30c\uc545\ub418\ub3c4\ub85d \ub808\uc774\uc544\uc6c3\uc774 \ubc14\ub01d\ub2c8\ub2e4. \ud83d\ude42<\/p>\n

 <\/p><\/blockquote>\n

NHN \uc6f9\ud45c\uc900\ud654\ud300 \ud648\ud398\uc774\uc9c0\uc5d0 \uc0c1\uc138\ud55c \ub0b4\uc6a9\uc774 \uc788\uc73c\ub2c8 \uc880 \ub354 \uad00\uc2ec\uc788\ub294 \ubd84\uc740 \uc5ec\uae30\ub85c ->?http:\/\/html.nhncorp.com\/blog\/textyle\/42284<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\ubbf8\ub514\uc5b4 \ucffc\ub9ac\uc758 \ud6a8\uc6a9\uc131 \ub17c\ub780\uacfc \ud55c\uacc4<\/strong><\/p>\n


\n<\/strong><\/p>\n

\uc704\uc5d0\uc11c\ub3c4 \uc7a0\uae50 \uc5b8\uae09\ud588\ub2e4\uc2dc\ud53c \ubbf8\ub514\uc5b4 \ucffc\ub9ac\uc5d0 \ub300\ud55c \ud6a8\uc6a9\uc131 \ub17c\ub780\uc740 \uacc4\uc18d \uc788\uc5b4 \uc628 \ub4ef \ud558\ub2e4.<\/p>\n

\uadf8 \ub0b4\uc6a9\uc744 \uc7a0\uae50 \uc0b4\ud3b4\ubcf4\uba74 \uc544\ub798\uc640 \uac19\ub2e4.<\/p>\n

– \uac1c\ubc1c\uc5d0 \uc788\uc5b4\uc11c CSS \ub300\uc751\uacfc \ud070 \ucc28\uc774\uac00 \uc5c6\ub2e4\ub294 \uc810
\n– \ub2e8\uc21c \uc0ac\uc774\ud2b8\uc5d0\uc11c\ub098 \uac00\ub2a5\ud558\uc9c0 \ub300\uc6a9\ub7c9 \ub370\uc774\ud130 \ucc98\ub9ac\uac00 \ud544\uc694\ud55c \uc0ac\uc774\ud2b8\uc5d0\ub294 \uc801\ud569\ud558\uc9c0 \uc54a\ub2e4\ub294 \uc9c0\uc801
\n– \ud558\uc9c0\ub9cc, \ud2b9\uc815 Framework\uc744 \uc9c0\uce6d\ud558\ub294 \uac83\uc774 \uc544\ub2c8\uace0 \ubc29\ubc95\ub860
\n– \uc989, \ub2e8\uc21c\ud55c CSS \ub300\uc751\uc744 \ud3ec\ud568\ud558\uc5ec \ub9ac\uc18c\uc2a4(\uc774\ubbf8\uc9c0, \ub3d9\uc601\uc0c1, \uc0ac\uc6b4\ub4dc)\uc5d0 \ub300\ud55c Device \ub300\uc751\uc744 \uac00\ub2a5\ud558\uac8c \ud558\ub294\uac83
\n– Responsive Web Design = CSS3 media queries \uac00 \uc544\ub2d8<\/p>\n

 <\/p>\n

\ucd9c\ucc98 \ud83d\ude15http:\/\/jfactory.tistory.com\/512<\/a>
\n[\ucc38\uace0\uc11c\uc801]\"\"<\/a><\/p><\/blockquote>\n

\uadf8\ub9ac\uace0 \uc2e0\ud604\uc11d\ub2d8 \ube14\ub85c\uadf8\uc5d0\uc11c \uc5b8\uae09\ud55c \ubc14\uc640 \uac19\uc774?\ub9cc\ub4e4\uc5b4\uc9c4 \uc774\ud6c4 \uc720\uc9c0 \ube44\uc6a9\ub3c4 \uace0\ub824\ud574\uc57c \ud558\uace0<\/p>\n

\uc0c8\ub85c\uc6b4 \ub2e8\ub9d0\uae30\uac00 \ub098\uc62c \ub54c\ub9c8\ub2e4 \uae30\ubbfc\ud558\uac8c \ub300\uc751\ud574\uc57c \ud558\ub294 \ubc29\ubc95\uc774\ub77c\ub294 \uac83\uc774 \ud55c\uacc4\ub85c \uc791\uc6a9\ub420 \uc218\ub3c4 \uc788\uc9c0 \uc54a\uc744\uae4c \uc0dd\uac01\ub41c\ub2e4.<\/p>\n

 <\/p>\n

 <\/p>\n

\n
> \uc2e0\ud604\uc11d\ub2d8 \ube14\ub85c\uadf8 \uc778\uc6a9\uae00 \uc804\uccb4 \ubcf4\uae30<\/span><\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

\ubbf8\ub514\uc5b4 \ucffc\ub9ac(Media Query) \ucd9c\ucc98 ;?http:\/\/blog.naver.com\/PostView.nhn?blogId=insidebig&logNo=40144656994 \ud604\uc7ac\uc758 \ubbf8\ub514\uc5b4 \ucffc\ub9ac\uac00 \uc788\uae30\uae4c\uc9c0 \uadf8 \uc2dc\uc791\uc740 \ub180\ub78d\uac8c\ub3c4 10\uc5ec\ub144 \uc804\uc73c\ub85c \uac70\uc2ac\ub7ec \uc62c\ub77c\uac04\ub2e4. \uc5ec\uae30\uc5d0 \ub354\uc6b1 \ub180\ub77c\uc6b4 \uc0ac\uc2e4\uc740 W3C(World Wide Web Consortium)\uac00 \ub2e4\uac00\uc62c \ubbf8\ub798\uc0ac\ud68c\uc5d0?\ub300\ud574?\uc815\ud655\ud558\uac8c \uc608\uce21\ud588\ub2e4\ub294 \uc810\uc774\ub2e4. W3C\uac00 1999\ub144… <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/949"}],"collection":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=949"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/949\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}