CSS Navigation Bar

Navigation Bar

네비게이션 바를 능숙하게 사용하는 것은 모든 웹사이트에서 매우 중요합니다.

CSS를 사용하면 지루한 HTML 메뉴 대신 아름다운 탐색 모음으로 변신할 수 있습니다.

Navigation Bar = List of Links

표준 HTML 기반으로서 네비게이션 바는 필수입니다.

이 예에서는 표준 HTML 목록 네비게이션 바를 구축하겠습니다.

navbar는 기본적으로 연결된 목록이므로 <ul> 및 <li> 요소를 사용하는 것이 완벽합니다.

예

  <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>注意:我们用 href="#"作为测试连接.用在一个真正的web站点的url。</p>

</body>
</html>

이제 목록에서 여백과 패딩을 제거해 보겠습니다.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

분석 예:

으로 제거하세요. 위 예제의 코드는 수직 및 수평 탐색 모음에 사용되는 표준 코드입니다.

세로 탐색 모음

위 코드에서 세로 탐색 모음을 만들려면 <a> 요소의 스타일만 필요합니다.

display:block - 블록 요소에 대한 링크를 표시하여 전체 링크 영역(텍스트뿐만 아니라)을 클릭할 수 있게 만들고 너비를 지정할 수 있도록 합니다.

width:60px - 블록 요소는 기본적으로 최대 너비를 갖습니다. 우리는 너비를 60픽셀로 지정하려고 합니다.

참고:

세로 탐색 모음에서

요소의 너비를 지정해야 합니다.

수평 탐색 모음을 만드는 방법에는 두 가지가 있습니다. 목록 항목에는

inline 또는 float을 사용하세요.

두 가지 방법 모두 괜찮지만 링크의 크기를 동일하게 하려면 float 방법을 사용해야 합니다.

인라인 목록 항목

가로 탐색 모음을 만드는 방법 중 하나는 요소를 지정하는 것입니다. 위 코드는 표준 인라인입니다.

예

        <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
a
{
	display:block;
	width:60px;
	background-color:#dddddd;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>

예제 분석:

display:inline; - 기본적으로

요소는 블록 요소입니다. 여기서는 각 목록 항목 앞뒤에 개행 문자를 제거하여 한 줄을 표시합니다.

부동 목록 항목

위의 예에서 링크의 너비는 다릅니다.

모든 링크의 너비가 같도록 하려면 <li> 요소를 띄우고 <a> 요소의 너비를 지정하세요.

예

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
li
{
display:inline;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

분석 예:

float:left - 서로 옆에 있는 부동 블록 요소를 사용하여 슬라이드합니다.
display:block - 블록 요소의 링크를 표시하여 전체를 클릭 가능한 링크 영역(텍스트뿐만 아니라)으로 만들어 지정을 허용합니다. width
width:60px - 블록 요소는 기본적으로 최대 너비입니다. 너비를 60픽셀로 지정하려고 합니다