발생일: 2012.01.10 문제: 아이폰이나 아이패드와 같은 터치 디바이스에서는 PC와 다르게 hover(마우스 롤오버) 효과가 적용되지 않는다. '마우스' 개념이 없기 때문이다. 실제로 모바일 웹 페이지를 작성하는 경우, 마크업 단계부터 hover 효과를 고려하지 않는다. 하지만 기존 서비스를 모바일에서도 그대로 제공해야 하는 경우라면, 서비스에 적용된 여러 가지 hover 효과 때문에 사용자가 불편을 겪을 수 있다. 예를 들어, 마우스를 오버했을 때 가이드가 표시되는 버튼을 구현했다면, 터치 디바이스에서는 한 번 클릭 시 마우스 오버 효과가 발생하고, 다시 클릭했을 때 클릭 이벤트가 발생한다. PC에서는 한 번 클릭으로 실행 가능했던 버튼이 터치 디바이스에서는 두 번을 클릭해야 한다. 진행하고 있는..
발생일: 2011.12.30 문제: 엘리먼트에 hover 효과(롤오버)가 적용되어 있는 경우, CSS hover 로 구현된 것인지, mouseover/mouseout 이벤트로 효과를 준 것인지 쉽게 구별할 수 있는 방법이 있을까? 해결책: 마크업 담당자에게 문의하던 과정에서 알게된 방법~ ^^ 별 것 아닌 것 같지만, 요고요고 유용하다.ㅎㅎ 1. 개발자 도구의 엘리먼트 패널에서 대상 엘리먼트를 inspect 한다. 2. 대상 엘리먼트에 마우스 오버/아웃 해본다. 3. 클래스나 스타일의 변경이 직접적으로 보인다면 자바스크립트로 변경한 것. 아닐 경우, CSS에서 :hover 클래스로 호버 효과를 준 것이다. # 기타 참고. - CSS 가상 클래스 우선순위: http://cssdesign.kr/forum/v..