웹페이지를 스크롤해도 항상 같은 위치에 머무는 고정(fixed) 소셜 미디어 아이콘 바는 사용자가 언제든지 SNS 링크에 접근할 수 있게 해주는 실용적인 UI 요소입니다. CSS의 position: fixed 속성을 활용하면 간단하게 구현할 수 있습니다.
아래 코드를 사용하면 화면 왼쪽에 고정된 소셜 미디어 아이콘 바를 만들 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
main {
margin-left: 300px;
}
.SocialBar {
position: fixed;
display: block;
top: 30%;
font-size: 0;
width: 200px;
border: 2px solid darkgreen;
box-shadow: 5px 10px 18px rgb(55, 173, 39);
}
button {
display: block;
width: 100%;
margin: 0px;
border: none;
padding: 15px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
font-size: 20px;
}
button:not(:last-child) {
border-bottom: 2px solid rgb(6, 134, 49);
}
button:hover {
background: black;
box-shadow: 5px 10px 18px rgb(20, 20, 20);
}
</style>
</head>
<body>
<div class="SocialBar">
<button><i class="fa fa-facebook-f" style="color:#3B5998"></i></button>
<button><i class="fa fa-hashtag" style="color:#55ACEE"></i></button>
<button><i class="fa fa-linkedin" style="color:#007bb5"></i></button>
</div>
<main>
<h1>소셜 미디어 링크</h1>
<h2>위의 링크에 마우스를 올리면 호버 효과를 확인할 수 있습니다</h2>
<h2>위의 소셜 미디어 채널을 통해 저희를 방문해 주세요</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla, enim a fringilla semper,
neque eros aliquam massa, ut porta arcu justo et metus. In aliquet justo non lorem condimentum,
in rutrum lorem vestibulum. Aliquam et ornare tellus. Mauris eu nisi ac ante vestibulum fermentum
ac nec enim. Integer sed aliquet nisi. Nullam semper lorem sed sem gravida, in euismod urna posuere.
Cras porta neque non sapien maximus placerat. Morbi imperdiet faucibus orci. Maecenas eu ipsum metus.
</h3>
</main>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
페이지를 스크롤한 상태에서 소셜 미디어 아이콘 중 하나에 마우스를 올리면 다음과 같이 표시됩니다.
핵심 포인트 정리
- position: fixed; – 요소를 뷰포트 기준으로 고정시켜 페이지를 스크롤해도 위치가 변하지 않습니다.
- top: 30%; – 아이콘 바를 화면 상단에서 30% 지점에 배치합니다.
- font-size: 0; – 부모 요소의 글자 크기를 0으로 설정해 버튼 사이의 불필요한 여백을 제거합니다.
- :hover 선택자 – 마우스를 올렸을 때 배경색과 그림자 효과를 적용해 시각적 피드백을 제공합니다.
- Font Awesome CDN – 외부 스타일시트를 불러와 페이스북, 해시태그, 링크드인 등의 아이콘을 손쉽게 사용할 수 있습니다.
이처럼 몇 줄의 CSS만으로도 스크롤과 무관하게 항상 화면에 고정되는 세련된 소셜 미디어 아이콘 바를 구현할 수 있습니다. 필요에 따라 색상, 크기, 위치 값을 조정하여 자신만의 스타일로 커스터마이징해 보세요.