[HTML 기초 강좌] 5. 목록을 나타내는 ul 태그, ol 태그, dl 태그, li 태그

2016.01.18 13:14language/html


1. 목록을 나타내는 태그들

 

ul 태그 : Unoerdered List 의 약자로 순서가 없는 목록이다.

글머리 기호를 붙혀서 목록을 만드는 형식이다.

 

ol 태그 : Ordered List 의 약자로 순서가 있는 목록이다.

번호 형식으로 순서를 매겨 목록을 만드는 형식이다.

 

dl 태그 : Difinition List 의 약자로 정의 목록을 만드는 형식이다.

어떤 용어의 정의를 나열하는 형식이다.

 

li 태그 : List Item 의 약자로 ul 태그와 ol 태그의 내부에서 사용되는 태그이다.

목록의 내용이 되는 실질적인 태그이다.

들여쓰기 및 줄바꿈 기능이 있고 type 속성으로 다양한 기호를 사용할 수 있다.

 

 

1.1 ul 태그

글머리 기호를 붙혀서 목록을 만드는 형식이다.

- ul 태그의 type 속성 : 전체 항목에 대한 type을 설정한다.

disc :  ●

circle : ○

square : ■

- li 태그의 type 속성 : 해당 항목에 대한 type을 설정한다.

disc :  ●

circle : ○

square : ■

 

ex) ul태그.html

 

 

 

1.2 ol 태그

순서가 있는 목록을 만드는 형식이다.

- ol 태그의 type 속성 : 전체 항목에 대한 type을 설정한다.

1 : 숫자 (1, 2, 3 ... 기본)

A : 알파벳 대문자

a : 알파벳 소문자

i : 로마숫자 ⅰⅱⅲ ...

I : 로마숫자 ⅠⅡⅢ...

- start : ol 태그에 사용하며 시작값을 임의로 설정할 때 사용한다.

 

- li 태그의 type 속성 : 해당 항목에 대한 type을 설정한다.

1 : 숫자 (1, 2, 3 ... 기본)

A : 알파벳 대문자

a : 알파벳 소문자

i : 로마숫자 ⅰⅱⅲ ...

I : 로마숫자 ⅠⅡⅢ...

- value : li태그에 사용하며 해당 항목부터 순서값이 변경할 때 사용한다.

 

ex ) ol태그.html

1.3 dl 태그

용어에 대한 정의 목록을 만드는 형식이다.

- dt : definintion term 의 약자로 용어의 제목을 나타내는 태그이다. 줄바꿈 기능이 있다.

- dd : definintion description 의 약자로 용어에 대한 설명을 나타내는 태그이다. 줄바꿈 기능이 있다.

 

ex ) dl태그.html

 

 

  • 프로필사진
    eomhy2018.05.09 20:15

    안녕하세요 강좌 잘 보고 있습니다. 질문이 있습니다 ol태그.html의
    <ol type="A">
    <li>항목3-1</li>
    <li>항목3-2</li>
    <li>항목3-3</li>
    <ol>
    부분이 브라우저에서 들여쓰기된 이유가 뭔가요?
    ol 태그가 바깥 ordered list의 아이템으로 여겨진 건가요?

  • 프로필사진
    2019.05.13 14:03

    비밀댓글입니다