Day 27

퀴즈 피드백

• 상자를 이동시키는 법

1. position relative를 이용해서 left를 0에서 원하는 위치까지
   (positon을 relative로 놓으면 좌표 속성 사용 가능한데 어디서부터 시작할건지 시작값을 명시를 해줘야 함)
2. margin-left 속성을 이용해서 원하는만큼 띄우기

• 두 상자를 나란히 놓는 법

1. position을 이용
2. inline-block을 이용 -> 요소와 요소 사이의 엔터 때문에 붙지 않고 공간이 생길 수 있음

1. position을 이용
<div class="container">
        <div class="box red"></div>
        <div class="box blue"></div>
        <div class="box black"></div>
        <div class="box green"></div>
        <div class="box orange"></div>
    </div>


2. 요소 사이의 엔터를 넣지않고 작성한 후에 inline-block 속성을 이용해서 붙이기
<div class="container">
        <div class="box red"></div>
        <div class="box blue"></div>
        <div class="box black"></div>
        <div class="box green"></div><div class="box orange"></div>
    </div>

---

keyframe

1. 세분화 하고싶은만큼 n개로 나누어서 표현
@keyframes <키 프레임명> {
	0% {/* css 코드 */}
    n% {/* css 코드 */}
	100% {/* css 코드 */}
}

2. 시작과 끝만 있을 때
@keyframes <키 프레임명> {
	from {/* css 코드 */}
    to {/* css 코드 */}
}

animation

animation: name duration timing-function delay iteration-count direction fill-mode;

• name

• duration : 지속 시간

• timing-function : linear, ease…

• iteration-count : 몇 번 반복할건지 (숫자 or infinite)

• animation-play-state : paused(멈춤) / running(default)

• direction

  구분	진행방향
  normal	앞 -> 뒤
  reverse	뒤 -> 앞
  alternate	앞 -> 뒤 -> 앞 -> 뒤...
  alternate-reverse	뒤 -> 앞 -> 뒤 -> 앞...

• fillmode

  구분	시작 시점 스타일	종료 시점 스타일
  none	X	실행 전 스타일
  forwards	X	실행 후 스타일
  backwards	O	실행 전 스타일
  both	O	실행 후 스타일

• 애니메이션 동시에 쓰려면 한줄로 작성하면 됨
  ex. 배경색도 바꾸면서 오른쪽으로 이동하는 애니메이션 둘다 적용

.goRight {
       animation-name: bgChange, goToRight;
}

transform 속성

• 요소에 특정 변형 효과를 지정
• 여러 속성을 한번에 사용하려면 한줄로 쓰면 됨

transform: translate(80px, 80px) scale(1.2);

• 2차원 좌표 이동

1. translate : x 혹은 y값만큼 이동

• translate(x,y)
• translateX(x)
• translateY(y)

2. scale : x 혹은 y값만큼 확대 혹은 축소

• scale(x,y)
• scaleX(x)
• scaleY(y)

3. skew : x 혹은 y값만큼 기울이기

• skew(xdeg,ydeg)
• skewX(xdeg)
• skewY(ydeg)

4. rotate : x값만큼 회전

• rotate(xdeg)

transform-origin : 변형 효과의 기준점

• x축 위치, y축 위치 or 키워드 (top, left, bottom, right)
• 기본값이 center center

+++ 어떤 액션 이후에 원래 상태로 돌아오게 하려면 애니메이션이 infinite가 아닌 이상 transition으로 만드는 것이 낫다(ex. 마우스 호버에 액션, 이후 원상복귀)