CSS로 아이콘 바(Icon Bar) 만드는 방법 완벽 가이드

웹사이트에서 자주 사용되는 아이콘 바(Icon Bar)는 CSS만으로도 손쉽게 만들 수 있습니다. 이 글에서는 Font Awesome 아이콘과 CSS를 활용해 가로형 아이콘 바와 세로형 아이콘 바를 만드는 방법을 예제 코드와 함께 소개합니다.

가로형 아이콘 바 만들기

먼저 화면 상단에 배치되는 가로형 아이콘 바를 만들어 보겠습니다. 각 링크를 왼쪽으로 띄워(float) 나란히 정렬하는 방식입니다.

예제 코드

<!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>
.icon-bar {
    width: 100%;
    background-color: black;
    overflow: auto;
}
.icon-bar a {
    float: left;
    width: 30%;
    text-align: center;
    color: white;
    font-size: 30px;
}
.active {
    background-color: blue;
}
</style>
<body>
    <div class="icon-bar">
        <a href="#"><i class="fa fa-home"></i></a>
        <a href="#"><i class="fa fa-search"></i></a>
        <a class="active" href="#"><i class="fa fa-bars"></i></a>
    </div>
</body>
</html>

코드 설명

위 코드의 핵심 포인트는 다음과 같습니다.

.icon-bar: 검은색 배경에 전체 너비(100%)를 지정하고, overflow: auto로 float 요소를 감싸줍니다.
.icon-bar a: 각 링크를 float: left로 정렬하고, 흰색 아이콘과 30px 크기를 적용합니다.
.active: 현재 선택된 메뉴를 파란색 배경으로 강조 표시합니다.

실행 결과

위 코드를 실행하면 검은색 배경 위에 홈, 검색, 메뉴 아이콘이 가로로 나열된 아이콘 바가 표시되며, 세 번째 아이콘은 파란색으로 활성화 상태임을 알 수 있습니다.

세로형 아이콘 바 만들기

이번에는 화면 왼쪽에 세로로 배치되는 아이콘 바를 만들어 보겠습니다. 링크 요소에 display: block을 적용하면 각 항목이 한 줄씩 쌓이게 됩니다.

예제 코드

<!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>
.icon-bar {
    width: 50px;
    background-color: black;
}
.icon-bar a {
    display: block;
    text-align: center;
    color: white;
    font-size: 30px;
}
.active {
    background-color: blue;
}
</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-bars"></i></a>
    </div>
</body>
</html>

코드 설명

.icon-bar: 너비를 50px로 좁게 설정하여 사이드바 형태로 만듭니다.
.icon-bar a: display: block을 적용해 링크가 세로로 쌓이도록 합니다.
.active: 첫 번째 홈 아이콘이 파란색 배경으로 강조됩니다.

실행 결과

위 코드를 실행하면 화면 왼쪽에 검은색 세로 아이콘 바가 생성되고, 홈·검색·메뉴 아이콘이 위에서 아래로 순서대로 배치됩니다.

마무리

CSS의 float와 display: block 속성만 활용하면 별도의 JavaScript 없이도 가로형 또는 세로형 아이콘 바를 간단하게 구현할 수 있습니다. 여기에 :hover 효과나 반응형 미디어 쿼리를 추가하면 더욱 완성도 높은 내비게이션 UI를 만들 수 있습니다.