\ud50c\ub7ec\ud130\ub294 \ub2e4\uc591\ud55c \ud50c\ub7ab\ud3fc\uc5d0\uc11c \uc77c\uad00\ub41c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc81c\uacf5\ud558\uae30 \uc704\ud574 \uc5ec\ub7ec \uc704\uc82f\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uadf8 \uc911\uc5d0\uc11c\ub3c4 MediaQuery<\/strong>\ub294 \uae30\uae30\uc758 \ud654\uba74 \ud06c\uae30, \ubc29\ud5a5, \ud574\uc0c1\ub3c4 \ub4f1 \ub2e4\uc591\ud55c \uc815\ubcf4\ub97c \uac00\uc838\uc624\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc774 \uac15\uc88c\uc5d0\uc11c\ub294 MediaQuery\ub294 Flutter\uc758 \ube4c\ud2b8\uc778 \uc704\uc82f \uc911 \ud558\ub098\ub85c, \uc571\uc758 UI\uac00 \ub514\ubc14\uc774\uc2a4\uc758 \ud654\uba74 \ud06c\uae30 \ubc0f \uc18d\uc131\uc5d0 \ub9de\ucdb0 \uc870\uc815\ub420 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. \uae30\uae30\uac00 \uc5b4\ub5a4 \ud658\uacbd\uc5d0 \uc788\ub294\uc9c0\ub97c \ud30c\uc545\ud558\uc5ec UI\ub97c \ucd5c\uc801\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \ud65c\uc6a9\ud558\uc5ec \ub2e4\uc591\ud55c \ud654\uba74 \ud06c\uae30\uc5d0\uc11c \uc801\uc808\ud55c \ub808\uc774\uc544\uc6c3\uc744 \uad6c\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ud654\uba74\uc758 \ud06c\uae30\uc5d0 \ub530\ub77c \ub2e4\ub978 \uc704\uc82f\uc744 \ud45c\uc2dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \ud50c\ub7ec\ud130\uc5d0\uc11c\ub294 \ub2e4\uc591\ud55c \ud654\uba74 \ud06c\uae30\uc5d0 \ub9de\ucdb0 \ub3d9\uc801\uc73c\ub85c UI\ub97c \uc124\uacc4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798 \uc608\uc81c\ub294 \ud654\uba74 \ud06c\uae30\uc5d0 \ub530\ub77c Padding\uc744 \ub2ec\ub9ac\ud558\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n MediaQueryData\ub294 \ub2e4\uc591\ud55c \uc18d\uc131\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc5d0 \ub300\ud55c \uc124\uba85\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n \uc2e4\uc81c \uc571\uc5d0\uc11c MediaQuery\ub97c \uc0ac\uc6a9\ud558\ub294 \uba87 \uac00\uc9c0 \uc0ac\ub840\ub97c \uc18c\uac1c\ud569\ub2c8\ub2e4. \uc8fc\uc694 \uc0ac\ub840\uc5d0\ub294 \ubc18\uc751\ud615 \ub514\uc790\uc778, \ub2e4\uc591\ud55c \ub514\ubc14\uc774\uc2a4 \uc9c0\uc6d0, \ub3d9\uc801 \ub808\uc774\uc544\uc6c3 \uc870\uc815 \ub4f1\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \ubc18\uc751\ud615 \ub514\uc790\uc778\uc744 \ud65c\uc6a9\ud55c \uc571\uc758 \uc608\ub85c\ub294, \ud654\uba74\uc758 \uac00\ub85c \ud06c\uae30\uc5d0 \ub530\ub77c \ub9ac\uc2a4\ud2b8 \ubdf0\uc758 \uc544\uc774\ud15c \uc218\ub97c \uc870\uc808\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 \uc5f4\uc758 \uc218\ub97c \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud558\ub294 \ubc29\ubc95\uc744 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n MediaQuery\ub97c \ud65c\uc6a9\ud558\uba74 \ub2e4\uc591\ud55c \ud574\uc0c1\ub3c4\uc640 \ud654\uba74 \ube44\uc728\uc744 \uc9c0\uc6d0\ud558\ub294 \uc571\uc744 \uc27d\uac8c \uc124\uacc4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uac01 \ub514\ubc14\uc774\uc2a4\uc758 \ud2b9\uc131\uc5d0 \ub9de\ub294 UI \uc694\uc18c\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n MediaQuery\ub294 \ud50c\ub7ec\ud130\uc5d0\uc11c \ub514\ubc14\uc774\uc2a4\uc758 \ud658\uacbd\uc5d0 \ub9de\ucd98 \ub808\uc774\uc544\uc6c3\uc744 \uad6c\uc131\ud558\ub294 \ub370 \ub9e4\uc6b0 \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4. \uc774 \uac15\uc88c\ub97c \ud1b5\ud574 MediaQuery.of(context)\uc758 \uae30\ubcf8 \uc0ac\uc6a9\ubc95\uacfc \ud65c\uc6a9 \uc0ac\ub840\ub97c \ubc30\uc6e0\uc2b5\ub2c8\ub2e4. \ub354 \ub9ce\uc740 \uae30\ub2a5\uacfc \uc751\uc6a9 \uc0ac\ub840\ub97c \uc2e4\ud5d8\ud574 \ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"MediaQuery.of(context)<\/code>\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n1. MediaQuery\ub780?<\/h2>\n
2. MediaQuery.of(context)\uc758 \uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h2>\n
MediaQuery.of(context)<\/code>\ub97c \uc0ac\uc6a9\ud558\uba74 \ud604\uc7ac\uc758 BuildContext\uc5d0 \ub300\ud55c MediaQueryData\ub97c \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ud654\uba74\uc758 \ub108\ube44\uc640 \ub192\uc774\ub97c \uac00\uc838\uc624\ub294 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n\n var mediaQuery = MediaQuery.of(context);\n var screenWidth = mediaQuery.size.width;\n var screenHeight = mediaQuery.size.height;\n <\/code><\/pre>\n3. MediaQuery\ub97c \ud65c\uc6a9\ud55c \ub808\uc774\uc544\uc6c3 \uad6c\uc131\ud558\uae30<\/h2>\n
\n @override\n Widget build(BuildContext context) {\n var screenWidth = MediaQuery.of(context).size.width;\n return Scaffold(\n appBar: AppBar(title: Text('MediaQuery \uc608\uc81c')),\n body: Center(\n child: screenWidth < 600\n ? Text('\uc791\uc740 \ud654\uba74')\n : Text('\ud070 \ud654\uba74'),\n ),\n );\n }\n <\/code><\/pre>\n4. \ub3d9\uc801 UI \uc124\uacc4\ub97c \uc704\ud55c MediaQuery \ud65c\uc6a9\ud558\uae30<\/h2>\n
\n @override\n Widget build(BuildContext context) {\n var padding = MediaQuery.of(context).size.width < 600 ? EdgeInsets.all(20) : EdgeInsets.all(50);\n return Padding(\n padding: padding,\n child: Text('Dynamic Padding Example'),\n );\n }\n <\/code><\/pre>\n5. MediaQueryData \uc18d\uc131 \uc124\uba85<\/h2>\n
\n
size<\/code>: \ub514\ubc14\uc774\uc2a4\uc758 \ud654\uba74 \ud06c\uae30 (Width, Height)<\/li>\norientation<\/code>: \ub514\ubc14\uc774\uc2a4\uc758 \ubc29\ud5a5 (\uc138\ub85c, \uac00\ub85c)<\/li>\ndevicePixelRatio<\/code>: \ud654\uba74\uc758 \ud53d\uc140 \ubc00\ub3c4<\/li>\npadding<\/code>: \ud654\uba74\uc758 \uc5ec\ubc31 (Safe Area)<\/li>\nviewInsets<\/code>: \uc18c\ud504\ud2b8\uc6e8\uc5b4 \ud0a4\ubcf4\ub4dc\uc640 \uac19\uc740 UI \uc694\uc18c\ub85c \uc778\ud574 \uc601\ud5a5\uc744 \ubc1b\ub294 \ud654\uba74\uc758 \ubd80\ubd84<\/li>\n<\/ul>\n6. MediaQuery\uc758 \ud65c\uc6a9 \uc0ac\ub840<\/h2>\n
6.1 \ubc18\uc751\ud615 \ub514\uc790\uc778 \uc608\uc81c<\/h3>\n
6.2 \ub2e4\uc591\ud55c \ub514\ubc14\uc774\uc2a4 \uc9c0\uc6d0<\/h3>\n
7. \uacb0\ub860<\/h2>\n