html5 list-style
html5 list-style 홈페이지를 만들 때 꼭 있어야 할 요소 중의 하나가 메인 메뉴인데요. 목록 태그 (ul, ol, li) 를 이용해서 간단하게 목록을 나열하고 CSS를 적용해서 메뉴를 만들 수 있습니다. 메뉴뿐만 아니라 사진 등을 나열할 때도 목록 태그를 이용해서 나열할 수 있는데요. 이렇게 나열된 목록을 꾸미는 리스트 스타일에 대해서 알아보겠습니다.
1. list-style-type : 속성
type 스타일은 블릿의 모양을 정해주는 역할을 하는데요. 블릿의 종류에는 circle(○), disk(●), square(■) 등 순서가 없는 목록들이 있구요. 1, a, A...등의 순서 기호를 이용해서 표시하는 순서가 있는 목록들이 있습니다. 순서가 없는 목록은 속성에 각 블릿에 해당하는 속성(circle, disk, square)값을 넣어주면 되구요. 순서가 있는 목록은 다음 표의 속성값을 넣어주면 됩니다.
이 중에서 우리나라에서 사용하는 순서 목록은 몇 개 안 되겠지만 이렇게 많네요. 필요한 경우에는 사용하시면 좋을 거에요. 아무튼, 이것들을 이용해서 순서를 정해줄 수 있습니다. 이렇게 순서가 있는 것과 없는 목록을 만들 수 있는데요. 앞에 숫자나 블릿 없이 그냥 단순하게 텍스트만 나열하고 싶을 때는 이것들을 모두 사용하지 않으려면 속성값에 none; 을 넣어주면 됩니다. (list-style-type : none;)
2. list-style-image
위에서 알아본 것처럼 기본 블릿이나 순서를 의미하는 여러 가지 기호를 사용할 수도 있지만, 항목의 주제와 맞는 이미지를 이용해서 대신할 수도 있습니다. 이미지 파일을 이용해서 블릿을 표시하고 싶을 때는 다음과 같이 스타일 속성을 지정하면 됩니다. [list-style-image : url (그림 경로); ] 예제를 만들어서 직접 넣어보겠습니다.
간단하게 '윈도우7'과 '윈도우8'의 항목이 있는 목록을 만들어 봤습니다. 기본 블릿 disk(●)가 설정되어 있는데요. 이 블릿 대신에 그림을 준비해서 넣어보겠습니다.
각각의 항목 (li)에 id를 부여하고 해당 아이디에 형식에 맞게 list-style-image 속성을 이용해서 이미지를 넣어서 블릿을 대신하게 한 상태입니다. 이렇게 기본 블릿 대신에 이미지를 넣어서 사용할 수 있습니다. 참고로 여기서 사용한 이미지의 크기는 25x25 픽셀 입니다. 혹시 이 글을 보고 계신다면 직접 이미지 준비해서 넣어보세요. 아주 간단하지만 유용하게 사용할 수 있을 거에요.