tab UI

보호되어 있는 글입니다.

2023.06.21

WAI-ARIA 요소 - tab 컨트롤

웹페이지를 마크업 할 때 의미에 맞는 요소 사용 및 키보드 접근성 구현이 중요하다. 위 내용이 중요한 까닭은 스크린리더 사용자는 포커스 되는 각각의 요소의 이름이나 상태를 통하여 페이지 구조를 파악하고 각 요소에 맞는 키보드 액션을 통해 컨트롤하기 때문이다. WAI-ARIA 접근성 기술이 보편화되기 시작하면서 이러한 중요성은 더 커지게 되었다. 그러나 WAI-ARIA와 HTML요소를 어떻게 적용해야 하는지, 또 이 요소의 키보드 접근성은 어떻게 구현해야 하는지 등에 대한 국내 자료가 부족하다. ARIA를 이용한 tab 컨트롤 구현하기 tab 이란 주메뉴, 하위 메뉴보다는 작은 개념으로, 한 주제에 대해 여러 개의 세부 섹션을 표현하는 방법 중의 하나다. Tab은 3가지의 요소로 나뉜다. Tab list ..

2023.01.24

jQuery tabmenu2

CSS /* CSS Document */ *{margin:0; padding:0} body{margin:20px;} img{border:0; vertical-align:top} ul,ol{list-style:none} body{font-family:"돋움"; font-size:14px; color:#333} a{color: #333; text-decoration: none;} .tabs {width:600px; border:1px solid #ccc;} .tabs .tab_menu{overflow: hidden;} .tabs .tab_menu li{float: left; margin-right: 10px;} .tabs .tab {display:block; width:84px; text-align: cen..

2021.12.14

jQuery tabmenu1

CSS /* CSS Document */ *{margin:0; padding:0} body{margin: 20px;} img{border:0; vertical-align:top} ul,ol{list-style:none} body{font-family:"돋움"; font-size:14px; color:#333333} a{color: #333; text-decoration: none;} .tabs {position:relative; width:600px; border:1px solid #ccc;} .tabs a.tab{position:absolute; display:block; width:84px; text-align:center; font-size: 16px; background: red; color: #..

2021.12.14

jQuery attr() 속성변경

attr() ＊ 태그의 속성 변경 메소드 $('선택자').attr('속성', '값'); ＊ 아래 탭 예제는 구린방법이라 쓰지 않는다 ＊ 아래 탭 예제는 구린방법이라 쓰지 않는다 ＊ 아래 탭 예제는 구린방법이라 쓰지 않는다 서적 내용 컨텐츠 인쇄 내용 컨텐츠 잡지 내용 컨텐츠

2021.12.07