홈페이지 카카오, 유튜브, 블로그 링크 아이콘 만들기

링크 아이콘 예시

 

홈페이지 오른쪽 하단에 항상 떠 있는 링크 아이콘 만들기 위한 코드 및 css

 

이미지는 원하는 아이콘 모양을 찾아서 크기 및 색상 등을 맞춰주면 된다

(무료 사이트 : https://www.flaticon.com/kr/)

 

//원하는 아이콘 만큼 a 태그를 넣어주면된다.
<div id="fix-ico-wrap">
	 //블로그 아이콘
     <a href="#" onclick="window.open(링크 주소)"><img src="이미지 파일 위치"></a>
     //카카오 아이콘
     <a href="#" onclick="window.open(링크 주소)"><img src="이미지 파일 위치"></a>
     //유튜브 아이콘
     <a href="#" onclick="window.open(링크 주소)"><img src="이미지 파일 위치"></a>
</div>

<style>
//전체 아이콘 위치 및 투명도
#fix-ico-wrap {
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 9999999999;
    opacity:0.9
}

//세부 아이콘 사이즈
#fix-ico-wrap a {
    display: block;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}

//화면 크기에 따라 아이콘 사이즈 변화시킬때 사용
@media screen and (max-width:777px) {
 	#fix-ico-wrap a {
        display: block;
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
	}	
}
</style>