CSS의 transition을 이용한 링크 색상의 부드러운 전환

그림1

지금 제 블로그에서 탭 메뉴에 마우스 커서를 올려보시면, 검은색에서 청색으로의 색상 전환이나 흰색 화살표의 움직임이 마우스를 올리자마자 즉각적으로 이루어지는 것이 아니라 (비록 짧은 시간이긴 하지만) 점진적으로 이루어지는 것을 보실 수 있습니다.

이는 CSS의 transition이라는 속성을 이용했기 때문인데요. CSS의 transition을 이용하면 모양이나 색상의 변화를 시간을 두고, 마치 애니메이션처럼 부드럽게 할 수 있습니다.

이 블로그는 제가 여러가지 코드들을 배우고, 또 테스트 해보는 공간이기도 하므로, 저 탭 메뉴가 1년 뒤에도 그대로 있으리라는 보장이 없습니다. 훗날 템플릿이 바뀐 상태에서 이 글을 보는 분들을 위해 예가 될 수 있는 다른 페이지를 링크해두겠습니다.

transition 적용의 예 :
http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
http://everhooddesign.com/node/39
http://css3.bradshawenterprises.com/transitions/

그림2

블로그나 웹사이트에서 색상 전환을 가장 쉽게 접하는 경로 중 하나가 바로 링크 위에 마우스 커서를 올리는 경우인데요. 아래의 코드는 transition 속성을 이용하여 블로거에서 텍스트 링크에 마우스커서를 올렸을 때, 색상 전환을 부드럽게 만들어 줍니다.

 a { color:#2580a2;   
  -moz-transition:color .2s ease;   
  -o-transition:color .2s ease;   
  -ms-transition:color .2s ease;   
  -webkit-transition:color .2s ease;   
  transition:color .2s ease;   
  } a:hover { color:#666666; }  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.

첫번째 줄의 색상(2580a2)은 링크에 마우스를 올리기 전의 색상이고, 마지막 줄의 색상(666666)은 링크에 마우스를 올렸을 때의 색상입니다. 자신이 원하는 색상으로 대체해 줍니다.

CSS의 transition 속성은 잘 공부해두면, 블로거를 동적으로 만드는데 상당히 유용할 것 같습니다. 저는 CSS 마스터까지는 필요 없고, 내가 삽입하는 코드들이 어떤 의미를 가지고 있고 어떻게 변형이나 편집이 가능한가 정도를 이해할 수 있을 정도면 만족합니다. 그런 의미에서 위의 코드들을 조금 뜯어보자면,

앞의 -moz-니 -o-니 하는 단어들은 특정 브라우저에서 transition 속성이 작동하도록 지원해주는 접두사입니다. 여기에 대해서는 CSS 브라우저 지원 접두사들 이라는 글에서 정리를 해두었습니다.

transition:color는 색상의 전환을 지정하는 속성이고, 우리가 재량적으로 설정할 수 있는 부분은 앞에서 언급한 색상, 그리고 '.2s', 'ease'라고 적혀있는 부분입니다.

'.2s'는 변화가 몇초에 걸쳐 일어날지를 설정하는 부분입니다. 10s(10s는 10초), 5.5s, 1.5s, .5s, .25s 등등 자신이 원하는 속도로 설정할 수 있습니다.

'ease'는 변화가 어떤 형식으로 이루어질지를 설정하는 값입니다. ease 외에 linear, ease-in, ease-out, ease-in-out 등으로 대체할 수 있으며, 값에 따라서 처음부터 끝까지 같은 속도로 변할 지 아니면 처음엔 느리게 변하다가 뒤에는 빠르게 변할지 등등으로 설정할 수 있습니다. 이에 대한 설명과 예는 아래의 링크에서 자세히 살펴보시기 바랍니다.

http://htmlcss.kr/?s=transition
http://htmlcss.kr/css3/transition/transition-timing-function/