프로그래밍/CSS

[CSS -9] CSS 다양한 효과

나무늘보Programmer 2024. 3. 29. 11:33

CSS 중급 다양한 효과

변형과 전환

transform 속성

  • 변형이란 요소의 크기나 위치를 바꾸는 것을 뜻함
  • 위치의 요소는 x축과 y축을 기준으로 바뀜
  • 변형을 적용하기 위해서 CSS의 transform 속성을 사용
  • CSS가 지원하는 다양한 변형 관련 함수들은 속성 값으로 지정
함수 설명
trnaslate(x,y) 지정한 크기 만큼 x축, y축 방향으로 이동
scale(x,y) 지정한 크기 만큼 x축, y축으로 확대 및 축소
skew(x,y) 지어한 각도만큼 x축, y축으로 비틀어 왜곡
rotate(deg) 지정한 각도만큼 회전
  • transform 속성을 이용한 변형은 좌표 평면 상에서 각 축의 값을 변경해 이루어지는 비교적 단순한 형태

transition 속성

  • transition 속성을 이용하면 요소에 지정되어 있는 스타일 속성은 완전히 다른 스타일로 변화시킬 수 있음
  • transition은 스타일이 변화할 때의 시간이나 변화 속도 등을 추가로 지정 할 수 있어 다양한 애니메이션 효과를 만들 수 있음
  • transition 속성은 단축 속성
  • 변화를 주고자 하는 하는 속성이나 실행 시간, 실행 방법, 지연시간 등에 대한 정보를 포함할 수 있음
  • transition 하위 속성
    접미사 설명
    -property 변화 대상 속성을 지정
    -duration 변화가 실행될 시간을 지정
    -delay 변화 시작 전 지연 시간을 지정
    -timing-function 변화 실행 시 실행 곡선 방식을 지정
    • transition-timing-funtion의 대표적인 키워드
      함수 설명
      ease 기본값, 점점 속도가 빨라지다가 끝날 때 다시 느려지는 방식
      linear 처음부터 끝까지 같은 속도로 진행
      ease-in 느리게 시작했다가 점점 빨라짐
      ease-out 빠르게 시작했다가 점점 느려짐

애니메이션 효과

  • CSS는 웹 페이지 상 표시되는 콘텐츠과 움직임을 구현할 수 있도록 @keyframes모듈과 animation속성을 지원
  • 애니메이션을 표현하는 여러개의 프레임은 @keyframes모듈을 이용해 정의
  • 백분육을 이용해 프레임을 나누거나, 별도의 키워드로 간단하게 나눌 수도 있음
  • animation은 단축소성
  • animation은 하위 속성들을 함께 지정하면 애니메이션의 실행 시간이나 방식 등을 추가로 정의 가능
    • 하위 속성
      접미사 의미
      -name 적용할 키프레임 이름(가장 중요)
      -duration 애니메이션 지속 시간
      -delay 애니메이션 시작 전 시간
      -timing-function 속도 그래프
      -direction 동작 진행 방향
      -iteration-count 반복 횟수
      -fill-mode 전후 상태 설정
      -play-state 애니메이션 적용 여부