{"id":655,"date":"2016-07-15T18:59:20","date_gmt":"2016-07-16T03:59:20","guid":{"rendered":"\/blog\/?p=655"},"modified":"2023-09-21T09:37:59","modified_gmt":"2023-09-21T00:37:59","slug":"css3-%ec%9a%94%ec%95%bd-%ec%a0%95%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/hasu0707.duckdns.org\/blog\/?p=655","title":{"rendered":"CSS3 \uc694\uc57d \uc815\ub9ac"},"content":{"rendered":"

\ucd9c\ucc98 : <\/span>http:\/\/trendition.tistory.com\/<\/span><\/a> (\uc6f9\ud45c\uc900\uac00\uc774\ub4dc)<\/span><\/p>\r\n


\r\n<\/span><\/p>\r\n

nth-child<\/span><\/strong>
<\/pre>\n\n\n\n
<\/font><\/span><\/font><\/span><\/code><\/p>\r\n\r\n<\/span>
div<\/span> <\/span>p:<\/span><\/span><\/span>nth-child(n<\/span>)<\/span><\/span> <\/span><\/strong><\/span>: <\/span><\/strong> <\/span>div \uc694\uc18c\uc548\uc5d0\uc11c n<\/span>\ubc88\uc9f8 \uc790\uc2dd \uc694\uc18c\uc778 p\uc694\uc18c\uc5d0 \uc2a4\ud0c0\uc77c \uc801\uc6a9<\/span><\/span><\/span><\/span><\/font><\/font><\/code><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
div p:nth-child(odd), div p:nth-child(2n+1)<\/span> <\/span><\/span>: <\/span><\/span> <\/span>\ud640\uc218\ubc88\uc9f8 \uc790\uc2dd \uc694\uc18c<\/span><\/span><\/span><\/span><\/span><\/p>\r\n\r\n<\/span>
div p:nth-child(even), div p:nth-child(2n<\/span>) :<\/span><\/span> <\/span> <\/span> <\/span><\/span>\uc9dd\uc218\ubc88\uc9f8 \uc790\uc2dd \uc694\uc18c<\/span><\/span><\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
div<\/span> p:<\/span><\/font><\/span>first-child<\/span><\/strong><\/span>:<\/span> <\/span><\/span>\uccab\ubc88\uc9f8 \uc790\uc2dd\uc694\uc18c<\/span><\/span><\/span><\/span><\/p>\r\n\r\n<\/span>
div<\/span> p<\/span>:<\/span><\/font><\/span><\/span><\/span><\/span><\/span>last-child<\/span><\/strong><\/span>:<\/span> <\/span><\/span>\ub9c8\uc9c0\ub9c9 \uc790\uc2dd\uc694\uc18c<\/span><\/span><\/span><\/span><\/span><\/span> <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
\uc18d\uc131 \uc140\ub809\ud130<\/span><\/strong><\/span><\/font><\/span><\/font><\/span><\/code><\/pre>\n\n\n\n<\/font><\/font><\/code><\/span>
Selector [<\/span>attribute<\/span><\/em>^=<\/span>value<\/span><\/em><\/strong>] : <\/span> <\/span>\uc18d\uc131\uc774 value \ub85c \uc2dc\uc791\ud558\ub294 \ud56d\ubaa9<\/span><\/span><\/p>\r\n\r\n<\/span>
Selector [<\/span>attribute$<\/span><\/em>=<\/span>value<\/span><\/em><\/strong>] : <\/span> <\/span>\uc18d\uc131\uc774 value \ub85c \ub05d\ub098\ub294 \ud56d\ubaa9<\/span><\/span> <\/span><\/p>\r\n\r\n<\/span>
Selector [<\/span>attribute*<\/span><\/em>=<\/span>value<\/span><\/em><\/strong>] : <\/span> <\/span>value \uac00 \ud3ec\ud568\ub418\ub294 \ud56d\ubaa9 <\/span><\/span><\/p>\r\n\r\n<\/span><\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
input[type=\"text\"]<\/span> <\/span><\/span>{ ...<\/span> <\/span><\/span>}<\/span><\/p>\r\n\r\n<\/span><\/span>

input[type=\"radio\"]<\/span> <\/span><\/span>{ ...<\/span> <\/span><\/span>}<\/span><\/p>\r\n\r\n<\/span>
<\/span> <\/span><\/p>\r\n\r\n<\/span>
[data-value*=\"foo\"]<\/span> <\/span><\/span>{ ...<\/span> <\/span><\/span>}<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
h2[rel=\"friend\"]<\/span> <\/span><\/span>{ ...<\/span> <\/span><\/span>}<\/span><\/span><\/p>\r\n\r\n<\/span>
<\/span><\/span> <\/span><\/p>\r\n\r\n<\/span><\/span><\/span>
  <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
<\/p>\r\n\r\n<\/span>
<\/span><\/p>\r\n\r\n<\/span>
<\/p>\r\n\r\n<\/span>
text-shadow , box-shadow<\/span><\/strong><\/span><\/pre>\n\n\n\n
text-shadow: \uac00\ub85c\uac70\ub9ac  \uc138\ub85c\uac70\ub9ac  \ube14\ub7ec\uac12  \uc0c9\uc0c1;<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/p>\r\n\r\n<\/span>
box-shadow: \uac00\ub85c\uac70\ub9ac  \uc138\ub85c\uac70\ub9ac  \ube14\ub7ec\uac12  \uc0c9\uc0c1;<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
color:#000;<\/span>
text-shadow:0px 1px 1px #fff;<\/span><\/p>\r\n\r\n<\/span>
text-shadow<\/span>:<\/span> <\/span>0px 2px 2px<\/span> <\/span><\/span>rgba<\/span>(255, 255, 255, 0.4)<\/span>;<\/span> <\/span>
<\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
border -radius<\/span><\/strong><\/span><\/font><\/span><\/font><\/span><\/code><\/pre>\n\n\n\n<\/span><\/span>
 <\/span><\/p>\r\n\r\n<\/span>
\ubaa8\uc11c\ub9ac \ub465\uae00\uac8c \ud558\uae30<\/span><\/font><\/span><\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
border-radius: 5px 20px 5px 20px;<\/span> <\/span><\/span>
<\/span>\/* top left, top right, bottom right, bottom left *\/<\/span><\/span><\/span><\/p>\r\n\r\n<\/span>
<\/span><\/span> <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/span><\/p>\r\n\r\n<\/span><\/pre>\n\n\n\n
border-radius: 10px\/30px; \/* horizontal radius \/ vertical radius *\/<\/span>
border-radius: 30px\/10px; \/* horizontal radius \/ vertical radius *\/<\/span>
border-radius: 50%;<\/span><\/span><\/code>
<\/span><\/code> <\/span><\/pre>\n\n\n\n
<\/span><\/span><\/span>
<\/code><\/span><\/pre>\n\n\n\n
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span>gradient <\/span><\/strong><\/span><\/span><\/pre>\n\n\n\n
<\/span><\/span> <\/span><\/p>\r\n\r\n<\/span>
background: \uadf8\ub77c\ub514\uc5b8\ud2b8 \ubaa8\uc591(\ubc29\ud5a5, \uc0c9\uc0c11, \uc0c9\uc0c12)<\/span><\/span><\/p>\r\n\r\n<\/span><\/span><\/span>

background<\/span>:<\/span> <\/span>linear-gradient<\/span>(to right,<\/span> <\/span><\/span>red, orange)<\/span>;<\/span><\/p>\r\n\r\n<\/span>
background<\/span>:<\/span> <\/span>linear-gradient<\/span>(45deg, red, orange)<\/span>;<\/span><\/font><\/span>
background<\/span>:<\/span> <\/span>radial<\/span><\/span>-gradient<\/span>(red, orange)<\/span>;<\/span><\/font><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span><\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span>background-size <\/span><\/strong><\/span><\/span><\/pre>\n\n\n\n
 <\/span><\/p>\r\n\r\n<\/span>
\ubc30\uacbd \uc774\ubbf8\uc9c0 \uc870\uc815<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
background-size:<\/span> <\/span>\ub113\uc774 \ub192\uc774<\/span><\/span><\/span><\/p>\r\n\r\n<\/span>
background-size: cover<\/span>    \ud574\ub2f9\uc694\uc18c\uc5d0 \uc5ec\ubc31\uc5c6\uc774 \ucc44\uc6c0<\/span><\/span><\/p>\r\n\r\n<\/span>
background-size: contain <\/span> <\/span>\uc804\uccb4 \uc774\ubbf8\uc9c0\uac00 \uc798\ub9b0 \uacf3 \uc5c6\uc774 \ud574\ub2f9\uc694\uc18c\uc548\uc5d0 \ub4e4\uc5b4\uac10<\/span><\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/p>\r\n\r\n<\/span>
<\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
box-sizing:  content-box | border-box | initial | inherit<\/span><\/strong><\/span><\/pre>\n\n\n\n
 <\/span><\/p>\r\n\r\n<\/span>
content-box : \ucf58\ud150\ud2b8 \uc601\uc5ed\uc744 \uae30\uc900\uc73c\ub85c \ud06c\uae30\ub97c \uc815\ud569\ub2c8\ub2e4.<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
border-box : \ud14c\ub450\ub9ac\ub97c \uae30\uc900\uc73c\ub85c \ud06c\uae30\ub97c \uc815\ud569\ub2c8\ub2e4.<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
initial : \uae30\ubcf8\uac12\uc73c\ub85c \uc124\uc815\ud569\ub2c8\ub2e4.<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
inherit : \ubd80\ubaa8 \uc694\uc18c\uc758 \uc18d\uc131\uac12\uc744 \uc0c1\uc18d\ubc1b\uc2b5\ub2c8\ub2e4.<\/span><\/p>\r\n\r\n<\/span><\/span>
 <\/span><\/p>\r\n\r\n<\/span>

<\/p>\r\n\r\n<\/span>

<\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/p>\r\n\r\n<\/span>

<\/p>\r\n\r\n<\/span>

<\/p>\r\n\r\n<\/span>
<\/span><\/p>\r\n\r\n<\/span>

<\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span><\/span>
 <\/span><\/p>\r\n\r\n<\/span>
word-wrap:break-word<\/span><\/strong><\/span><\/pre>\n\n\n\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
\ub2e8\uc5b4\uac00 \uae34 \uacbd\uc6b0 \uc904\ubc14\uafc8\ud560\ub54c \ub2e8\uc5b4\ub97c \ub04a\uc5b4\uc11c \ub2e4\uc74c\uc904\ub85c \uc774\uc5b4\uc9c0\ub3c4\ub85d \ud558\ub294 \uae30\ub2a5<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
#box{<\/span><\/p>\r\n\r\n<\/span>
word-wrap:break-word<\/span><\/p>\r\n\r\n<\/span>
}<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
@font-face<\/span><\/strong><\/span><\/pre>\n\n\n\n<\/span>
 <\/span>@font-face<\/span><\/code> \ub97c \uc0ac\uc6a9\ud558\uc5ec \uc6f9\ud398\uc774\uc9c0\uc758 \ud14d\uc2a4\ud2b8\uc5d0 \uc628\ub77c\uc778\ud3f0\ud2b8(online fonts)\ub97c \uc801\uc6a9\ud560 \uc218 \uc788\ub2e4<\/span><\/span><\/p>\r\n\r\n<\/span>
<\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span>@font-face{<\/span><\/font><\/p>\r\n\r\n<\/span>
font-family: \uae00\uaf34\uc774\ub984;<\/span><\/font><\/p>\r\n\r\n<\/span>
src: url(\uae00\uaf34 \ud30c\uc77c \uacbd\ub85c)  format(\uae00\uaf34 \ud30c\uc77c \uc720\ud615) ;<\/span><\/font><\/p>\r\n\r\n<\/span>
}<\/span><\/font><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
@font-face{<\/span><\/p>\r\n\r\n<\/span>
font-family:'font1';<\/span><\/p>\r\n\r\n<\/span>
src:url('backout.ttf' ) format('truetype');<\/span><\/p>\r\n\r\n<\/span>
}<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
.text{<\/span><\/p>\r\n\r\n<\/span>
font-family: font1;<\/span><\/p>\r\n\r\n<\/span>
}<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
  <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span>opacity:0.5<\/span><\/strong><\/span><\/pre>\n\n\n\n
\ud22c\uba85\ub3c4 \uc18d\uc131,  0 ~ 1\uc0ac\uc774\uc758 \uc22b\uc790\ub97c \uc0ac\uc6a9(0\uc740 \ud22c\uba85, 1\uc740 \ubd88\ud22c\uba85)<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
  <\/span> <\/span><\/span>\/* IE 8 *\/<\/span>
 <\/span> <\/span><\/span>-ms-filter<\/span>:<\/span> <\/span>\"<\/span><\/span>progid<\/span>:<\/span>DXImageTransform.Microsoft.<\/span>Alpha<\/span>(Opacity=50)\"<\/span>;<\/span>

 <\/span> <\/span><\/span>\/* IE 5-7 *\/<\/span>
 <\/span> <\/span><\/span>filter<\/span>:<\/span> <\/span>alpha<\/span>(opacity=50)<\/span>;<\/span>

 <\/span> <\/span><\/span>\/* Netscape *\/<\/span>
 <\/span> <\/span><\/span>-moz-opacity<\/span>:<\/span> <\/span>0.5<\/span><\/span>;<\/span>

 <\/span> <\/span><\/span>\/* Safari 1.x *\/<\/span>
 <\/span> <\/span><\/span>-khtml-opacity<\/span>:<\/span> <\/span>0.5<\/span><\/span>;<\/span>

 <\/span> <\/span><\/span>\/* Good browsers *\/<\/span>
 <\/span> <\/span><\/span>opacity<\/span>:<\/span> <\/span>0.5<\/span><\/span>;<\/span><\/span><\/p>\r\n\r\n<\/span>
<\/span><\/span> <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/span> <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/span> <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/span> <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/span> <\/span><\/p>\r\n\r\n<\/span>
 <\/span>transform<\/span><\/strong><\/span><\/span><\/pre>\n\n\n\n
x\ucd95\uc73c\ub85c \uc774\ub3d9   <\/span> <\/span>transform : translateX<\/span> <\/span><\/span>(x\ucd95 \uc774\ub3d9\uac70\ub9ac)<\/span><\/strong><\/span><\/p>\r\n\r\n<\/span>
y\ucd95\uc73c\ub85c \uc774\ub3d9   <\/span> <\/span><\/span>transform : translateY<\/span> <\/span><\/span>(y\ucd95 \uc774\ub3d9\uac70\ub9ac)<\/span><\/strong><\/span><\/p>\r\n\r\n<\/span>
x,y\ucd95 \ub3d9\uc2dc \uc774\ub3d9   transform : translate (x\ucd95 \uc774\ub3d9\uac70\ub9ac, y\ucd95 \uc774\ub3d9\uac70\ub9ac)<\/span><\/strong><\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
div{ transform: translateX(500px) }<\/span><\/font><\/span><\/p>\r\n\r\n<\/span>
div{ transform: translateY(400px) }<\/span><\/font><\/span><\/p>\r\n\r\n<\/span>
div{ transform: translate(200px,300px) }<\/span><\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
x\ucd95\uc73c\ub85c \uae30\uc6b8\ub9ac\uae30   <\/span> <\/span>transform : skewX<\/span><\/span>(\uac01\ub3c4)<\/span><\/strong><\/span><\/p>\r\n\r\n<\/span>
y\ucd95\uc73c\ub85c \uae30\uc6b8\ub9ac\uae30  <\/span> <\/span><\/span>transform : skewY<\/span>(\uac01\ub3c4)<\/span><\/strong><\/span><\/p>\r\n\r\n<\/span>
x,y\ucd95 \ub3d9\uc2dc \uae30\uc6b8\ub9ac\uae30  transform : skew(x\ucd95 \uac01\ub3c4, y\ucd95 \uac01\ub3c4)<\/span><\/strong><\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
div{ transform: skewX(10deg) }<\/span><\/font><\/span><\/p>\r\n\r\n<\/span>
div{ transform: skewY(20deg) }<\/span><\/font><\/span><\/p>\r\n\r\n<\/span>
div{ transform: skew(10deg, 20deg) }<\/span><\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
x\ucd95\uc73c\ub85c \ud655\ub300\/\ucd95\uc18c  <\/span> <\/span>transform : scaleX<\/span><\/span>(\uac01\ub3c4)<\/span><\/strong><\/span><\/p>\r\n\r\n<\/span>
y\ucd95\uc73c\ub85c \ud655\ub300\/\ucd95\uc18c:  <\/span> <\/span><\/span>transform : scaleY<\/span>(\uac01\ub3c4)<\/span><\/strong><\/span><\/p>\r\n\r\n<\/span>
x,y\ucd95 \ub3d9\uc2dc \ud655\ub300\/\ucd95\uc18c  transform : scale(x\ucd95 \uac01\ub3c4, y\ucd95 \uac01\ub3c4)<\/span><\/strong><\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
div{ transform: scaleX(1.2) }<\/span><\/font><\/span><\/p>\r\n\r\n<\/span>
div{ transform: scaleX(0.5) }<\/span><\/font><\/span><\/p>\r\n\r\n<\/span>
div{ transform: scale(1.2, 0.5) }<\/span><\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
\ud68c\uc804\ud558\uae30 <\/span> <\/span>transform : ration<\/span><\/span>(\uac01\ub3c4)<\/span><\/strong><\/span><\/p>\r\n\r\n<\/span>
\ud68c\uc804\uae30\uc900\uc810 transform-origin : \uae30\uc900\uc810<\/span><\/strong><\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
div{ transform: rotion(45deg), transform-origin:left-top }<\/span><\/font><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
  <\/span><\/p>\r\n\r\n<\/span><\/span><\/span><\/span>
 <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/span> <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/span> <\/span><\/p>\r\n\r\n<\/span>
 <\/span>transform <\/span>\uc18d\uc131 \uc911 3D \uac00\ub2a5\ud55c \uc18d\uc131<\/span><\/span><\/font><\/span><\/strong><\/span><\/pre>\n\n\n\n
perspective : \uc6d0\uadfc\uac10 \uc218\uce58\ub97c \ubd80\ubaa8\uc694\uc18c\uc5d0 \uc801\uc6a9<\/span><\/strong><\/span><\/p>\r\n\r\n<\/span>
z\ucd95\uc73c\ub85c \uc774\ub3d9   <\/span> <\/span>transform :traslateZ<\/span><\/span>(\uc774\ub3d9\uac70\ub9ac)<\/span><\/strong><\/span><\/p>\r\n\r\n<\/span>
x\ucd95\uc73c\ub85c \ud68c\uc804   <\/span> <\/span><\/span>transform : rotateX<\/span> <\/span><\/span>(\ud68c\uc804\uac01\ub3c4)<\/span><\/strong><\/span><\/p>\r\n\r\n<\/span>
y\ucd95\uc73c\ub85c \uc774\ub3d9  transform :<\/span> <\/span><\/strong>rotateY<\/span><\/strong>(\ud68c\uc804\uac01\ub3c4)<\/span><\/strong><\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
parent<\/span><\/font> <\/span>{perspective :1200px }<\/span><\/span><\/font><\/p>\r\n\r\n<\/span>
.child<\/span><\/font><\/span> <\/span><\/span>{ transform: translateZ(300px) }<\/span><\/font><\/span><\/p>\r\n\r\n<\/span>
.child<\/span><\/font><\/span> <\/span><\/span>{ transform: rotateX(30deg) }<\/span><\/font><\/span><\/p>\r\n\r\n<\/span>
.child<\/span><\/font><\/span> <\/span><\/span>{ transform: rotateY(45deg) }<\/span><\/span><\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/p>\r\n\r\n<\/span>
<\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span>
<\/span><\/span> <\/span><\/p>\r\n\r\n<\/span>
 <\/span>transition : property  duration  timeing-function delay<\/span><\/strong><\/span><\/pre>\n\n\n\n
property : \uc801\uc6a9\ud560 \uc18d\uc131 \uc774\ub984 , ALL (\ubaa8\ub450 \uc120\ud0dd\ud560 \uacbd\uc6b0)<\/span><\/p>\r\n\r\n<\/span>
duration : \uc9c4\ud589 \uc2dc\uac04<\/span><\/p>\r\n\r\n<\/span>
timing - function : \uc9c4\ud589 \ud6a8\uacfc\uc758 \uc18d\ub3c4 ( linear , ease, ease-in , ease-out, ease-in-out ...)<\/span><\/p>\r\n\r\n<\/span>
delay: \ud2b8\ub79c\uc9c0\uc158\uc774 \uc2dc\uc791\ub418\uae30 \uc804 \uc9c0\uc5f0\uc2dc\uac04<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
  div{<\/span>
       transition:background-color  0.5s  ease;<\/span>
       background-color: blue;<\/span>
  }<\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
  div:hover{<\/span>
       background-color: green;<\/span>
  }<\/span><\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
<\/span><\/span> <\/span><\/span><\/span><\/p>\r\n\r\n<\/span>
@keyframes \ubaa8\uc158\uc774\ub984 {<\/span><\/strong><\/span>
0% { \ubaa8\uc158 \uc2dc\uc791\uc810\uc758  CSS}<\/span><\/strong><\/span><\/p>\r\n\r\n<\/span>
100% { \ubaa8\uc158 \ub05d\uc810\uc758 CSS }<\/span><\/strong><\/span><\/p>\r\n\r\n<\/span>
}<\/span><\/strong><\/span> <\/span><\/strong><\/span><\/p>\r\n\r\n<\/span><\/pre>\n\n\n\n
animation: name  duration  easing  delay  iteration-count  direction<\/span><\/pre>\n\n\n\n
name: @keyframes\ub85c \uc9c0\uc815\ud55c keyframse\uc758 \uc774\ub984<\/span><\/p>\r\n\r\n<\/span>
duration : \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc9c4\ud589\ub418\ub294 \uc2dc\uac04(\uae30\ubcf8\uac12 0\ucd08, 0s)<\/span><\/p>\r\n\r\n<\/span>
easing: \uac00\uc18d\ub3c4( linear  \uac00\uc18d\ub3c4 \uc788\uc74c, easing  \uac00\uc18d\ub3c4 \uc788\uc74c)<\/span><\/p>\r\n\r\n<\/span>
delay : \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc2dc\uc791\ub418\uae30 \uc804 \uc9c0\uc5f0\uc2dc\uac04<\/span><\/p>\r\n\r\n<\/span>
iteration-count :\ubc18\ubcf5\ud69f\uc218 (\ubb34\ud55c\ubc18\ubcf5 infinite)<\/span><\/p>\r\n\r\n<\/span>
direction : \uc5f0\uacb0\ubc29\ud5a5 (alternate \uc5ed\ubc29\ud5a5,  normal \uae30\ubcf8\ubc29\ud5a5)<\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
 <\/span><\/p>\r\n\r\n<\/span>
@ keyframes MY<\/span> <\/span>{<\/span>
 <\/span> <\/span><\/span>0%  <\/span> <\/span><\/span>{<\/span> <\/span>opacity<\/span>:<\/span> <\/span>0<\/span><\/span>;<\/span> <\/span>}<\/span>
 <\/span> <\/span><\/span>100%<\/span> <\/span><\/span>{<\/span> <\/span>opacity<\/span>:<\/span> <\/span>1<\/span><\/span>;<\/span> <\/span>}<\/span>
}<\/span>
<\/span><\/p>\r\n\r\n<\/span>
div<\/span> <\/span><\/span>{<\/span>
 <\/span> <\/span><\/span>animation<\/span>:<\/span>  MY  5s infinite ;<\/span><\/span><\/p>\r\n\r\n<\/span>
}<\/span><\/span><\/p>\r\n\r\n<\/span>
<\/span><\/span> <\/span><\/p>\r\n\r\n<\/span>
div<\/span> <\/span><\/span><\/span>{<\/span>
animation-name<\/span>:<\/span> <\/span>bounce<\/span><\/span>;<\/span>
animation-duration<\/span>:<\/span> <\/span>4s<\/span><\/span>;<\/span>
animation-iteration-count<\/span>:<\/span> <\/span>10<\/span><\/span>;<\/span>
animation-direction<\/span>:<\/span> <\/span>alternate<\/span><\/span>;<\/span>
animation-timing-function<\/span>:<\/span> <\/span>ease-out<\/span><\/span>;<\/span>
animation-fill-mode<\/span>:<\/span> <\/span>forwards<\/span><\/span>;<\/span>
animation-delay<\/span>:<\/span> <\/span>2s<\/span><\/span>;<\/span>
}<\/span><\/span><\/span><\/p>\r\n<\/span><\/span><\/span><\/span><\/span><\/span><\/font><\/font><\/code>","protected":false},"excerpt":{"rendered":"
\ucd9c\ucc98 : http:\/\/trendition.tistory.com\/ (\uc6f9\ud45c\uc900\uac00\uc774\ub4dc) nth-child div p:nth-child(n) :  div \uc694\uc18c\uc548\uc5d0\uc11c n\ubc88\uc9f8 \uc790\uc2dd \uc694\uc18c\uc778 p\uc694\uc18c\uc5d0 \uc2a4\ud0c0\uc77c \uc801\uc6a9   div p:nth-child(odd), div p:nth-child(2n+1) :  \ud640\uc218\ubc88\uc9f8 \uc790\uc2dd \uc694\uc18c div p:nth-child(even), div p:nth-child(2n) :   \uc9dd\uc218\ubc88\uc9f8 \uc790\uc2dd \uc694\uc18c   div p:first-child: \uccab\ubc88\uc9f8 \uc790\uc2dd\uc694\uc18c div p:last-child: \ub9c8\uc9c0\ub9c9 \uc790\uc2dd\uc694\uc18c            \uc18d\uc131 \uc140\ub809\ud130 Selector [attribute^=value] :  \uc18d\uc131\uc774 value \ub85c \uc2dc\uc791\ud558\ub294 \ud56d\ubaa9 Selector [attribute$=value] :  \uc18d\uc131\uc774 value \ub85c \ub05d\ub098\ub294 \ud56d\ubaa9  Selector [attribute*=value] :  value \uac00 \ud3ec\ud568\ub418\ub294 \ud56d\ubaa9    […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[23],"tags":[],"class_list":["post-655","post","type-post","status-publish","format-standard","hentry","category-development_web"],"_links":{"self":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=655"}],"version-history":[{"count":0,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/655\/revisions"}],"wp:attachment":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}