CSS Tab Navigation + List Item Navigation. > HTML,CSS,레이아웃

본문 바로가기

검색취소

CSS Tab Navigation List Item Navigation.

검색 이전 다음 목록

본문

CSS Tab Navigation + List Item Navigation.

본문 건너 뛰기

HTML/CSS와 jQuery를 이용하여 비교적 단순하지만 상당히 빈번하게 사용되는 Tab Navigation을 마크업 했습니다. 선으로 처리된 탭, 면으로 처리된 탭, 최근 게시물을 보여주는 목록 아이템 형태의 탭 디자인 입니다. 

Lined Tab Navigation

Faced Tab Navigation

List Item Navigation

Tab Navigation 예제의 특징

  • 중첩 목록(ul>li>ul>li)을 이용한 탭 네비게이션 예제.
  • 목록의 계층 구조가 논리적으로 마크업 되어 있다.
  • 키보드만으로도 접근이 가능하고 키보드 접근 순서가 논리적으로 처리되어 있다.
  • jQuery 사용.

이 밖에 더 많은 예제들이 OUIF | XEUI 페이지에 링크되어 있습니다.

추천 0

등록된 댓글이 없습니다.

검색취소

HTML,CSS,레이아웃

검색
  • no image
  • CSS : 반응형 웹(Responsive Web)

     CSS : 반응형 웹(Responsive Web)Posted by 서 지수 in 배움터 - 열공on Mar 31st, 2014태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많…

  • no image
  • CSS 글 자간 줄간 설정방법

    CSS 글 자간 줄간 설정방법 글 꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가…

  • #5cf039 헥스 색상 코드
  • #5cf039 헥스 색상 코드

    첨부파일

    #5cf039 정보 반전#a30fc625% 포화도#52ff2a그레이스케일#949494 25% 밝게#94f57e원본#5cf03925% 어둡게#34cf0f lawngreen#7cfc0025% 포화도 저하#6ad94f웹 …

  • CSS 레이아웃... Copy & Paste
  • CSS 레이아웃... Copy & Paste

    첨부파일

    오랜만에 그냥 팁 하나! CSS 레이아웃이 익숙치 않은 나 같은 분을 위한 친절한 사이트.. Copy & Paste를 해도 걱정 없다.Dynamic Drive CSS Layouts via Ajaxian 덤으로 왼쪽 …

  • XHTML+CSS 레이아웃 디자인 예제
  • XHTML CSS 레이아웃 디자인 예제

    첨부파일

    XHTML과 CSS로 레이아웃 디자인을 할 때 많이 쓰이는 레이아웃 디자인 템플릿을 모아둔 싸이트가 있다.http://www.intensivstation.ch/en/templates/일반적으로 사용되는 웬만한 레이아…

  • CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기
  • CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기

    *예전에 작성했던 강좌의 마지막 부분입니다. CSS를 통해 이전 강좌에서 작성한 마크업에 모양새를 입히기 전에 한 번 복습 하는 의미로 참고하면 좋겠네요 float 속성이번 시간에는 css를 통해 레이아우팅을 할 때…

?>