반응형
폰트어썸 링크 작성하기 (font-awesome link insert)
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>폰트어썸을 사용하기 위해선 위 링크를 작성해야 한다.
body
<div class="icon_bar">
<!-- 홈 home 아이콘 -->
<a href="#">
<i class="fa fa-home"></i>
</a>
<!-- 찾기 search 아이콘 -->
<a href="#">
<i class="fa fa-search"></i>
</a>
<!-- 메일 mail 아이콘-->
<a href="#">
<i class="fa fa-envelope"></i>
</a>
<!-- 지구 globe 아이콘-->
<a href="#">
<i class="fa fa-globe"></i>
</a>
<!-- 쓰레기통 trash 아이콘-->
<a href="#">
<i class="fa fa-trash"></i>
</a>
</div>
CSS style
.icon_bar{ /* 각 아이콘들이 묶여있는 div 클래스를 .icon_bar로 잡는다*/
width: 100%; /* 가로길이 100% (%를 사용했으므로 화면을 아무리 늘려도 가로길이가 끝까지 찬다.*/
background-color: #000; /*배경색상 검정색*/
overflow: auto; /*요소가 넘칠경우 스크롤바가 자동으로 생성된다.*/
}
.icon_bar a{ /*icon_bar에 있는 a태그*/
float: left; /* 요소를 왼쪽으로 정렬*/
width: 20%; /*넓이 20%*/
text-align: center; /*텍스트 요소 중앙 정렬 (아이콘은 텍스트 취급을 받는다)*/
padding: 12px 0; /*안쪽 여백 상하 12px, 좌우 0px*/
transition: all 0.3s ease; /* 높이와 너비 변화를 모두 주고 동일한 속도로 0.3초 변화한다 */
/*아이콘에 마우스를 가리킬시 되돌아올때 효과를 주기위해서 사용*/
/*직접 지워보고 시도해보면 차이를 느낄 수 있다.*/
color: #fff; /*아이콘 색상 #fff*/
font-size: 36px; /* 폰트 크기 36px (아이콘은 텍스트 취급을 받기 때문에 font-size를 사용)*/
}
.icon_bar a:hover{ /* :hover는 요소에 마우스를 올릴때 생기는 이벤트를 지정한다 */
background-color: gray; /* 아이콘에 마우스를 올리면 배경색상이 그레이로 변경된다 */
}
RESULT
반응형