{"id":476181,"date":"2023-08-09T07:26:52","date_gmt":"2023-08-09T07:26:52","guid":{"rendered":""},"modified":"2023-09-05T11:12:11","modified_gmt":"2023-09-05T11:12:11","slug":"cascading-stylesheets-css","status":"publish","type":"wiki","link":"https:\/\/oneproxy.pro\/kr\/wiki\/cascading-stylesheets-css\/","title":{"rendered":"\uacc4\ub2e8\uc2dd \uc2a4\ud0c0\uc77c\uc2dc\ud2b8(CSS)"},"content":{"rendered":"<p>\uc77c\ubc18\uc801\uc73c\ub85c CSS\ub77c\uace0 \ud558\ub294 \uce90\uc2a4\ucf00\uc774\ub529 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8(Cascading Style Sheets)\ub294 HTML \ubb38\uc11c\uc758 \ud45c\uc2dc \ubc0f \ub808\uc774\uc544\uc6c3\uc744 \uc81c\uc5b4\ud558\uae30 \uc704\ud574 \uc6f9 \uac1c\ubc1c\uc5d0 \uc0ac\uc6a9\ub418\ub294 \uae30\ubcf8 \uae30\uc220\uc785\ub2c8\ub2e4. \uc774\ub294 \uc6f9 \ud398\uc774\uc9c0 \ub0b4\uc758 \uc694\uc18c\uac00 \ud45c\uc2dc\ub418\ub294 \ubc29\ubc95\uc744 \uc815\uc758\ud558\ub294 \ub370 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud558\uba70, \uc774\ub97c \ud1b5\ud574 \uc6f9 \uac1c\ubc1c\uc790\ub294 \uc6f9 \uc0ac\uc774\ud2b8\uc758 \ucf58\ud150\uce20\ub97c \uc2dc\uac01\uc801 \ub514\uc790\uc778\uc5d0\uc11c \ubd84\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. CSS\ub294 \uc6f9 \ud398\uc774\uc9c0\uc5d0 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\ub294 \ud45c\uc900\ud654\ub41c \ubc29\ubc95\uc744 \uc81c\uacf5\ud568\uc73c\ub85c\uc368 \ud604\ub300 \uc6f9 \ub514\uc790\uc778\uacfc \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc758 \ubc1c\uc804\uc5d0 \ud06c\uac8c \uae30\uc5ec\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>CSS(Cascading Stylesheets)\uc758 \uc720\ub798\uc640 \uadf8\uc5d0 \ub300\ud55c \uccab \ubc88\uc9f8 \uc5b8\uae09\uc758 \uc5ed\uc0ac\uc785\ub2c8\ub2e4.<\/h2>\n<p>Cascading Style Sheets\uc758 \uae30\uc6d0\uc740 World Wide Web\uc758 \ucd08\uae30 \uc2dc\ub300\ub85c \uac70\uc2ac\ub7ec \uc62c\ub77c\uac11\ub2c8\ub2e4. 1994\ub144 W3C(World Wide Web Consortium)\uc758 \ud68c\uc6d0\uc778 H\u00e5kon Wium Lie\uc640 Bert Bos\ub294 CSS\ub77c\ub294 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8 \uc5b8\uc5b4\ub97c \uc81c\uc548\ud588\uc2b5\ub2c8\ub2e4. \uadf8\ub4e4\uc758 \uc758\ub3c4\ub294 \ucf58\ud150\uce20\uc640 \uad6c\uc870\uc5d0 \uad00\uacc4\uc5c6\uc774 \uc6f9 \ubb38\uc11c\uc758 \ud45c\uc2dc\ub97c \uc81c\uc5b4\ud558\ub294 \ubc29\ubc95\uc744 \ub3c4\uc785\ud558\ub294 \uac83\uc774\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n<p>CSS\uc5d0 \ub300\ud55c \uccab \uacf5\uc2dd \uc5b8\uae09\uc740 W3C \uad8c\uc7a5 \uc0ac\ud56d\uc758 \uc77c\ubd80\ub85c 1996\ub144 CSS \ub808\ubca8 1(CSS1)\uc774 \ucd9c\uc2dc\ub418\uba74\uc11c \ub098\uc654\uc2b5\ub2c8\ub2e4. \uadf8 \uc774\ud6c4\ub85c CSS\ub294 1998\ub144 CSS \ub808\ubca8 2(CSS2), 1999\ub144 CSS \ub808\ubca8 3(CSS3) \ub4f1 \uc5ec\ub7ec \uac1c\uc815\uc744 \uac70\uccd0 \uc774\ud6c4 \ubaa8\ub4c8\uc774 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4. CSS \uac1c\ubc1c\uc740 \uadf8 \uae30\ub2a5\uc744 \uac15\ud654\ud558\uace0 \uc6f9 \uac1c\ubc1c\uc790\uc5d0\uac8c \ub354\uc6b1 \uc815\uad50\ud55c \uc2a4\ud0c0\uc77c \uc635\uc158\uc744 \uc81c\uacf5\ud558\uae30 \uc704\ud55c \uc9c0\uc18d\uc801\uc778 \ub178\ub825\uc758 \uc77c\ud658\uc774\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>CSS(Cascading Stylesheet)\uc5d0 \ub300\ud55c \uc790\uc138\ud55c \uc815\ubcf4\uc785\ub2c8\ub2e4. CSS(Cascading Stylesheets) \ud56d\ubaa9 \ud655\uc7a5.<\/h2>\n<p>CSS\ub294 \ub3d9\uc77c\ud55c HTML \ubb38\uc11c\uc5d0 \uc5ec\ub7ec \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub97c \uc801\uc6a9\ud560 \uc218 \uc788\uace0 \uc2a4\ud0c0\uc77c\uc758 \uad6c\uccb4\uc131\uacfc \uc801\uc6a9 \uc21c\uc11c\uc5d0 \ub530\ub77c \uacb0\ud569\ub418\ub294 \uacc4\ub2e8\uc2dd \ubc30\uc5f4\uc758 \uc6d0\ub9ac\uc5d0 \ub530\ub77c \uc791\ub3d9\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc6f9 \ud398\uc774\uc9c0 \uc2a4\ud0c0\uc77c \uc9c0\uc815\uc5d0 \ub300\ud55c \ubaa8\ub4c8\uc2dd\uc758 \ud6a8\uc728\uc801\uc778 \uc811\uadfc \ubc29\uc2dd\uc774 \uac00\ub2a5\ud574\uc84c\uc2b5\ub2c8\ub2e4. \ucf58\ud150\uce20\uc5d0\uc11c \ud504\ub9ac\uc820\ud14c\uc774\uc158 \ub808\uc774\uc5b4\ub97c \ubd84\ub9ac\ud568\uc73c\ub85c\uc368 \uc6f9 \uac1c\ubc1c\uc790\ub294 \uae30\ubcf8 \uad6c\uc870\ub97c \ubcc0\uacbd\ud558\uc9c0 \uc54a\uace0\ub3c4 \uc6f9 \uc0ac\uc774\ud2b8\uc758 \ubaa8\uc591\uc744 \uc27d\uac8c \uc5c5\ub370\uc774\ud2b8\ud558\uace0 \uc218\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>CSS\ub294 \uc120\ud0dd\uae30\ub97c \ud1b5\ud574 \ud2b9\uc815 HTML \uc694\uc18c\ub098 \uc694\uc18c \uadf8\ub8f9\uc744 \ud0c0\uac9f\ud305\ud558\uc5ec \uc774\ub7ec\ud55c \ubd84\ub9ac\ub97c \ub2ec\uc131\ud569\ub2c8\ub2e4. \uac01 \uc120\ud0dd\uae30\ub294 \ub300\uc0c1 \uc694\uc18c\uc758 \uc2a4\ud0c0\uc77c \uc9c0\uc815 \ubc29\ubc95\uc744 \uacb0\uc815\ud558\ub294 \uc18d\uc131 \ubc0f \uac12 \uc9d1\ud569\uacfc \uc5f0\uacb0\ub429\ub2c8\ub2e4. \uc18d\uc131\uc740 \uc0c9\uc0c1, \uae00\uaf34, \uc5ec\ubc31, \ud328\ub529, \uc704\uce58 \uc9c0\uc815 \ubc0f \uc560\ub2c8\uba54\uc774\uc158\uacfc \uac19\uc740 \ub2e4\uc591\ud55c \uce21\uba74\uc744 \uc81c\uc5b4\ud569\ub2c8\ub2e4.<\/p>\n<p>CSS\uc758 \uc911\uc694\ud55c \uc7a5\uc810 \uc911 \ud558\ub098\ub294 \ubc18\uc751\ud615 \ub514\uc790\uc778\uc744 \uc0dd\uc131\ud560 \uc218 \uc788\uc5b4 \uc6f9 \ud398\uc774\uc9c0\uac00 \ub2e4\uc591\ud55c \uc7a5\uce58\uc640 \ud654\uba74 \ud06c\uae30\uc5d0 \ub9de\uac8c \ucd5c\uc801\uc73c\ub85c \uc870\uc815\ub418\uace0 \ud45c\uc2dc\ub420 \uc218 \uc788\ub2e4\ub294 \uac83\uc785\ub2c8\ub2e4. CSS3\uc5d0 \ub3c4\uc785\ub41c \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \ud1b5\ud574 \uac1c\ubc1c\uc790\ub294 \ud654\uba74 \ub108\ube44, \ub192\uc774, \ud574\uc0c1\ub3c4\uc640 \uac19\uc740 \ud2b9\uc131\uc744 \uae30\ubc18\uc73c\ub85c \ub2e4\uc591\ud55c \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \uc218 \uc788\uc5b4 \uc2a4\ub9c8\ud2b8\ud3f0, \ud0dc\ube14\ub9bf, \ub370\uc2a4\ud06c\ud1b1\uc5d0\uc11c \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>CSS(Cascading Stylesheets)\uc758 \ub0b4\ubd80 \uad6c\uc870\uc785\ub2c8\ub2e4. CSS(Cascading Stylesheet)\uc758 \uc791\ub3d9 \ubc29\uc2dd.<\/h2>\n<p>\ub0b4\ubd80\uc801\uc73c\ub85c CSS\ub294 HTML \uc694\uc18c\uc758 \uc2a4\ud0c0\uc77c \uc9c0\uc815 \ubc29\ubc95\uc744 \uc815\uc758\ud558\ub294 \uaddc\uce59 \uc138\ud2b8\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. \uaddc\uce59 \uc138\ud2b8\ub294 \uc120\ud0dd\uae30\uc640 \uc120\uc5b8 \ube14\ub85d\uc774\ub77c\ub294 \ub450 \ubd80\ubd84\uc73c\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. \uc120\ud0dd\uae30\ub294 \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub420 HTML \uc694\uc18c\ub97c \ub098\ud0c0\ub0b4\uba70 \uc120\uc5b8 \ube14\ub85d\uc5d0\ub294 \uc911\uad04\ud638\ub85c \ubb36\uc778 \uc18d\uc131-\uac12 \uc30d \ubaa9\ub85d\uc774 \ud3ec\ud568\ub429\ub2c8\ub2e4.<\/p>\n<pre><div class=\"bg-black rounded-md mb-4\"><div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md\"><span>CSS<\/span><button class=\"flex ml-auto gap-2\"><svg stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" viewbox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-4 w-4\" height=\"1em\" width=\"1em\" ><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"><\/path><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"><\/rect><\/svg>\ucf54\ub4dc \ubcf5\uc0ac<\/button><\/div><div class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-css\" data-no-translation=\"\">selector {\n  property1: value1;\n  property2: value2;\n  ...\n  propertyN: valueN;\n}\n<\/code><\/div><\/div><\/pre>\n<p>\uc6f9\ud398\uc774\uc9c0\uac00 \ub85c\ub4dc\ub418\uba74 \ube0c\ub77c\uc6b0\uc800\ub294 CSS \uaddc\uce59\uc744 \uad6c\ubb38 \ubd84\uc11d\ud558\uace0 \uc9c0\uc815\ub41c \uc2a4\ud0c0\uc77c\uc744 \ud574\ub2f9 HTML \uc694\uc18c\uc5d0 \uc801\uc6a9\ud569\ub2c8\ub2e4. \uc5ec\ub7ec \uaddc\uce59\uc774 \ub3d9\uc77c\ud55c \uc694\uc18c\ub97c \ub300\uc0c1\uc73c\ub85c \ud558\ub294 \uacbd\uc6b0 \ube0c\ub77c\uc6b0\uc800\ub294 \uacc4\ub2e8\uc2dd \uc6d0\uce59\uc5d0 \ub530\ub77c \uad6c\uccb4\uc131, \uc0c1\uc18d \ubc0f \uc801\uc6a9 \uc21c\uc11c\ub97c \uace0\ub824\ud558\uc5ec \ucd5c\uc885 \uc2a4\ud0c0\uc77c\uc744 \uacb0\uc815\ud569\ub2c8\ub2e4.<\/p>\n<h2>\uce90\uc2a4\ucf00\uc774\ub529 \uc2a4\ud0c0\uc77c\uc2dc\ud2b8(CSS)\uc758 \uc8fc\uc694 \uae30\ub2a5 \ubd84\uc11d.<\/h2>\n<p>CSS\ub294 \uc6f9 \uac1c\ubc1c\uc744 \uc704\ud55c \uac15\ub825\ud55c \ub3c4\uad6c\ub85c \ub9cc\ub4dc\ub294 \ub2e4\uc591\ud55c \ud544\uc218 \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n<ol>\n<li>\n<p><strong>\uacc4\ub2e8\uc2dd \uc131\uaca9:<\/strong> CSS \uaddc\uce59\uc740 \uacb0\ud569, \uc7ac\uc815\uc758 \ubc0f \uc0c1\uc18d\uc774 \uac00\ub2a5\ud558\uc5ec \uc6f9 \ub514\uc790\uc778\uc5d0 \uc720\uc5f0\uc131\uacfc \uc720\uc9c0 \uad00\ub9ac \uac00\ub2a5\uc131\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\ubaa8\ub4c8\uc131:<\/strong> CSS\ub294 \ucf58\ud150\uce20\uc640 \uc2a4\ud0c0\uc77c\uc744 \ubd84\ub9ac\ud568\uc73c\ub85c\uc368 \uc6f9 \uac1c\ubc1c\uc5d0 \ub300\ud55c \ubaa8\ub4c8\uc2dd \uc811\uadfc \ubc29\uc2dd\uc744 \uc7a5\ub824\ud558\uc5ec \uc2a4\ud0c0\uc77c\uc744 \ub354 \uc27d\uac8c \uad00\ub9ac\ud558\uace0 \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\ubc18\uc751\ud615 \ub514\uc790\uc778:<\/strong> \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud558\uba74 \ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778\uc774 \uac00\ub2a5\ud574 \uc6f9\uc0ac\uc774\ud2b8\uac00 \ub2e4\uc591\ud55c \ud654\uba74 \ud06c\uae30\uc640 \uc7a5\uce58\uc5d0 \uc801\uc751\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\ube0c\ub77c\uc6b0\uc800 \uac04 \ud638\ud658\uc131:<\/strong> CSS\ub294 \ub2e4\uc591\ud55c \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc77c\uad00\ub41c \ud45c\ud604\uc744 \ubcf4\uc7a5\ud558\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\uc560\ub2c8\uba54\uc774\uc158 \ubc0f \uc804\ud658:<\/strong> CSS3\ub294 \uc560\ub2c8\uba54\uc774\uc158 \ubc0f \uc804\ud658 \uc18d\uc131\uc744 \ub3c4\uc785\ud558\uc5ec \uac1c\ubc1c\uc790\uac00 \uc6d0\ud65c\ud558\uace0 \ub300\ud654\ud615 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub3c4\ub85d \ud588\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>Flexbox \ubc0f \uadf8\ub9ac\ub4dc \ub808\uc774\uc544\uc6c3:<\/strong> CSS\ub294 Flexbox \ubc0f Grid\uc640 \uac19\uc740 \uac15\ub825\ud55c \ub808\uc774\uc544\uc6c3 \uc2dc\uc2a4\ud15c\uc744 \uc81c\uacf5\ud558\ubbc0\ub85c \uac1c\ubc1c\uc790\ub294 \ubcf5\uc7a1\ud558\uace0 \uc720\uc5f0\ud55c \ud398\uc774\uc9c0 \ub808\uc774\uc544\uc6c3\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\uc120\ud0dd\uae30:<\/strong> CSS\ub294 \ud074\ub798\uc2a4, ID, \uc694\uc18c, \uc18d\uc131 \ubc0f \uc758\uc0ac \ud074\ub798\uc2a4 \uc120\ud0dd\uae30\ub97c \ud3ec\ud568\ud55c \uad11\ubc94\uc704\ud55c \uc120\ud0dd\uae30\ub97c \uc81c\uacf5\ud558\uc5ec \uc694\uc18c\uc758 \uc815\ud655\ud55c \ud0c0\uac9f\ud305\uc744 \uac00\ub2a5\ud558\uac8c \ud569\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\ubcc0\uc218:<\/strong> CSS \uc0ac\uc6a9\uc790 \uc815\uc758 \uc18d\uc131(\ubcc0\uc218)\uc744 \uc0ac\uc6a9\ud558\uba74 \ub354\uc6b1 \ub3d9\uc801\uc774\uace0 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \uc2a4\ud0c0\uc77c\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<\/ol>\n<h2>\uc5b4\ub5a4 \uc720\ud615\uc758 CSS(Cascading Stylesheet)\uac00 \uc874\uc7ac\ud558\ub294\uc9c0 \uc791\uc131\ud558\uc138\uc694. \ud45c\uc640 \ubaa9\ub85d\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc791\uc131\ud558\uc138\uc694.<\/h2>\n<p>CSS\ub294 \uc2dc\uac04\uc774 \uc9c0\ub098\uba74\uc11c \ubc1c\uc804\ud574 \uc654\uc73c\uba70 \ub2e4\uc591\ud55c CSS \uc0ac\uc591\uacfc \ubaa8\ub4c8\uc774 \ub3c4\uc785\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc911\uc694\ud55c CSS \uc720\ud615 \uc911 \uc77c\ubd80\uc785\ub2c8\ub2e4.<\/p>\n<table>\n<thead>\n<tr>\n<th>CSS \uc720\ud615<\/th>\n<th>\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>CSS1<\/td>\n<td>\uae30\ubcf8 \uc2a4\ud0c0\uc77c\uc744 \uc18c\uac1c\ud558\ub294 CSS\uc758 \uccab \ubc88\uc9f8 \ubc84\uc804\uc785\ub2c8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>CSS2<\/td>\n<td>\uc0c8\ub85c\uc6b4 \uae30\ub2a5\uacfc \ud5a5\uc0c1\ub41c \uc9c0\uc6d0\uc73c\ub85c CSS1\uc774 \ud655\uc7a5\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>CSS3<\/td>\n<td>\ub2e4\uc591\ud55c \ubaa8\ub4c8\uacfc \ud5a5\uc0c1\ub41c \uae30\ub2a5\uc744 \uac16\ucd98 \ud6c4\uc18d \ubc84\uc804\uc785\ub2c8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>CSS \uadf8\ub9ac\ub4dc<\/td>\n<td>\uac15\ub825\ud55c 2\ucc28\uc6d0 \uadf8\ub9ac\ub4dc \ub808\uc774\uc544\uc6c3 \uc2dc\uc2a4\ud15c.<\/td>\n<\/tr>\n<tr>\n<td>CSS \ud50c\ub809\uc2a4\ubc15\uc2a4<\/td>\n<td>\uc720\uc5f0\ud55c \ucee8\ud14c\uc774\ub108\ub97c \uc704\ud55c 1\ucc28\uc6d0 \ub808\uc774\uc544\uc6c3 \ubaa8\ub378\uc785\ub2c8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>CSS \uc804\ud658<\/td>\n<td>\uc0c1\ud0dc \ubcc0\uacbd \uc911\uc5d0 \ubc1c\uc0dd\ud558\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc785\ub2c8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>CSS \uc560\ub2c8\uba54\uc774\uc158<\/td>\n<td>\ubcf4\ub2e4 \ubcf5\uc7a1\ud55c \ud6a8\uacfc\ub97c \uc704\ud55c \ud0a4\ud504\ub808\uc784 \uae30\ubc18 \uc560\ub2c8\uba54\uc774\uc158.<\/td>\n<\/tr>\n<tr>\n<td>CSS \ubcc0\uc218<\/td>\n<td>\uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud558\uace0 \ub3d9\uc801 \uc2a4\ud0c0\uc77c\uc744 \uc704\ud55c \uc0ac\uc6a9\uc790 \uc815\uc758 \uc18d\uc131\uc785\ub2c8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>CSS \ubbf8\ub514\uc5b4 \ucffc\ub9ac<\/td>\n<td>\uc7a5\uce58 \ud2b9\uc131\uc5d0 \ub530\ub978 \uc870\uac74\ubd80 \uc2a4\ud0c0\uc77c.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Cascading Stylesheets(CSS)\uc758 \uc0ac\uc6a9\ubc29\ubc95\uacfc \uc0ac\uc6a9\uc5d0 \ub530\ub978 \ubb38\uc81c\uc810 \ubc0f \ud574\uacb0\ubc29\uc548\uc785\ub2c8\ub2e4.<\/h2>\n<p>CSS\ub294 \uc6f9 \uac1c\ubc1c\uc758 \ud544\uc218\uc801\uc778 \ubd80\ubd84\uc774\uba70 \uc774\ub97c \uc0ac\uc6a9\ud558\ub294 \ub2e4\uc591\ud55c \ubc29\ubc95\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ol>\n<li>\n<p><strong>\uc678\ubd80 CSS:<\/strong> \uad8c\uc7a5\ub418\ub294 \ubc29\ubc95\uc740 \ubcc4\ub3c4\uc758 CSS \ud30c\uc77c\uc744 \ub9cc\ub4e4\uace0 \uc774\ub97c \uc0ac\uc6a9\ud558\uc5ec HTML \ubb38\uc11c\uc5d0 \uc5f0\uacb0\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. <code data-no-translation=\"\">&lt;link&gt;<\/code> \uc694\uc18c. \uc774\ub294 \ubaa8\ub4c8\uc131\uacfc \uc7ac\uc0ac\uc6a9\uc131\uc744 \ucd09\uc9c4\ud569\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\ub0b4\ubd80 CSS:<\/strong> \ub2e4\uc74c\uc744 \uc0ac\uc6a9\ud558\uc5ec HTML \ubb38\uc11c\uc5d0 CSS\ub97c \uc9c1\uc811 \ud3ec\ud568\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <code data-no-translation=\"\">&lt;style&gt;<\/code> \ub0b4\uc758 \uc694\uc18c <code data-no-translation=\"\">&lt;head&gt;<\/code> \ubd80\ubd84. \uc774 \ubc29\ubc95\uc740 \uc18c\uaddc\ubaa8 \uc2a4\ud0c0\uc77c\ub9c1\uc5d0\ub294 \ud3b8\ub9ac\ud558\uc9c0\ub9cc \ub300\uaddc\ubaa8 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \uc720\uc9c0 \uad00\ub9ac\uac00 \uc27d\uc9c0 \uc54a\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\uc778\ub77c\uc778 CSS:<\/strong> \ub2e4\uc74c\uc744 \uc0ac\uc6a9\ud558\uc5ec HTML \uc694\uc18c\uc5d0 \uc9c1\uc811 \uc2a4\ud0c0\uc77c \uc801\uc6a9 <code data-no-translation=\"\">style<\/code> \uc18d\uc131\uc740 \uac00\ub2a5\ud558\uc9c0\ub9cc \uc720\uc9c0 \uad00\ub9ac\uc131\uc774 \ub0ae\uace0 \uc7ac\uc0ac\uc6a9\uc131\uc774 \ub5a8\uc5b4\uc9c0\uae30 \ub54c\ubb38\uc5d0 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>CSS \uc804\ucc98\ub9ac\uae30:<\/strong> \uac1c\ubc1c\uc790\ub294 \uc885\uc885 Sass, Less \ub610\ub294 Stylus\uc640 \uac19\uc740 CSS \uc804\ucc98\ub9ac\uae30\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubcc0\uc218, \uc911\ucca9 \ubc0f \uae30\ub2a5\uacfc \uac19\uc740 \uace0\uae09 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\uc5ec \uc2a4\ud0c0\uc77c\uc2dc\ud2b8\uc758 \uc720\uc9c0 \uad00\ub9ac \ubc0f \uad6c\uc131\uc744 \ud5a5\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>CSS \ud504\ub808\uc784\uc6cc\ud06c:<\/strong> Bootstrap\uc774\ub098 Foundation\uacfc \uac19\uc740 CSS \ud504\ub808\uc784\uc6cc\ud06c\ub97c \ud65c\uc6a9\ud558\uba74 \ubbf8\ub9ac \ub514\uc790\uc778\ub41c \uad6c\uc131 \uc694\uc18c\uc640 \uc2a4\ud0c0\uc77c\uc744 \uc81c\uacf5\ud558\uc5ec \uac1c\ubc1c\uc744 \uac00\uc18d\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<\/ol>\n<p>CSS\ub97c \uc0ac\uc6a9\ud560 \ub54c \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \ubb38\uc81c\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<ol>\n<li>\n<p><strong>\ud2b9\uc774\uc131 \ucda9\ub3cc:<\/strong> \uc5ec\ub7ec CSS \uaddc\uce59\uc774 \uc11c\ub85c \ub2e4\ub978 \uad6c\uccb4\uc131\uc744 \uc9c0\ub2cc \ub3d9\uc77c\ud55c \uc694\uc18c\ub97c \ub300\uc0c1\uc73c\ub85c \ud558\ub294 \uacbd\uc6b0 \ucda9\ub3cc\uc774 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc73c\uba70 \uc608\uc0c1\ud55c \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub418\uc9c0 \uc54a\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc120\ud0dd\uae30\ub97c \uc801\uc808\ud558\uac8c \uad00\ub9ac\ud558\uace0 \ud074\ub798\uc2a4\ub97c \uc0ac\uc6a9\ud558\uba74 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ubc29\uc9c0\ud558\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\ube0c\ub77c\uc6b0\uc800 \ud638\ud658\uc131:<\/strong> \uc6f9 \ube0c\ub77c\uc6b0\uc800\ub9c8\ub2e4 CSS \uaddc\uce59\uc744 \ub2e4\ub974\uac8c \ud574\uc11d\ud558\uc5ec \ub80c\ub354\ub9c1\uc774 \uc77c\uad00\ub418\uc9c0 \uc54a\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uacf5\uae09\uc5c5\uccb4 \uc811\ub450\uc0ac\ub97c \ud14c\uc2a4\ud2b8\ud558\uace0 \uc0ac\uc6a9\ud558\uba74 \uc774 \ubb38\uc81c\ub97c \uc644\ud654\ud558\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\uc131\ub2a5 \uc601\ud5a5:<\/strong> \ud06c\uace0 \ubcf5\uc7a1\ud55c CSS \ud30c\uc77c\uc740 \ud398\uc774\uc9c0 \ub85c\ub529 \uc2dc\uac04\uc744 \ub290\ub9ac\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. CSS \ud30c\uc77c\uc744 \ucd95\uc18c\ud558\uace0 \uc555\ucd95\ud558\uba74 \uc131\ub2a5\uc774 \ud5a5\uc0c1\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\ubc18\uc751\ud615 \ub514\uc790\uc778 \uacfc\uc81c:<\/strong> \ubaa8\ub4e0 \uae30\uae30\uc5d0\uc11c \uc798 \uc791\ub3d9\ud558\ub294 \ubc18\uc751\ud615 \ub808\uc774\uc544\uc6c3\uc744 \ub9cc\ub4e4\ub824\uba74 \uc2e0\uc911\ud55c \uacc4\ud68d\uacfc \ud14c\uc2a4\ud2b8\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n<\/li>\n<\/ol>\n<h2>\uc8fc\uc694 \ud2b9\uc9d5 \ubc0f \uae30\ud0c0 \uc720\uc0ac\ud55c \uc6a9\uc5b4\uc640\uc758 \ube44\uad50\ub97c \ud45c\uc640 \ubaa9\ub85d \ud615\ud0dc\ub85c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/h2>\n<table>\n<thead>\n<tr>\n<th>CSS \ub300 HTML<\/th>\n<th>CSS(\uacc4\ub2e8\uc2dd \uc2a4\ud0c0\uc77c \uc2dc\ud2b8)<\/th>\n<th>HTML(\ud558\uc774\ud37c\ud14d\uc2a4\ud2b8 \ub9c8\ud06c\uc5c5 \uc5b8\uc5b4)<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\ubaa9\uc801<\/td>\n<td>\uc6f9\ud398\uc774\uc9c0\uc758 \ud45c\uc2dc \ubc0f \ub808\uc774\uc544\uc6c3\uc744 \uc81c\uc5b4\ud569\ub2c8\ub2e4.<\/td>\n<td>\uc6f9\ud398\uc774\uc9c0\uc758 \uad6c\uc870\uc640 \ucf58\ud150\uce20\ub97c \uc815\uc758\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>\uc6a9\ubc95<\/td>\n<td>HTML \uc694\uc18c\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\uace0 \uc2dc\uac01\uc801 \uce21\uba74\uc744 \uc81c\uc5b4\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/td>\n<td>\uc6f9 \ud398\uc774\uc9c0\uc758 \uad6c\uc870\uc640 \ucf58\ud150\uce20\ub97c \ub9cc\ub4dc\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>\ud1b5\uc0ac\ub860<\/td>\n<td>\uc120\ud0dd\uae30\uc640 \uc18d\uc131-\uac12 \uc30d\uc73c\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4.<\/td>\n<td>\ud0dc\uadf8\uc640 \uc18d\uc131\uc774 \uc788\ub294 \uc694\uc18c\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4.<\/td>\n<\/tr>\n<tr>\n<td>\ud30c\uc77c \ud655\uc7a5\uc790<\/td>\n<td>.css<\/td>\n<td>.html<\/td>\n<\/tr>\n<tr>\n<td>\uc0ac\uc6a9\uc608<\/td>\n<td>\uae00\uaf34 \uc0c9\uc0c1 \ubcc0\uacbd, \uc5ec\ubc31 \uc124\uc815, \uc560\ub2c8\uba54\uc774\uc158 \uc801\uc6a9.<\/td>\n<td>\uc81c\ubaa9, \ub2e8\ub77d, \uc774\ubbf8\uc9c0, \ub9c1\ud06c \ub4f1\uc744 \uc815\uc758\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>\uce90\uc2a4\ucf00\uc774\ub529 \uc2a4\ud0c0\uc77c\uc2dc\ud2b8(CSS)\uc640 \uad00\ub828\ub41c \ubbf8\ub798\uc758 \uad00\uc810\uacfc \uae30\uc220.<\/h2>\n<p>CSS\uc758 \ubbf8\ub798\ub294 \uc6f9 \ub514\uc790\uc778\uacfc \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc758 \uc5ed\ub7c9\uc744 \ub354\uc6b1 \ud5a5\uc0c1\uc2dc\ud0a4\ub294 \ub370 \ucd08\uc810\uc744 \ub9de\ucd9c \uac83 \uac19\uc2b5\ub2c8\ub2e4. \uba87 \uac00\uc9c0 \uc7a0\uc7ac\uc801\uc778 \uac1c\ubc1c \ubc0f \uae30\uc220\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<ol>\n<li>\n<p><strong>CSS4 \uc774\uc0c1:<\/strong> CSS \uc0ac\uc591\uc740 \uc6f9 \uac1c\ubc1c\uc758 \ubcc0\ud654\ud558\ub294 \uc694\uad6c \uc0ac\ud56d\uc744 \ucda9\uc871\ud558\uae30 \uc704\ud574 \uc0c8\ub85c\uc6b4 \ubaa8\ub4c8\uacfc \uae30\ub2a5\uc744 \ub3c4\uc785\ud558\uba74\uc11c \uacc4\uc18d \ubc1c\uc804\ud560 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>CSS-in-JS:<\/strong> CSS\ub97c JavaScript\ub85c \uc9c1\uc811 \uc791\uc131\ud558\ub294 CSS-in-JS \uc811\uadfc \ubc29\uc2dd\uc774 \uc778\uae30\ub97c \uc5bb\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uc811\uadfc \ubc29\uc2dd\uc740 \ub354 \ub098\uc740 \ubaa8\ub4c8\uc131, \ucea1\uc290\ud654 \ubc0f \uc131\ub2a5 \ucd5c\uc801\ud654\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\uc6f9 \uad6c\uc131\uc694\uc18c:<\/strong> \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud558\uace0 \ucea1\uc290\ud654\ub41c UI \uc694\uc18c\uc778 \uc6f9 \uad6c\uc131 \uc694\uc18c\uc758 \ud1b5\ud569\uc740 CSS \uc544\ud0a4\ud14d\ucc98\uc5d0 \uc601\ud5a5\uc744 \ubbf8\uccd0 \ub354\uc6b1 \uccb4\uacc4\uc801\uc774\uace0 \uc720\uc9c0 \uad00\ub9ac \uac00\ub2a5\ud55c \uc2a4\ud0c0\uc77c\uc744 \ucd09\uc9c4\ud569\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\ud6c4\ub514\ub2c8:<\/strong> Houdini \ud504\ub85c\uc81d\ud2b8\ub294 \uac1c\ubc1c\uc790\uc5d0\uac8c \ud558\uc704 \uc218\uc900 API\ub97c \ub178\ucd9c\ud558\uc5ec \uac1c\ubc1c\uc790\uac00 \uc790\uc2e0\uc758 CSS \uae30\ub2a5\uc744 \ub9cc\ub4e4\uace0 CSS\uc758 \uac00\ub2a5\uc131\uc744 \ud655\uc7a5\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \uac83\uc744 \ubaa9\ud45c\ub85c \ud569\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\uc5b4\ub450\uc6b4 \ubaa8\ub4dc \ubc0f \ud14c\ub9c8:<\/strong> CSS\ub294 \uc2dc\uc2a4\ud15c \uc218\uc900\uc758 \ub2e4\ud06c \ubaa8\ub4dc\uc640 \uace0\uae09 \ud14c\ub9c8 \uc635\uc158 \uc9c0\uc6d0\uc774 \ud5a5\uc0c1\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<\/ol>\n<h2>\ud504\ub85d\uc2dc \uc11c\ubc84\ub97c \uc0ac\uc6a9\ud558\uac70\ub098 CSS(Cascading Stylesheet)\uc640 \uc5f0\uacb0\ud558\ub294 \ubc29\ubc95.<\/h2>\n<p>\ud504\ub85d\uc2dc \uc11c\ubc84\uc640 CSS\ub294 \uc6f9 \uc131\ub2a5, \uac1c\uc778 \uc815\ubcf4 \ubcf4\ud638 \ubc0f \ubcf4\uc548\uc744 \ud5a5\uc0c1\ud558\uae30 \uc704\ud574 \ub2e4\uc591\ud55c \ubc29\ubc95\uc73c\ub85c \uc5f0\uacb0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uba87 \uac00\uc9c0 \uc2dc\ub098\ub9ac\uc624\uc785\ub2c8\ub2e4.<\/p>\n<ol>\n<li>\n<p><strong>\uce90\uc2f1 \ubc0f \uc131\ub2a5:<\/strong> \ud504\ub85d\uc2dc \uc11c\ubc84\ub294 CSS \ud30c\uc77c\uc744 \uce90\uc2dc\ud558\uc5ec \uc6d0\ubcf8 \uc11c\ubc84\uc758 \ub85c\ub4dc\ub97c \uc904\uc774\uace0 \uc0ac\uc6a9\uc790\uc758 \ud6c4\uc18d \ud398\uc774\uc9c0 \ub85c\ub4dc \uc18d\ub3c4\ub97c \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>CSS \ucd95\uc18c:<\/strong> \ud504\ub85d\uc2dc \uc11c\ubc84\ub294 \uc2e4\uc2dc\uac04 CSS \ucd95\uc18c\ub97c \uc218\ud589\ud558\uc5ec \ud30c\uc77c \ud06c\uae30\ub97c \uc904\uc774\uace0 \ud398\uc774\uc9c0 \ub85c\ub529 \uc2dc\uac04\uc744 \ucd5c\uc801\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\ucf58\ud150\uce20 \uc804\ub2ec:<\/strong> \ud504\ub85d\uc2dc \uc11c\ubc84\ub294 \uc9c0\ub9ac\uc801\uc73c\ub85c \ubd84\uc0b0\ub41c \uc704\uce58\uc5d0\uc11c CSS \ud30c\uc77c\uc744 \uc81c\uacf5\ud558\uc5ec \uc804 \uc138\uacc4 \uc0ac\uc6a9\uc790\uc758 \ub85c\ub4dc \uc2dc\uac04\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\ubcf4\uc548:<\/strong> \ud504\ub85d\uc2dc \uc11c\ubc84\ub294 \ucd94\uac00 \ubcf4\uc548 \uacc4\uce35 \uc5ed\ud560\uc744 \ud558\uc5ec \uc545\uc131 CSS \ucf54\ub4dc\ub97c \ud544\ud130\ub9c1 \ubc0f \ucc28\ub2e8\ud558\uac70\ub098 XSS(\uad50\ucc28 \uc0ac\uc774\ud2b8 \uc2a4\ud06c\ub9bd\ud305)\uc640 \uac19\uc740 \ud2b9\uc815 CSS \uae30\ubc18 \uacf5\uaca9\uc744 \ubc29\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<li>\n<p><strong>\uc740\ub454:<\/strong> \ud504\ub85d\uc2dc \uc11c\ubc84\ub294 \uc0ac\uc6a9\uc790\uc758 IP \uc8fc\uc18c\ub97c \uc228\uaca8 \uc6f9\uc744 \ud0d0\uc0c9\ud558\ub294 \ub3d9\uc548 \uc775\uba85\uc131\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \uc778\ud130\ub137 \uaddc\uc815\uc774 \uc5c4\uaca9\ud55c \uad6d\uac00\ub098 \uc790\uc2e0\uc758 \uc2e0\uc6d0\uc744 \ubcf4\ud638\ud558\ub824\ub294 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc720\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<\/ol>\n<h2>\uad00\ub828\ub41c \ub9c1\ud06c\ub4e4<\/h2>\n<p>CSS(Cascading Stylesheets)\uc5d0 \ub300\ud55c \uc790\uc138\ud55c \ub0b4\uc6a9\uc744 \ubcf4\ub824\uba74 \ub2e4\uc74c \ub9ac\uc18c\uc2a4\ub97c \uc0b4\ud3b4\ubcf4\uc138\uc694.<\/p>\n<ol>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\" target=\"_new\" rel=\"noopener nofollow\">MDN \uc6f9 \ubb38\uc11c \u2013 CSS<\/a><\/li>\n<li><a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_new\" rel=\"noopener nofollow\">W3Schools \u2013 CSS \ud29c\ud1a0\ub9ac\uc5bc<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/\" target=\"_new\" rel=\"noopener nofollow\">CSS \ud2b8\ub9ad<\/a><\/li>\n<li><a href=\"https:\/\/css-weekly.com\/\" target=\"_new\" rel=\"noopener nofollow\">CSS \uc8fc\uac04<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/category\/css\/\" target=\"_new\" rel=\"noopener nofollow\">\uc2a4\ub9e4\uc2f1 \ub9e4\uac70\uc9c4 \u2013 CSS<\/a><\/li>\n<\/ol>\n<p>CSS(Cascading Stylesheets)\uc758 \uc138\uacc4\ub97c \ub354 \uae4a\uc774 \ud0d0\uad6c\ud558\uba74 \uc544\ub984\ub2f5\uace0 \ubc18\uc751\uc131\uc774 \ub6f0\uc5b4\ub098\uba70 \ub9e4\ub825\uc801\uc778 \uc6f9 \uacbd\ud5d8\uc744 \ub9cc\ub4e4\uae30 \uc704\ud574 \uc81c\uacf5\ub418\ub294 \ub2e4\uc591\ud55c \uac00\ub2a5\uc131\uc744 \ubc1c\uacac\ud558\uac8c \ub420 \uac83\uc785\ub2c8\ub2e4. \ucd08\ubcf4\uc790\uc774\ub4e0 \uc219\ub828\ub41c \uac1c\ubc1c\uc790\uc774\ub4e0 CSS\ub97c \ub9c8\uc2a4\ud130\ud558\uba74 \uc758\uc2ec\ud560 \uc5ec\uc9c0 \uc5c6\uc774 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc9c0\uc18d\uc801\uc778 \uc778\uc0c1\uc744 \ub0a8\uae30\ub294 \uba4b\uc9c4 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4dc\ub294 \ub2a5\ub825\uc774 \ud5a5\uc0c1\ub429\ub2c8\ub2e4.<\/p>","protected":false},"featured_media":467830,"menu_order":0,"template":"","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"class_list":["post-476181","wiki","type-wiki","status-publish","has-post-thumbnail","hentry"],"acf":{"faq_title":"Frequently Asked Questions about <mark>Cascading Stylesheets (CSS)<\/mark>","faq_items":[{"question":"What is Cascading Stylesheets (CSS)?","answer":"<p>Cascading Style Sheets (CSS) is a crucial technology used in web development to control the visual appearance and layout of HTML documents. It allows web developers to separate the content of a website from its design, enabling easy and efficient updates to the site's appearance.<\/p>"},{"question":"How did CSS originate, and when was it first introduced?","answer":"<p>CSS was first proposed by H\u00e5kon Wium Lie and Bert Bos, members of the World Wide Web Consortium (W3C), in 1994. The first official mention of CSS came with the release of CSS level 1 (CSS1) in 1996 as part of the W3C's recommendations.<\/p>"},{"question":"What does CSS do and how does it work?","answer":"<p>CSS operates on the principle of cascading, allowing multiple style sheets to be applied to the same HTML document. The styles are combined based on their specificity and order of application. CSS uses selectors to target HTML elements and applies styles through property-value pairs within a declaration block.<\/p>"},{"question":"What are the key features of CSS?","answer":"<p>CSS offers a range of essential features, including cascading nature, modularity, responsive design, cross-browser compatibility, animations, and layout systems like Flexbox and Grid.<\/p>"},{"question":"What types of CSS exist?","answer":"<p>Various types of CSS include CSS1, CSS2, CSS3, CSS Grid, CSS Flexbox, CSS Transitions, CSS Animations, CSS Variables, and CSS Media Queries.<\/p>"},{"question":"How can CSS be used, and what problems may arise?","answer":"<p>CSS can be used externally through a separate file or internally within the <code>&lt;style&gt;<\/code> element of an HTML document. Problems may arise with specificity conflicts, browser compatibility, performance impact, and challenges in responsive design.<\/p>"},{"question":"What are the future perspectives of CSS?","answer":"<p>The future of CSS may involve CSS4 and beyond, CSS-in-JS approaches, web components, Houdini project, dark mode, and theming support.<\/p>"},{"question":"How can proxy servers be associated with CSS?","answer":"<p>Proxy servers can enhance CSS performance through caching, minification, content delivery, security, and privacy features.<\/p>"},{"question":"Where can I find more information about CSS?","answer":"<p>For more in-depth knowledge about CSS, you can explore resources like MDN Web Docs, W3Schools, CSS Tricks, CSS Weekly, and Smashing Magazine's CSS section. Additionally, OneProxy provides expert guidance on web development and CSS usage.<\/p>"}]},"_links":{"self":[{"href":"https:\/\/oneproxy.pro\/kr\/wp-json\/wp\/v2\/wiki\/476181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneproxy.pro\/kr\/wp-json\/wp\/v2\/wiki"}],"about":[{"href":"https:\/\/oneproxy.pro\/kr\/wp-json\/wp\/v2\/types\/wiki"}],"version-history":[{"count":0,"href":"https:\/\/oneproxy.pro\/kr\/wp-json\/wp\/v2\/wiki\/476181\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneproxy.pro\/kr\/wp-json\/wp\/v2\/media\/467830"}],"wp:attachment":[{"href":"https:\/\/oneproxy.pro\/kr\/wp-json\/wp\/v2\/media?parent=476181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}