CSS를 사용하여 화면 상단 메뉴를 만들면 웹 브라우저 호환성이 높아 접근성이 좋아집니다. 또한 편집하기 어려운 이미지가 사용되지 않기 때문에 메뉴 색상이나 폰트를 변경할 때에도 손쉽게 바꿀 수 있다는 장점이 있습니다. 그리고 스타일시트가 반응형 웹을 지원하게 되면서 화면 해상도에 따라 메뉴 형태를 바꾸는 소스코드의 작성도 가능해지면서 CSS 메뉴는 홈페이지 레이아웃의 기본으로 자리잡았습니다.

하지만 CSS 메뉴를 만들기 위해서는 스타일시트 관련 지식이 필요하기 때문에 초보자가 직접 CSS 메뉴를 만드는 것은 쉽지 않습니다. 바로 이때 CSS MenuMaker라는 사이트를 이용하면 됩니다. 이 사이트는 홈페이지 또는 블로그에서 바로 사용할 수 있는 CSS 메뉴를 자동으로 만들어주는 기능을 제공합니다. 커스터마이징은 유료, 소스코드 다운로드는 무료입니다.

CSS MenuMaker 바로가기
http://cssmenumaker.com/css-menus

CSS MenuMaker 사이트 이용 방법

CSS MenuMaker 사이트를 이용하면 간단하게 반응형 CSS 메뉴를 만들 수 있습니다. 특히 반응형 사이트에서 사용할 수 있는 반응형 메뉴를 제공하기 때문에 유용하기도 합니다. 이 사이트는 CSS 메뉴를 마우스 클릭만으로 커스터마이징할 수 있는 기능을 제공하지만 아쉽게도 이 기능은 프리미엄 계정에서만 이용할 수 있습니다.

프리미엄 계정이 없는 경우에는 메뉴 소스코드를 무료로 다운로드할 수 있습니다. 커스터마이징 기능을 사용할 수 없으므로 메뉴 소스코드를 다운로드한 후 스타일시트를 직접 수정하는 작업을 거쳐야 합니다.  소스코드를 수정함으로써 바꿀 수 있는 요소로는 메뉴 색상, 폰트, 여백 등이 있습니다. 소스코드를 직접 수정해야하므로 초보자의 경우에는 이 과정이 어려울 수도 있습니다. 그러나 이 블로그에 있는 CSS 관련 글을 읽어본다면 이 글에서 소개하는 과정도 쉽게 따라할 수 있을 것입니다.

이 글 상단에 있는 링크를 통하여 CSS MenuMaker 사이트에 접속하면 위 화면과 같이 다양한 메뉴 스타일을 확인할 수 있습니다. 마음에 드는 메뉴 스타일을 선택하면 아래와 같은 화면이 나타납니다. 여기에서 우측 하단에 있는 source.zip 링크를 클릭하면 해당 메뉴의 소스코드를 직접 다운로드할 수 있습니다.

다운로드한 압축 파일을 풀면 index.html 파일과 메뉴 스타일시트 파일이 있습니다. 스타일시트 파일을 수정하여 메뉴를 자신의 블로그나 사이트 스타일에 맞게 변경할 수 있습니다. 스타일시트에서 어느 부분을 수정해야 하는지 아래에서 알아보도록 하겠습니다.

메뉴 스타일시트 수정방법

메뉴 스타일시트 파일을 열어보면 스크립트가 생각보다 간단하여 놀랄 수도 있겠습니다. 실제로 CSS 메뉴 스크립트는 간단하게 구성되어 있습니다. 이 글에서 설명하는 두 가지 항목 뿐만 아니라 스타일시트를 수정함으로써 커스터마이징할 수 있는 스타일 항목은 무궁무진하게 많기 때문에 직접 연구하여 수정해보시기 바랍니다.

스타일시트 수정방법 1. 여백 지정

CSS MenuMaker에서 제공하는 CSS 메뉴 스타일시트는 #cssmenu 내부에서 모든 것이 구성됩니다. 따라서 여백을 지정하기 위해서는 #cssmenu 스타일을 수정하면 됩니다. 아래의 소스코드를 스타일시트에 추가함으로써 원하는 여백을 메뉴에 추가할 수 있습니다.

#cssmenu {
  margin: 0px;
  padding: 10px;
}

비슷하게 메뉴 항목별 외부 여백을 지정하고자 한다면 #cssmenu > ul > li 에 margin 속성을 추가하면 됩니다.

스타일시트 수정방법 2. 메뉴 색상 변경

CSS 메뉴는 모든 디자인 요소가 스타일시트로 구성되어 있기 때문에 색상을 수정하는 것도 위와 같이 어렵지 않게 해결할 수 있습니다. 그러나 메뉴마다 색상을 지정하는 위치가 다를 수 있으므로 이 글에서는 그 위치를 특정하지 않고 색상을 수정할 수 있는 방법을 설명하겠습니다.

스타일시트에서 색상을 표현할 때에는 16진수를 사용합니다. 스타일시트에서 아래와 같은 문자열을 볼 수 있다면 해당 문자열이 색상을 지정하는 부분입니다.

#47c9af #ffffff #000000

색상을 변경하고 싶다면 색상 부분을 수정하면 되고 자신이 원하는 색상의 16진수는 어도비 색상 휠을 사용하여 얻을 수 있습니다. 어도비 색상 휠에서는 다양한 색상의 16진수를 얻을 수 있습니다.

스타일 시트의 색상 부분을 변경하면 메뉴 배경 뿐만 아니라 각각의 메뉴 항목의 색상까지 수정할 수 있습니다. 자신이 운영하는 블로그나 사이트의 스타일에 맞게 색상을 변경하면 됩니다.

만들어진 메뉴를 사이트에 삽입하는 방법

index.html 파일의 소스코드를 보면 아래와 같은 부분이 있을 것입니다. 메뉴마다 다르겠지만 CSS MenuMaker에서 제공하는 메뉴는 대체적으로 아래와 같은 형태를 가지고 있습니다.

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'>Home</a></li>
   <li><a href='#'>Products</a></li>
   <li><a href='#'>Company</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>

위에서도 잠깐 언급했지만 CSS MenuMaker에서 제공하는 메뉴는 #cssmenu 내부에서 모든 것이 구성됩니다. 따라서 만들어진 메뉴를 다른 사이트에 삽입하기 위해서는 위에서 볼 수 있는 부분을 전체 복사하여 원하는 부분이 붙여넣으면 됩니다.

마무리 – 누구나 쉽게 만들 수 있는 CSS 메뉴

사이트나 블로그를 제작함에 있어서 메뉴를 만드는 작업은 사용자 인터페이스를 구성하는 것이기 때문에 중요합니다. 메뉴가 보기 좋아야 방문자도 쉽게 끌여들일 수 있는 것입니다. 그러나 처음 사이트 블로그를 제작하는 경우에는 메뉴 디자인을 어떻게 해야하는지 갈피가 잡히지 않을 때가 있습니다. 이때 CSS MenuMaker를 이용하면 멋있는 메뉴를 쉽게 만들 수 있습니다. 한 번 CSS MenuMaker를 사용해보시기 바랍니다.