개발자첫걸음

※리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미합니다.
HTML에서는 여러 요소들을 일렬로 나열한 목록이나 명단을 표현할 수 있는 태그를 제공하고 있습니다.

STYLE 속성을 이용하여 다양한 속성 부여도 가능합니다. CSS를 활용하여 다양한 연출이 가능하며 TABLE 태그와 같이 많이 사용되는 태그 중 하나입니다. CSS를 활용한 방법들은 다음 시간에 정리하도록 하고 기본적이 LIST태그에 대해서 알아보겠습니다.

목차

1. <ul></ul> 순서가 없는 목록

2. <ol></ol> 순서가 있는 목록

3. <dl></dl> 정의 목록

1. <ul></ul> 순서가 없는 목록

UNORDERED LIST의 약자로 HTML에서 순서가 없는 목록은 <ul> 태그로 시작하며, 여기에 포함되는 각각의 목록 요소는 <li> 태그로 시작된다. 각각의 목록 요소 앞에는 기본적으로 글머리 기호인 검은색의 작은 원(bullet)이 표시된다. 

TYPE 값을 변경하여 목록 기호를 변경할 수 있다.

*list-style-type:none; 값으로 지정하면 기호를 표시하지 않을 수도 있다.

@결과

2. <ol></ol> 순서가 있는 목록

ORDERED LIST의 약자로 순서가 있는 HTML 목록은 <ol> 태그로 시작하며, 여기에 포함되는 각각의 목록 요소는 <li> 태그로 시작된다. 각각의 목록 요소 앞에는 기본 마커로 아라비아 숫자가 표시된다.

TYPE 값을 변경하여 목록 기호를 변경할 수 있다.

*list-style-type:none; 값으로 지정하면 기호를 표시하지 않을 수도 있다.

list-style-type 속성

• decimal : 숫자 (기본설정)
• upper-alpha or A : 영문 대문자
• lower-alpha or a : 영문 소문자
• upper-roman or I : 로마 숫자 대문자
• lower-roman or i : 로마 숫자 소문자

@결과

또는

@코드로 보기   

    <ol type="a">

        <li>목록1</li>

        <li>목록2</li>

        <li>목록3</li>

    </ol>

 

@결과

3. <dl></dl> 정의 목록

DEFINITION LIST의 약자로 HTML은 설명 목록이라고 해서 정의 리스트를 지원하는데, 용어와 그에 대한 정의를 모아놓은 목록으로써 <dl> 태그로 표시한다. <dt> 태그에는 용어의 이름이 들어가고, <dd> 태그에는 해당 용어에 대한 정의가 들어간다.

<dd> 태그 영역은 자동으로 들여 쓰기가 적용된다.

@결과