홈페이지의 로고와 메뉴를 만들어보자(1) - navigation bar

일반적으로 p 태그나 div 태그, ul안에서 li 태그를 써도 다 Vertical로 생성이 되게 된다.

물론 그게 필요하면 그냥 그대로 사용을 하면 되지만 나는 Horizontal로 생성을 해야 하는 상황이라

이것저것 다 찾아봤다.

CSS List Horizontal | CSS 리스트 가로 등등 이것저것 검색을 하는 도중에

navigation bar라는 것이 존재한다는 것을 알게 되었다.

이것과 grid를 적절하게 섞는다면 내가 원하는 모습이 어느정도 나오지는 않을까? 라는 생각으로

적용을 시켜보았다.

 

우선 회사 로고가 될만한 이미지를 홈페이지에 넣어주자

나는 로고가 없어서 그냥 그림판에다가 대충 그려서 넣어놨다.

물론 이건 내가 로고의 위치를 옮겨놓은 결과물이고 그냥 넣기만 하면 left = 0 top = 0 으로

붙어서 이미지가 그려지게 된다. 그리고 메뉴를 만들어야 한다.

이런식으로 작성을 해주면 로고 밑에 그냥 Vertical 형식으로 List가 만들어지게 된다.

예를들면 아래 사진과 같이 생성이 된다.

이 로고와 메뉴를 같은 선상에 두기 위해서 여러가지 방법들이 있겠지만

나는 내가 생활코딩에서 배운 grid라는 방법을 사용하고 싶었다.

그래서 이미지와 List를 부모 태그를 새로 만들어줘서 감싸주었다.

그리고 CSS에다가 grid 설정을 해주었다.

이렇게 되면 로고와 Vertical 형식의 리스트가 같은 선상에 있게 된다.

이제 리스트를 Horizontal로 바꾸는 작업을 해주자.

list라는 id값을 가지는 div안에 li라는 태그를 float:left로 왼쪽으로 나열 시켜주었다.

그리고 공백, 밑줄, 가운데 정렬, 폰트색깔 같은 것을 지정해주면 아래와 같은 결과가 나오게 된다.

완벽하게 깔끔하지는 않지만 그래도 기본적인 형태를 만들어내긴 했다.

공부한지 얼마 안된 상태로 만들다보니 생각보다 모르는게 더 많았다.

물론 이것도 코드가 지저분한 것 같기도 하고.. 우선 만든 다음에

아직 안배운 JavaScript나 Php를 이용해서 바꿀 수 있지 않을까..

우선 그냥 들이박아 보기로 생각하고 있다.