패키지

HTML 기본 목록 요소들 본문

Client-Side/HTML,CSS,Javascript

HTML 기본 목록 요소들

업단업업 2017. 12. 14. 00:39


HTML 목록 요소

HTML에서 빈번히 쓰이는 목록 요소로서, ul요소, ol요소 가 있다. 

ol과 ul요소의 하위에는 반드시 li요소가 나온다. 그 이외의 요소가 들어가면 유효한 HTML문서가 아니다.


ul(Unordered list) - 순서가 중요하지 않은 목록

ex) 선호도나 순서에 무관하게 친구를 나열하고자 한다.

마크업

1
2
3
4
5
<p>친구</p>
<ol>
    <li>홍길동</li>
    <li>이몽룡</li>
<ol>
cs

출력


ol(Ordered list) - 순서가 중요한 목록

ex) 등수를 (rank) 표현하고자 하거나 가장 좋아하는 음식을 순서대로 꼽는다.

마크업

1
2
3
4
5
<p>등수</p>
<ol>
    <li>홍길동</li>
    <li>이몽룡</li>
</ol>
cs

출력

p요소는 'Paragraph'의 약자로 '단락'의 뜻. 


목록 안에 다른 요소들 나타내기

li 태그 안에는 p요소, h1요소 등 다양한 요소가 담길 수 있다.

마크업

1
2
3
4
5
6
7
8
9
10
11
12
<h1>등수</h1>
<ol>
    <li>
        <h2>홍길동</h2>
        <p>홍길동 노지각/노결석 모든 과제 만점</p>
    </li>
    <li>
        <h2>이몽룡</h2>
        <p>이몽룡은 모든 과제 만점, 하지만 지각 두번</p>
    </li>
</ol>
 
cs

출력


출처 

http://html5tutorial.github.io/docs/List.html

Comments