WEB/html,CSS
[html] 목록태그 / <li> <ul> <ol>
자바칩 프라푸치노
2020. 12. 28. 06:19
■<li>태그
목록을 나타내고 싶을때는 li태그를 씁니다.
|
1
2
3
|
<li>1. html</li>
<li>2. css</li>
<li>3. javascript</li>
|
cs |
이렇게 나옵니다.
■<ul>태그
이렇게 나오게 하고 싶다면
|
1
2
3
4
5
6
7
|
<li>1. html</li>
<li>2. css</li>
<li>3. javascript</li><br>
<li>하이</li>
<li>안녕</li>
<li>오하요</li>>
|
cs |
li태그에 br을 붙여서 줄바꿈을 할 수 있습니다.
<ul> 태그를 써도 같은 결과입니다.
어디까지 한 묶음으로 할 것인지 지정하는 태그입니다.
unordered list라고 해서 순서를 정하지 않습니다.
|
1
2
3
4
5
6
7
8
9
10
|
<ul>
<li>1. html</li>
<li>2. css</li>
<li>3. javascript</li>
</ul>
<ul>
<li>하이</li>
<li>안녕</li>
<li>오하요</li>
</ul>
|
cs |
■<ol>태그
1. 2. 3. ... 이 무진장 많을때 하나하나 다 쓸 수 없을 것입니다.
그럴때 쓰는것이 <ol> 태그입니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul>
<li>하이</li>
<li>안녕</li>
<li>오하요</li>
</ul>
|
cs |
위의 목록에서 숫자를 없애주었고 ol태그로 감싸주었습니다.
이와 같은 관계를 부모<ul> <ol> 자식<li> 관계라고 합니다.
728x90