학습내용
1. transfrom
<div class="transform"></div>css↓
.transform {
width: 300px;
height: 300px;
background-color: yellow;
transform: rotate(-10deg);
/*transform는 2차원적 회전효과. 양수는 오른쪽으로, 음수는 왼쪽으로*/
/*아래의 마진값x*/
transform: scale(2.3);
/*선택한 영역의 크기를 배율로 확대,축소하는 속성값이 scale이다. (x축, y축)*/
/*아래의 마진값 적용*/
transform: skew(10deg, 20deg);
/*skew는 3차원적인 회전효과. (x축으로 회전, y축으로 회전)*/ /*양수, 음수 사용 가능*/
/*아래의 마진값 적용*/
transform: translate(100px, 300px);
/*오브젝트의 위치를 옮길때 사용 (x,y)*/
/*아래의 마진값x*/
margin-left: 300px;
margin-top: 500px;
/*transform 속성을 이용할 때 주의할 점*/
/*Internet Exploerer 10.0부터 지원한다.*/
/*freefix를 이용하여 9.0에서도 사용가능하게 만들 수 있다.*/
-webkit-transform: rotate(10deg); /*크롬, 사파리*/
-moz-transform: rotate(10deg); /*파이어폭스*/
-ms-transform: rotate(10deg); /*explorer*/ /*하위버전 9.0에서도 사용가능. 그 이하는 불가*/
-o-transform: rotate(10deg); /*opera*/
transform: rotate(10deg);
}2. transition
<div class="transition"></div>css↓
.transistion {
width: 300px;
height: 300px;
background-color: yellow;
transition-property: width;
transition-duration: 2s; /*변화하는 속도*/
transition-timing-function: linear;
/*변화하는 속도 성격을 정할 수 있다. (점점 빠르게, 점점 느리게 등)*/
/*linear : 시작부터 끝까지 일정한 속도를 유지*/
transition-delay: 1s; /*마우스는 올리고 1초 후에 애니메이션이 발동*/
transition: width 2s linear 1s, height 2s linear 1s;
/*작성하는 순서는 상관없지만 숫자는 duration-delay순으로 인식된다. 숫자가 하나면 duration으로 인식*/
/*쉽표로 변화를 주고자 하는 속성을 더 추가할 수 있다. - hover에서도 설정해야함*/
/*transition은 마우스를 올렸을때 바로 색상을 바꾸는게 아닌, 자연스러운 색상 변화를 주고 싶을 때 자주 사용*/
}
.transistion:hover {
width: 600px; /*마우스를 올리면 넓이가 600px으로 변한다.*/
height: 600px;
}
3. animation
<div class="animation"></div>css↓
/*앞에서 배운 transition은 마우스를 올렸을때(hover) 변화하는 움직임이었다면, animation은 자연스럽게 움직이는 것*/
.animation {
width: 300px;
height: 300px;
background-color: yellow;
animation-name: 넓이변화;
animation-duration: 3s;
animation-timing-function: linear; /* 일정한 속도로 움직인다. */
animation-delay: 1s;
animation-iteration-count: infinite; /*애니메이션 진행 횟수*/ /*infinite는 무한반복*/
animation-direction: normal; /*애니메이션 진행 방향*/
/*normal은 from에서 to로만 움직인다.*/
/*alternate 왕복으로 움직임. */
/*이때, from-to를 1번, to-from을 1번으로 카운트 한다. (iteration-count 6이면 총 3번 왕복)*/
}
/*@keyframes 넓이변화 {
from {
width: 300px;
height: 300px;
background-color: yellow;
}
to {
width: 600px;
height: 600px;
background-color: red;
border: solid 10px blue;
}
}*/
/*실제 애니메이션이 작동하는 형태값을 입력*/
/*keyframes에 from-to가 아닌 숫자를 입력해도 됨*/
@keyframes 넓이변화 {
0% {
width: 300px;
height: 300px;
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
width: 600px;
height: 600px;
background-color: red;
}
}3-1) 키즈가오 애니메이션 실습
고개를 좌우로 흔드는 사자 애니메이션
<div class="spin-lion"></div>css↓
.spin-lion {
width: 150px;
height: 150px;
background-color: blue;
/* animation-name: spinLion;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
*/
-webkit-animation: spinLion 1.5s linear infinite alternate 1s; /*먄약 freefix를 사용하고 싶다면 keyframes에도 freefix를 넣어줘야한다.*/ /*freefix는 반드시 디폴트값과 함께 사용해야한다.*/
animation: spinLion 1.5s linear infinite alternate 1s;
/*먼저나오는 숫자가 duration, 뒤에 나오는 숫자가 delay*/
}
@-webkit-keyframes spinLion { /*freefix는 @와 keyframes사이에 입력*/
from {
-webkit-transform: rotate(-10deg); /*keyframes안에 있는 transfrom에도 freefix를 작성해 주어야한다.*/
}
to {
-webkit-transform: rotate(10deg);
}
}
@keyframes spinLion {
from {
-webkit-transform: rotate(-10deg);
}
to {
-webkit-transform: rotate(10deg);
}
}파란색 사각형이 좌우로 움직이는 애니메이션이 완성됨.
★ 애니메이션 효과를 줄 때 코딩을 도와주는 사이트
애니메이션 효과를 하나하나 코딩할 수 없기 때문에 사이트를 잘 활용하도록 하자!
https://jeremyckahn.github.io/stylie/
.신난다 { animation-name: 신난다-keyframes; animation-duration: 2000ms; animation-delay: 0ms; animation-fill-mode: forwards; animation-timing-function: linear; animation-iteration-count: infinite; transform-origin: 0 0; } @keyframes 신난다-keyframes { 0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);} 50% {transform:translate(298px, 311px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);} 100% {transform:translate(623px, -3px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);} }html::after { content: url(https://ga-beacon.appspot.com/UA-42910121-1/stylie?pixel); position: absolute; left: -999em; }
4. 실습
4-1) 메뉴버튼의 애니메이션
<nav class="mouse-animation">
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</nav>css↓
html, body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
.mouse-animation li {
width: 150px;
/*background-color: #000000;*/ /*opacity의 투명화가 글자에는 적용되지 않게 하려면 rgba를 사용한다.*/
background-color: rgba(0, 0, 0, 1); /*마지막은 투명도 이다.*/ /*hover가 적용되지 않은 상태의 설정이므로 투명도 최대 1을 설정*/
padding: 20px;
border-top: solid 5px #dfdfdf;
transition: opacity 0.2s, margin-left 0.5; /*아래 hover에 들어있는 속성을 입력한다.*/
}
.mouse-animation li:hover { /*메뉴박스에 마우스를 올리면 투명도, 마진값이 변화*/
/*opacity: 0.5;*/ /*투명도에 영향을 주는 속성*/ /*범위 안의 모든 것을 투명화시키기 때문에, 글자에는 투명도가 적용되지 않게 하려면 background-color를 rgba로 사용한다.*/
background-color: rgba(0, 0, 0, 0.5); /*투명도 0.5*/
margin-left: 10px;
}
.mouse-animation li a {
color: #ffffff;
font-size: 20px;
}
★ rgba로 변환시켜주는 사이트
http://hex2rgba.devoth.com/
4-2) moveBox만들기
어려웠던 점과 해결방안
학습소감
강의 시간이 평소보다 1시간 정도 더 많기는 했지만, 레이아웃 배치를 배울때 보단 직관적이어서 헷갈리진 않았다.
지금까지 배운것 중 최고 난이도가 레이아웃이었던 것 같다...ㅎ
