CSS를 사용하여 Navbar 중앙에 배치
이 기사에서는 웹 사이트의 필수 구성 요소인 탐색 모음의 다양한 위치를 살펴봅니다. 또한 그 목적과 다양한 정렬 설정에 대해서도 알아봅니다.
HTML의 탐색 모음
GUI에는 사용자의 정보 액세스를 용이하게 하는 내비게이션 시스템 또는 막대가 포함되어 있습니다. 웹 페이지의 사용자 인터페이스(UI) 구성 요소에는 다른 웹 사이트 섹션에 대한 링크가 포함되어 있으며 내비게이션 바 또는 내비게이션 바라고 합니다.
내비게이션 바는 페이지 상단에 수평 링크 목록으로 표시되는 경우가 많습니다. 헤더 위나 아래에 위치할 수 있지만 항상 페이지의 기본 콘텐츠 앞에 와야 합니다.
웹사이트 탐색은 사용하기 쉬워야 합니다. 방문자가 모든 섹션에 빠르게 액세스할 수 있기 때문에 웹 사이트에 상당한 영향을 미칩니다.
웹 사이트의 탐색 모음에는 두 가지 스타일이 있을 수 있습니다.
- 수평 내비게이션 바
- 수직 내비게이션 바
HTML 및 CSS를 사용하여 탐색 모음 만들기
먼저 HTML 구성 요소를 사용하여 내비게이션 바를 만드는 방법을 살펴보겠습니다. 내비게이션 바는 다양한 링크의 목록일 뿐이므로 목록 요소(예: <ul> 및 <li>)를 사용하여 내비게이션 바를 생성합니다.
목록의 모든 항목은 다른 웹 사이트 페이지에 대한 링크입니다. 따라서 다음과 같이 목록이 생성됩니다.
예제 코드:
<div>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="admission.php">Admissions</a></li>
</ul>
</div>
li::marker {
content: '';
}
간단한 <ul> 요소이므로 navbar로 작동하게 하려면 다른 CSS 속성을 적용해야 합니다.
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding: 9px;
background-color: dark blue;
}
</style>
li::marker {
content: '';
}
<div>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="admission.php">Admissions</a></li>
</ul>
</div>
이 예에서 서로 다른 CSS 속성은 서로 다른 목적을 전달합니다.
list-style-type은none으로 설정되어 탐색 표시줄에서 글머리 기호를 제거합니다.margin및padding은 기본적으로 브라우저에서 여백을 제거하기 위해 0으로 설정됩니다.overflow속성은hidden값으로 설정되어li요소가 목록 외부로 이동하는 것을 제한합니다.float는left값으로 설정되어 수평 방향으로 navbar를 생성합니다.<li>항목의 경우display: block은 전체 블록을 클릭할 수 있도록 블록 위치에 하이퍼링크를 만드는 데 사용됩니다.
배경색 및 텍스트 색상과 같이 이 탐색 모음에 다양한 스타일과 형식을 적용할 수 있습니다.
CSS를 사용하여 내비게이션 바를 가운데 정렬
탐색 모음을 페이지 중앙에 정렬하기 위해 두 가지 속성을 추가할 수 있습니다. 하나는 div 요소에, 다른 하나는 <ul> 요소에 다음과 같이 추가할 수 있습니다.
div{
text-align: center;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
<div>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="admission.php">Admissions</a></li>
</ul>
</div>
div를 만들어 텍스트를 중앙에 정렬한 다음 ul 요소를 만들어 inline-block을 표시했습니다. 이렇게 하면 요소 목록이 페이지 중앙으로 이동합니다.
따라서 두 개의 속성만 할당하여 페이지 중앙에 내비게이션 바를 만든 것을 볼 수 있습니다. 디자인 요구 사항에 따라 탐색 모음을 꾸밀 수 있는 여러 속성을 적용할 수도 있습니다.