[Html5/CSS3] 웹 홈페이지 상단 네비바(header) 만들기

 

완성된 네비바.gif

 

 

네비바는 카테고리 글자에 마우스 호버 시 font-weight를 더 두껍게 주었고,

네비바로 들어갈 수 있는 페이지는

로고(해당 메인화면), 홈 (해당 메인화면), 지역, 테마, 축제, 랜덤 Pick!, 프로필 아이콘으로

다른 페이지로 넘어가는 html은 5개이다. (로고와 홈은 다시 돌아가기 위해 만들었음)

 

 

학원 과제로 만들었는데

React가 아닌 html과 css, javascript로만 개발해야 하는 거라 모든 파일에 상단 네비 헤더와 하단 푸터를 복붙해야했고..

그래서 처음 틀을 잡을 때 제대로 잡아서 수정사항을 절대!! 만들지 않아야 겠다고 다짐하고 시작했다.

다행히 네비바라서(?) 링크 수정 말고 css는 한번에 만들었다..ㅎ

 

 

 

- Html

 

이런 구조로 갔다.

네비바는 ul 태그 안 li로 나열해서 만드는게 보편적..인가..? 무튼 css로 정리해서 만들기 편리하다.

로고와 홈의 링크는 각 페이지마다 다시 path를 설정해주어야 한다. (폴더구조 때문)

 

 

- CSS

 

 

먼저 헤더 네비바를 만들기 전에 전체 웹 페이지에 적용할 기본(공통)적인 CSS 스타일들을 나열했다.

폰트는 구글 폰트를 통해 설치했고 오픈 소스 라이선스라 사용했다. (학습용으로 사용하기 때문에 문제 x)

 

 

 

가장 크게 감싸고 있는 header div로 크기를 미리 설정하고 위치를 고정해두었다. (position:fixed)

padding과 margin 값을 0으로 두어 하위 div에서 위치를 설정하는데 영향받지 않도록 했고,

위치가 가장 앞에 올라와야 하기 때문에 z-index:1000로 두어 다른 div들이 있어도 네비바가 가장 앞에 올 수 있도록 했다.

 

 

.header div 아래 위치하는 ul li태그 카테고리는 다음과 같이 설정해두었다.

.header-ul-left 와 .header-ul-right를 따로 나누어서 왼쪽은 큰 카테고리 5 항목과 로고, 오른쪽은 돋보기 아이콘과 프로필(회원가입)아이콘 항목들을 두었다.

 

 

ul 태그의 justify-content를 space-between으로 설정해 각 li태그마다 같은 간격을 가져갈 수 있도록 했고

나머지 margin과 padding의 값은 페이지를 디자인하면서 바꿔가면서 맞추기..

 

만들면서 위치 설정이나 각 div별 margin padding값들을 알기 어려우면 무조건 border로 선을 설정해서 보면서 만들어야 한다.

그렇게 해야 css가 덜 조잡해진다...