{"id":2603,"date":"2023-10-23T22:12:58","date_gmt":"2023-10-23T13:12:58","guid":{"rendered":"http:\/\/hangunsworld.com\/blog\/?p=2603"},"modified":"2023-10-27T21:15:01","modified_gmt":"2023-10-27T12:15:01","slug":"css-%ec%9d%b4%ec%a0%84%ec%9d%98-%ec%97%98%eb%a6%ac%eb%a8%bc%ed%8a%b8-%ec%84%a0%ed%83%9d%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/hangunsworld.com\/blog\/2603","title":{"rendered":"CSS \uc774\uc804\uc758 \uc5d8\ub9ac\uba3c\ud2b8 \uc120\ud0dd\ud558\uae30"},"content":{"rendered":"<p>CSS \uc5d0\uc11c \uc77c\ubc18 \ud615\uc81c \uc120\ud0dd\uc790 (General Sibling Selector ~)\uc640 \uc778\uc811 \ud615\uc81c \uc120\ud0dd\uc790 (Adjacent Sibling Selector +)\ub97c \uc0ac\uc6a9\ud558\uc5ec, \ud2b9\uc815 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \ub4a4 \ub610\ub294 \ubc14\ub85c \ub4a4\uc5d0 \uc788\ub294 \uc5d8\ub9ac\uba3c\ud2b8\ub4e4\uc744 \uc120\ud0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uc55e\uc5d0 \uc704\uce58\ud55c \uc5d8\ub9ac\uba3c\ud2b8\ub97c \uc120\ud0dd\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc740 \uc5c6\uc5c8\uc8e0.<br \/>\n<a href=\"https:\/\/www.w3schools.com\/css\/css_combinators.asp\">CSS Combinators<\/a> \ucc38\uace0<\/p>\n<p>\uadf8\ub7f0\ub370 <a href=\"https:\/\/drafts.csswg.org\/selectors-4\/#relational\">CSS Selectors Level 4<\/a> \uc5d0\uc11c \ucd94\uac00\ub41c :has() \uc218\ub3c4-\ud074\ub798\uc2a4(pseudo-class)\ub97c \uc751\uc6a9\ud558\uba74 \uc55e\uc758 \uc5d8\ub9ac\uba3c\ud2b8\ub4e4 \ub610\ub294 \uc9c1\uc804\uc758 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \uc120\ud0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre lang=\"html5\">\n<div class=\"parent\">\n  <span class=\"child\"><\/span>\n  <span class=\"child\"><\/span>\n  <span class=\"child\"><\/span>\n  <span class=\"child target\"><\/span>\n  <span class=\"child\"><\/span>\n  <span class=\"child\"><\/span>\n  <span class=\"child\"><\/span>\n<\/div><\/pre>\n<pre lang=\"css\">.parent{display:flex;flex-direction:row;gap:10px;justify-content:center;padding:20px;}\n.child{padding:20px;border:1px solid orange;font-size:32px;}\n.child:before{content:\"child\";}\n\n.child.target{background-color:orange;}\n.child.target:before{content:\"target\";}\n\n.target ~ .child{background-color:lightgrey;}\n.target ~ .child:before{content:\"after\";}\n\n.target + .child{background-color:grey;}\n.target + .child:before{text-transform:uppercase;color:white;}\n\n.child:has(~ .target){background-color:greenyellow;}\n.child:has(~ .target):before{content:\"before\";}\n\n.child:has(+ .target){background:green;}\n.child:has(+ .target):before{text-transform:uppercase;color:white;}<\/pre>\n<p><img decoding=\"async\" src=\"\/blog\/wp-content\/uploads\/2023\/10\/css_has.png\" width=\"640\"><br \/>\n\ub2e8, :has() \uc140\ub809\ud130\ub97c \uc77c\ubd80 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc544\uc9c1 \uc9c0\uc6d0\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0, \uc0ac\uc6a9\uc5d0 \uc8fc\uc758\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \ud30c\uc774\uc5b4\ud3ed\uc2a4 Nightly\uc5d0\uc11c \uc9c0\uc6d0\uc744 \uc2dc\uc791\ud588\uae30 \ub54c\ubb38\uc5d0 \uc870\ub9cc\uac04 \ud30c\uc774\uc5b4\ud3ed\uc2a4\ub3c4 \uc9c0\uc6d0\ud560 \uac83\uc73c\ub85c \ubcf4\uc774\ub124\uc694.<br \/>\n<a href=\"https:\/\/caniuse.com\/?search=%3Ahas\">Can I use :has?<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS \uc5d0\uc11c \uc77c\ubc18 \ud615\uc81c \uc120\ud0dd\uc790 (General Sibling Selector ~)\uc640 \uc778\uc811 \ud615\uc81c \uc120\ud0dd\uc790 (Adjacent Sibling Selector +)\ub97c \uc0ac\uc6a9\ud558\uc5ec, \ud2b9\uc815 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \ub4a4 \ub610\ub294 \ubc14\ub85c \ub4a4\uc5d0 \uc788\ub294 \uc5d8\ub9ac\uba3c\ud2b8\ub4e4\uc744 \uc120\ud0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uc55e\uc5d0 \uc704\uce58\ud55c \uc5d8\ub9ac\uba3c\ud2b8\ub97c \uc120\ud0dd\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc740 \uc5c6\uc5c8\uc8e0. CSS Combinators \ucc38\uace0 \uadf8\ub7f0\ub370 CSS Selectors Level 4 \uc5d0\uc11c \ucd94\uac00\ub41c :has() \uc218\ub3c4-\ud074\ub798\uc2a4(pseudo-class)\ub97c \uc751\uc6a9\ud558\uba74 \uc55e\uc758 \uc5d8\ub9ac\uba3c\ud2b8\ub4e4 \ub610\ub294 \uc9c1\uc804\uc758 \uc5d8\ub9ac\uba3c\ud2b8\ub97c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-2603","post","type-post","status-publish","format-standard","hentry","category-htmlcss"],"_links":{"self":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/posts\/2603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/comments?post=2603"}],"version-history":[{"count":0,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/posts\/2603\/revisions"}],"wp:attachment":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/media?parent=2603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/categories?post=2603"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/tags?post=2603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}