11-19 오이도선사유적공원 공지사항 바로가기 탭 메뉴

 

html 탭 메뉴 마크업 :: Tab을 눌렀을 시 해당 순서대로 포커스가 가게끔 마크업을 하기 위해 ul li 안에 ul li를 넣는 형식으로 html 구성 + 대체 텍스트

 

border 두 줄을 한줄 효과로 보이게  :: margin-right : -1px , margin-bottom: -1px

 

 

 

 

 

:: 웹 표준을 준수하는 방식으로 공지사항 탭 메뉴 마크업 시 ul li에게 스타일을 주면 그 안에 li들 까지 전부 적용이 되는

문제가 발생, 그 안에 ul에게 absolute 로 띄워주고 그 안의 마지막 li들에게는 겹친 스타일을 초기화 시켜주는 방식으로

스타일을 주면 겹치는 문제 해결

 

 

 

 

 

 

메뉴 바로가기 탭 마크업도 마찬가지로 웹 표준 및 접근성 향상을 위해 ul > li > ul > li 형식으로 html 구성.

 

 

 

:: 탭 메뉴 스크립트

 

 

 

 

깃 허브 주소

 

github.com/wonpoem/oido/tree/main/oido6

 

라이브 서버

 

rkqtlr15159.cafe24.com/oido2/