Navgation bar(내비게이션 바)

Nav bar(이하 내비게이션 바) 디자인은 CSS 레이아웃에서 중요한 역할을 한다. 내비게이션 바를 디자인할 때 크게 가로와 세로 두 가지 경우로 나눌 수 있다. 코드를 통해서 어떻게 가로와 세로로 디자인하는 지를 살펴보고, 그때 각 프로퍼티가 어떠한 역할을 하는지 알아보자.

 

   

가로로 디자인할 때(horizontal)

---

See the Pen qBEYQrj by Catnap421 (@catnap421) on CodePen.

 

내비게이션 바_가로 디자인

 

Example explained:
float: left; - use float to get block elements to slide next to each other
display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify padding (and height, width, margins, etc. if you want)
padding: 8px; - Since block elements take up the full width available, they cannot float next to each other. Therefore, specify some padding to make them look good
background-color: #dddddd; - Add a gray background-color to each a element
Tip: Add the background-color to <ul> instead of each <a> element if you want a full-width background color:

[출처] W3S School_CSS_Navbar

float 프로퍼티를 사용하여 왼쪽으로 정렬시킨다. float를 사용하지 않으면 li 태그는 기본적으로 display가 block이기 때문에 한 행에 하나의 요소만 갖게 된다. float 프로퍼티를 이용하여 모든 li 요소를 한 행에 정렬한다.

 

※ display: inline-block;으로 설정해도 똑같은 효과를 가지게 된다. 두 개의 차이에 대한 건 display와 float의 차이에서 다루었다.

 

a 태그 요소에 display: block 처리를 해줌으로써 기본적으로 display가 inline인 a 태그에 margin이나 width, padding 등의 요소를 적용시킬 수 있도록 한다.

 

 

세로로 디자인할 때(vertical)

---

See the Pen OJPZazd by Catnap421 (@catnap421) on CodePen.

 

내비게이션 바_세로 디자인 (좌: block, 우: inline-block)

 

세로로 디자인할 때는 가로로 디자인할 때와 달리 float 프로퍼티를 사용하지 않는다. 이유는 한 행에 하나의 요소만 오도록 처리해야 하기 때문이다. 여기서 주의할 점은 a태그에 display를 block으로 처리해야 한다는 점이다. 가로로 디자인 할 때는 inline-block으로 처리해도 상관이 없었지만, 세로로 할 때는 block으로 처리해야 각 a 태그의 너비가 동일하게 표현된다(우측 그림 참고).

 

Reference

---

https://www.w3schools.com/css/css_navbar.asp

CSS Navigation Bar