CSS 네비게이션 바란 무엇입니까?

CSS에서 탐색 모음은 웹 사이트 디자인의 다양한 선택기 또는 페이지 사용자에게 탐색 링크나 메뉴를 제공하기 위해 인터페이스에 사용되는 탐색 모음이라고도 합니다. 사용자는 웹사이트의 콘텐츠를 시각적 가이드로 사용하여 쉽게 탐색할 수 있습니다.

탐색 모음의 도움으로 웹 페이지의 표시 및 스타일을 개선할 수 있으며 CSS를 사용하여 설명된 디자인, 색상, 글꼴 및 간격도 포함됩니다. CSS 탐색 모음은 CSS 속성과 규칙을 사용하여 개발되고 스타일이 지정되어 특정 모양과 기능을 생성합니다.

CSS 네비게이션 바의 특징

탐색 모음의 몇 가지 특징은 다음과 같습니다.

레이아웃 옵션: CSS에서 탐색 모음은 웹 페이지 측면을 따라 수직으로 위치하거나 상단을 가로질러 수평으로 위치할 수 있습니다. 탐색 링크: 메뉴에는 사이트의 다양한 페이지와 섹션에 대한 링크가 포함되어 있습니다. 이러한 링크에는 버튼, 텍스트 또는 아이콘 스타일이 있는 경우가 많습니다. 드롭다운 메뉴: 드롭다운 메뉴는 탐색 모음에 추가할 수 있는 또 다른 기능입니다. 사용자가 메뉴 항목 위에 마우스를 올리거나 선택하면 추가 링크나 옵션이 표시됩니다. 스타일: CSS를 사용하면 디자이너는 색상, 글꼴, 테두리, 호버 효과 등 탐색 모음의 시각적 요소를 변경할 수 있습니다. 이는 웹사이트의 전반적인 미학과 조화를 이루는 통일되고 시각적으로 매력적인 디자인을 만드는 데 도움이 됩니다. 반응형 디자인: 최신 내비게이션 바는 반응형으로 디자인되는 경우가 많아 다양한 화면 크기와 장치에 맞춰 조정됩니다. 반응형 디자인의 도움으로 데스크탑과 모바일 장치에서 내비게이션이 계속해서 매력적이고 만족스럽도록 보장할 수 있습니다. 상호 작용: CSS의 도움으로 클릭 시 링크 색상이 변경되는 등 탐색 요소에 대화형 효과를 추가하는 데 사용할 수도 있고, 마우스를 가져갈 때 강조 표시 효과를 표시할 수도 있습니다.

CSS 네비게이션 바의 도움으로 우리는 사용자 경험을 향상시키고 방문자가 웹사이트 콘텐츠를 쉽게 탐색할 수 있도록 할 수 있으므로 이는 웹 디자인의 중요한 부분입니다.

예

CSS를 사용하여 가로 탐색 모음을 만드는 방법에 대한 간단한 예를 살펴보겠습니다.

 /* Basic styling for the navigation bar */ .navbar { background-color: #333; /* Background color */ overflow: hidden; /* Clear floats */ } /* Style for navigation bar links */ .navbar a { float: left; /* Float the links to the left */ display: block; /* Display links as blocks */ color: white; /* text color */ text-align: center; /* Center-align the text */ padding: 14px 16px; /* Padding around the links */ text-decoration: none; /* Remove underline from links */ } /* Change color on hover */ .navbar a:hover { background-color: #ddd; /* Background color on hover */ color: black; /* Text color on hover */ } <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#portfolio">Portfolio</a> <a href="#contact">Contact</a>  

산출:

이 예의 가로 탐색 모음에는 '홈', '정보', '서비스', '포트폴리오', '연락처' 등 5개의 링크가 생성됩니다. 기본 CSS 속성을 사용하여 탐색 모음, 링크 및 호버 효과의 스타일을 지정했습니다. 선호하는 디자인을 색상, 글꼴, 패딩 등 스타일에 반영할 수 있습니다.

CSS 네비게이션 바의 한계

CSS 탐색 모음에는 몇 가지 제한 사항이 있으며 그 중 일부는 다음과 같습니다.

제한된 상호작용 복잡성: CSS는 간단한 호버 효과 및 전환을 생성할 수 있지만 JavaScript는 여러 수준이 포함된 중첩된 드롭다운 메뉴와 같은 보다 복잡한 대화형 기능을 구현해야 할 수도 있습니다. 브라우저 간 호환성: 웹 브라우저마다 CSS 규칙을 다르게 해석하여 탐색 모음이 다르게 나타나고 동작할 수 있습니다. 모든 브라우저에서 통일된 디자인을 보장하는 것은 어려울 수 있습니다. 반응형 디자인 과제: 다양한 화면과 디바이스에서 잘 작동하는 네비게이션 바를 만드는 것은 어려울 수 있습니다. 다양한 화면 해상도에 맞게 탐색 모음의 레이아웃을 수정하려면 미디어 쿼리와 추가 CSS 규칙이 필요한 경우가 많습니다. 한정 애니메이션: CSS는 기본 애니메이션을 처리할 수 있지만 부드러운 스크롤과 같은 더 복잡한 애니메이션이나 효과를 생성하려면 JavaScript 또는 CSS 라이브러리가 필요할 수 있습니다. 복잡한 스타일: 매우 독특하고 복잡한 탐색 모음 디자인을 만들려면 정교한 CSS 기술이 필요할 수 있으며 이는 업데이트하기 어려울 수 있습니다. 접근성 문제: 전적으로 CSS로 만들어진 탐색 표시줄은 화면 판독기 및 기타 보조 기술에 대한 지침을 항상 준수하는 것은 아닙니다. 모든 사용자가 내비게이션에 액세스할 수 있도록 하려면 각별한 주의가 필요합니다.

이러한 단점에도 불구하고 웹 디자인에서는 CSS 탐색 모음의 다양성과 광범위한 사용이 지속되고 있습니다. 그러나 보다 정교한 기능과 원활한 사용자 경험을 위해서는 JavaScript 및 기타 기술로 보완해야 할 수도 있습니다.

수평 탐색 표시줄

수평 탐색 모음은 일반적으로 페이지 상단에 있는 수평 링크 목록입니다.

예제를 사용하여 가로 탐색 모음을 만드는 방법을 살펴보겠습니다.

예

이 예에서는 오버플로: 숨김 것을 방지하는 속성 저것 요소가 목록 밖으로 나가는 것을 방지합니다. 디스플레이: 블록 속성은 링크를 블록 요소로 표시하고 전체 링크 영역을 클릭할 수 있도록 만듭니다.

우리는 또한 왼쪽으로 뜨다 블록 요소가 서로 옆으로 미끄러지도록 하기 위해 부동 소수점을 사용하는 속성입니다.

전체 너비 배경색을 원하면 다음을 추가해야 합니다. 배경색 재산

 ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul>  

국경 구분선

다음을 사용하여 탐색 모음의 링크 사이에 테두리를 추가할 수 있습니다. 국경 오른쪽 재산. 다음 예에서는 이를 더 명확하게 설명합니다.

예

 ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul>  

고정 내비게이션 바

페이지를 스크롤하면 고정 탐색 표시줄이 페이지 하단이나 상단에 유지됩니다. 동일한 예를 참조하십시오.

예

 ul { list-style-type: none; position: fixed; width:100%; top:0; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> <h2>Side navigation bar with height: 100%; and position: fixed;</h2> <h3>Scroll the page, and see how the sidenav sticks to the page</h3>