CSS로 만들 수 있는 다양한 인터렉션을 소개합니다.
대부분의 내용은 CSS3 내용이지만 모바일에서라면 충분히 도움이 될 거라 믿습니다.
혹은 회사의 클라이언트분들이 ‘우리는 IE10 이상부터 공식적으로 지원하겠습니다.’ 혹은 ‘신규 브라우저에서 사용자의 사용성을 더 좋게 만들면 되지’라는 멋진 생각을 가지고 계신다면,
이 아티클의 내용을 잘 활용하실 수 있을 거라 생각합니다.
마우스를 올리는 행위
Element:hover를 사용하여 요소에 마우스를 올렸을 때 특정한 행위를 하도록 할 수 있습니다.
아래와 같은 상황을 쉽게 연출할 수 있습니다.
.example{position:relative}
.example-hover-menu{display:none;position:absolute;left:0;top:0;padding:10px;border:1px solid #666;background:#fff;z-index:1000}
.example-hover-menu ul, .example-hover-menu li{padding:0;margin:0}
.example-hover-menu li{list-style:none}
.example a:hover ~ .example-hover-menu{display:block}
/* 키보드 접근성을 대응합니다 */
.example a:focus ~ .example-hover-menu{display:block}
.example-hover-menu:hover{display:block}
Selector ~ Selector에서 ~는,
해당 요소의 다음 Flow 요소를 찾아줍니다.
즉 여기서 a 요소에 마우스를 올리면, 그 다음 요소인 div요소를 지목하고 있는 것입니다.
이렇게 함으로써 아주 간단하게 마우스를 올렸을 때 메뉴를 만들 수 있습니다.
물론 상황에 따라 (IE를 대응해야 하는 상황이나 마우스를 사용하지 못하는 환경 등) 코드가 바뀔 수는 있겠지만,
CSS만으로도 간단히 쉽게 만들 수 있습니다.
이제 어떤 것들이 가능할까요?
hover 하나만으로도 정말 많은 코드를 제작할 수 있습니다.
이번에는 더 쉬운 예제를 가져와보겠습니다.
평소에 동영상을 보는 걸 좋아해서 어디선가 본듯한 플레이어를 만들어 봤습니다.
어디선가 본 듯한 느낌의 동영상 플레이어
비디오 플레이어 예제
비디오 플레이어 간단한 예제
비디오 플레이어 예제
비디오 플레이어 간단한 예제
.example-video-player{position:relative;overflow:hidden;}
.example-video-player video{width:100%}
.example-video-player-header{position:absolute;left:0;top:0;right:0;padding:15px 0;background:rgba(0,0,0,0.5);transform:translate(0, -100%);transition:1s transform ease;color:#fff;z-index:10}
.example-video-player-header h1{color:#fff}
.example-video-player:hover .example-video-player-header{transform:translate(0, 0)}
코드는 위에서 봤던 바와 같이 매우 심플하고 별 거 없습니다.
하지만 CSS3의 Transition이나 Transform 등을 적절히 활용해서 그럴싸하게 타이틀이 나오는 걸 확인할 수 있습니다.
(개인적으로 이런 느낌의 인터렉션을 매우 선호합니다)
CSS라는 언어 특성 상 분명한 한계가 있을 수 있습니다.
하지만 JavaScript를 사용하지 않고도 간단히 인터렉션을 구현할 수 있다는 것 또한 사실입니다.
이 아티클은 비록 짧고 새로운 내용을 담고있지는 않지만,
여러분들도 단순한 인터렉션이라면 JavaScript가 아닌 CSS로 구현할 수 있지 않은가를 고려하면서 개발하시면 좋겠다라는 취지로 작성하였습니다.
감사합니다.
0개의 댓글