{"id":919,"date":"2022-02-04T15:08:32","date_gmt":"2022-02-04T06:08:32","guid":{"rendered":"http:\/\/mylittleforest.kr\/wordpress\/?p=919"},"modified":"2022-02-22T09:51:03","modified_gmt":"2022-02-22T00:51:03","slug":"css-%ea%b3%a0%ea%b8%89%ed%99%9c%ec%9a%a9","status":"publish","type":"post","link":"http:\/\/mylittleforest.kr\/wordpress\/blog\/2022\/02\/04\/919\/","title":{"rendered":"CSS \uace0\uae09\ud65c\uc6a9"},"content":{"rendered":"\n

<\/p>\n\n\n\n

\uc804\ud658 : CSS Transitions<\/a><\/h4>\n\n\n
\n<style> \ndiv {\n  width: 100px;\n  height: 100px;\n  background: red;\n  transition: width 2s;\n}\n\ndiv:hover {\n  width: 300px;\n}\n<\/style>\n...\n<p>Hover over the div element below, to see the transition effect:<\/p>\n<div><\/div>\n...\n<\/pre><\/div>\n\n\n
\uc560\ub2c8\uba54\uc774\uc158 : CSS Animations<\/a><\/h4>\n\n\n
\n<style> \ndiv {\n  width: 100px;\n  height: 100px;\n  background-color: red;\n  animation-name: example;\n  animation-duration: 4s;\n}\n\n@keyframes example {\n  from {background-color: red;}\n  to {background-color: yellow;}\n}\n<\/style>\n...\n<div><\/div>\n<p><b>Note:<\/b> When an animation is finished, it goes back to its original style.<\/p>\n...\n<\/pre><\/div>\n\n\n
\uadf8\ub798\ub514\uc5b8\ud2b8 : CSS Gradients<\/a><\/h4>\n\n\n
\n<style>\n#grad1 {\n  height: 200px;\n  background-color: red; \/* For browsers that do not support gradients *\/\n  background-image: linear-gradient(to bottom right, red, yellow);\n}\n<\/style>\n...\n<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):\/p>\n<div id="grad1"><\/div>\n...\n<\/pre><\/div>\n\n\n
\ud14d\uc2a4\ud2b8 \uadf8\ub9bc\uc790 \ud6a8\uacfc : CSS Shadow Effects<\/a><\/h4>\n\n\n
\n<style>\nh1 {\n  color: white;\n  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;\n}\n<\/style>\n...\n<h1>Text-shadow effect!<\/h1>\n...\n<\/pre><\/div>\n\n\n
\uc0c1\uc790 \uadf8\ub9bc\uc790 \ud6a8\uacfc : CSS Box Shadow<\/a><\/h4>\n\n\n\n
Text Card Shadow<\/a><\/h5>\n\n\n
\n<style>\ndiv.card {\n  width: 250px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  text-align: center;\n}\n\ndiv.header {\n  background-color: #4CAF50;\n  color: white;\n  padding: 10px;\n  font-size: 40px;\n}\n\ndiv.container {\n  padding: 10px;\n}\n<\/style>\n...\n<div class="card">\n  <div class="header">\n    <h1>1<\/h1>\n  <\/div>\n  <div class="container">\n    <p>January 1, 2021<\/p>\n  <\/div>\n<\/div>\n...\n<\/pre><\/div>\n\n\n
Image Shadow<\/a><\/h5>\n\n\n
\n<style>\ndiv.polaroid {\n  width: 250px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  text-align: center;\n}\n\ndiv.container {\n  padding: 10px;\n}\n<\/style>\n...\n<div class="polaroid">\n  <img src="rock600x400.jpg" alt="Norway" style="width:100%">\n  <div class="container">\n    <p>Hardanger, Norway<\/p>\n  <\/div>\n<\/div>\n...\n<\/pre><\/div>\n\n\n
\ud398\uc774\uc9d5 : CSS Pagination Examples<\/a><\/h4>\n\n\n
\n<style>\n.pagination {\n  display: inline-block;\n}\n\n.pagination a {\n  color: black;\n  float: left;\n  padding: 8px 16px;\n  text-decoration: none;\n}\n\n.pagination a.active {\n  background-color: #4CAF50;\n  color: white;\n}\n\n.pagination a:hover:not(.active) {background-color: #ddd;}\n<\/style>\n...\n<div class="pagination">\n  <a href="#">&laquo;<\/a>\n  <a href="#">1<\/a>\n  <a class="active" href="#">2<\/a>\n  <a href="#">3<\/a>\n  <a href="#">4<\/a>\n  <a href="#">5<\/a>\n  <a href="#">6<\/a>\n  <a href="#">&raquo;<\/a>\n<\/div>\n...\n<\/pre><\/div>\n\n\n
\ud234\ud301 : CSS Tooltip<\/a><\/h4>\n\n\n
\n<style>\n.tooltip {\n  position: relative;\n  display: inline-block;\n  border-bottom: 1px dotted black;\n}\n\n.tooltip .tooltiptext {\n  visibility: hidden;\n  width: 120px;\n  background-color: black;\n  color: #fff;\n  text-align: center;\n  border-radius: 6px;\n  padding: 5px 0;\n\n  \/* Position the tooltip *\/\n  position: absolute;\n  z-index: 1;\n}\n\n.tooltip:hover .tooltiptext {\n  visibility: visible;\n}\n<\/style>\n...\n<div class="tooltip">Hover over me\n  <span class="tooltiptext">Tooltip text<\/span>\n<\/div>\n...\n<\/pre><\/div>\n\n\n
2D\ubcc0\ud615 \u2013 rotate, scale, translate : CSS 2D Transforms<\/a><\/h4>\n\n\n
\n<style>\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n}\n\ndiv#myDiv {\n  transform: rotate(20deg);\n}\n<\/style>\n...\n<div>\nThis a normal div element.\n<\/div>\n\n<div id="myDiv">\nThis div element is rotated clockwise 20 degrees.\n<\/div>\n...\n<\/pre><\/div>\n\n
\n<style> \ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  transform: translate(50px,100px);\n}\n<\/style>\n...\n<div>\nThis div element is moved 50 pixels to the right, and 100 pixels down from its current position.\n<\/div>\n...\n<\/pre><\/div>\n\n\n
\uacfc\uc81c : 0305-css-homework-1.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\uc804\ud658 : CSS Transitions \uc560\ub2c8\uba54\uc774\uc158 : CSS Animations \uadf8\ub798\ub514\uc5b8\ud2b8 : CSS Gradients \ud14d\uc2a4\ud2b8 \uadf8\ub9bc\uc790 \ud6a8\uacfc : CSS Shadow Effects \uc0c1\uc790 \uadf8\ub9bc\uc790 \ud6a8\uacfc : CSS Box Shadow Text Card Shadow Image Shadow \ud398\uc774\uc9d5 : CSS Pagination Examples \ud234\ud301 : CSS Tooltip 2D\ubcc0\ud615 \u2013 rotate, scale, translate : CSS 2D Transforms \uacfc\uc81c : 0305-css-homework-1.html<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[38],"tags":[],"_links":{"self":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts\/919"}],"collection":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/comments?post=919"}],"version-history":[{"count":10,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts\/919\/revisions"}],"predecessor-version":[{"id":1041,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts\/919\/revisions\/1041"}],"wp:attachment":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/media?parent=919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/categories?post=919"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/tags?post=919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}