'footer'에 해당하는 글 1건

[HTML] font-awsome에서 i태그를 사용하여 제공된 작은 아이콘들 만들기(깃헙, 트위터, 블로그, 메일)

그 외/웹 개발 2016. 3. 6. 03:13

share this post

포트폴리오 페이지를 제작하고있다. 보통 포트폴리오 제일 하단에 footer를 만들어서 자신의 소셜 링크를 달아놓는다. 그 부분을 쉽고 깔끔하게 구현하는 코드를 기록해놓았다.

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<style>

	footer {
	padding: 50px 0;
	text-align: center;
	background-color: #f2f2f2;
	}

	.footerul li {
	display: inline;
	}
	.footerul a {
	font-size: 18px;
	margin: 0 15px;
	}

	a:link {
	color: #513926;
	}
	a:visited {
	color: #513926;
	}
	a:hover {
	color: #7F593C;
	}
	</style>

	</span></p><footer>
	<nav style="text-align: center;">
	<ul class="footerul" style="text-align: center; padding: 0px;">
	<li><a target="_blank" href="https://github.com/canapio"><i class="fa fa-github"></i></a></li>
	<li><a target="_blank" href="https://twitter.com/canapio"><i class="fa fa-twitter"></i></a></li>
	<li><a target="_blank" href="http://blog.canapio.com/"><i class="fa fa-globe"></i></a></li>
	<li><a href="mailto:canapio.developer@gmail.com"><i class="fa fa-envelope"></i></a></li>
	</ul>
	</nav>
	<div class="copyright col-md-12">Copyright 2016. canapio all rights reserved.</div>
	</footer>