[기능] Icon으로 구성된 수직/수평 메뉴

https://www.w3schools.com/howto/howto_css_icon_bar.asp# 




<!DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

body {margin:0;}


.icon-bar {

  width: 100%;

  background-color: #555;

  overflow: auto;

}


.icon-bar a {

  float: left;

  width: 20%;

  text-align: center;

  padding: 12px 0;

  transition: all 0.3s ease;

  color: white;

  font-size: 36px;

}


.icon-bar a:hover {

  background-color: #000;

}


.active {

  background-color: #4CAF50;

}

</style>

<body>


<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> 


0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기
captcha
자동등록방지 숫자입력

웹개발

번호 제목 글쓴이 날짜 조회수
2 HTML 특수문자 리스트 최고관리자 08-08 1,697
1 유니코드 특수문자 리스트 최고관리자 08-08 1,725