내비게이션 바 (navigation bar)
: 우리가 흔히 사용하는 웹 사이트의 메뉴를 의미
> 링크를 사용한 리스트 메뉴
- 내비게이션 바 중에서도 가장 기본적인 것
- HTML에서 링크는 <a> 태그로 표현한다
- 다음은 링크를 사용하여 내비게이션 바를 구현한 간단한 메뉴 예제
<ul>
<li><a href="/index.php">Home</a></li>
<li><a href="/html/intro">HTML</a></li>
<li><a href="/css/intro">CSS</a></li>
<li><a href="/javascript/intro">자바스크립트</a></li>
</ul>
> 수직 내비게이션 바
- 링크를 사용한 리스트 메뉴에 display 속성값을 block으로 설정
→ 메뉴의 어느 곳을 클릭해도 연결된 페이지로 바로 넘어간다
- class를 이용하면 내비게이션 방서 현재 메뉴의 위치도 표현 가능, 다음 예제에서는 :not 선택자를 이용하여 현재 메뉴인 current 클래스와 그 외의 메뉴 배경색을 구분한다
<style>
li a.current { background-color: #FF6347; color: white; }
li a:hover:not(.current) { background-color: #CD853F; color: white; }
</style>
- border 속성을 이용하여 내비게이션 바에 경계선을 표현할 수 있다
<style>
li { border-bottom: solid 1px black; }
li:last-child { border-bottom: none; }
</style>
> 수평 내비게이션 바
1. display 속성의 inline 속성값을 이용한 방법
- 링크를 사용한 리스트 메뉴에서 <li> 요소의 display 속성값을 inline으로 설정한다
- 블록 요소였던 <li> 요소가 인라인 요소의 성질을 갖게 되어 너비가 자신의 내용만큼만 차지되므로, 모든 <li> 요소가 수평으로 늘어서 수평 내비게이션 바가 만들어진다
<style>
li { display: inline; }
</style>
2. floating 속성을 이용한 방법
- 링크를 사용한 리스트 메뉴의 <li> 요소에 floating 속성을 설정
- float 속성값을 left / right로 설정하면, 모든 메뉴가 왼쪽 / 오른쪽으로 정렬된다
<style>
li { float: left; }
li a { display: block; background-color: #FFDAB9; padding: 8px; }
</style>
- <ul> 요소나 <ol> 요소의 float 속성값을 조절하여, 왼쪽뿐만 아니라 오른쪽 메뉴도 같이 설정하는 예제
<ul>
<li><a href="/index.php">Home</a></li>
<li><a href="/html/intro">HTML</a></li>
<li><a class="current" href="/css/intro">CSS</a></li>
<ul style="float:right; list-style-type:none;">
<li><a href="/bbs/login.php">로그인</a></li>
<li><a href="/bbs/register_form.php">회원가입</a></li>
</ul>
</ul>
드롭다운 (dropdown)
> 드롭다운 효과
: 해당 요소에 마우스를 올려서 다른 요소나 텍스트가 나타나게 하는 효과
- (예) display 속성을 이용하여 드롭다운 효과를 구현하는 예제
<style>
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
display: none;
position: absolute;
background-color: #F9F9F9;
min-width: 160px;
padding: 8px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content { display: block; }
</style>
- 위의 예제에서 사용자가 마우스를 올리면 나타날 <div> 요소의 display 속성값을 none으로 설정하여 처음에는 눈에 보이지 않게 한다.
> 드롭다운 메뉴
- 메뉴에 마우스를 올리면 하위 메뉴가 나타나는 메뉴를 말한다
- 드롭다운 효과(display 속성을 이용)를 이용하여 간단히 구현할 수 있다
<style>
.dropdown-button { background-color: #FFDAB9; padding: 8px; font-size: 15px; border: none; }
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
display: none;
position: absolute;
background-color: #FFDAB9;
min-width: 70px;
padding: 8px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a { color: black; padding: 8px; text-decoration: none; display: block; }
.dropdown-content a:hover { background-color: #CD853F; }
.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover .dropdown-button { background-color: #CD853F; }
</style>
툴팁 (tooltip)
> 툴팁 효과
- 해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과
- (예) visibility 속성을 이용하여 툴팁 효과를 구현하는 예제
<style>
.tooltip { position: relative; display: inline-block; }
.tooltip .tooltip-content {
visibility: hidden;
width: 300px;
background-color: orange;
padding: 0;
margin-top: 10px;
color: white;
text-align: center;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltip-content { visibility: visible; }
</style>
- 상대적 위치를 나타내는 top, right, bottom, left 속성을 이용하여 툴팁의 상대 위치를 설정할 수 있다
- (예) 툴팁이 해당 요소의 아래 쪽이 아닌 왼쪽에 나타나도록 구현한 예제
<style>
.tooltip { margin: auto; }
.tooltip .tooltip-content { top: -15px; right: 105%; }
</style>
- (예) 툴팁의 모양을 말풍선 모양처럼 설정 : border-color 속성값을 transparent로 설정하여 구현
<style>
.tooltip .tooltip-content::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: orange transparent transparent transparent;
}
</style>
[참고] http://tcpschool.com/css/intro
'Web > HTML & CSS' 카테고리의 다른 글
[CSS] CSS3 (1) : CSS3 모듈, 벤더 프리픽스, 색, 그래디언트 (0) | 2021.07.07 |
---|---|
[CSS] CSS 고급 (2) : Form 요소, @규칙 (0) | 2021.07.05 |
[CSS] CSS 선택자 : 선택자, 의사 클래스, 의사 요소, 속성 선택자 (0) | 2021.07.05 |
[CSS] CSS 위치 속성 : 디스플레이, 포지션, 플로트, 정렬 (0) | 2021.07.05 |
[CSS] CSS 박스 모델 : 크기, 패딩, 테두리, 마진, 아웃라인 (0) | 2021.07.05 |