HTML/CSS 드롭다운메뉴 이미지 추가하여 꾸미기

 앞의 포스팅에서 HTML에서 카테고리 코드를 작성하여 CSS에서 스타일 적용하는 방법을 올렸습니다. 이번 포스팅에서는 이미지를 추가하여 드롭다운메뉴를 꾸미는 방법을 알아봅시다. 원리는 간단합니다. 원래 보이는 드롭다운메뉴의 이미지 1번과 마우스 커서를 갖다댔을 시에 보이게 되는 이미지 2번을 추가하면 됩니다.

 

 

 

 

 앞에서 작성했던 HTML 카테고리 목록입니다. 상위메뉴에 홈, 일상, 여행, 컴퓨터가 있고 상위메뉴인 여행에 마우스 커서를 갖다대면 하위메뉴인 미국, 캐나다, 일본, 홍콩이 보이도록 하였습니다.

 

 

 포토샵에서 필요한 이미지 두 장을 미리 만듭니다. 포토샵 과정은 생략합니다. 필자는 그라데이션을 적당히 주어서 볼록한 느낌과 오목한 느낌이 나게 만들었습니다. 

 

 

 

 완성된 이미지 파일 이름을 지정하여 .hrml과 .css 파일이 있는 폴더에 저장합시다.

 

 

 이제 CSS 창에서 url 값으로 이미지를 추가하면 됩니다. 원래 보이는 상위메뉴에 이미지 1번을 추가, 마우스 커서를 올렸을 시에 보이게 되는 a:hover 태그에 이미지 2번을 삽입합시다.

 

색깔에서 이미지 디자인으로 바뀜

 

 

 border-radius 값을 주어서 모서리를 둥글게 만들었습니다. 여기서 a:hover 태그에도 적용해야 한다는 점을 주의합시다. 또한 border solid 값을 #fff [흰색]에서 #000 [검정색]으로 바꿨습니다.

 

 모서리 모양과 테두리 색깔이 바뀐 것을 확인

 

 가독성을 위해서 글꼴과 텍스트의 굵기를 굵게 하였습니다. font-family는 글꼴을 변화, font-weight는 글자의 굵기를 정합니다. 

 

 음~ 뭔가 색상이 별로네요. 이런 경우에는 포토샵에서 다시 만든 이미지를 똑같은 이름으로 저장만 하면 바로 변경된 디자인이 적용됩니다. 지금까지 HTML/CSS 드롭다운메뉴 이미지 추가하여 꾸미는 방법이었습니다.