css 메뉴 list-style-image
■ 지난 글에서는 HTML 문서에서 메뉴 목록을 만드는 과정을 정리해봤는데요. <ul>, <ol>, <li> 태그를 이용해서 목록을 만들고, css의 list-style-type 속성을 이용해서 블릿의 모양을 바꿔주는 방법에 대해서 알아봤습니다. 혹기 list-style-type 속성에 대해서 참고하실 분들은 아래글 참고하시구요.
http://godvow.tistory.com/100 ◀◀ list-style-type 속성
■ 이번 글에서는 이렇게 메뉴 목록 앞에 붙어 있는 기본 블릿 대신에 이미지를 넣어볼 텐데요. 이미지 블릿을 넣는 스타일 속성은 다음과 같습니다.
list-style-image:url(이미지 경로);
먼저 간단하게 예제를 만들어보겠습니다.
▲ 순서 없는 목록인 <ul> 태그와 <li> 태그를 이용해서 기본 블릿(●)이 표시 되도록 세 개의 항목을 만들었습니다. 먼저 출력해볼게요.
▲ 당연히 이렇게 기본 블릿이 붙은 리스트가 출력됩니다. 이제 이 녀석들 앞에 붙어 있는 블릿을 이미지로 대신해보겠습니다. 먼저 이미지를 준비할 텐데요.
▲ 이렇게 [25X15] 크기의 이미지를 세 개 준비해서 1, 2, 3의 이름으로 html 파일과 같은 폴더에 넣었습니다. 이 녀석들을 이용해서 블릿의 스타일을 적용할 텐데요. 이미지를 준비할 때는 메뉴 글자의 크기 등을 고려해서 준비하시면 됩니다. 스타일 시트는 따로 만들지 않고 <head> 태그 안에 작성하겠습니다.
▲ 각각의 항목에 다른 이미지의 블릿을 넣기 위해서 아이디를 부여하고, 앞에서 알아본 형식에 맞게 아이디 선택자의 속성에 "list-style-image:url(파일경로);"속성을 이용해서 이미지 파일을 넣었습니다.
▲ 이렇게 기본 블릿 대신에 이미지가 들어간 걸 확인할 수 있습니다. 간단한 내용이니까 작은 이미지 파일을 하나 준비해서 직접 넣어보셔요. 수고하셨습니다.
