CSS Interaction

Posted by in Research

CSS로 만들 수 있는 다양한 인터렉션을 소개합니다.
대부분의 내용은 CSS3 내용이지만 모바일에서라면 충분히 도움이 될 거라 믿습니다.

혹은 회사의 클라이언트분들이 ‘우리는 IE10 이상부터 공식적으로 지원하겠습니다.’ 혹은 ‘신규 브라우저에서 사용자의 사용성을 더 좋게 만들면 되지’라는 멋진 생각을 가지고 계신다면,
이 아티클의 내용을 잘 활용하실 수 있을 거라 생각합니다.

마우스를 올리는 행위

Element:hover를 사용하여 요소에 마우스를 올렸을 때 특정한 행위를 하도록 할 수 있습니다.
아래와 같은 상황을 쉽게 연출할 수 있습니다.

마우스를 올려보세요

  • 마우스를 올리면 나오는 메뉴
  • 마우스를 올리면 나오는 메뉴
  • 마우스를 올리면 나오는 메뉴
  • 마우스를 올리면 나오는 메뉴
  • 마우스를 올리면 나오는 메뉴
  • 마우스를 올리면 나오는 메뉴
  • 마우스를 올리면 나오는 메뉴
  • 마우스를 올리면 나오는 메뉴
  • 마우스를 올리면 나오는 메뉴
  • 마우스를 올리면 나오는 메뉴
  • 마우스를 올리면 나오는 메뉴

Selector ~ Selector에서 ~는,
해당 요소의 다음 Flow 요소를 찾아줍니다.

즉 여기서 a 요소에 마우스를 올리면, 그 다음 요소인 div요소를 지목하고 있는 것입니다.
이렇게 함으로써 아주 간단하게 마우스를 올렸을 때 메뉴를 만들 수 있습니다.

물론 상황에 따라 (IE를 대응해야 하는 상황이나 마우스를 사용하지 못하는 환경 등) 코드가 바뀔 수는 있겠지만,
CSS만으로도 간단히 쉽게 만들 수 있습니다.

이제 어떤 것들이 가능할까요?
hover 하나만으로도 정말 많은 코드를 제작할 수 있습니다.

이번에는 더 쉬운 예제를 가져와보겠습니다.
평소에 동영상을 보는 걸 좋아해서 어디선가 본듯한 플레이어를 만들어 봤습니다.

어디선가 본 듯한 느낌의 동영상 플레이어

비디오 플레이어 예제

비디오 플레이어 간단한 예제

코드는 위에서 봤던 바와 같이 매우 심플하고 별 거 없습니다.
하지만 CSS3의 Transition이나 Transform 등을 적절히 활용해서 그럴싸하게 타이틀이 나오는 걸 확인할 수 있습니다.
(개인적으로 이런 느낌의 인터렉션을 매우 선호합니다)

CSS라는 언어 특성 상 분명한 한계가 있을 수 있습니다.
하지만 JavaScript를 사용하지 않고도 간단히 인터렉션을 구현할 수 있다는 것 또한 사실입니다.

이 아티클은 비록 짧고 새로운 내용을 담고있지는 않지만,
여러분들도 단순한 인터렉션이라면 JavaScript가 아닌 CSS로 구현할 수 있지 않은가를 고려하면서 개발하시면 좋겠다라는 취지로 작성하였습니다.

감사합니다.