HTML5+CSS3]2-3목록을 만드는 태그

https://www.youtube.com/user/easyspub

 

easyspub

⭐목록을 만들때는 <ul>,<ol>,<dl>태그로 만들 목록의 스타일을 정해서 목록의 시작과 끝을 표시하고,

   <li>태그로 항목을 표시한다.

 

✔<ul>태그 , <li>태그 : 순서 없는 목록 만들기

👉기본형

<ul>

<li>내용</li>

<li>내용</li>

</ul>

👉순서가 필요하지 않은 목록(unordered list)을 만들 때는

<ul>태그 안에 <li>태그(list item)를 사용해 각 항목을 표시한다.

👉각 항목 앞에 작은 원이나 사각형 같은 불릿이 붙는다

CSS의 list-style-type 속성을 이용해 불릿을 수정할 수 있다.

 

 

✔<ol>태그 , <li>태그 : 순서 목록 만들기

👉기본형

<ol>

<li>내용</li>

<li>내용</li>

</ol>

👉항목을 나열하되 순서가 필요한 목록(ordered list)을 만들 때는

<ol>태그를 사용하고 <li>태그를 사용하여 각 항목을 표시한다.

 

목록의 숫자 표기 방법이나 시작하는 숫자 등을 바꿀 수 있다.

👉<ol>태그 속성으로 순서 목록의 숫자와 순서 바꾸기.

1. type 속성 : 숫자의 종류를 다양하게 조절할 수 있다

속성을 설정하지 않으면 기본 값인 숫자로 목록을 표기한다.

속성 값	1	a	A	ⅰ	Ⅰ
설명	숫자(기본 값)	영문 소문자	영문 대문자	로마숫자 소문자	로마숫자 대문자

 

1. start 속성 : 중간 번호부터 시작할 수 있다.
2. reversed 속성 : 항목을 역순으로 표시한다.

 

 

✔<li>태그 생략과 목록 중첩

👉순서 없는 목록이나 순서 목록의 각 항목을 정의할 때 <li>태그 사용

👉여러 항목이 나열될 때<li> 태그를 생략해도 <li>태그가 다음에 오는 <li>태그를 만나면 자동으로

그전에 </li>태그가 있는 것처럼 인식한다.

목록의 항목들을 나열하는 도중에 또 다른 목록을 초함 시킬 수도 있고, 이때 <li>와<li>사이에 목록을 넣는다.

 

 

✔<dl>,<dt>,<dd> 태그 : 설명 목록(description list) 만들기

👉기본형

<dl>

<dt> 제목 </dt>

<dd> 설명 </dd>

<dd> 설명 </dd>

</dl>

👉제목과 설명이 한 쌍인 설명 목록을 만든다.

<dl>태그 : 목록

<dt>태그 : 제목

<dd>태그 : 설명을 표시합니다.

하나의 <dt>태그에 여러 개의 <dd>태그 값을 가질 수도 있고, 여러 개의 <dt>태그를 가질 수도 있다.