HTML 리스트를 만들자(li, ul, ol)

Posted by ITPangPang
2016.06.27 23:35 웹(Web)/HTML


HTML 리스트를 만들자

(li, ul, ol)


ㆍ 이번에는 HTML에서 리스트를 만들어보도록 하겠습니다.

 

ㆍ li, ul, ol의 뜻만 알아도 사용하는 방법은 아주 쉽습니다.


li는 예상하시는 것처럼 List입니다


olordered list의 약자로 순서가 있는 List입니다.


ㆍ ul은 ol의 반대로 unordered list의 약자로 순서가 

    없는 List입니다.


ㆍ dl도 있지만 이번에는 생략하겠습니다.



설명보다 바로

결과를 보는게

이해가 빠를것

같으므로


하나씩 보도록

하겠습니다.


먼저 li(list)

입니다

결과를 먼저 보면

hi, hello, good이

리스트처럼

뿌려져 있습니다.


코드를 보겠습니다.

<html>

    <head>

        <title>ITPANGPANG</title>

    </head>

    <body>

        <li>hi</li>

        <li>hello</li>

        <li>good</li>

    </body>

</html>


보시는것과

같이

간단하게 Text 양쪽에

<li></li>를

추가 시킨것 밖에 없습니다.


이번에는

ol을 보도록

하겠습니다.


보시는 것과 같이

1.2.3 숫자가 생겼습니다

ol(ordered list)대로

순서가 생겼습니다.


코드로 보겠습니다.

<html>

    <head>

        <title>ITPANGPANG</title>

    </head>

    <body>

<ol>

        <li>hi</li>

            <li>hello</li>

            <li>good</li>

</ol>

    </body>

</html>


딱 2줄 추가됬습니다

li(List)로 감싼 Text를

순서가 있는 리스트로

한번더 감싸주면 됩니다.



이번에는 

ul을 보도록

하겠습니다


그냥 보는대로

순서가 없는 리스트

입니다.

코드 역시 보면

<html>

    <head>

        <title>ITPANGPANG</title>

    </head>

    <body>

<ul>

        <li>hi</li>

            <li>hello</li>

            <li>good</li>

</ul>

    </body>

</html>

ol을

ul로 바꾼 것 

밖에 없습니다

저작자 표시 비영리 변경 금지
신고

'웹(Web) > HTML' 카테고리의 다른 글

Form(폼) 태그를 써보자  (1) 2016.07.31
HTML 표를 만들어보자  (0) 2016.07.03
HTML 리스트를 만들자(li, ul, ol)  (0) 2016.06.27
HTML에서 하이퍼링크 걸기  (1) 2016.06.19
HTML 기본구조 및 Hello World 출력하기  (1) 2016.06.18
이 댓글을 비밀 댓글로