11-20 오이도선사유적공원 탭 메뉴 반응형 헤더 고정

 

 

:: 스크롤 했을 시 헤더메뉴가 상단에 고정

 

 

 

:: relative 였던 header의 position을 fixed로 변경하면 구조가 깨지는 문제

  기타 밑으로 스크롤 했을 시 헤더에 on 클래스가 2번 사라지는 문제

 

 

fixed로 바꾸고 나서 영역을 다시 잡아줌으로 해결

 

 

:: 클래스를 하나로 공유하는 것이 아니라 2개 따로 만들어줘서 스크립트마다 다르게 적용하는 방식으로 변경

 

 

 

z-index 값 조정

 

 

그림자 효과 추가

 

 

 

:: 반응형 재작업

 

 

:: 메뉴 바로가기 css 구조 변경 ( 반응형 )

 

li의 패딩값을 없애주고, height 값과 line-height 값으로 수직을 맞춰줌, 각 li width값 50%로 변경.

li의 ul width 값 삭제 width 100%로 변경. height 값은 나중에 따로 수정. ( 완성 후 )

각 wrap div 박스 width 100% 주고 양쪽 패딩 재정렬

 

 

 

 

:: 해상도 768px 일 때 각 컨텐츠 float 해제, width 100%

 

 

 

 

 

깃 허브 주소

 

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

 

 

라이브 서버

 

rkqtlr15159.cafe24.com/oido2/