{"componentChunkName":"component---node-modules-stvad-gatsby-theme-garden-src-templates-roam-page-js","path":"/CSS","result":{"data":{"roamPage":{"title":"CSS","childMdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"css\"\n  }, \"CSS\"), mdx(Block, {\n    id: \"sjefdRGAD\",\n    content: mdx(React.Fragment, null, mdx(\"h1\", {\n      \"id\": \"생성에-도움을-주는-도구\"\n    }, \"\\uC0DD\\uC131\\uC5D0 \\uB3C4\\uC6C0\\uC744 \\uC8FC\\uB294 \\uB3C4\\uAD6C\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"CuEwQdXZp\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://www.joshwcomeau.com/shadow-palette/\"\n    }, \"Shadow Palette Generator\"))),\n    mdxType: \"Block\"\n  })), mdx(Block, {\n    id: \"3c4hQTb_r\",\n    content: mdx(React.Fragment, null, mdx(\"h1\", {\n      \"id\": \"레퍼런스\"\n    }, \"\\uB808\\uD37C\\uB7F0\\uC2A4\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"FDJjo5WAS\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://css-tricks.com/snippets/css/a-guide-to-flexbox/\"\n    }, \"A Complete Guide to Flexbox\"))),\n    mdxType: \"Block\"\n  }), mdx(Block, {\n    id: \"6wcvGAi4g\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://css-tricks.com/snippets/css/complete-guide-grid/\"\n    }, \"A Complete Guide to Grid\"))),\n    mdxType: \"Block\"\n  })), mdx(Block, {\n    id: \"ZgRuV7iJR\",\n    content: mdx(React.Fragment, null, mdx(\"h1\", {\n      \"id\": \"reset\"\n    }, \"Reset\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"lzTJuMFmo\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/53faa\",\n      \"title\": \"브라우저\",\n      \"className\": \" internal-link\"\n    }, \"\\uBE0C\\uB77C\\uC6B0\\uC800\"), \" \\uAC04 \\uC2A4\\uD0C0\\uC77C \\uCC28\\uC774\\uB97C \\uC81C\\uAC70\\uD558\\uACE0 \\uC0AC\\uC6A9\\uD558\\uAE30 \\uD3B8\\uB9AC\\uD55C CSS \\uD658\\uACBD\\uC744 \\uB9CC\\uB4E4\\uAE30 \\uC704\\uD574 \\uC0AC\\uC6A9\\uB418\\uB294 CSS \\uC2A4\\uB2C8\\uD3AB.\")),\n    mdxType: \"Block\"\n  }), mdx(Block, {\n    id: \"7_GaantxS\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uC608\\uC804\\uC5D0\\uB294 \\uBE0C\\uB77C\\uC6B0\\uC800 \\uAE30\\uBCF8 \\uC2A4\\uD0C0\\uC77C\\uC744 \\uC644\\uC804\\uD788 \\uC0AD\\uC81C\\uD558\\uB294 \\uBC29\\uC2DD\\uC774 \\uC8FC\\uB85C \\uC0AC\\uC6A9\\uB418\\uC5C8\\uC9C0\\uB9CC \\uD604\\uB300\\uC5D0 \\uB4E4\\uC5B4\\uC11C\\uB294 \\uBE0C\\uB77C\\uC6B0\\uC800 \\uAC04 CSS \\uC2A4\\uD0C0\\uC77C\\uC758 \\uCC28\\uC774\\uAC00 \\uBBF8\\uBBF8\\uD558\\uACE0 \\uB300\\uBD80\\uBD84 \\uD45C\\uC900\\uC5D0 \\uBD80\\uD569\\uD558\\uBA70, \\uBAA8\\uB4E0 \\uAE30\\uBCF8 \\uC2A4\\uD0C0\\uC77C\\uC744 \\uB0B4\\uCE58\\uB294 \\uAC83\\uC774 \\uADF8\\uB2E4\\uC9C0 \\uC0DD\\uC0B0\\uC801\\uC774\\uC9C0\\uB3C4 \\uC54A\\uAE30 \\uB54C\\uBB38\\uC5D0 (\", mdx(\"inlineCode\", {\n      parentName: \"p\"\n    }, \"<strong>\"), \"\\uC774 \\uBCFC\\uB4DC\\uB85C \\uC548 \\uB098\\uC624\\uB294 \\uAC74 \\uBCF4\\uD1B5 \\uC6D0\\uD558\\uB294 \\uB3D9\\uC791\\uC774 \\uC544\\uB2C8\\uC9C0 \\uC54A\\uACA0\\uB294\\uAC00?) \\uCD5C\\uADFC\\uC5D0\\uB294 \\uCD5C\\uC18C\\uD55C\\uC758 \\uC124\\uC815\\uB9CC \\uD574\\uB450\\uB294 \\uB4EF.\")),\n    mdxType: \"Block\"\n  }), mdx(Block, {\n    id: \"VrWzwZ_6c\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://css-tricks.com/reboot-resets-reasoning/\"\n    }, \"https://css-tricks.com/reboot-resets-reasoning/\"))),\n    mdxType: \"Block\"\n  }), mdx(Block, {\n    id: \"Zl5cWPAUG\",\n    content: mdx(React.Fragment, null, mdx(\"h2\", {\n      \"id\": \"가져다-쓸-만한-것들\"\n    }, \"\\uAC00\\uC838\\uB2E4 \\uC4F8 \\uB9CC\\uD55C \\uAC83\\uB4E4\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"_8lN0Cr_b\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://meyerweb.com/eric/tools/css/reset/\"\n    }, \"Eric Meyer's CSS Reset\"))),\n    mdxType: \"Block\"\n  }), mdx(Block, {\n    id: \"4IsXbqHtG\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://github.com/hankchizljaw/modern-css-reset\"\n    }, \"Modern CSS Reset\"))),\n    mdxType: \"Block\"\n  }), mdx(Block, {\n    id: \"v_JY6OAgy\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://necolas.github.io/normalize.css/\"\n    }, \"Normalize.css\"))),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"59kxuzbIr\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"Bootstrap\\uC758 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://getbootstrap.com/docs/4.0/content/reboot/\"\n    }, \"Reboot\"))),\n    mdxType: \"Block\"\n  }), mdx(Block, {\n    id: \"tFBaGSMFM\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"Sindre Sorhus\\uC758 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://github.com/sindresorhus/modern-normalize\"\n    }, \"Modern Normalize\"))),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"1kP2fko9z\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"Tailwind CSS\\uC758 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://tailwindcss.com/docs/preflight#overview\"\n    }, \"Preflight\"))),\n    mdxType: \"Block\"\n  }))), mdx(Block, {\n    id: \"T4VIRt9pc\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://csstools.github.io/sanitize.css/\"\n    }, \"Sanitize.css\"))),\n    mdxType: \"Block\"\n  }), mdx(Block, {\n    id: \"Jq5gIBhLL\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://jgthms.com/minireset.css/\"\n    }, \"minireset.css\"))),\n    mdxType: \"Block\"\n  }), mdx(Block, {\n    id: \"MgXxbimp6\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://www.joshwcomeau.com/css/custom-css-reset\"\n    }, \"Josh W. Comeau's Reset\"))),\n    mdxType: \"Block\"\n  })), mdx(Block, {\n    id: \"89KcLeMbK\",\n    content: mdx(React.Fragment, null, mdx(\"h2\", {\n      \"id\": \"필요한가\"\n    }, \"\\uD544\\uC694\\uD55C\\uAC00?\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"1NWpSH0Ad\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://stackoverflow.com/a/11579120/4154321\"\n    }, \"https://stackoverflow.com/a/11579120/4154321\"))),\n    mdxType: \"Block\"\n  }))), mdx(Block, {\n    id: \"5HAbi0I8O\",\n    content: mdx(React.Fragment, null, mdx(\"h1\", {\n      \"id\": \"퍼센트\"\n    }, \"\\uD37C\\uC13C\\uD2B8\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"6SSkUhjdQ\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://wattenberger.com/blog/css-percents\"\n    }, \"https://wattenberger.com/blog/css-percents\"))),\n    mdxType: \"Block\"\n  })), mdx(Block, {\n    id: \"3bsBCzzPt\",\n    content: mdx(React.Fragment, null, mdx(\"h1\", {\n      \"id\": \"a-complete-guide\"\n    }, \"A Complete Guide\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"NbBC6_KYB\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://css-tricks.com/snippets/css/a-guide-to-flexbox/\"\n    }, \"flexbox\"))),\n    mdxType: \"Block\"\n  }), mdx(Block, {\n    id: \"ou-vk3cBF\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://css-tricks.com/snippets/css/complete-guide-grid/\"\n    }, \"grid\"))),\n    mdxType: \"Block\"\n  })), mdx(Block, {\n    id: \"EkVa9uIs7\",\n    content: mdx(React.Fragment, null, mdx(\"h1\", {\n      \"id\": \"containment\"\n    }, \"Containment\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"7EDE2P_KJ\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://developer.mozilla.org/ko-KR/docs/Web/CSS/CSS_Containment\"\n    }, \"https://developer.mozilla.org/ko-KR/docs/Web/CSS/CSS_Containment\"))),\n    mdxType: \"Block\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;","outboundReferences":[{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"브라우저\"\n  }, \"\\uBE0C\\uB77C\\uC6B0\\uC800\"));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamPage","id":"e27e1c44-c536-5510-9908-ec393d2562cf","title":"브라우저","fields":{"slug":"/53faa"}}}],"inboundReferences":[{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"qtiujN9BQ\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/TIL\",\n      \"title\": \"hashtag_TIL\",\n      \"className\": \"hashtag internal-link\"\n    }, \"TIL\"), \" \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"CSS\",\n      \"className\": \" internal-link\"\n    }, \"CSS\"), \" \", mdx(\"inlineCode\", {\n      parentName: \"p\"\n    }, \"filter: drop-shadow();\"), \" \\uC640 \", mdx(\"inlineCode\", {\n      parentName: \"p\"\n    }, \"box-shadow\"), \" \\uC758 \\uCC28\\uC774\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"uXbzuO1my\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uD544\\uD130\\uB294 \\uC5D8\\uB9AC\\uBA3C\\uD2B8\\uC758 \\uB0B4\\uC6A9\\uBB3C\\uC5D0 \\uC801\\uC6A9\\uB428\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"GkLmhyqEo\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uC608\\uB97C \\uB4E4\\uC5B4 \\uB3D9\\uADF8\\uB780 \\uBC30\\uACBD \\uD22C\\uBA85 \\uC774\\uBBF8\\uC9C0\\uC5D0 \\uD544\\uD130\\uB85C \\uADF8\\uB9BC\\uC790\\uB97C \\uB123\\uC73C\\uBA74 \\uC6D0 \\uBAA8\\uC591 \\uADF8\\uB9BC\\uC790\\uAC00 \\uB4E4\\uC5B4\\uAC00\\uACE0, box-shadow\\uB294 \\uB124\\uBAA8\\uB09C \\uADF8\\uB9BC\\uC790\\uAC00 \\uB418\\uB294 \\uC2DD\")),\n    mdxType: \"Block\"\n  })), mdx(Block, {\n    id: \"lm22IuBDg\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uD544\\uD130\\uB294 \", mdx(\"inlineCode\", {\n      parentName: \"p\"\n    }, \"overflow: hidden;\"), \"\\uC758 \\uC601\\uD5A5\\uC744 \\uBC1B\\uC9C0 \\uC54A\\uC74C\")),\n    mdxType: \"Block\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"7d9fde07-ae39-556d-b8b3-c179aada8f17","string":"#TIL [[CSS]] `filter: drop-shadow();` 와 `box-shadow` 의 차이","fields":{"parentPage":{"title":"June 9th, 2022","fields":{"slug":"/June-9th-2022"}},"slug":"/qtiujN9BQ"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"jAGY11cHN\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uBB38\\uB4DD \\uB4E0 \\uC758\\uBB38\\uC778\\uB370 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"CSS\",\n      \"className\": \" internal-link\"\n    }, \"CSS\"), \"\\uC5D0\\uB294 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/env\"\n    }, \"env()\"), \"\\uB77C\\uACE0 \\uC0AC\\uC6A9\\uC790 \\uD658\\uACBD\\uC758 \\uC548\\uC804\\uD55C \\uAD6C\\uC5ED, \\uD06C\\uAE30 \\uAC19\\uC740 \\uAC78 \\uAC00\\uC838\\uC624\\uB294 \\uAC8C \\uC788\\uB294\\uB370, \\uC774\\uAC70 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/WebView\",\n      \"title\": \"WebView\",\n      \"className\": \" internal-link\"\n    }, \"WebView\"), \"\\uC5D0\\uC11C\\uB294 \\uC5B4\\uB5BB\\uAC8C \\uB3D9\\uC791\\uD558\\uB294 \\uAC70\\uC9C0?\")),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"af43a90d-b842-5bf3-8f39-be131bc03933","string":"문득 든 의문인데 [[CSS]]에는 [env()](https://developer.mozilla.org/en-US/docs/Web/CSS/env)라고 사용자 환경의 안전한 구역, 크기 같은 걸 가져오는 게 있는데, 이거 [[WebView]]에서는 어떻게 동작하는 거지?","fields":{"parentPage":{"title":"June 13th, 2022","fields":{"slug":"/June-13th-2022"}},"slug":"/jAGY11cHN"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"NhpLCa4G2\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uC6F9 \\uC560\\uD50C\\uB9AC\\uCF00\\uC774\\uC158 \\uAC1C\\uBC1C\\uC5D0 \\uC8FC\\uB85C \\uC0AC\\uC6A9\\uB418\\uB2E4 \\uBCF4\\uB2C8 JS \\uC678\\uC5D0\\uB3C4 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"CSS\",\n      \"className\": \" internal-link\"\n    }, \"CSS\"), \"\\uB098 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/HTML\",\n      \"title\": \"HTML\",\n      \"className\": \" internal-link\"\n    }, \"HTML\"), \"\\uC744 \\uB2E4\\uB8F0 \\uC218 \\uC788\\uB294 \\uACBD\\uC6B0\\uAC00 \\uB9CE\\uB2E4.\")),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"acf3bbe1-d841-50ce-bbec-b5958af32414","string":"웹 애플리케이션 개발에 주로 사용되다 보니 JS 외에도 [[CSS]]나 [[HTML]]을 다룰 수 있는 경우가 많다.","fields":{"parentPage":{"title":"모듈 번들러","fields":{"slug":"/2916e"}},"slug":"/NhpLCa4G2"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"JaEgGGNZG\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"CSS\",\n      \"className\": \" internal-link\"\n    }, \"CSS\"), \" \", mdx(\"inlineCode\", {\n      parentName: \"p\"\n    }, \"@font-palette-values\"), \" \\uB97C \\uD1B5\\uD574 \\uD3F0\\uD2B8\\uC5D0 \\uC815\\uC758\\uB41C \\uCEEC\\uB7EC \\uC815\\uBCF4\\uB97C \\uC218\\uC815\\uD560 \\uC218 \\uC788\\uC74C\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"yghfNrFyu\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://caniuse.com/css-font-palette\"\n    }, \"https://caniuse.com/css-font-palette\"))),\n    mdxType: \"Block\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"02da5299-0d72-5805-8106-d8db564d1756","string":"[[CSS]] `@font-palette-values` 를 통해 폰트에 정의된 컬러 정보를 수정할 수 있음","fields":{"parentPage":{"title":"June 11th, 2022","fields":{"slug":"/June-11th-2022"}},"slug":"/JaEgGGNZG"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"ZX7WzVuxi\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uC0C8\\uB85C\\uC6B4 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"CSS\",\n      \"className\": \" internal-link\"\n    }, \"CSS\"), \" \\uAE30\\uB2A5\\uC778 Container Queries, Subgrid\\uAC00 \\uC815\\uC2DD \\uB3C4\\uC785\")),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"7cd23441-42ff-574f-b2e4-56ef4d3fbbad","string":"새로운 [[CSS]] 기능인 Container Queries, Subgrid가 정식 도입","fields":{"parentPage":{"title":"June 11th, 2022","fields":{"slug":"/June-11th-2022"}},"slug":"/ZX7WzVuxi"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"PSjrPzub8\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"CSS\",\n      \"className\": \" internal-link\"\n    }, \"CSS\"), \"\\uC5D0\\uC11C \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/Masonry\",\n      \"title\": \"Masonry\",\n      \"className\": \" internal-link\"\n    }, \"Masonry\"), \" \\uB808\\uC774\\uC544\\uC6C3\\uC758 \\uC0AC\\uC6A9\\uC5D0 \\uAD00\\uD574 \\uB2E4\\uB8F8\")),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"6dd59b5a-685c-5cca-9d65-7a5ee34b6bc8","string":"[[CSS]]에서 [[Masonry]] 레이아웃의 사용에 관해 다룸","fields":{"parentPage":{"title":"July 12th, 2022","fields":{"slug":"/July-12th-2022"}},"slug":"/PSjrPzub8"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"z3srB0hRg\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\u201Ctext-rendering - \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"CSS\",\n      \"className\": \" internal-link\"\n    }, \"CSS\"), \": Cascading Style Sheets | MDN\\u201D.  \", \"[Online]\", \". Available at: \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering\"\n    }, \"https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering\"), \".\")),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"1fbd18d9-517f-5c89-9150-a64de9a859bd","string":"“text-rendering - [[CSS]]: Cascading Style Sheets | MDN”.  [Online]. Available at: https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering.","fields":{"parentPage":{"title":"June 6th, 2022","fields":{"slug":"/June-6th-2022"}},"slug":"/z3srB0hRg"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"6GD-HLQxi\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility\"\n    }, \"content-visiblity\"), \"\\uB294 layout \\uACC4\\uC0B0\\uC744 \\uD544\\uC694\\uD560 \\uB54C\\uAE4C\\uC9C0 \\uB2A6\\uCDB0\\uC8FC\\uB294 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"CSS\",\n      \"className\": \" internal-link\"\n    }, \"CSS\"), \" \\uD504\\uB85C\\uD37C\\uD2F0\\uC784\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"X5tvyobRk\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uD398\\uC774\\uC9C0\\uB97C \\uB4E4\\uC5B4\\uAC00\\uC790\\uB9C8\\uC790 \\uBC14\\uB85C \\uBCF4\\uC774\\uB294 \\uC694\\uC18C\\uB77C\\uBA74 \\uC801\\uC6A9\\uD558\\uB294 \\uAC8C \\uC0DD\\uAC01\\uBCF4\\uB2E4 \\uD070 \\uD5A5\\uC0C1\\uC744 \\uAC00\\uC838\\uC624\\uC9C0 \\uC54A\\uC744 \\uC218\\uB3C4\")),\n    mdxType: \"Block\"\n  }), mdx(Block, {\n    id: \"Db9m6b_Xs\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \" \", mdx(\"inlineCode\", {\n      parentName: \"p\"\n    }, \"contain: layout;\"), \"\\uC744 \\uC790\\uB3D9\\uC73C\\uB85C \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://drafts.csswg.org/css-contain/#valdef-content-visibility-auto\"\n    }, \"\\uD65C\\uC131\\uD654\\uD568\"))),\n    mdxType: \"Block\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"86fd6a8d-ab79-59a8-80d8-ec13c9680709","string":"[content-visiblity](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility)는 layout 계산을 필요할 때까지 늦춰주는 [[CSS]] 프로퍼티임","fields":{"parentPage":{"title":"June 9th, 2022","fields":{"slug":"/June-9th-2022"}},"slug":"/6GD-HLQxi"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"hHxCtImpB\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"CSS\",\n      \"className\": \" internal-link\"\n    }, \"CSS\"), \"\\uB85C \\uBC18\\uC0AC\\uB418\\uB294 \\uD6A8\\uACFC \\uB0B4\\uAE30 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://css-tricks.com/creating-realistic-reflections-with-css/\"\n    }, \"css-tricks.com/creating-reali\\u2026\"))),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"6d0f4974-1916-59a9-967c-5093b8753a96","string":"[[CSS]]로 반사되는 효과 내기 [css-tricks.com/creating-reali…](https://css-tricks.com/creating-realistic-reflections-with-css/)","fields":{"parentPage":{"title":"June 7th, 2022","fields":{"slug":"/June-7th-2022"}},"slug":"/hHxCtImpB"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"FSFuepnhn\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/HTML\",\n      \"title\": \"HTML\",\n      \"className\": \" internal-link\"\n    }, \"HTML\"), \", \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"CSS\",\n      \"className\": \" internal-link\"\n    }, \"CSS\"), \", \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/6e12b\",\n      \"title\": \"자바스크립트\",\n      \"className\": \" internal-link\"\n    }, \"\\uC790\\uBC14\\uC2A4\\uD06C\\uB9BD\\uD2B8\"), \"\\uB97C \\uBC14\\uD0D5\\uC73C\\uB85C \\uC0C1\\uD638 \\uC791\\uC6A9 \\uAC00\\uB2A5\\uD55C \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/9f451\",\n      \"title\": \"웹\",\n      \"className\": \" internal-link\"\n    }, \"\\uC6F9\"), \" \\uD398\\uC774\\uC9C0\\uB97C \\uB80C\\uB354\\uB9C1\\uD558\\uB294 \\uC18C\\uD504\\uD2B8\\uC6E8\\uC5B4\\uC758 \\uD1B5\\uCE6D.\")),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"ed913451-f41b-5a2d-8d09-944dceec8b1a","string":"[[HTML]], [[CSS]], [[자바스크립트]]를 바탕으로 상호 작용 가능한 [[웹]] 페이지를 렌더링하는 소프트웨어의 통칭.","fields":{"parentPage":{"title":"브라우저 엔진","fields":{"slug":"/3e8cc"}},"slug":"/FSFuepnhn"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"pZesjFIPs\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/6e12b\",\n      \"title\": \"자바스크립트\",\n      \"className\": \" internal-link\"\n    }, \"\\uC790\\uBC14\\uC2A4\\uD06C\\uB9BD\\uD2B8\"), \", \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"CSS\",\n      \"className\": \" internal-link\"\n    }, \"CSS\"), \", \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/2e36a\",\n      \"title\": \"마크다운\",\n      \"className\": \" internal-link\"\n    }, \"\\uB9C8\\uD06C\\uB2E4\\uC6B4\"), \", \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/YAML\",\n      \"title\": \"YAML\",\n      \"className\": \" internal-link\"\n    }, \"YAML\"), \", HTML, \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/GraphQL\",\n      \"title\": \"GraphQL\",\n      \"className\": \" internal-link\"\n    }, \"GraphQL\"), \" \\uB4F1\\uC744 \\uB2E4\\uB8E8\\uB294 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/4a88b\",\n      \"title\": \"포매터\",\n      \"className\": \" internal-link\"\n    }, \"\\uD3EC\\uB9E4\\uD130\"), \"\")),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"66254eda-9eb5-5348-9efd-26e7efbc974d","string":"[[자바스크립트]], [[CSS]], [[마크다운]], [[YAML]], HTML, [[GraphQL]] 등을 다루는 [[포매터]]","fields":{"parentPage":{"title":"Prettier","fields":{"slug":"/Prettier"}},"slug":"/pZesjFIPs"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"5pwEF5j2w\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uBD80\\uD2B8\\uC2A4\\uD2B8\\uB7A9, Material UI \\uAC19\\uC740 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"CSS\",\n      \"className\": \" internal-link\"\n    }, \"CSS\"), \" UI \\uD504\\uB808\\uC784\\uC6CC\\uD06C\\uAC00 \\uAF2D \\uD544\\uC694\\uD558\\uC9C0 \\uC54A\\uAC70\\uB098 \\uC624\\uD788\\uB824 \\uBC29\\uD574\\uAC00 \\uB420 \\uC218\\uB3C4 \\uC788\\uB2E4\\uACE0 \\uC9C0\\uC801\\uD558\\uB294 \\uAE00. \\uB098\\uB3C4 \\uBE44\\uC2B7\\uD55C \\uAC71\\uC815\\uC73C\\uB85C Reach UI\\uC640 Radix UI\\uB97C \\uC0AC\\uC6A9\\uD558\\uACE0 \\uC788\\uACE0 \\uD6E8\\uC52C \\uB9CC\\uC871\\uC2A4\\uB7EC\\uC6C0! \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://www.smashingmagazine.com/2022/05/you-dont-need-ui-framework/\"\n    }, \"smashingmagazine.com/2022/05/you-do\\u2026\"))),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"c7986dcc-dfc2-5fc1-a40f-e496e2a4e963","string":"부트스트랩, Material UI 같은 [[CSS]] UI 프레임워크가 꼭 필요하지 않거나 오히려 방해가 될 수도 있다고 지적하는 글. 나도 비슷한 걱정으로 Reach UI와 Radix UI를 사용하고 있고 훨씬 만족스러움! [smashingmagazine.com/2022/05/you-do…](https://www.smashingmagazine.com/2022/05/you-dont-need-ui-framework/)","fields":{"parentPage":{"title":"June 7th, 2022","fields":{"slug":"/June-7th-2022"}},"slug":"/5pwEF5j2w"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"xW0rJIrXZ\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"CSS\",\n      \"className\": \" internal-link\"\n    }, \"CSS\"), \"\\uC5D0\\uC11C\\uB3C4 \", mdx(\"inlineCode\", {\n      parentName: \"p\"\n    }, \":invalid\"), \", \", mdx(\"inlineCode\", {\n      parentName: \"p\"\n    }, \":valid\"), \" \\uB4F1\\uC758 \\uAC00\\uC0C1 \\uD074\\uB798\\uC2A4\\uB97C \\uD1B5\\uD574 \\uC0C1\\uD0DC\\uC5D0 \\uB530\\uB77C \\uC2A4\\uD0C0\\uC77C\\uC744 \\uD45C\\uC2DC\\uD560 \\uC218 \\uC788\\uB2E4.\")),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"1644c341-b866-584a-96e0-ac402d88abdb","string":"[[CSS]]에서도 `:invalid`, `:valid` 등의 가상 클래스를 통해 상태에 따라 스타일을 표시할 수 있다.","fields":{"parentPage":{"title":"December 11th, 2021","fields":{"slug":"/December-11th-2021"}},"slug":"/xW0rJIrXZ"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"EsyuzR7zI\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://bugzilla.mozilla.org/show_bug.cgi?id=1744221\"\n    }, \"Implement CSS container queries\"), \" \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CSS\",\n      \"title\": \"hashtag_CSS\",\n      \"className\": \"hashtag internal-link\"\n    }, \"CSS\"), \" \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/Firefox\",\n      \"title\": \"hashtag_Firefox\",\n      \"className\": \"hashtag internal-link\"\n    }, \"Firefox\"), \"\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"hArPA9H79\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"Yeah it is coming.\")),\n    mdxType: \"Block\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"dc8edca4-06b4-5ad6-904e-54247cf372ee","string":"[Implement CSS container queries](https://bugzilla.mozilla.org/show_bug.cgi?id=1744221) #CSS #Firefox","fields":{"parentPage":{"title":"June 16th, 2022","fields":{"slug":"/June-16th-2022"}},"slug":"/EsyuzR7zI"}}}]},"fields":{"slug":"/CSS"}}},"pageContext":{"id":"32c94cde-5b74-50a7-ba65-e51e5d2276ae"}},"staticQueryHashes":["2131059104","2221750479","2468095761"]}