MENU
  • css3 스케일 알아보기 - transform: scale()
    프로그래밍/css 2021. 3. 18. 16:10 좋아요 효과!

      오늘은 간단하게 css3의 스케일을 활용해서 마우스를 갖다 댔을 때 해당 요소가 확대되는 scale() 기능에 대해서 알아보도록 하겠습니다.

       

      오늘 알아볼 기능은 저의 블로그 메인화면에도 적용되어 있는 기능이기도 한데요 css3를 활용하면 기존에 script를 활용해야 했던 애니메이션 기능들을 매우 간단하게 구현할 수 있습니다.

       

      이 트랜스폼 트랜지션 속성은 처음 사용할 때에는 이해하는데 어려움이 있지만, 작동하는 최소한의 구조만 이해한다면 이후에는 어려운 부분 없이 더 많은 기능들을 사용해 볼 수 있습니다.

      transform이란?

      스케일은 css3에서 transform 속성 중에 하나입니다. transform을 적용하면 해당 요소를 화면에서 다른 형태로 보여지게 만들 수 있습니다.

      transition란?

      그리고 이러한 변형된 요소의 변경 되기 전 모습과 변경된 후 마지막 모습의 변화 과정을 자연스럽게 애니메이션 시켜주는 것이 transition이라는 속성인데요 설명이 많으면 오히려 더 어려워질 수 있기 때문에 포인트만 짚어서 짧게 예제 소스를 살펴보겠습니다.

      <style>
      .box{width:100px;height:100px;background:gold;transition:all .5s;}
      .box:hover{transform: scale(2)}
      </style>

      위 css코드를 보면 :hover이라는 속성이 들어가 있는데요 box요소에 마우스를 올렸을 때(:hover) 일어나는 속성을 의미합니다.

       

      그리고 box의 width:100px;height:100px;background:gold; 부분은 단순히 형태를 잡아주기 위한 css일 뿐 이번 transform:scale()을 사용하는데 아무런 영향이 없는 css입니다.

       

      그러니 결과적으로 아래의 코드만 있으면 확대기능이 실행된다는 것입니다.

      <style>
      .box{transition:all .5s}
      .box:hover{transform: scale(2)}
      </style> 

      이번 기능을 적용하는 순서는 다음과 같습니다.

       

      1. 효과를 적용할 대상에 transition 속성을 준다.

      2. 대상에 hover를 주든 어떠한 형태의 변화(transform)를 준다.

       

      자 끝입니다.

       

      여기서 transform:scale(2) 의 숫자 2의 의미는 스케일을 2배로 한다는 의미입니다.

       

      그리고 transition:all .5s의 .5s는 0.5초를 의미하며 0.5초 동안 형태의 변화가 이루어진다는 의미입니다.

       

      결과적으로 box에 마우스를 갖다대면 가로세로 100x100의 사각형이 0.5초 동안 200x200 사이즈의 사각형으로 바뀌게되는 것입니다.

       

      위의 css코드를 입력했다면 당연히 box라는 요소가 body에 그려져 있어야 겠죠??

      <body>
      <div class="box"></div>
      </body>

      실습을 해보신 후 추가 다른 transform 속성들도 적용해보시면 재미있(?)을 것 같네요

       

      transform과 transition을 잘 활용하면 script 사용 없이도 동적인 기능을 쉽게 작업할 수 있고 앞으로 css3의 활용은 더더욱 많아질 것이기 때문에 알아두면 상당히 좋다고 할 수 있겠습니다~!

       

      그럼 이만~

      728x90
      반응형
      이 글을 공유하기
      • 페이스북 공유하기
      • 카카오스토리 공유하기
      • 트위터 공유하기
      • 네이버 블로그 공유하기

      댓글

    Copyright ⓒ 황금빛 블로그 All Right Reserved.
    Designed by 황금빛 블로그
    위로 가기 메뉴 열기