간혹 스크롤 바를 싫어하는 사람들이 있다. 요청할 때 스크롤 할때만 스크롤 바가 나오게 해달라고 요청한다... Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit. ​

버튼을 클릭했을 때 숫자가 애니메이션 효과로 카운터 된다. 버튼100 버튼200 버튼300 0 0 0

똑같은 레이아웃이 겁나게 많을 때 내용만 바뀌게 하려면 ajax로 페이지를 불러오면 좋지만 CMS로 운영되는 사이트일 경우 ajax가 느린 경우가 있다. 그래서 배열에 내용을 넣고 뿌리는 형식으로 작업해봤다. 배열의 객체는 다 똑같아야 한다. 내용이 없으면 빈값으로 넣으면 된다. more aa bb cc

웹접근성을 준수한 모달 레이어 창을 만들어 봤다. 특이점은 모달 레이어 창이 열린 상태에서 포커스 이동을 요소를 추가해서 제어했다. esc 키를 누르면 모달 에이어 창이 닫힌다. 요소를 추가 해서 포커스를 제어 하는 것이 좋은 작동인지는 잘 모르겠다. 아래 참고 사이트를 보고 좀더 보완해야겠다. header modal pop Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dignissimos hic non, vero praesentium asperiores excepturi modi distinctio nostrum voluptates officia et sint, repellendus vitae exercitationem eos ..

tab ui를 접근성을 높이기 위해 wai-aria를 사용하여 만들어 봤다. tab ui에 들어가는 wai-aria 속성은 aria-selected, aria-labelledby, aria-controls, role 이다. tabindex 태그 속성은 잘못 쓰면 독이 된다. 그래서 접근성을 맞춘 모듈을 보면 주로 tabindex 값을 -1, 0, 1 이정도만 쓴다. wai-aria 속성이 모호하고 자세하게 알고 싶다면 명세 사이트에 가서 확인해 보자. 1.1, 1.2 까지 나왔다. 사용성을 보장하는 모듈이 어려운 이유는 키보드 컨트롤 까지 되어야 하기 때문에 어렵다. 그렇기 때문에 아래 예제 만드는데 시간이 꽤 들었다. 극히 주관적인 실력으로 만들었다. 키보드 컨트롤을 하다보면 약간 생소할 것이다. 탭키..

eq(), index() 메서드를 이용해서 tab ui를 만들어 보자. index() 메서드는 선택자의 순번을 알 수 있다. eq() 메서드는 번호에 해당하는 요소를 가져올 수 있다. eq(), index() 메서드를 사용해서 만들면 tab list와 tab panel 속성 값을 맞출 필요 없다. 탭1 탭2 탭3 탭4 tab1Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo ut tempore eveniet aliquam sapiente at provident labore sit ipsa, dolores deleniti soluta nulla maxime corrupti fuga eos adipisci voluptas itaque! ..