html에 반항심을 넣어주는 css, transform

지난번에 살아 움직여 죽어가는 <marquee> 태그에 대해 이야기한 적이 있다.

그럼 정녕 html 태그는 구조만 형성하고 움직이면 안 되는 존재들인가? 그로 인해 플래시의 등장에 한방에 나자빠지더라도?

물론 그들에게는 자바스크립트라는 강력한 동료가 있지만 어디까지나 이들은 겉돌기식으로 도와주고 직접적으로 이들에게 동적인 움직임을 주는 것이 css. 그 中 오늘은 transform에 대해 언급하도록 하겠다.

 

글자나 그림 등을 건드리면 옆으로 움직이거나 갑자기 커지며 형태를 변경하는 것이 transformer이다.

트랜스폼의 기능을 연상하기 위해서는 쉽게 

트랜스포머를 생각하면 된다.

 

예제로는,

출처 : https://opentutorials.org/course/2418/13684

그럼 이제 어떻게 적용하는지 알아볼까?

간단하다.

.scale {
  transition: all 0.3s ease-in-out;
}
.scale:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
}

이렇게 쓰면 된다. 어떤 분이 올려 놓은 거 응용해서 작성해 봤는데, .scale안에 불필요한 것들은 다 삭제했다.

• transition은 애니메이션 속도를 결정하는 것이고.
• tranform의 여러 속성 中 scale은 이미지나 글자를 확대 또는 축소하는 역할을 한다.
• 밑에 자지부리하게 웹킷들을 나열한 것은 다른 브라우저에서 지원이 되도록 작성한 것으로 추측된다.
• hover는 마우스가 위에 올라가 있을 때 하는 행동들을 넣는 곳이다. 쉽게 html의 onmouseover를 생각하면 편하다.

트랜스폼의 여러가지 속성은 위의 예제에서 찾아볼 수 있으니 참고하면 되고, 이 예제의 결괏값은 현재 홈페이지의 이미지 위에 마우스를 올려보면 알 수 있다. 모바일에서는 오른쪽에 있는 오로치마루 옆의 글자들을 눌러보면 알 수 있다.

 

요즘 홈페이지들이 하나의 스토리처럼 스크롤을 내릴 때 마다 움직여 싸서 필자도 생동감 있게 전체 이미지 태그 style (css)에 적용해 보았다.

그저 바로 위의 코드에서 .scale을 img로 바꾸면 된다.

img{
  transition: all 0.3s ease-in-out;
}
img:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
}

그럼 전체 이미지에 해당 반항심을 심어 줄 수 있다.

한번 이 홈페이지에서 확인 해 보라.

 

이번에도 포항지진 청와대 사인을 청탁하고 싶지만, 얼마전에 20만명을 달성 해 버려서 더 이상 그럴 필요는 없을 것 같다. 그 동안 많은 성원에 감사드린다. 하긴 내 홈피만 해도 하루에 천단위는 왔다갔다하니 당연한 결과인가?

그래도 오는 21일까지 청원배너는 달아 놓도록 하겠다.