[html] 목록태그 / <li> <ul> <ol>

■<li>태그

목록을 나타내고 싶을때는 li태그를 씁니다.

 

<li>1. html</li>
<li>2. css</li>
<li>3. javascript</li>

이렇게 나옵니다.

 

 

 

■<ul>태그

이렇게 나오게 하고 싶다면

<li>1. html</li>
<li>2. css</li>
<li>3. javascript</li><br>
 
<li>하이</li>
<li>안녕</li>
<li>오하요</li>>

li태그에 br을 붙여서 줄바꿈을 할 수 있습니다.

<ul> 태그를 써도 같은 결과입니다.

어디까지 한 묶음으로 할 것인지 지정하는 태그입니다.

unordered list라고 해서 순서를 정하지 않습니다.

<ul>
    <li>1. html</li>
    <li>2. css</li>
    <li>3. javascript</li>
</ul>
<ul>
    <li>하이</li>
    <li>안녕</li>
    <li>오하요</li>
</ul>

 

 

■<ol>태그

1. 2. 3. ... 이 무진장 많을때 하나하나 다 쓸 수 없을 것입니다.

그럴때 쓰는것이 <ol> 태그입니다.

<ol>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ol>
<ul>
    <li>하이</li>
    <li>안녕</li>
    <li>오하요</li>
</ul>
 

위의 목록에서 숫자를 없애주었고 ol태그로 감싸주었습니다.

 

이와 같은 관계를 부모<ul> <ol> 자식<li> 관계라고 합니다.