I LOVE EJ

HTML/CSS와 jQuery를 이용하여 비교적 단순하지만 상당히 빈번하게 사용되는 Tab Navigation을 마크업 했습니다. 선으로 처리된 탭, 면으로 처리된 탭, 최근 게시물을 보여주는 목록 아이템 형태의 탭 디자인 입니다. Lined Tab NavigationLined Tab Navigation : 예제를 새 창으로 보기Faced Tab NavigationFaced Tab Navigation : 예제를 새 창으로 보기List Item NavigationList Item Navigation : 예제를 새 창으로 보기Tab Navigation 예제의 특징중첩 목록(ul>li>ul>li)을 이용한 탭 네비게이션 예제.목록의 계층 구조가 논리적으로 마크업 되어 있다.키보드만으로도 접근이 가능하고 키보드..

jQuery 1.3.2 버전에서 존재하던 .focus() 이벤트를 업그레이드 한 것으로 해당 input 요소에 focus가 들어갔을때 와 나왔을때에 이벤트가 발쌩하는 기능입니다. 기본적인 사용법 .focusin( handler(eventObject) ) .focusout( handler(eventObject) ) handler(eventObject)는 이벤트가 발생할 때 마다 수행할 이벤트 오프젝트나 함수를 지정해 주시면됩니다. 예제를 보시면 쉽게 이해할 수 있으실듯 합니다. 예제 : http://coterie.hosting.paran.com/focus/ 예제 소스 [code] [/code]

http://www.campaignmonitor.com/css/

[코딩] 코딩시 유의 및 웹 접근성 연구소 사이트에서 지켜야 했던 사항들꾸준한 html 유효성 검사, css 유효성 검사. (css 핵 No!)outline: 0; 또는 :focus {outline: 0;} 사용 지양.CSS 작성시 위와 같이 속성을 정하면 익스플로러 외에 브라우저에서 키보드 이동시 포커싱이 안 보이는 문제점 발생하므로 사용하지 않는다.시각적으로 콘텐츠를 숨길 경우 모든 장치에서 콘텐츠를 숨라는 의미를 가진 display: none 아닌visibility:hidden;을 이용하자. 숨긴 빈 공간이 생길 경우 이런 방식으로 처리하면 display: none의 시각효과와 같다. visibility:hidden; position:absolute; overflow:hidden; height:0;..

PNG투명 이미지에 animate나 opacity등의 함수를 걸 때 IE8이하의 브라우저에서 이미지 주위에 검은 찌꺼기(?)가 표현되는 현상이 발상한다. 이 때는 아래와 같이 PNG 이미지에 Transparent CSS를 적용해 주고, Opacity의 경우 PNG 이미지를 직접 제어하지 말고, DIV부모 엘리먼트로 감싸 주어 DIV로 Opacity등의 효과를 줌으로 해결할 수 있다. 다만, IE9 이상의 브라우저에서 보여지는 정갈함 까지는 표현하기 힘들다는 점을 명심하자. (이미지에 흰색 Outer Glow를 준 경우, 검정 Outer Glow로 표현된다.) -- PNG이미지에 아래와 같은 CSS를 부여해 준다. Opacity등의 설정을 할 경우, 이미지가 아닌, 부모 엘리먼트에 적용해준다. Opacit..

http://jqueryui.com/effect/#easing http://commadot.com/jquery/easing.php

zeroclipboard 라이브러리 소개에 앞서... 요즘은 크로스 브라우징이 대세다 뭐다 해서 기존 익스플로러(이하 IE) 사용자들이 현재는 크롬, 사파리, 오페라 등의 여러가지 브라우저를 사용하기 시작했다. 그러다보니 우리나라의 80퍼센트를 넘게 지배했던 IE 전용 웹페이지들은 울상에 빠지게 되었다. 이유는 간단하다. IE에서만 돌아가는 소스코드로 작성한 웹페이지 덕택에 크롬 등의 타 브라우저에서는 제대로 동작하지 않는 경우가 부지기수이기 때문이다. 아마 대부분은 자바스크립트(이하 JS)일 것이라 예상해본다. JS는 사용자들의 액션을 받아 그에 대응되는 작업을 처리하고 브라우저에 돌려주는 스크립트언어 중 하나다. 따라서 서버로 데이터를 전송하기 전에 스크립트 언어를 통해 각종 사전작업을 하게 되는데,..

자바스크립트 코드에서 이벤트 핸들러처리가 끝난 후 preventDefault() 와 return false 등의 코드를 본적이 있을 것이다. 간혹 stopPropagation() 호출도 보이는데 이들의 차이점을 알아보자 1) preventDefault vs return false, stopPropagation : jQuery를 사용하지 않은 경우 - stopPropagation 은 사용자 정의 이벤트의 bubbling up 되는 것을 막아준다 + 사용자 정의 이벤트는 개발자가 직접 이벤트 핸들러를 작성할 경우 + 즉, 사용자가 작성한 이벤트 핸들러의 동작을 막아준다 - preventDefault 는 기본 정의 이벤트의 동작을 막아준다 + 앵커 태그와 같은 기본 제공 이벤트 (사이트로 이동하는 것) + 즉..