웹사이트에서 흔히 볼 수 있는 메뉴 아이콘(햄버거 아이콘)은 이미지 파일 없이도 CSS만으로 간단하게 만들 수 있습니다. 핵심 원리는 가로로 긴 직사각형 막대(bar) 세 개를 세로로 쌓아 올리는 것입니다.
기본 원리
메뉴 아이콘은 다음과 같은 구조로 이루어집니다.
<div>요소 세 개를 사용해 막대 세 개를 만듭니다.- 각 막대에는
width(가로 길이)와height(세로 두께)를 지정합니다. background-color로 막대의 색상을 설정하고,margin으로 막대 사이의 간격을 조절합니다.
CSS 메뉴 아이콘 예제 코드
다음은 CSS를 활용해 메뉴 아이콘을 만드는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 40px;
height: 7px;
background-color: blue;
margin: 5px 2px;
}
</style>
</head>
<body>
<h2>메뉴 아이콘 예시</h2>
<div></div>
<div></div>
<div></div>
</body>
</html>
코드 설명
- width: 40px; — 각 막대의 가로 길이를 40픽셀로 지정합니다.
- height: 7px; — 막대의 두께를 7픽셀로 지정합니다.
- background-color: blue; — 막대 색상을 파란색으로 설정합니다. 원하는 색상으로 자유롭게 변경할 수 있습니다.
- margin: 5px 2px; — 위아래로 5px, 좌우로 2px의 여백을 주어 막대 사이에 적절한 간격을 만듭니다.
실행 결과
위 코드를 브라우저에서 실행하면 파란색 가로 막대 세 개가 세로로 나란히 쌓인 형태의 햄버거 메뉴 아이콘이 화면에 표시됩니다.
응용 팁
- 막대 색상을
#333처럼 어두운 회색으로 바꾸면 실제 웹사이트에서 자주 쓰이는 스타일과 비슷해집니다. border-radius속성을 추가하면 막대 끝이 둥근 부드러운 디자인을 만들 수 있습니다.- 막대 세 개를 하나의 컨테이너
<div>로 감싸면 클릭 이벤트 처리와 반응형 애니메이션(예: X자로 변형) 구현이 훨씬 수월해집니다.
이처럼 CSS만 활용하면 별도의 이미지나 아이콘 라이브러리 없이도 가볍고 확장성 있는 메뉴 아이콘을 손쉽게 제작할 수 있습니다.