{"id":745,"date":"2012-04-06T10:37:07","date_gmt":"2012-04-06T10:37:07","guid":{"rendered":"http:\/\/brain.dailyon.net\/?p=745"},"modified":"2012-04-06T10:37:07","modified_gmt":"2012-04-06T10:37:07","slug":"css-css3-media-query%ec%97%90-%eb%8c%80%ed%95%98%ec%97%ac","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=745","title":{"rendered":"css : CSS3 media query\uc5d0 \ub300\ud558\uc5ec"},"content":{"rendered":"

\ubbf8\ub514\uc5b4 \ud0c0\uc785(media type)\uc740 \ub2e8\ub9d0\uae30\uc758 \uc885\ub958\uc5d0 \ub530\ub77c \uac01\uac01 \ub2e4\ub978 \uc2a4\ud0c0\uc77c\uc2dc\ud2b8\ub97c \uc801\uc6a9\ud558\uac8c \ud558\ub294 \uae30\ub2a5\uc774\uba70 CSS 2.1 \ubd80\ud130 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc2e4\uc81c\ub85c \ub9ce\uc774 \uc0ac\uc6a9\ub418\uc9c0 \uc54a\uc558\ub294\ub370, \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\uc785\ub2c8\ub2e4.
\nCSS3\uc5d0\ub294 \ubbf8\ub514\uc5b4 \ud0c0\uc785\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, \uc774\ub97c \ubbf8\ub514\uc5b4 \ucffc\ub9ac(media query)\ub77c\uace0 \ud569\ub2c8\ub2e4.<\/p>\n

 <\/p>\n

\uc801\uc6a9\ubc29\ubc95<\/h3>\n

\ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \uc801\uc6a9\ud558\ub294 \ubc29\ubc95\uc740 \ud06c\uac8c 3\uac00\uc9c0\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

(1) \ub9c8\ud06c\uc5c5\uc5d0\uc11c CSS\ud30c\uc77c \ubd84\uae30\ud558\uae30
\n\uc2a4\ud0c0\uc77c\uc2dc\ud2b8 \ud30c\uc77c\uc744 \ubd84\ub9ac\ud558\uc5ec \ud2b9\uc815 \uc870\uac74\uc5d0 \ubd80\ud569\ud560 \uacbd\uc6b0 CSS\ud30c\uc77c\uc744 \ub85c\ub529\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub85c\ub529\ud558\ub294 \ubc29\ubc95\uc740 <link>\ud0dc\uadf8, @import \uc18d\uc131, xml \ubc29\uc2dd\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

<link rel=”stylesheet” media=”screen and (max-width:480px)” href=”example.css”>
\n<?xml-stylesheet media=”screen and (max-width:480px)” rel=”stylesheet” href=”example.css” ?>
\n<style type=”text\/css”>
\n@import url(example.css) screen and (max-width:480px);
\n<\/style><\/div>\n

(2) <style> \ud0dc\uadf8\uc5d0\uc11c media \uc120\uc5b8\ud558\uae30
\n<style>\ud0dc\uadf8\ub97c \uc120\uc5b8\ud560 \ub54c media \uc18d\uc131\uc5d0 \uc870\uac74\uc744 \uc120\uc5b8\ud574\uc11c \uc774 \uc870\uac74\uc5d0 \ubd80\ud569\ud560\ub54c \ud574\ub2f9 <style>\ud0dc\uadf8 \ub0b4\uc758 css\ub97c \ub85c\ub529\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

<style type=”text\/css” media=”screen and (max-width:480px)”>
\n.h2{color:#00ffff}
\n<\/style><\/div>\n

(3) CSS \ub0b4\uc5d0\uc11c @media \uc0ac\uc6a9\ud558\uae30
\n@media \uad6c\ubb38\uc744 \uc774\uc6a9\ud574\uc11c css \ub0b4\uc5d0 \uc120\ud0dd\uc801\uc73c\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

.h2{color:#00ffff}
\n@media all and (max-width:480px) { .h2{color:#ff0000} }<\/p>\n<\/div>\n

\uc704 \ubc29\ubc95 \uc911, \ubcc4\ub3c4 \ubd84\uae30\ud30c\uc77c\uc744 \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc740 http request\ub97c \ubc1c\uc0dd\uc2dc\ucf1c \uc131\ub2a5\uc744 \uc800\ud558\uc2dc\ud0a4\ub294 \ub2e8\uc810\uc774 \uc788\uace0, <style>\ud0dc\uadf8\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\ub3c4 html \ud30c\uc77c\uc5d0\uc11c inline\uc73c\ub85c \uc801\uc6a9\ud574\uc57c \ud558\uae30 \ub54c\ubb38\uc5d0 \uc720\uc9c0\ubcf4\uc218\uc758 \uc5b4\ub824\uc6c0\uc774 \uc99d\uac00\ud569\ub2c8\ub2e4.
\n\ub530\ub77c\uc11c CSS \ub0b4\uc5d0\uc11c @media\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud544\uc694\ud55c \ubd80\ubd84\uc5d0 \uc801\uc6a9\ud558\ub294 \uac83\uc774 \uac00\uc7a5 \uc88b\uc740 \ubc29\ubc95\uc774\ub77c\uace0 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

 <\/p>\n

\ubb38\ubc95<\/h3>\n

\ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub294 \ubb38\uc7a5 \ub0b4\uc5d0 \ub300\uc18c\ubb38\uc790\ub97c \uad6c\ubd84\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. media \uc18d\uc131\uc5d0\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

media_query
\n: [ONLY | NOT]? S* media_type S* [ AND S* expression ]* | expression [ AND S* expression ]<\/p><\/blockquote>\n

\uc870\uae08 \uc5b4\ub824\uc6b4 \ubb38\uc7a5\uc73c\ub85c \ub418\uc5b4 \uc788\ub294\ub370\uc694, \uc27d\uac8c \ud480\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \uc815\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

[ONLY \ub610\ub294 NOT] \ubbf8\ub514\uc5b4\ud0c0\uc785 [and (\uc870\uac74)] [and (\uc870\uac74)] … , [ONLY \ub610\ub294 NOT] \ubbf8\ub514\uc5b4\ud0c0\uc785 [and (\uc870\uac74)] [and (\uc870\uac74)] ..<\/p><\/blockquote>\n

\uae30\ubcf8\uc801\uc73c\ub85c?\ubbf8\ub514\uc5b4 \ud0c0\uc785\uc774 \uc9c0\uc815\ub418\uc5b4\uc57c \ud558\uba70, \ud544\uc694\ud560 \uacbd\uc6b0\uc5d0 AND \uc5f0\uc0b0\uc790\ub85c \uc870\uac74\uc744 \uc801\uc6a9\ud558\uba74 \ub418\uba70 \uc774 \uc870\uac74\uc740 \ud544\uc694\uc5d0 \ub530\ub77c \ucd94\uac00\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ub610\ud55c \uc27c\ud45c\ub97c \uc0ac\uc6a9\ud558\uba74 \uc0c8\ub85c\uc6b4 \ubbf8\ub514\uc5b4\ud0c0\uc785\uacfc \uc870\uac74\ub3c4 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

– ONLY \ud0a4\uc6cc\ub4dc\ub294 \ubbf8\ub514\uc5b4\ucffc\ub9ac\ub97c \uc9c0\uc6d0\ud558\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub9cc \uc870\uac74\uc744 \uc778\uc2dd\ud558\ub3c4\ub85d \ud558\ub294 \ud0a4\uc6cc\ub4dc\uc785\ub2c8\ub2e4. \ubbf8\ub514\uc5b4\ucffc\ub9ac\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc758 \uacbd\uc6b0 ONLY \ud0a4\uc6cc\ub4dc\uac00 \uc788\uc73c\uba74 \ubbf8\ub514\uc5b4 \ucffc\ub9ac\uac00 \ubb34\uc2dc\ub418\uc5b4 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc544\uc57c\ud569\ub2c8\ub2e4.
\n\ud558\uc9c0\ub9cc, \ud604\uc7ac IE \uc774\uc678\uc5d0\ub294 \ubbf8\ub514\uc5b4\ucffc\ub9ac\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800(\ubaa8\ubc14\uc77c \ud3ec\ud568)\uac00 \ub4dc\ubb3c\uace0, IE\ub3c4 media query \ub97c \uc815\ud655\ud558\uac8c \ud574\uc11d\ud558\uc9c0 \ubabb\ud574\uc11c ONLY \ud0a4\uc6cc\ub4dc\uc758 \uc720\ubb34\uc5d0 \uc0c1\uad00 \uc5c6\uc774 media query\ub97c \uc2e4\ud589\ud558\uc9c0 \ubabb\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \ud604\uc7ac\ub294 ONLY \ud0a4\uc6cc\ub4dc\uac00 \ud070 \uc758\ubbf8\ub294 \uc5c6\uc9c0\ub9cc, \ubbf8\ub514\uc5b4\ucffc\ub9ac\ub97c \uc9c0\uc6d0\ud558\ub294 \ube0c\ub77c\uc6b0\uc800\ub9cc \ub300\uc0c1\uc73c\ub85c \ud560 \uacbd\uc6b0\uc5d4 ONLY \ud0a4\uc6cc\ub4dc\ub97c \uc801\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4.
\n(\ucc38\uace0\uc790\ub8cc \ud83d\ude15http:\/\/blog.wystan.net\/2011\/06\/27\/only-keyword-for-css3-media-query<\/a>)
\n– NOT \uc5f0\uc0b0\uc790\ub294 \ud574\ub2f9 \ubbf8\ub514\uc5b4\ud0c0\uc785\ub9cc \uc81c\uc678\ud55c \ub2e4\ub978 \ubbf8\ub514\uc5b4\ud0c0\uc785\uc5d0 \ub300\uc751\ud560 \uacbd\uc6b0\uc5d0 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n

\uc608) screen and (max-device-height:480px), print and (min-resolution:120dpi) and (max-resolution:300dpi)<\/p><\/blockquote>\n

\ud55c\uac00\uc9c0 \uc8fc\uc758\ud560 \uc810\uc740 \uc870\uac74\uc744 \uc0ac\uc6a9\ud560 \ub54c \uac01 \ubbf8\ub514\uc5b4\ud0c0\uc785\uc5d0 \ub9de\ub294 \uc870\uac74\uc744 \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \uac00\ub839 \ubbf8\ub514\uc5b4 \ud0c0\uc785\uc774 aural(\uc74c\uc131\ud569\uc131\uc7a5\uce58) \uc778 \uacbd\uc6b0 \uc870\uac74\uc5d0 max-width:800px \uc640 \uac19\uc740 \ud654\uba74 \ub113\uc774\uc5d0 \uad00\ud55c \uc870\uac74\uc740 \uc74c\uc131 \uc7a5\uce58\uc640 \uad00\ub828\uc774 \uc5c6\uc5b4 \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. \ubb3c\ub860 \uc2e4\uc81c\ub85c \uc0ac\uc6a9\ud55c\ub2e4 \ud574\ub3c4 \ud56d\uc0c1 \ubd80\uc801\ud569\ud55c \uc870\uac74\uc774\uae30 \ub54c\ubb38\uc5d0 \ub0b4\ubd80\uc758 CSS\ub294 \uc801\uc6a9\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n

 <\/p>\n

\ubbf8\ub514\uc5b4\ud0c0\uc785<\/h3>\n

\ubbf8\ub514\uc5b4\ucffc\ub9ac\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ubbf8\ub514\uc5b4 \ud0c0\uc785\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
all<\/td>\n\ubaa8\ub4e0 \ubbf8\ub514\uc5b4 \ud0c0\uc785<\/td>\n<\/tr>\n
aural<\/td>\n\uc74c\uc131 \ud569\uc131 \uc7a5\uce58<\/td>\n<\/tr>\n
braille<\/td>\n\uc810\uc790 \ud45c\uc2dc \uc7a5\uce58<\/td>\n<\/tr>\n
handheld<\/td>\n\uc190\uc73c\ub85c \ub4e4\uace0 \ub2e4\ub2c8\uba74\uc11c \ubcfc \uc218 \uc788\ub294 \uc791\uc740 \uc2a4\ud06c\ub9b0\uc5d0 \ub300\uc751\ud558\ub294 \uc6a9\ub3c4<\/td>\n<\/tr>\n
print<\/td>\n\uc778\uc1c4 \uc6a9\ub3c4<\/td>\n<\/tr>\n
projection<\/td>\n\ud504\ub85c\uc81d\ud130 \ud45c\ud604 \uc6a9\ub3c4<\/td>\n<\/tr>\n
screen<\/td>\n\ucef4\ud4e8\ud130 \uc2a4\ud06c\ub9b0\uc744 \uc704\ud55c \uc6a9\ub3c4<\/td>\n<\/tr>\n
tty<\/td>\n\ub514\uc2a4\ud50c\ub808\uc774 \ub2a5\ub825\uc774 \ud55c\uc815\ub41c, \ud154\ub809\uc2a4(teletype), \ud130\ubbf8\ub0a0, \ub610\ub294 \uc218\ub3d9 \uc774\ub3d9 \uc7a5\uce58 \ub4f1, \uace0\uc815 \ud53c\uce58(fixed-pitch:\ud3ed\uc774 \uc77c\uc815) \uae00\uc790\ub97c \uc0ac\uc6a9\ud558\ub294 \uba54\ub514\uc544\ub97c \uc704\ud55c \uc758\ub3c4 \u201ctty\u201d \uba54\ub514\uc544 \ud0c0\uc785\uc5d0\uc11c \uc81c\uc791\uc790\ub294 \ud53d\uc140(pixel) \ub2e8\uc704\ub97c \uc0ac\uc6a9\ud558\uc5ec\uc11c\ub294 \uc548\ub428<\/td>\n<\/tr>\n
tv<\/td>\n\uc74c\uc131\uacfc \uc601\uc0c1\uc774 \ub3d9\uc2dc \ucd9c\ub825\ub418\ub294 TV\uc640 \uac19\uc740 \uc7a5\uce58<\/td>\n<\/tr>\n
embossed<\/td>\n\ud398\uc774\uc9c0\uc5d0 \uc778\uc1c4\ub41c \uc810\uc790 \ud45c\uc9c0 \uc7a5\uce58<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\uc704 \ud0c0\uc785 \uc911 \uc2e4\uc81c\ub85c \ub9ce\uc774 \uc0ac\uc6a9\ub418\ub294 \uac83\uc740 all, screen, print \uc785\ub2c8\ub2e4. all\uc740 \ubaa8\ub4e0 \ubbf8\ub514\uc5b4\ud0c0\uc785\uc5d0 \ub300\uc751\ud558\uace0, screen\uc740 \ub300\ubd80\ubd84\uc758 \ucef4\ud4e8\ud130\uc640 \ubaa8\ubc14\uc77c \ud3f0\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0 \ub300\uc751\ud558\uba70, print\ub294 \ud504\ub9b0\ud130\uc5d0 \ub300\uc751\ud569\ub2c8\ub2e4.
\nhandheld\uc758 \uacbd\uc6b0 \uc8fc\uc758\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \ud734\ub300\uc6a9 \uae30\uae30\ub77c\uace0 \ud574\uc11c \uc694\uc998\uc758 \uc2a4\ub9c8\ud2b8\ud3f0 \ub4f1\uc758 \ubaa8\ubc14\uc77c \uae30\uae30\uac00 \uc5f0\uc0c1\ub420 \uc218 \uc788\ub294\ub370, \uc2e4\uc81c\ub85c \uc544\uc774\ud3f0\uc774\ub098 \uc548\ub4dc\ub85c\uc774\ub4dc\uc5d0\uc11c\ub294?screen\uc5d0 \ub300\uc751\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

 <\/p>\n

\uc870\uac74\ubb38<\/h3>\n

\ubbf8\ub514\uc5b4 \ucffc\ub9ac\uc758 \uc870\uac74\uc5d0\ub294 \ub2e4\ub978 \ud504\ub85c\uadf8\ub798\ubc0d\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 “=” “>” “<” \ub4f1\uc758 \uc5f0\uc0b0\uc790\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0 CSS\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 “:”(\ucf5c\ub860) \ub9cc\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ub300\uc2e0\uc5d0 “max-” \ub610\ub294 “min-” \ub4f1\uc758 prefix \ub97c \uc0ac\uc6a9\ud558\uc5ec \ucd5c\ub300\uac12, \ucd5c\uc18c\uac12\uc744 \ud1b5\ud55c \ube44\uad50\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4.
\n\uc608\ub97c \ub4e4\uba74 device-width(\ub2e8\ub9d0\uae30\uc5d0\uc11c \uc9c0\uc6d0\ud558\ub294 \ubb3c\ub9ac\uc801\uc778 \uac00\ub85c \ub108\ube44)\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n\n\n
device-width:320px<\/td>\n\uae30\uae30\uc758 \uac00\ub85c \ub108\ube44\uac00 320px \uc77c\ub54c<\/td>\n<\/tr>\n
max-device-width:320px<\/td>\n\uae30\uae30\uc758 \ucd5c\ub300 \uac00\ub85c \ub108\ube44\uac00 320px \uc77c\ub54c (\uc989 320px \uc774\ud558)<\/td>\n<\/tr>\n
min-device-width:320px<\/td>\n\uae30\uae30\uc758 \ucd5c\uc18c \uac00\ub85c \ub108\ube44\uac00 320px \uc77c\ub54c (\uc989 320px \uc774\uc0c1)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\uc704\uc640 \uac19\uc740 min, max \ub85c \ud45c\ud604\uc774 \ubd88\uac00\ub2a5\ud558\uace0 \ud2b9\uc815\uac12\ub9cc \uac00\uc9c0\uace0 \uc788\ub294 \uacbd\uc6b0\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uba74 \ud654\uba74\uc758 \ube44\uc728\uc5d0 \ub300\uc751\ud558\ub294 “orientation”\uc758 \uacbd\uc6b0 portrait | landscape \ub450\uac1c\uc758 \uac12\ub9cc \uac00\uc9c0\uba70, TV\uc2a4\uce94 \ubc29\uc2dd\uc5d0 \ub300\uc751\ud558\ub294 “scan”\uc740 [ progressive | interlace ] \uac12\ub9cc \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\ubbf8\ub514\uc5b4\ucffc\ub9ac\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uc870\uac74\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

(1) width, min-width, max-width (\uac00\ub85c \ub108\ube44)
\n\uc6f9\ud398\uc774\uc9c0\uc758 \uac00\ub85c \ub108\ube44, width\ub85c \ud310\ub2e8\ud569\ub2c8\ub2e4.<\/p>\n

(2) height, min-height, max-height (\uc138\ub85c \ub192\uc774)
\n\uc6f9\ud398\uc774\uc9c0\uc758 \uc138\ub85c \ub108\ube44, height\ub85c \ud310\ub2e8\ud569\ub2c8\ub2e4.
\nheight \ub294 \ubbf8\ub514\uc5b4\ub97c \ubaa8\ub450 \ud3ec\ud568\ud55c \ub192\uc774\ub97c \uae30\uc900\uc73c\ub85c \ud558\uae30 \ub54c\ubb38\uc5d0 \ubbf8\ub514\uc5b4\uc5d0 \ub530\ub77c \ub2e4\ub978 height\uac00 \uac80\ucd9c\ub429\ub2c8\ub2e4. screen \uac19\uc740 \ud398\uc774\uc9c0 \uac1c\ub150\uc774 \uc5c6\ub294 \ubbf8\ub514\uc5b4\ub294 \uc2a4\ud06c\ub864\uc744 \ud3ec\ud568\ud55c \uc804\uccb4 \ubb38\uc11c\uc758 \ub192\uc774\ub97c \uae30\uc900\uc73c\ub85c \ud558\uba70, print \ubbf8\ub514\uc5b4\ub294 \ud55c \ud398\uc774\uc9c0\uc758 \ub192\uc774\ub97c \uae30\uc900\uc73c\ub85c \ud558\uae30 \ub54c\ubb38\uc5d0 \uc758\ub3c4\uc640 \ub2e4\ub978 \uac12\uc774 \ub098\uc62c \uc218 \uc788\uc73c\ubbc0\ub85c \uc0ac\uc6a9\uc5d0 \uc8fc\uc758\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n

(3) device-width, min-device-width, max-device-width (\ub2e8\ub9d0\uae30\uc758 \ubb3c\ub9ac\uc801\uc778 \uac00\ub85c \ub108\ube44)
\n\ub2e8\ub9d0\uae30\uc5d0\uc11c \uae30\ubcf8\uc801\uc73c\ub85c \uc81c\uacf5\ud558\ub294 \ubb3c\ub9ac\uc801\uc778 \uac00\ub85c \ub108\ube44(\ub2e8\ub9d0\uae30\uc758 native width)\ub97c \ud310\ub2e8\ud569\ub2c8\ub2e4.
\n\uc544\uc774\ud3f04\ub098 \uc548\ub4dc\ub85c\uc774\ub4dc \ub2e8\ub9d0\uae30\uc758 \ub300\ubd80\ubd84\uc774 \uc2e4\uc81c \ub2e8\ub9d0\uae30\uc758 \ud574\uc0c1\ub3c4\uc640 \uc6f9\ube0c\ub77c\uc6b0\uc800\uac00 \uc0ac\uc6a9\ud558\ub294 \uae30\ubcf8 \ub108\ube44\uac00 \ub2e4\ub985\ub2c8\ub2e4.
\n\uc544\uc774\ud3f0 4\uc758 \uc2e4\uc81c \ud574\uc0c1\ub3c4\ub294 640*960 \uc774\uc9c0\ub9cc, \uc2e4\uc81c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ub108\ube44\ub294 320*480(2\ubc30 \ube44\uc728)\uc774\uba70, \uc548\ub4dc\ub85c\uc774\ub4dc\ud3f0\ub3c4 \ub300\ubd80\ubd84 480*800 \ud574\uc0c1\ub3c4\ub97c \uc0ac\uc6a9\ud558\uc9c0\ub9cc, \ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub294 320*533(1.5\ubc30 \ube44\uc728)\uc785\ub2c8\ub2e4.<\/p>\n

(4) device-height, min-device-height, max-device-height (\ub2e8\ub9d0\uae30\uc758 \ubb3c\ub9ac\uc801\uc778 \uc138\ub85c \ub192\uc774)
\n\ub2e8\ub9d0\uae30\uc5d0\uc11c \uae30\ubcf8\uc801\uc73c\ub85c \uc81c\uacf5\ud558\ub294 \ubb3c\ub9ac\uc801\uc778 \uc138\ub85c \ub108\ube44(\ub2e8\ub9d0\uae30\uc758 native height)\ub97c \ud310\ub2e8\ud569\ub2c8\ub2e4.<\/p>\n

(5) orientation (\ud654\uba74 \ud68c\uc804)
\nmax, min prefix\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc73c\uba70, portrait, landscape \uac12\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\nwidth, height\ub97c \uad6c\ud558\uc5ec, width\uac00 \uae38\uba74 landscape, height\uac00 \uae38\uba74 portrait \uc785\ub2c8\ub2e4. \ub300\ubd80\ubd84\uc758 \ubaa8\ubc14\uc77c \ub2e8\ub9d0\uae30\uc758 \uacbd\uc6b0 \uc138\ub85c\uac00 \uae34 \ud615\ud0dc\uc774\uae30 \ub54c\ubb38\uc5d0 \uae30\ubcf8 \uc0c1\ud0dc\ub294 portrait, \uac00\ub85c\ub85c \ub3cc\ub838\uc744 \uacbd\uc6b0 landscape\uc5d0 \ub300\uc751\ud569\ub2c8\ub2e4.
\n\uc8fc\uc758\ud560 \uc810\uc740 \ub370\uc2a4\ud06c\ud1b1\uc740 \ub300\ubd80\ubd84 \uac00\ub85c\/\uc138\ub85c \ubaa8\ub4dc\uc5d0 \ub300\ud55c \uac1c\ub150\uc774 \uc5c6\uae30 \ub54c\ubb38\uc5d0 orientation \uc18d\uc131\uc774 \ubaa8\ubc14\uc77c \uc804\uc6a9\uc73c\ub85c \uc624\ud574\ubc1b\ub294 \uacbd\uc6b0\ub3c4 \uc788\uc9c0\ub9cc, \uc2e4\uc81c\ub85c\ub294 \ubaa8\ubc14\uc77c\uacfc \ub370\uc2a4\ud06c\ud1b1\uc758 \uad6c\ubd84\uc744 \ud560 \uc218 \uc5c6\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4.<\/p>\n

(6) aspect-ratio, min-aspect-ratio, max-aspect-ratio (\ud654\uba74 \ube44\uc728)
\nwidth\/height \ube44\uc728\uc5d0 \ub300\uc751\ud569\ub2c8\ub2e4. \uc989, width\ub97c height\ub85c \ub098\ub208 \uac12\uc785\ub2c8\ub2e4.
\n\uc9c1\uc811 \uc22b\uc790\ub85c \uc0ac\uc6a9\ud560 \uc218\ub3c4 \uc788\uace0, \uacc4\uc0b0\uc2dd\uc744 \uc0ac\uc6a9\ud560\uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n\n
aspect-ratio:1<\/td>\n\ud654\uba74 \ube44\uc728\uc774 1:1 \uc778 \uacbd\uc6b0\uc5d0 \ub300\uc751\ud558\uba70 \uc608\ub97c \ub4e4\uba74 320*320, 640*640 \ub4f1\uc774 \ub300\uc751\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
aspect-ratio:16\/9<\/td>\n\uacc4\uc0b0\uc2dd\uc73c\ub85c \uc0ac\uc6a9\ud558\uc600\uc73c\uba70 HDTV\uc5d0 \uc77c\ubc18\uc801\uc778 \ud654\uba74 \ube44\uc728\uc778 16:9 \uc778 \uacbd\uc6b0\uc5d0 \ub300\uc751\ud569\ub2c8\ub2e4. (\uc608: 1920*1080)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

(7) device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio (\ub2e8\ub9d0\uae30\uc758 \ubb3c\ub9ac\uc801\uc778 \ud654\uba74 \ube44\uc728)
\n\ub2e8\ub9d0\uae30\uc758 \ubb3c\ub9ac\uc801\uc778 \ud654\uba74 \ube44\uc728\uc5d0 \ub300\uc751\ud569\ub2c8\ub2e4.<\/p>\n

(8) color, min-color, max-color (\uc0c9\uc0c1\ub2f9 \ube44\ud2b8\uc218)
\n\ub2e8\ub9d0\uae30\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ucd5c\ub300 \uc0c9\uc0c1 \uc218\uc758 \ube44\ud2b8 \uc218\uc5d0 \ub300\uc751\ud569\ub2c8\ub2e4. \ub2e8\uc704\ub294 \uc790\uc5f0\uc218\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n\n\n\n
color:1<\/td>\n2^1 = 2\uac1c \uc0c9\uc0c1 \uc0ac\uc6a9<\/td>\n<\/tr>\n
color:2<\/td>\n2^2 = 4\uac1c \uc0c9\uc0c1 \uc0ac\uc6a9<\/td>\n<\/tr>\n
color:3<\/td>\n2^3 = 8\uac1c \uc0c9\uc0c1 \uc0ac\uc6a9<\/td>\n<\/tr>\n
color:4<\/td>\n2^4 = 16\uac1c \uc0c9\uc0c1 \uc0ac\uc6a9<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

(9) color-index, min-color-index, max-color-index (\ud314\ub808\ud2b8\uc758 \uc0c9\uc0c1 \uac2f\uc218)
\n\ub2e8\ub9d0\uae30\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ucd5c\ub300 \uc0c9\uc0c1 \uc218\uc5d0 \ub300\uc751\ud569\ub2c8\ub2e4. \ub2e8\uc704\ub294 \uc790\uc5f0\uc218\uc785\ub2c8\ub2e4.<\/p>\n

(10) monochrome, min-monochrome, max-monochrome (\ud751\ubc31\ub9cc\uc744 \uc0ac\uc6a9\ud558\ub294 \ub2e8\ub9d0\uae30\uc5d0\uc11c \ud53d\uc140 \ub2f9 \ube44\ud2b8 \uc218)
\n\ud751\ubc31 \uceec\ub7ec\ub9cc\uc744 \uc0ac\uc6a9\ud558\ub294 \ub2e8\ub9d0\uae30\uc5d0\uc11c \ud558\ub098\uc758 \ud53d\uc140\uc5d0 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ube44\ud2b8 \uc218\uc5d0 \ub300\uc751\ud569\ub2c8\ub2e4. \ub2e8\uc704\ub294 \uc790\uc5f0\uc218\uc785\ub2c8\ub2e4.
\n\uc774 \ube44\ud2b8\uc218\uc758 \uc758\ubbf8\ub294 \ud770\uc0c9\uacfc \uac80\uc740\uc0c9\uc758 \uc0ac\uc774\uc5d0 \uc5bc\ub9c8\ub098 \ub9ce\uc740 \ub2e8\uacc4\ub97c \uc9c0\uc6d0\ud558\ub294\uc9c0\ub97c \uc758\ubbf8\ud569\ub2c8\ub2e4. \uc989 \ud751\ubc31 \uadf8\ub77c\ub370\uc774\uc158(\uacc4\uc870)\uc774 \uc5bc\ub9c8\ub098 \uc790\uc5f0\uc2a4\ub7fd\uac8c \ud45c\ud604\ub418\ub294\uc9c0\ub97c \ud655\uc778\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n\n\n\n
monochrome:1<\/td>\n2^1 = \ud770\uc0c9\uacfc \uac80\uc740\uc0c9 \uc0ac\uc774\uc5d0 2\uac1c\uc758 \ub2e8\uacc4 (\uc989 \uac80\uc740\uc0c9\uacfc \ud770\uc0c9\ub9cc \uc874\uc7ac)<\/td>\n<\/tr>\n
monochrome:2<\/td>\n2^2 = \ud770\uc0c9\uacfc \uac80\uc740\uc0c9 \uc0ac\uc774\uc5d0 4\uac1c\uc758 \ub2e8\uacc4<\/td>\n<\/tr>\n
monochrome:3<\/td>\n2^3 = \ud770\uc0c9\uacfc \uac80\uc740\uc0c9 \uc0ac\uc774\uc5d0 8\uac1c\uc758 \ub2e8\uacc4<\/td>\n<\/tr>\n
monochrome:4<\/td>\n2^4 = \ud770\uc0c9\uacfc \uac80\uc740\uc0c9 \uc0ac\uc774\uc5d0 16\uac1c\uc758 \ub2e8\uacc4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

(11) resolution, min-resolution, max-resolution (\ub2e8\ub9d0\uae30\uc758 \ud574\uc0c1\ub3c4)
\n\ub2e8\ub9d0\uae30\uc5d0\uc11c \uc9c0\uc6d0\ud558\ub294 \ud574\uc0c1\ub3c4\ub97c \ud310\ub2e8\ud569\ub2c8\ub2e4. width, height\uc640\ub294 \ub2e4\ub978 \uac12\uc774\uba70 \ub300\ubd80\ubd84\uc758 \ub2e8\uc704\ub294 dpi(\uc778\uce58\ub2f9 \ub3c4\ud2b8 \uc218)\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. dpcm(\uc13c\ud2f0\ubbf8\ud130\ub2f9 \ub3c4\ud2b8\uc218)\ub3c4 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uba74 PC\ud654\uba74\uc758 \uacbd\uc6b0 \ub300\ubd80\ubd84 96dpi\ub97c \uc0ac\uc6a9\ud558\uc9c0\ub9cc, \ud504\ub9b0\ud130\uc758 \uacbd\uc6b0 300dpi\ub97c \ub118\ub294 \uac12\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc73c\uba70 dpi\uac00 \ub192\uc544\uc9c8\uc218\ub85d \uac19\uc740 \ud06c\uae30\uc5d0 \ub354 \uc138\ubc00\ud55c \ud654\uba74\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n\uac19\uc740 3.5\uc778\uce58 \ud654\uba74\uc774\uba74\uc11c \ud574\uc0c1\ub3c4\uac00 \ub2e4\ub978 \uc544\uc774\ud3f0 3GS\/\uc544\uc774\ud3f0 4\ub97c \uc5f0\uc0c1\ud558\uba74 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

(12) scan (\uc2a4\uce94 \ubc29\uc2dd)
\ntv \ubbf8\ub514\uc5b4 \ud0c0\uc785\uc5d0\ub9cc \ub300\uc751\ud558\ub294 \uc18d\uc131\uc785\ub2c8\ub2e4. TV\uc5d0\uc11c \uc2a4\uce94 \ubc29\uc2dd\uc5d0 \ub530\ub77c \uac12\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n\ud504\ub85c\uadf8\ub808\uc2dc\ube0c \ubc29\uc2dd\uc740 “progressive, \uc778\ud130\ub808\uc774\uc2a4 \ubc29\uc2dd\uc740 “interlace” \ub85c \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

(13) grid (\ud654\uba74\uc758 \ucd5c\uc18c\ub2e8\uc704)
\n\ub2e8 \ub9d0\uae30\uac00 grid \ubc29\uc2dd\uc778\uc9c0, \ub610\ub294 bitmap \ubc29\uc2dd\uc778\uc9c0\uc5d0 \ub300\ud574 \ub300\uc751\ud569\ub2c8\ub2e4. grid\ubc29\uc2dd\uc774\ub780 \ud654\uba74 \ub0b4\uc758 \ucd5c\uc18c \ub2e8\uc704\uac00 \ud53d\uc140\uc774 \uc544\ub2cc \ubb38\uc790 \ud558\ub098\uc778 \uacbd\uc6b0\ub97c \ub9d0\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uba74 \ud130\ubbf8\ub110(tty) \ub4f1\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ud14d\uc2a4\ud2b8\ub9cc \uc0ac\uc6a9\ud558\ub294 \ud1b5\uc2e0 \ub610\ub294 \uad6c\ud615 \uc804\ud654\uc758 \uc561\uc815\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ubb38\uc790 \ub2e8\uc704\ub85c\ub9cc \ud45c\uc2dc\ub418\ub294 \ub2e8\ub9d0\uae30\uac00 \uc5ec\uae30\uc5d0 \uc18d\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc5d0 \uc18d\ud560 \uacbd\uc6b0 “1” \uac12\uc5d0 \ub300\uc751\ud558\uba70 \uadf8 \uc678\uc758 \ube44\ud2b8\ub9f5 \uae30\ubc18\uc758 \ub2e8\ub9d0\uae30\uc758 \uacbd\uc6b0 \ubaa8\ub450 “0”\uc5d0 \ub300\uc751\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n\n
grid:1<\/td>\n\ubb38\uc790\ub85c\ub9cc \ud45c\uae30\ub418\ub294 tty, \ud130\ubbf8\ub110, \uc804\ud654 \uc561\uc815\ud654\uba74<\/td>\n<\/tr>\n
grid:0<\/td>\n\ube44\ud2b8\ub9f5\uc744 \uae30\ubc18\uc73c\ub85c \ud558\ub294 \uadf8\ub798\ud53d \ud45c\uc2dc \uc7a5\uce58. \ub300\ubd80\ubd84\uc758 \ucef4\ud4e8\ud130\uc640 \uc2a4\ub9c8\ud2b8\ud3f0 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0 \ud574\ub2f9\ub429\ub2c8\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

(14) -webkit-min-device-pixel-ratio (\ub2e8\ub9d0\uae30\uc758 \ud654\uc18c\uc640 \uc2e4\uc81c \ud654\uba74\uc758 pixel\uac04\uc758 \ube44\uc728)
\n\uc6f9\ud0b7 \uc804\uc6a9 \uc18d\uc131\uc774\uba70 \ud654\uba74 \ub0b4\uc758 1px\ub97c \ud45c\ud604\ud560 \ub54c\uc758 \uc2e4\uc81c \ub2e8\ub9d0\uae30\uc758 \ud53d\uc140\uc758 \ube44\uc728\uc5d0 \ub300\uc751\ud569\ub2c8\ub2e4.
\n\uc544\uc774\ud3f0 4\uc5d0 \ub300\uc751\ud560 \ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294\ub370, \uc544\uc774\ud3f04\uc758 \uacbd\uc6b0 \uc2e4\uc81c \ud574\uc0c1\ub3c4\ub294 640*960\uc774\uc9c0\ub9cc \uc6f9\ube0c\ub77c\uc6b0\uc800 \ud574\uc0c1\ub3c4\ub294 320*480 \uc5d0 \ub300\uc751\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc544\uc774\ud3f04\uc758 \uc0ac\ud30c\ub9ac\uc758 \uacbd\uc6b0\uc5d4 1px\uc5d0 \uc2e4\uc81c\ub85c\ub294 \ub2e8\ub9d0\uae30\uc758 2\ud654\uc18c\uac00 \ub300\uc751\ud558\uace0 \uc788\uc73c\ubbc0\ub85c \uc774 \uac12\uc740 2\uc785\ub2c8\ub2e4.
\n\ube44\uc2b7\ud558\uac8c \uc548\ub4dc\ub85c\uc774\ub4dc \ud3f0\uc758 \uacbd\uc6b0 \uc2e4\uc81c \ud574\uc0c1\ub3c4 480*800 \ub2e8\ub9d0\uae30\uc5d0\uc11c \uc6f9\ube0c\ub77c\uc6b0\uc800 \ud574\uc0c1\ub3c4\ub294 320*533\uc73c\ub85c \ud45c\ud604\ub418\ub294\ub370, \uc774\ub54c\uc758 \ube44\uc728\uc740 1.5\uc785\ub2c8\ub2e4.<\/p>\n

<!– \uc544\uc774\ud3f04 –>
\n<link rel=”stylesheet” media=”only screen and (-webkit-min-device-pixel-ratio: 2)” type=”text\/css” href=”iphone4.css”><\/p>\n

<!– \uc548\ub4dc\ub85c\uc774\ub4dc –>
\n<link rel=”stylesheet” media=”only screen and (-webkit-min-device-pixel-ratio: 1.5)” type=”text\/css” href=”android.css”><\/p><\/div>\n

 <\/p>\n

FAQ<\/h3>\n

(1) \ubaa8\ubc14\uc77c \uae30\uae30\uc640 \ub370\uc2a4\ud06c\ud1b1\uc744 CSS \ubbf8\ub514\uc5b4\ucffc\ub9ac\ub85c \ud074\ub77c\uc774\uc5b8\ud2b8 \ub2e8\uc5d0\uc11c \uad6c\ubcc4\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc740 \ud604\uc7ac \uc5c6\uc2b5\ub2c8\ub2e4. \ud604\uc7ac\ub294 UA\uac12\uc73c\ub85c \ubd84\uae30\ud560 \uc218 \ubc16\uc5d0 \uc5c6\uc2b5\ub2c8\ub2e4.
\norientation(\uac00\ub85c\/\uc138\ub85c \uc804\ud658)\uc758 \uacbd\uc6b0 \ubaa8\ubc14\uc77c \uc804\uc6a9 \uc18d\uc131\uc774 \uc544\ub2c8\uba70, \uac00\ub85c \uae38\uc774\uc640 \uc138\ub85c \uae38\uc774\uc5d0 \ub530\ub77c \ub098\uc624\ub294 \uac12\uc774\uae30 \ub54c\ubb38\uc5d0 \uc2e4\uc81c PC \uc5d0\uc11c\ub3c4 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc758 \uc138\ub85c\uac00 \uae38\uba74 \uc138\ub85c\ubaa8\ub4dc (portrait), \uac00\ub85c\uac00 \uae38\uba74 \uac00\ub85c\ubaa8\ub4dc(landscape)\ub85c \uc778\uc2dd\ud569\ub2c8\ub2e4.<\/p>\n

(2) \uad6c\ud615 \ubaa8\ubc14\uc77c \ube0c\ub77c\uc6b0\uc800\uc778 \ud3f4\ub77c\ub9ac\uc2a4\uc5d0\uc11c\ub294 @media \uad6c\ubb38\uc744 \ubb34\uc2dc\ud558\uace0 \ub0b4\ubd80\uc5d0 \uc788\ub294 CSS\uae4c\uc9c0 \uadf8\ub300\ub85c \uc801\uc6a9\ub418\ub294 \ubb38\uc81c\uac00 \uc788\uc2b5\ub2c8\ub2e4. \ud3f4\ub77c\ub9ac\uc2a4\uc758 \uacbd\uc6b0 \ud574\ub2f9 \uad6c\ubd84\uc774 \ud3f4\ub77c\ub9ac\uc2a4\uac00 \uc544\ub2cc \ub2e4\ub978 \ube0c\ub77c\uc6b0\uc800\ub97c \uc704\ud55c \uc2a4\ud0c0\uc77c\uc774\ub77c\uace0 \ud574\ub3c4 \ubbf8\ub514\uc5b4\ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud558\uba74 \uc548\ub418\uba70 \ubcc4\ub3c4 \ud30c\uc77c\ub85c \ubd84\uae30\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n

(3) \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud558\uba74 \ub2e8\ub9d0\uae30\uc758 \ud2b9\uc131\uc5d0 \ub530\ub77c \ud544\uc694\ud55c CSS\ub97c \uc801\uc6a9\uc2dc\ud0a4\uac70\ub098 \ubb34\uc2dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae30\ub2a5\uc740 \uc11c\ubc84(Back-end) \ub2e8\uc758 \ubd80\ub2f4\uc744 \uc8fc\uc9c0 \uc54a\uace0, \ud074\ub77c\uc774\uc5b8\ud2b8\uc758 \ub80c\ub354\ub9c1(Frong-end)\uc5d0 \uc601\ud5a5\uc744 \uc904 \uc218 \uc788\uc9c0\ub9cc, \uc801\uc6a9\ub418\ub294 CSS\uad6c\ubb38\uc774 \ucd94\uac00\ub418\ub294 \uc815\ub3c4\uc774\uba70 \uc720\uc758\ubbf8\ud560 \uc815\ub3c4\uc758 \ud070 \ubd80\ub2f4\uc774 \uc544\ub2d9\ub2c8\ub2e4. \uc989, \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud574\ub3c4 \uc804\uccb4\uc801\uc778 \ud37c\ud3ec\uba3c\uc2a4\uc5d0\ub294 \ubcc4 \uc601\ud5a5\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n

(4) \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \ud1b5\ud574 \uc5ec\ub7ec \ud574\uc0c1\ub3c4\uc5d0\uc11c \ucd5c\uc801\uc758 \ub514\uc790\uc778\uc744 \ubcf4\uc5ec\uc8fc\ub294 \uac83\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. \uc704 \uc608\uc81c \uc0ac\uc774\ud2b8\uc5d0\uc11c\ub3c4 \ud655\uc778\ud560 \uc218 \uc788\uc9c0\ub9cc, HTML \ubb38\uc11c\uc758 \uad6c\uc870\ud654\uac00 \uc798\ub418\uc5b4\uc788\uc73c\uba74 \uac19\uc740 \ub0b4\uc6a9\uc744 \ud3ec\ud568\ud558\uba74\uc11c \ud574\uc0c1\ub3c4\uc5d0 \ub530\ub77c \uac01\uac01\uc758 \ucd5c\uc801\ud654\ub41c \ud654\uba74\uc744 \ubcf4\uc5ec\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n\uac01 \ud574\uc0c1\ub3c4 \ubcc4\ub85c \ub514\uc790\uc778\uc744 \ubcc4\ub3c4\ub85c \ud55c HTML\ubb38\uc11c\ub97c \ub9cc\ub4e4 \ud544\uc694 \uc5c6\uc774 \ud558\ub098\uc758 \ubb38\uc11c\ub9cc\uc73c\ub85c\ub3c4 \ubaa8\ub4e0 \ud574\uc0c1\ub3c4\uc5d0 \ub300\uc751\ud560 \uc218 \uc788\uace0, PC\ucc98\ub7fc \ud574\uc0c1\ub3c4\ub97c \ubcc0\uacbd\ud560 \uc218 \uc788\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 \ucc3d \ud06c\uae30\uc5d0 \ub530\ub77c \ub3d9\uc801\uc73c\ub85c \ub300\uc751\ud558\ub294 \uac83\ub3c4 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n

(5) \ud558\uc9c0\ub9cc, \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub294 \uae30\ub2a5 \uc0c1\uc758 \ubd84\uae30\ub294 \ubd88\uac00\ub2a5\ud569\ub2c8\ub2e4. \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub294 \uacb0\uad6d CSS\uc758 \ucd94\uac00 \ub85c\ub529\/CSS\uc758 \uc218\uc815\uc5d0\ub9cc \uc601\ud5a5\uc744 \uc8fc\uae30 \ub54c\ubb38\uc5d0 \ub514\uc790\uc778\uc5d0\ub9cc \uc601\ud5a5\uc744 \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uae30\ub2a5 \uc9c0\uc6d0\uc774 \uc548\ub418\ub294 \ub2e8\ub9d0\uae30\uc758 \ud2b9\uc131\uc744 \ud30c\uc545\ud558\uc5ec \ud574\ub2f9 \uc139\uc158\uc744 CSS\uc758 display:none \ub4f1\uc73c\ub85c \uac00\ub9ac\ub294 \uac83\uc740 \uac00\ub2a5\ud558\uc9c0\ub9cc, \uadfc\ubcf8\uc801\uc73c\ub85c \ud574\ub2f9 \uae30\ub2a5\uc744 \ub2e8\ub9d0\uae30\uc5d0\uc11c \ub85c\ub529\ud558\uc9c0 \uc54a\ub294 \ub4f1\uc758 \uac1c\ubc1c \ubd84\uae30\ub294 \uc5b4\ub835\uc2b5\ub2c8\ub2e4.<\/p>\n

 <\/p>\n

\uad00\ub828\uc790\ub8cc \ubc0f \uc608\uc2dc \uc0ac\uc774\ud2b8<\/h3>\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>\n

\ucd9c\ucc98 \ud83d\ude15http:\/\/html.nhncorp.com\/blog\/textyle\/42284<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

\ubbf8\ub514\uc5b4 \ud0c0\uc785(media type)\uc740 \ub2e8\ub9d0\uae30\uc758 \uc885\ub958\uc5d0 \ub530\ub77c \uac01\uac01 \ub2e4\ub978 \uc2a4\ud0c0\uc77c\uc2dc\ud2b8\ub97c \uc801\uc6a9\ud558\uac8c \ud558\ub294 \uae30\ub2a5\uc774\uba70 CSS 2.1 \ubd80\ud130 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc2e4\uc81c\ub85c \ub9ce\uc774 \uc0ac\uc6a9\ub418\uc9c0 \uc54a\uc558\ub294\ub370, \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… <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[54],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/745"}],"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=745"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/745\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}