모각코 -css(3)

조민솔·2022년 7월 30일

모각코

목록 보기
8/12
post-thumbnail

11.트랜지션과 애니메이션

11-1 transform

css에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성해야한다.

  • 2차원 변형 좌우/위아래
  • 3차원 변형 좌우/위아래/앞뒤

웹 요소를 이동시키는 translate()함수

transform:translate()

#movex:hover {
transform: translateX(50px); / x축으로(가로) 50px 이동 /
}
#movey:hover {
transform: translateY(20px); / y축으로(세로) 20px 이동 /
}
#movexy:hover {
transform: translate3d(10px, 20px, 10px); / x축으로(가로) 10px, y축으로(세로) 20px 이동 , z축으로(가로) 10px/

요소를 확대 축소하는scale() 함수

()안에 값이 1보다 크면 확대 작으면 축소

t#scalex:hover{
transform: scaleX(2); / x축으로(가로) 2배 확대 /
}
#scaley:hover{
transform: scaleY(1.5); / y축으로(세로) 1.5배 확대 /
}
#scale:hover{
transform: scale(0.7); / x, y축으로(가로, 세로) 0.7배 확대 -축소/
}

요소를 회전시키는 rotate() 함수

1래디안=180/π, 회전 각도가 양수면 오른쪽 음수면 왼쪽회전

2차원 rotate(각도)

transform: rotate(40deg);
시계 방향(오른쪽)으로 40도 회전
transform: rotate(-40deg);
/ 시계 반대 방향(왼쪽)으로 40도 회전 /

3차원 rotate

perspective으로 원근감을 추가하면 더욱 입체적이다.
perspective속성은 3차원 변형에서 사용한다.
값이 클수록 사용자에서 멀어진다.
perspective은 변형하는 요소가 아니라 변형하는 요소의 부모요소에 정의해야한다.

	<div class="origin" id="pers">
			<div class="rotatex">
				<img src="images/sunset.jpg" alt="">
			</div>
   </div>  
   
      transform: rotateX(50deg);  /* x축으로 50도 회전 */ 
      }
      #pers {
        perspective:300px;  /* 원근감 추가 */    
      }

#rotatex:hover {
transform: rotateX(55deg); / x축으로 55도 회전 /
}
#rotatey:hover {
transform: rotateY(55deg); / y축으로 55도 회전 /
}
#rotatez:hover {
transform: rotateZ(55deg); / z축으로 55도 회전 /
}
#rotatexyz:hover {
transform: rotate3d(2.5, 1.2, -1.5, 55deg); / x,y,z축으로 55도 회전 /
}

요소를 비틀어 왜곡하는 skew() 함수

#skewx:hover {
transform: skewX(30deg); / x축 기준으로 30도 비틀기 /
}
#skewy:hover {
transform: skewY(15deg); / y축 기준으로 15도 비틀기 /
}
#skewxy:hover {
transform: skew(-25deg, -15deg); / x축 기준으로 -25도, y축 기준으로 -15도 비틀기 /
}

11-2 트랜지션

트랜지션이란 웹요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것 처럼 스타일 속성이 바뀌는 것을 말한다.

이동,회전,왜곡 등 단순한 변형과 달리 트랜지션은 스타일이 바뀌는 시간을 조절하여 자바스크립트를 사용하지 않고도 애니메이션 효과를 낼 수 있다.

transition 아래 네가지 한번에 지정

transition: 2s ease-in;
대상: all, 시간:2초, 함수:ease-in

1) transition-property:

트랜지션의 적용 대상 지정

  • all :기본
  • none : 트랜지션을 하는 동안 아무 속성도 변하지 않음
  • 속성이름 : width 배경색등 쉼표로 구분해 나열

2) transition-duration:

트랜지션 실행시간 지정

transition-duration: 2s 1s

3) transition-timing-function:

트랜지션의 속도 곡선을 지정
트랜지션의 효과의 시작,중간,끝 에서 속도를 지정해 전체 속도 곡선을 만들 수 있다.

  • ease 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝낸다. (기본값)
  • linear 시작부터 끝까지 똑같은 속도록 진행한다.
  • ease-in 느리게 시작한다.
  • ease-out 느리게 끝낸다.
  • ease-in-out 느리게 시작하고 느리게 끝낸다.
  • cubic-bezier(n, n, n, n) 베지에 함수를 정의해서 사용한다. 이때 n값은 0~1 사이만 사용할 수 있다.

4) transition-delay:

트랜지션의 효과를 언제 시작할 것인지, 사용자가 지정한 시간 만큼 기다렸다가 실행 (s) (ms) 기본 값은 0

11-3 애니메이션

애니메이션 속성은 특정지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 한다.
키프레임은 @keyframes 속성으로 정의하고 animation 속성과 스 하위 속성을 이용해서 애니메이션 실행시간이나 반복 여부 등을 지정

animation 속성 한번에 지정

animation-duration은 반드시 지정

animation: animation-name|animation-duration|animation-timing-function|animation-delay|animation-iteration-count|animation-direction

animation: rotate 1.5s infinite, background 1.5s infinite alternate;

애니메이션 2개 한꺼번에 지정

<style>
    .box {
      width: 100px;
      height: 100px;
      margin: 60px auto;      
      animation: rotate 1.5s infinite, background 1.5s infinite alternate;
    }

    @keyframes rotate {  /* 0도 -> x축 -180도 회전 -> y축 -180도 회전 */
      from { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
      50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
      to { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
    }

    @keyframes background {  /* 배경색 빨강 -> 초록 -> 파랑 */
      from { background-color: red; }
      50% { background-color: green }
      to { background-color: blue; }
    }
  </style>

animation-name

@keyframes로 설정해 놓은 중간 상태를 지정한다.

방법: 이름을 이용해 애니메이션 구분

#box1 {
			background-color: #4cff00;
			border: 1px solid transparent;
			animation-name: shape;  /* 애니메이션 지정 */ 
			animation-duration: 3s;  /* 애니메이션 실행 시간 */
		} <hr>
@keyframes shape { /* shape 애니메이션 정의 */
			 from {
				border: 1px solid transparent;  /* 1px짜리 투명한 테두리 */
			}
			to {
				border: 1px solid #000;  /* 검정색 테두리 */
				border-radius: 50%;  /* 테두리를 둥글게 */
			}
		}
       ```

animation-duration

애니메이션의 실행 시간 지정

animation-direction

애니메이션의 방향을 지정
애니메이션은 기본적으로 @keyframes에서 정의한 from to 순서로 진행되는데 animation-direction 속성을 사용해서 진행 방향을 바꿀 수 있다.

  • normal 기본값
  • reverse
  • alternate 홀수 normal, 짝수 reverse
  • alternate-reverse

animation-iteration-count

반복 횟수 지정

  • 숫자
  • infinite

animation-timing-function

애니메이션의 속도 곡선을 지정
transition-timing-function 속성값과 같음

반응형 웹과 미디어 쿼리

12-1 반응형 웹 알아보기

뷰포트: 실제 내용이 표시되는 영역

<meta name="viewport" content="width=device-width, initial-scale=1">

  • 뷰포트 단위

    vw(veiwport width): 1vw는 뷰포트 너비 1%와 같다.
    뷰포트 넓이가 100px일 경우 1vw=10px
    vh(veiwport height):1vh는 부포트 높이 1%와 같다.
    vmin(veiwport minimum): 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같다.
    vmax(veiwport maximun): 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같다.

profile
조민솔
이전 포스트

모각코 -js(2)

다음 포스트

모각코 -css(4)

0개의 댓글