HTML list-style-type

■ 이번 글에서는 HTML 홈페이지의 '메뉴 목록'의 스타일에 대해서 알아볼텐데요. 간단한 내용이니까 예제를 하나 만들어가면서 이해해볼게요.

■ 먼저 html에서 목록을 만드는 태그는 <ul>. <ol>, <li> 입니다. 세 개의 태그 중에서 <ul>과 <ol> 태그를 이용해서 목록을 만들고, 그 안에 들어있는 항목 들은 <li> 태그를 이용해서 표시하는데요. 목록을 만들 때 순서가 있는 목록은 <ol>을 이용하고, 순서가 필요없는 목록은 <ul> 태그를 이용합니다. 메모장 열어서 직접 만들어볼게요.

▲ body 태그 안에 목록을 만드는 형식대로 만들어 봤습니다. <ul>과 <ol>의 차이를 확인해볼게요.

▲ 순서가 없는 <ul>은 기본설정 값인 블릿(●)으로 표시가 되구요. 순서가 있는 <ol>은 기본 설정인 숫자 1부터 순서대로 출력됩니다. 여기서는 <ul> 목록만 이용해서 정리할 건데요. <ol> 태그 목록의 순서 type 속성과 start 속성만 잠깐 알아보고 넘어갈게요. 기본은 숫자로 시작하지만, 알파벳 등 다른 스타일로 바꿔줄 수 있구요. 시작하는 번호를 변경할 수 있습니다.

▲ 이렇게 <ol> 태그 안쪽에 'type' 속성과 'start' 속성값을 입력했습니다. 출력 결과를 확인해보죠.

■ 어떤 속성인지 아시겠죠? 이때 사용할 수 있는 'type' 속성에는 알파펫 대문자 또는 소문자와 로마숫자 대문자, 소문자(ⅷ,Ⅵ) 등을 이용할 수 있습니다.

이제부터는 순서없는 목록만 이용해서 list-style-type 속성을 적용해보겠습니다. 먼저 항목 앞에 붙을 수 있는 블릿의 스타일을 보겠습니다. 블릿에는 기본 블릿인 disk(●), circle(○), square(■)가 있습니다. 이것들은 list-style-type 속성을 이용해서 변경해주면 되는데요. 형식은 다음과 같습니다. (스타일 시트(CSS)는 <head> 태그 안에 작성하겠습니다.)