728x90
1. summary
- 기능 : 마우스 올리면 해당 link background color 변경 가능하도록 하기
- 출처 : https://www.w3schools.com/howto/howto_css_icon_bar.asp
2. 적용 이미지
- 가로
- 세로
3. 코드
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Icon Bar</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>
</body>
</html>
- css
/* 세로 모드 */
.icon-bar {
width: 90px;
background-color: #555;
}
/* 해당 class의 모든 a tag */
.icon-bar a {
display: block; /* a : inline -> icon-bar div 내에서 위치 수정을 위해 block 처리 */
text-align: center; /*a : block -> 내부 img(inline) 요소 중간 정렬 */
padding: 16px;
transition: all 1s, ease; /* a tag의 action이 취하질 때 작동*/
color: white;
font-size: 36px;
}
.icon-bar a:hover {
/* hover: mouse가 올려졌을 때 취해지는 action */
background-color: #000;
}
.active {
background-color: #04aa6d;
}
/* 가로모드 */
.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;
}
.icon-bar a {
float: left; /*찾기 - 배열 순서 건들인다.*/
width: 20%; /* 어느 부분 건들이는지 확인*/
padding: 12px 0;
transition: all 3s ease; /*hover등 action이 취해졌을 시 변화에 관한 option*/
color: white;
font-size: 36px;
text-align: center;
background-color: #04aa6d;
}
.icon-bar a:hover {
background-color: black;
}
