{"id":23329,"date":"2023-05-18T12:48:06","date_gmt":"2023-05-18T03:48:06","guid":{"rendered":"http:\/\/nori.company\/?p=23329"},"modified":"2023-05-18T12:48:06","modified_gmt":"2023-05-18T03:48:06","slug":"css%ec%99%80-web-ui%ec%9d%98-%ec%83%88%eb%a1%9c%ec%9a%b4-%ea%b8%b0%eb%8a%a5%eb%93%a4-i-o-2023-%ec%97%90%eb%94%94%ec%85%98","status":"publish","type":"post","link":"https:\/\/nori.company\/?p=23329","title":{"rendered":"CSS\uc640 Web UI\uc758 \uc0c8\ub85c\uc6b4 \uae30\ub2a5\ub4e4: I\/O 2023 \uc5d0\ub514\uc158"},"content":{"rendered":"<ul>\n<li>Container queries<\/li>\n<li>Style queries<\/li>\n<li>:has() selector<\/li>\n<li>nth-of microsyntax<\/li>\n<li>text-wrap: balance<\/li>\n<li>initial-letter<\/li>\n<li>Dynamic viewport units<\/li>\n<li>Wide-gamut color spaces<\/li>\n<li>color-mix()<\/li>\n<li>Nesting<\/li>\n<li>Cascade layers<\/li>\n<li>Scoped&#8230;\n<p>\ucd9c\ucc98 : <a href=\"https:\/\/news.hada.io\/topic?id=9205\" target=\"_blank\" rel=\"noopener\">GeekNews &#8211; \uac1c\ubc1c\/\uae30\uc220\/\uc2a4\ud0c0\ud2b8\uc5c5 \ub274\uc2a4 \uc11c\ube44\uc2a4 <\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Container queries Style queries :has() selector nth-of microsyntax text-wrap: balance initial-letter Dynamic viewport units Wide-gamut color spaces color-mix() Nesting Cascade&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[138],"tags":[163],"class_list":["post-23329","post","type-post","status-publish","format-standard","hentry","category-it","tag-geeknews-----"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pa3PO4-64h","jetpack-related-posts":[{"id":24541,"url":"https:\/\/nori.company\/?p=24541","url_meta":{"origin":23329,"position":0},"title":"\ubbf8\ub798\uc758 CSS: State Container Queries","author":"\ub178\ub9ac\ucef4\ud37c\ub2c8","date":"2023\ub144 7\uc6d4 1\uc77c","format":false,"excerpt":"\ud06c\ub85c\ubbf8\uc6c0 \ud300\uc774 \uc0c8\ub85c\uc6b4 \ud0c0\uc785\uc758 \ucffc\ub9ac\ub97c \uc2e4\ud5d8\uc911 \uc791\ub144\uc5d4 Size Container Query\uac00 \uba54\uc774\uc800 \ube0c\ub77c\uc6b0\uc800\ub4e4\uc5d0\uc11c \ubaa8\ub450 \uc9c0\uc6d0 \uc2dc\uc791 \ucee8\ud14c\uc774\ub108\uc758 \ub108\ube44 \uae30\uc900\uc73c\ub85c \ucffc\ub9ac \uac00\ub2a5 \uc5ec\uae30\uc5d0 \ucd94\uac00\ub85c \uc774\uc81c Style \ucffc\ub9ac\ub3c4 \uac00\ub2a5 : \ud2b9\uc815 CSS \ubcc0\uc218\uac00 \uc788\ub294\uc9c0 \ud655\uc778. \uc544\uc9c1 \ud06c\ub86c \uce74\ub098\ub9ac\uc5d0\uc11c\ub9cc \uac00\ub2a5 ... \ucd9c\ucc98 : GeekNews - \uac1c\ubc1c\/\uae30\uc220\/\uc2a4\ud0c0\ud2b8\uc5c5 \ub274\uc2a4 \uc11c\ube44\uc2a4","rel":"","context":"&quot;IT&quot;\uc5d0\uc11c","block_context":{"text":"IT","link":"https:\/\/nori.company\/?cat=138"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":28147,"url":"https:\/\/nori.company\/?p=28147","url_meta":{"origin":23329,"position":1},"title":"blendicons &#8211; 14\ub9cc\uac1c \uc774\uc0c1\uc758 \ubb34\ub8cc \uc544\uc774\ucf58","author":"\ub178\ub9ac\ucef4\ud37c\ub2c8","date":"2023\ub144 9\uc6d4 28\uc77c","format":false,"excerpt":"\uc6b0\uc544\ud558\uace0 \uae54\ub054\ud55c \ud751\ubc31\/\uceec\ub7ec \uc544\uc774\ucf58\ub4e4 1400\uac1c\uac00 \ub118\ub294 \uceec\ub809\uc158 Light, Regular, Bold, Filled Line, Color, Fresh, Solid Line \ub4f1\uc758 \uc2a4\ud0c0\uc77c SVG, PNG, PDF, Web(HTML, JSX, CSS, Base64)\ud3ec\ub9f7\uc73c\ub85c \uc81c\uacf5\ub418\uc5b4 \uc989\uc2dc \ubcf5\uc0ac \uac00\ub2a5 ... \ucd9c\ucc98 : GeekNews - \uac1c\ubc1c\/\uae30\uc220\/\uc2a4\ud0c0\ud2b8\uc5c5 \ub274\uc2a4 \uc11c\ube44\uc2a4","rel":"","context":"&quot;IT&quot;\uc5d0\uc11c","block_context":{"text":"IT","link":"https:\/\/nori.company\/?cat=138"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":25203,"url":"https:\/\/nori.company\/?p=25203","url_meta":{"origin":23329,"position":2},"title":"2023\ub144\uc758 CSS \uc791\uc131\ud558\uae30: \uba87 \ub144 \uc804\uacfc \ub2ec\ub77c\uc84c\uc744\uae4c\uc694?","author":"\ub178\ub9ac\ucef4\ud37c\ub2c8","date":"2023\ub144 7\uc6d4 22\uc77c","format":false,"excerpt":"CSS\uac00 \uc815\ub9d0 \ube60\ub974\uac8c \ubcc0\ud654\ud558\ub294 \uc911 Container Query Layer \uc5d0\uc11c \uc2a4\ud0c0\uc77c \uadf8\ub8f9\ud551 :is() \uc640 :where() \uc0c8\ub85c\uc6b4 \uc0c9\uc0c1 \ud568\uc218\ub4e4: rgb() \uc640 hsl()\uc758 \ubcc0\uacbd, \uadf8\ub9ac\uace0 oklch() \uc640 oklab() \uc0ac\uc6a9\uc790 \ud658\uacbd \uc124\uc815 \uc2a4\ub2c8\ud551: prefers-color-scheme & prefers-reduced-motion \uc0c9... \ucd9c\ucc98 : GeekNews - \uac1c\ubc1c\/\uae30\uc220\/\uc2a4\ud0c0\ud2b8\uc5c5 \ub274\uc2a4 \uc11c\ube44\uc2a4","rel":"","context":"&quot;IT&quot;\uc5d0\uc11c","block_context":{"text":"IT","link":"https:\/\/nori.company\/?cat=138"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":26934,"url":"https:\/\/nori.company\/?p=26934","url_meta":{"origin":23329,"position":3},"title":"2023\ub144 9\uc6d4, 3\uac00\uc9c0 \ub514\uc790\uc778 \ud2b8\ub80c\ub4dc","author":"\ub178\ub9ac\ucef4\ud37c\ub2c8","date":"2023\ub144 9\uc6d4 1\uc77c","format":false,"excerpt":"\uc774\ub2ec\uc758 \ub514\uc790\uc778 \ud2b8\ub80c\ub4dc, \"\ub2e8\uc0c9 \uc0c9\uc0c1 \uccb4\uacc4, \uc7a1\uc9c0 \uc2a4\ud0c0\uc77c \ub808\uc774\uc544\uc6c3, \uc0c1\uc790 \uc548\uc758 \ud0d0\uc0c9 \uc694\uc18c\" \uc5d0 \ub300\ud55c \uc124\uba85\uacfc \uc801\uc6a9\ub41c \uc0ac\uc774\ud2b8\ub4e4 \uc18c\uac1c Monochrome Color Schemes: \uac19\uc740 \uae30\ubcf8 \uc0c9\uc758 \uc0c9\uc870\uc640 \uc0c9\uc0c1\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc6b0\uc544\ud558\uace0 \ub9e4\ud639\uc801. \uadf8\ub7ec\ub098 \ub300\uc870\uc640 \uc811\uadfc\uc131\uc744 \uc720\uc9c0\ud558\uae30 \uc704\ud574 \uc6f9\uc0ac\uc774\ud2b8 \ub514\uc790\uc778... \ucd9c\ucc98 : GeekNews - \uac1c\ubc1c\/\uae30\uc220\/\uc2a4\ud0c0\ud2b8\uc5c5 \ub274\uc2a4 \uc11c\ube44\uc2a4","rel":"","context":"&quot;IT&quot;\uc5d0\uc11c","block_context":{"text":"IT","link":"https:\/\/nori.company\/?cat=138"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":26189,"url":"https:\/\/nori.company\/?p=26189","url_meta":{"origin":23329,"position":4},"title":"Show GN: \ubaa8\ub4e0 \uc8fc\uc81c\uc5d0 \ub300\ud55c GeekNews \ub97c \ud45c\ubc29\ud558\ub294 \uc11c\ube44\uc2a4 &#8211; \uc2a4\ub2d9\ud31f","author":"\ub178\ub9ac\ucef4\ud37c\ub2c8","date":"2023\ub144 8\uc6d4 14\uc77c","format":false,"excerpt":"Hacker News \uc5d0\uc11c \uc8fc\uc81c\uc758 \ubc94\uc704\ub97c \ud655\uc7a5\ud55c Reddit \ucee4\ubba4\ub2c8\ud2f0 \uc11c\ube44\uc2a4\uac00 \ub098\uc628 \uac83 \ucc98\ub7fc, \uc6b0\ub9ac\ub098\ub77c\uc5d0\uc11c\ub3c4 GeekNews \uc5d0\uc11c \uc8fc\uc81c\ub97c \uac1c\ubc1c, \uae30\uc220, \uc2a4\ud0c0\ud2b8\uc5c5 \ubfd0 \uc544\ub2c8\ub77c \ub2e4\uc591\ud55c \uc8fc\uc81c \ubcc4 Link \ub97c \uc62c\ub9ac\uace0 Upvote \ub85c \ub7ad\ud0b9\ud574\uc11c \ubcf4\uc5ec\uc904 \uc218 \uc788\ub294 \uc11c\ube44\uc2a4\ub97c \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4. \ub9c1\ud06c\ub9cc\uc73c\ub85c \ucf58\ud150\uce20 \uacf5\uc720 \uac00\ub2a5 \u2018\ud574\uc2dc\ud0dc\uadf8 \ud2b8 \ucd9c\ucc98 : GeekNews - \uac1c\ubc1c\/\uae30\uc220\/\uc2a4\ud0c0\ud2b8\uc5c5 \ub274\uc2a4 \uc11c\ube44\uc2a4","rel":"","context":"&quot;IT&quot;\uc5d0\uc11c","block_context":{"text":"IT","link":"https:\/\/nori.company\/?cat=138"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":25877,"url":"https:\/\/nori.company\/?p=25877","url_meta":{"origin":23329,"position":5},"title":"Water","author":"\ub178\ub9ac\ucef4\ud37c\ub2c8","date":"2023\ub144 8\uc6d4 7\uc77c","format":false,"excerpt":"Water \ucd9c\ucc98 : GeekNews - \uac1c\ubc1c\/\uae30\uc220\/\uc2a4\ud0c0\ud2b8\uc5c5 \ub274\uc2a4 \uc11c\ube44\uc2a4","rel":"","context":"&quot;IT&quot;\uc5d0\uc11c","block_context":{"text":"IT","link":"https:\/\/nori.company\/?cat=138"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/nori.company\/index.php?rest_route=\/wp\/v2\/posts\/23329","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nori.company\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nori.company\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nori.company\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nori.company\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=23329"}],"version-history":[{"count":1,"href":"https:\/\/nori.company\/index.php?rest_route=\/wp\/v2\/posts\/23329\/revisions"}],"predecessor-version":[{"id":23330,"href":"https:\/\/nori.company\/index.php?rest_route=\/wp\/v2\/posts\/23329\/revisions\/23330"}],"wp:attachment":[{"href":"https:\/\/nori.company\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=23329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nori.company\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=23329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nori.company\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=23329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}