CSS변환(transformation)과 전환(transition), svg

developsy·2022년 5월 21일

기본 개념:

css변환: 요소의 모양을 이동하거나 변경하는 것. 자주 써봤던 :hover 의사 클래스를 사용하여 마우스를 요소 위로 올렸을 때 CSS가 달라지는 것을 생각하면 될 듯하다.

css전환: 초기 상태에서 변환된 상태로 변하는, CSS의 변환 방식을 지정.

CSS 변환

css변환은 transform속성을 사용한다. 이 속성은 요소 자체에 추가하는 것이 아니라 변환을 일으키는 요소의 상태에 추가해야한다. 그러므로

  .card-container {
    background-color: var(--sample-variable);
    width: 350px;
    margin: 50px auto;
    box-shadow: 3px 3px 10px rgb(201, 200, 200);
  }
  
  .card-container:hover{
      transform: scale(1.1);
  }

만들어 놓은 카드 컨텐츠 위에 마우스가 올라갔을 시 카드가 더 커지게 만들기 위해서는 .card-container가 아니라 변환 시의 요소의 상태인 .card-container:hover에

transform: scale(1.1);

을 지정한다. 크기 변화를 위해서 scale함수를 사용했다. 이제 마우스를 요소 위에 올리면 크기가 변한다.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

scale함수를 제외한 다른 함수들의 목록은 mdn을 참고하자.

CSS 전환

css변환 방식을 지정해주는 것이 css전환이다. css변환만 적용하면 마우스를 올리자 마자 요소의 크기가 변화하는데, 이 변환의 방식을 변경해준다.

css변환과 다르게 전환은 전환을 일으키는 요소의 상태가 아니라 요소의 초기 상태에 적용해야하며, 전환이 정의된 요소에 중첩되어 있는 요소에도 적용할 수 있다.

css변환은 transition이라는 단축 속성을 사용한다.

출처 100일 코딩 챌린지 - 2022 Web Development 부트캠프

속성값으로는 순서대로 속성, 지속시간(duration), 타이밍 함수, 지연(delay)이 있다.

속성 값은 전환을 적용하려는 속성을 명시해주면 된다. 위에서는 transform이지만 background-color나 color같은 다른 수많은 속성을 사용 할 수 있다.
지속시간은 정의한 속성의 변화가 얼마나 지속될지를 지정하는 값이다.
타이밍 함수는 전환의 타이밍을 지정하는 값이다. ease나 ease-out등이 있으므로 자세한 값들과 기능은 mdn에서 찾아봐야겠다.
지연은 전환이 시작되기 전의 시간을 정한다. 위에서는 1s로 나와있으므로 특정 변환 이벤트가 발생한 후 1초 뒤에 전환이 일어난다.

  .card-container {
    background-color: var(--sample-variable);
    width: 350px;
    margin: 50px auto;
    box-shadow: 3px 3px 10px rgb(201, 200, 200);
    transition: transform 0.2s ease 0.1s;
  }
  
  .card-container:hover{
      transform: scale(1.1);
  }

.card-container 클래스 선택자에 transition을 정의했다.

transition: transform 0.2s ease 0.1s;

마우스를 저 컨텐츠 위로 올리면 scale 변환이 0.1로의 지연 시간을 가진 후 시작되며, 마우스가 떠나면 변환된 것이 0.2초 동안 지속된 후 사라진다. ease이므로 전환의 처음과 끝이 동일한 타이밍에 일어나게 된다.

주의할 점은 미리 정의해둔 transition 속성 밑에 다른 transition을 추가하면 CSS의 종속적인 성질에 의해 가장 나중에 정의된 transition이 이전의 transition을 덮어쓰게 된다!!!!!!!! 처음 할 때 아무 생각없이 했는데 주의해야겠다.