CSS Navigation Bar

Navigation Bars

Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

 

사용하기 쉬운 네비게이션을 가지는 것은 어느 웹사이트 에서나 가장 중요하다.

css로 지루한 html 메뉴를 좋아 보이는 네비게이션 바로 바꾸는 것이 가능하다.

 

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:

 

네비게이션바는  링크의 리스트와 같다.

네비게이션바는 기준이 되는 html이 필요하다.

우리의 예제안에서 우리는 기준의 html 리스트로 부터 네비게이션 바를 만들것이다.

네비게이션 바는 기본적으로 링크의 리스트이고, <ul> <li> 요소를 사용하는 것은 완벽한 이치이다. make sense!!

 

Now let's remove the bullets and the margins and padding from the list:

 

bullet 마진, 패딩을 리스트로 부터 지우자

 

Example explained:

• list-style-type: none; - Removes the bullets. A navigation bar does not need list markers
• Set margin: 0; and padding: 0; to remove browser default settings

The code in the example above is the standard code used in both vertical, and horizontal navigation bars.

 

예시는 설명한다.

list-style-type:none; 총알을 지운다. 네비게이션 바이는 list maker가 필요 없다.

margin:0; 그리고 padding:0; 으로 설정하라. 브라우저의 기본 설정을 지우기 위해

위의 코느는 수직적 수평적 네비게이션 바의 기본이 되는 코드이다.

 

 

Vertical Navigation Bar

To build a vertical navigation bar, you can style the <a> elements inside the list, in addition to the code above:

수직적인 네비게이션 바를 만들기 위해서 너는 list 안에 <a> 요소를 추가하라.

 

Example explained:

• display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want)
• width: 60px; - Block elements take up the full width available by default. We want to specify a 60 pixels width

You can also set the width of <ul>, and remove the width of <a>, as they will take up the full width available when displayed as block elements. This will produce the same result as our previous example:

 

예시를 설명하자면,

dispaly:block; : block 요소를 링크로 표현하는 것은 전체 링크를 클릭가능한 지역으로 만드는 것이다 (단순히 텍스트만이 아닌)

그리고 이것은 우리에게 넓이를 명시 가능하게 한다.

width: 60px; - block 요소는 기본적으로 이용가능한 전체 넓이를 차지한다. 우리는 구체적으로 60픽셀의 넓이를 명시하기 원한다.

 

너는 또한 <ul>의 넓이를 설정할수 있다. 그리고 <a>의 넓이를 제거할 수 있다. 

그들은 block 요소가 보여질때 이용가능한 전체 넓이를 차지한다.

이것은 이전의 예제와 같은 결과를 만들어 낸다.

 

Vertical Navigation Bar Examples

Create a basic vertical navigation bar with a gray background color and change the background color of the links when the user moves the mouse over them:

 

수직적인 네비게이션 바의 예제

갈색 배경색을 가지고 있고, 사용자가 네비게이션 바에 마우스를 올려놓았을때, 링크의 배경색이 변하는 수직적인 네비게이션 바를 만들어라.

 

Active/Current Navigation Link

Add an "active" class to the current link to let the user know which page he/she is on:

 

사용자가 그 페이지에 있다는 것을 알게 하기 위해 현재의 링크에 "active" 클래스를 추가하라.

 

Center Links & Add Borders

Add text-align:center to <li> or <a> to center the links.

Add the border property to <ul> add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all <li> elements, except for the last one:

 

링크를 센터로 하기 위해 <li> <a>에 text-align:center를 추가하라.

네비게이션바 주변에 테두리를 추가하기 위해 <ul>에 border 속성을 추가하라

만일 너가 네비게이션 안의 테두리를 원한다면,

모든 li 요소안에 border-bottom을 추가하라 마지막 것을 제외하고