목록 태그 <ul>, <ol>, <li> 태그

목록을 정의하는 <ul>, <ol>, <li>태그

 

시멘틱태그가 중요함에 따라 이 목록태그들을 자주 쓰게 됩니다.

<ul>은 비순차적 목록(Unorder List)

<ol>은 순차적 목록(order List)을 정의합니다.

하위에 <li>로 항목을 정렬하게 됩니다.

 

 

<ul>태그 : 비순차적 목록

<ul>
    <li>무궁화</li>
    <li>태극기</li> 
    <li>한라산</li> 
</ul>

기본형태

• 무궁화
• 태극기
• 한라산

<ul>  리스트 스타일

리스트 불릿의 모양을 변경할 수 있습니다.

<p>사각형 모양</p>
<ul type="square">
    <li>무궁화</li>
    <li>태극기</li> 
    <li>한라산</li> 
</ul>

사각형 모양

• 무궁화
• 태극기
• 한라산

<p>원형 모양</p>
<ul type="circle">
    <li>무궁화</li>
    <li>태극기</li> 
    <li>한라산</li> 
</ul>

빈원형 모양

• 무궁화
• 태극기
• 한라산

<p>검은 원모양</p>
<ul type="disc">
    <li>무궁화</li>
    <li>태극기</li> 
    <li>한라산</li> 
</ul>

검은원형 모양

• 무궁화
• 태극기
• 한라산

<p>표지하지 않음</p>
<ul type="none">
    <li>무궁화</li>
    <li>태극기</li> 
    <li>한라산</li> 
</ul>

표지하지 않음

• 무궁화
• 태극기
• 한라산

 

 

---

<ol>태그 : 순차적 목록

<ol>
  <li>커피</li>
  <li>녹차</li>
  <li>우유</li>
</ol> 

1. 커피
2. 녹차
3. 우유

<ol type="A">
  <li>커피</li>
  <li>녹차</li>
  <li>우유</li>
</ol> 

알파벳 대문자

1. 커피
2. 녹차
3. 우유

<ol type="a">
  <li>커피</li>
  <li>녹차</li>
  <li>우유</li>
</ol> 

알파벳 소문자

1. 커피
2. 녹차
3. 우유

<ol type="I">
  <li>커피</li>
  <li>녹차</li>
  <li>우유</li>
</ol> 

로마 대문자

1. 커피
2. 녹차
3. 우유

<ol type="i">
  <li>커피</li>
  <li>녹차</li>
  <li>우유</li>
</ol> 

로마 소문자

1. 커피
2. 녹차
3. 우유

 

 

---

불릿 이미지로 변경

 

css를 이용해 이 리스트 타입을 이미지로 변경할 수 있습니다.

ul {list-style-image : url(이미지 경로);}

<ul style="list-style-image : url(이미지경로);">
    <li>커피</li>
    <li>녹차</li>
    <li>우유</li>
 </ul>

• 커피
• 녹차
• 우유

---

불릿의 위치 변경

list-style-position

이것은 원래 위치입니다.

<ul>
    <li>커피</li>
    <li>녹차</li>
    <li>우유</li>
 </ul>

• 커피
• 녹차
• 우유

바깥쪽으로 위치 이동

<ul style="list-style-position : outside;">
    <li>커피</li>
    <li>녹차</li>
    <li>우유</li>
 </ul>

• 커피
• 녹차
• 우유

안쪽으로 위치 이동

<ul style="list-style-position : inside;">
    <li>커피</li>
    <li>녹차</li>
    <li>우유</li>
 </ul>

• 커피
• 녹차
• 우유

 

margin 값을 이용

 

margin 값을 이용해서 가로 위치 변경하기, 이것은 ul 태그 자제에 margin 값을 주었습니다

<li>에도 적용할 수 있습니다.

<ul style="margin-left:30px;">
    <li>커피</li>
    <li>녹차</li>
    <li>우유</li>
 </ul>

• 커피
• 녹차
• 우유

<li> 적용하면 비슷한 결과를 가질 수 있습니다.

<ul>
    <li style="margin-left:30px;">커피</li>
    <li style="margin-left:30px;">녹차</li>
    <li style="margin-left:30px;">우유</li>
 </ul>

• 커피
• 녹차
• 우유