오이도선사유적공원 메인 홈페이지 반응형 헤더

 

오이도선사유적공원 홈페이지 마크업 ( html + css + jquery + javascript ) 시작.

 

 

 

 

 

 

 

코딩하면서 해결한 오류 + 해결 및 개선 방식 :

 

1. 반응형 작업시, 스크롤이 안생기게 하거나 컨텐츠가 스크롤에 가려 안보이는걸 방지하기 위해

미디어쿼리 해상도 분기점 사이즈마다 width 값을 100퍼센트를 넣어준다.

 

2. 헤더 메뉴 - 서브메뉴 작업 시 백그라운드는 포지션 fixed 로 작업하고 저렇게 각각의 li 마다 패딩값을 다르게

주는 코딩법이 아니라 각 li들 마다 양 padding값은 동일하게 주고 width값만 따로 조절해주는 방식으로 코딩을 해야

추후에 서브메뉴 관리가 용이하다. ( 메뉴를 바뀌게 될 시 )

 

 

 

 

3. css hover 밑줄 애니메이션

 

 

 

 

1920 해상도

 

 

 

 

1920 해상도 : header menu hover ( ul의 li들 마다 width값을 다르게 표현 )

 

 

해상도 1000px

 

 

 

 

 

깃허브 주소 : github.com/wonpoem/oido

 

wonpoem/oido

 

라이브 서버 : rkqtlr15159.cafe24.com/oido2/