[CSS] 웹 사이트 네비게이션 메뉴 만들기

CSS Navigation Menu

navigation menu는 웹 사이트를 좀 더 편리하게 이용하는 데에 있어 필수적인 요소이다. 간단하게 네비게이션 메뉴를 만들고 색을 입히는 과정까지 해보려고 한다. 일단 html에서 navigation menu는 링크들(<a> 태그)의 리스트(<ul>, <li> 태그)이다.

 

 

그리고 CSS를 통해 <ul> 태그에 list-style-type: none; margin: 0px; padding: 0px; 속성을 주면 기초 작업은 끝난다. list-style-type은 리스트 앞에 나타나d는 총알을 없애주기 위함이고 margin은 다른 요소와의 간격을 주지 않기 위함, padding은 네비게이션 메뉴끼리 붙어있게 하기 위함이다.

 

 

Horizontal Navigation Bar

 

HTML의 CSS코드이다. 네비게이션 메뉴는 CSS에서 inline 방식과 float를 이용하는 방식이 있는데 float를 이용하는 방식으로 만들어봤다. 

 

<ul> 태그안에 위에서 작성한 코드와 추가로 위와 같이 작성해준다. overflow는 ul태그의 padding값을 0으로 했기 때문에 auto나 hidden 값으로 주어야 배경색이 제대로 들어갈 수 있다.

 

<li> 태그에서는 float: left; 를 통해 메뉴들을 왼쪽으로 위치시킨다.

<li> 내에 있는 <a> 태그에서는 메뉴들의 이름을 중앙 정렬시키고, display: block; 라고 작성한다. float를 이용할 때는 블록을 통해 만들기 때문이다. 글자색을 정하고, 메뉴에서 글자와 테두리 사이의 간격을 정한다. text-decoration은 <a>태그를 통해 링크를 만들면 밑에 줄(Home)이 나타나는데 그것을 없애기 위함이다.

 

밑에 있는 코드는 차례대로 active가 아닌 a태그에 마우스가 올라오면 배경색을 바꾸는 것이고 active 클래스에서는 코드대로 글자색과 배경색을 지정한다. 

 

 

Vertical Navigation Bar

세로로 되어있는 네비게이션 메뉴를 생성하는 것도 방법은 거의 비슷하다. 가로와는 다르게 float 설정을 주지 않고, <ul>태그에 원하는 width 값을 설정해주면 된다.