메뉴바 수평만들기

2020/07/31 - [Web/HTML] - Header 메뉴바 구조

Header 메뉴바 구조

 

저번 시간에 만들어 놨던 메뉴를 이제는 수평으로 만들어 보자.

CSS에서 float을 사용하는데 float을 쉽게 말하면 정렬해 주는 것이다.

세로로 되어있는 메뉴를 왼쪽으로 정렬을 시켜주어야 하기에 

요렇게 정렬시켜 주면 

요렇게 나오게 된다.(배경색은 컨테이너의 영역을 눈으로 표시하기 위함)

이렇게 된 이유는 float에 기본적인 설정이 되어 있기 때문인데 이를 해제할 필요가 있다.

해제하기 위해서 선택자를 만들어서 한다. 지금은 그냥 보고 자세한 내용은 추후에..

float 해제 선택자

선택자를 만들었으면 float-left가 들어있는 선택자의 부모에 넣으면 된다. 

menu-item의 부모는 menu이니까 거기다 넣으면 된다.

참고로 클래스입력하는 영역에서 한칸 띄고 또 클래스 이름을 입력하면 두개 다 이름을 가진것으로 적용된다. 

즉 이 부모 클래스는 menu와 clearfix 선택자 둘다인 것이다.

여기까지 했자면 메뉴는 

요렇게 변했을 것이다.

아직까지는 메뉴라 부르기 힘들다. 메뉴 요소들이 서로 붙어져 있으니 서로 떨어 뜨려놓자. menu-item 선택자에서 margin을 사용하면 된다. 단 그냥 margin을 입력하면 상하좌우 전부 공백이 생기니 margin-right를 써서 서로 떨어뜨려놓자.

 

그리고 이제는 컨테이너를 header의 중앙으로 이동시키자.(컨테이너가 뭔지 기억이 안난다면 윗 링크 참조)

콘테이너 선택자에다가 margin: auto;를 넣어주면 된다.

 

로고와 메뉴가 서로 수직이 되어있다. 어디서 많이 보지 않았나?

메뉴가 처음 만들었을 때처럼 수직이 되어 있으니 logo와 menu 선택자에 float:left를 넣고 이것들을 자식으로 가지고 있는 부모인 container-left(전 글에선 초록색에 해당)에 만들어 두었던 clearfix를 적용시켜 주자. 

로고 및 부분을 보면 빈 공간이 보인다. 이 또한 거슬리니 제거해 주자.

.logo img는 logo안에 있는 img에다만 적용을 시키겠다는 의미이다.

즉 logo 바깥에 있는 이미지에는 적용이 안된다.

 

이제 메뉴 요소들을 중간으로 오게 해보자.

여기서 현재 div들의 색상을 다르게 해 현 div들이 어떻게 되 있나 표시를 해 보았다.

헤더: 초록색

콘테이너: 빨간색

콘테이너-왼쪽: 옥색

로고,메뉴: 보라색

메뉴요소:분홍색

 

이 상태에서 padding을 이용하여 메뉴 요소들을 가운데로 오게 해보자.

메뉴 요소 선택자에 padding:8px를 추가하면

위 사진 처럼 되는데 이것을 보면 알 수 있듯이 padding은 해당 영역을 지정해준 px만큼 벌려준다는 것을 알 수 있다.

 

메뉴창 너무 위 아래로 짧아 보이지 않는가?

이때는 header를 건드리는 것 보단 콘테이너를 건드리는게 제일 좋다.

콘테이너 선택자에다가 padding: 20px 0;을 넣어 보자.

padding: 20px 0;은 상하 20px 여백을 만들고 좌우 여백을 만들지 않겠다는 소리다.

 

이제 색을 제거하고 메뉴를 봐 보자.

 

완성!(위에 회색은 상단바임.)

선 추가

하면서 느낀점은 div와 padding, margin등을 정확히 이해를 해야지 수월하다는 것을 깨달았다.

연습하자 연습.