동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
Navigation Bars
사용하기 쉬운 탐색 기능은 모든 웹 사이트에서 중요합니다.
CSS를 사용하면 지루한 HTML 메뉴를 멋진 탐색 모음으로 변형 할 수 있습니다.
Navigation Bar = 링크 목록
탐색 모음에는 표준 HTML이 기본으로 필요합니다.
이 예제에서는 표준 HTML 목록에서 탐색 모음을 작성합니다.
탐색 바는 기본적으로 링크 목록이므로 <ul> 및 <li> 요소를 사용하면 완전히 이해할 수 있습니다.
<ul>
<li><a href="https://365ok.co.kr/lecture.php">강좌</a></li>
<li><a href="https://365ok.co.kr/tj/program">프로그램</a></li>
<li><a href="https://365ok.co.kr/tj/qo">작업의뢰</a></li>
<li><a href="https://365ok.co.kr/tj/okdown">정보실</a></li>
</ul>
이제 목록에서 글 머리 기호와 여백 및 패딩을 제거해 보겠습니다.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
코드 설명:
위의 코드는 수직 및 수평 탐색 모음에 사용되는 표준 코드입니다.
수직 탐색 바(Vertical Navigation Bar)
세로 방향 탐색 모음을 작성하려면 위 코드와 함께 목록 안의 <a> 요소 스타일을 지정할 수 있습니다.
li a {
display: block;
width: 60px;
}
코드 설명:
display: block; - 링크를 블록 요소로 표시하면 텍스트 만이 아닌 전체 링크 영역을 클릭 할 수 있으며 원하는 경우 너비 (및 여백, 여백, 높이 등)를 지정할 수 있습니다.
width: 60px - 블록 요소는 기본적으로 사용할 수 있는 전체 너비를 사용합니다. 우리는 60 픽셀 너비를 지정하려고 합니다.
<ul>의 너비를 설정하고 <a>의 너비를 제거 할 수 있습니다. 블록 요소로 표시 될 때 사용할 수 있는 전체 너비를 차지하기 때문입니다.
앞의 예와 같은 결과를 얻을 수 있습니다.
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
세로 탐색 막대 예제
배경색이 회색 인 기본 수직 탐색 막대를 만들고 사용자가 마우스를 움직일 때 링크의 배경색을 변경하는 코드
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
활성 / 현재 탐색 링크 (Active/Current Navigation Link)
현재 링크에 "활성"클래스를 추가하여 사용자가 어떤 페이지에 있는지 알 수 있게 하십시오 :
.active {
background-color: #4CAF50;
color: white;
}
센터 링크 및 테두리 추가 (Center Links & Add Borders)
텍스트 정렬을 추가하십시오 : <li> 또는 <a>를 중심으로 링크를 중앙에 배치하십시오.
border 속성을 <ul>에 추가하면 navbar 주위에 테두리가 추가됩니다.
네비게이션 바 내부에 테두리를 추가하려면 마지막 <li> 요소를 제외한 모든 <li> 요소에 border-bottom을 추가하십시오.
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
전체 높이 고정식 수직 탐색 막대 (Full-height Fixed Vertical Navbar)
전체 높이의 "sticky"측면 탐색을 만듭니다.
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
** 이 예는 휴대 기기에서 제대로 작동하지 않을 수 있습니다.
수평 탐색 모음 (Horizontal Navigation Bar)
가로 방향 탐색 모음을 만드는 방법에는 두 가지가 있습니다. 인라인 또는 부동 목록 항목 사용.
인라인 목록 항목
가로 방향 탐색 모음을 작성하는 한 가지 방법은 위의 "표준"코드 외에 <li> 요소를 인라인으로 지정하는 것입니다.
li {
display: inline;
}
코드 설명 :
부동 목록 항목 (Floating List Items)
가로 방향 탐색 모음을 만드는 또 다른 방법은 <li> 요소를 이동하고 탐색 링크의 레이아웃을 지정하는 것입니다.
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
코드 설명 :
** 전체 너비 배경색을 원하면 <a> 요소 대신 배경색을 <ul>에 추가하십시오.
ul {
background-color: #dddddd;
}
수평 탐색 막대 예제 (Horizontal Navigation Bar)
배경색이 어두운 기본 가로 탐색 막대를 만들고 사용자가 마우스를 움직일 때 링크의 배경색을 변경하십시오.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
활성 / 현재 탐색 링크 (Active/Current Navigation Link)
현재 링크에 "활성"클래스를 추가하여 사용자가 어떤 페이지에 있는지 알 수 있게 하십시오 :
.active {
background-color: #4CAF50;
}
오른쪽 정렬 링크 (Right-Align Links)
목록 항목을 오른쪽으로 이동하여 링크를 오른쪽 정렬 (float:right;):
<ul>
<li><a href="#lecture">강좌</a></li>
<li><a href="#programs">프로그램</a></li>
<li><a href="#inquiry">견적신청</a></li>
<li style="float:right"><a class="active" href="#info">정보실</a></li>
</ul>
테두리 구분선 (Border Dividers)
border-right 속성을 <li>에 추가하여 링크 구분선을 만듭니다.
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
고정 탐색 모음 (Fixed Navigation Bar)
사용자가 페이지를 스크롤 할 때도 탐색 막대를 페이지의 상단 또는 하단에 유지하십시오.
ul {
position: fixed;
top: 0;
width: 100%;
}
ul {
position: fixed;
bottom: 0;
width: 100%;
}
** 휴대 장치에서는 고정 위치가 제대로 작동하지 않을 수 있습니다.
Sticky Navbar
<li>에 position: sticky; 를 사용하여 sticky navbar를 만들 수 있습니다.
sticky 요소는 스크롤 위치에 따라 상대와 고정 사이를 토글합니다.
뷰포트에서 지정된 오프셋 위치가 충족 될 때까지 상대적 위치에 배치 된 다음 위치에 고정됩니다 (position:fixed; 처럼).
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
** Internet Explorer, Edge 15 및 이전 버전은 sticky 위치 지정을 지원하지 않습니다.
** sticky 위치 지정을 위해 맨 위, 오른쪽, 아래 또는 왼쪽 중 하나 이상을 지정해야 합니다.
등록된 댓글이 없습니다.