목록 태그는 웹 페이지에서 빠지지 않고 자주 등장하는 요소이다.


기본적인 HTML5의 형태로 적용되는 것을 보면 어디 등장할까 싶지만, 스타일로 싹 바꿔서 배치한다.




목록 태그는 2가지로 구분된다.


순서가 있는 목록과 순서가 없는 목록이다.




1. 순서가 있는 목록 <ol>


기본적인 형태는 다음과 같다.


순서가 있는 목록

<ol>

    <li>첫 번째 항목</li>

    <li>두 번째 항목</li>

    <li>세 번째 항목</li>

    <li>마지막 항목</li>

</ol>


출력 결과

순서가 있는 목록
  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목
  4. 마지막 항목


이런식으로 출력되게 된다.


<ol> 태그 안에 <li> 태그가 위치하고 순서대로 출력이 된다.


또한 항목들은 자동으로 들여쓰기가 되며, 개행되어 작성이 됩니다.



2. 순서가 없는 목록 <ul>


과일

<ul>

    <li>사과</li>

    <li>오렌지</li>

    <li>키위</li>

    <li>포도</li>

</ul>


출력결과

과일
  • 사과
  • 오렌지
  • 키위
  • 포도


웹 페이지마다 다소 모양이 다를 수 있으나, 대부분 비슷하게 앞에 기호를 붙이고 나온다.


순서를 없는 목록을 나타날 때 유용하게 이용할 수 있다.




3. type 속성


목록 태그에 앞에 있는 기호나 숫자 등은 변경을 할 수 있다.


이 역시 스타일로 하는 것을 권장하나, 속성 값으로도 변경을 할 수 있다.



type속성을 집어넣어서 변경을 하면 되는데. 간단하게 예시로 나타내보면,



입력


공부할 목록(기본형)

<ul>

    <li>HTML5</li>

    <li>CSS3</li>

    <li>JavaScript</li>

    <li>jQuery</li>

</ul>


공부할 목록(사각형)

<ul type="square">

    <li>HTML5</li>

    <li>CSS3</li>

    <li>JavaScript</li>

    <li>jQuery</li>

</ul>


공부할 목록(속이 빈 원)

<ul type="circle">

    <li>HTML5</li>

    <li>CSS3</li>

    <li>JavaScript</li>

    <li>jQuery</li>

</ul>


공부할 목록(속이 찬 원)

<ul type="disc">

    <li>HTML5</li>

    <li>CSS3</li>

    <li>JavaScript</li>

    <li>jQuery</li>

</ul>


출력

공부할 목록(기본형)
  • HTML5
  • CSS3
  • JavaScript
  • jQuery
공부할 목록(사각형)
  • HTML5
  • CSS3
  • JavaScript
  • jQuery

공부할 목록(속이 빈 원)

  • HTML5
  • CSS3
  • JavaScript
  • jQuery

공부할 목록(속이 찬 원)

  • HTML5
  • CSS3
  • JavaScript
  • jQuery



이번에는 순서 있는 목록에 대해서 어떤 type 값을 줄 수 있는지를 다뤄 보겠다.


순서가 있는 목록이니 만큼 어떤 문자로 순서를 표현하는가이다.



윈도우의 순서(기본형)

<ol>

    <li>윈도우 98</li>

    <li>윈도우 XP</li>

    <li>윈도우 비스타</li>

    <li>윈도우 8</li>

    <li>윈도우 10</li>

</ol>


윈도우의 순서(1)

<ol type="1">

    <li>윈도우 98</li>

    <li>윈도우 XP</li>

    <li>윈도우 비스타</li>

    <li>윈도우 8</li>

    <li>윈도우 10</li>

</ol>


윈도우의 순서(a)

<ol type="a">

    <li>윈도우 98</li>

    <li>윈도우 XP</li>

    <li>윈도우 비스타</li>

    <li>윈도우 8</li>

    <li>윈도우 10</li>

</ol>


윈도우의 순서(A)

<ol type="A">

    <li>윈도우 98</li>

    <li>윈도우 XP</li>

    <li>윈도우 비스타</li>

    <li>윈도우 8</li>

    <li>윈도우 10</li>

</ol>


윈도우의 순서(i)

<ol type="i">

    <li>윈도우 98</li>

    <li>윈도우 XP</li>

    <li>윈도우 비스타</li>

    <li>윈도우 8</li>

    <li>윈도우 10</li>

</ol>


윈도우의 순서(I)

<ol type="I">

    <li>윈도우 98</li>

    <li>윈도우 XP</li>

    <li>윈도우 비스타</li>

    <li>윈도우 8</li>

    <li>윈도우 10</li>

</ol>



출력

윈도우의 순서(기본형)
  1. 윈도우 98
  2. 윈도우 XP
  3. 윈도우 비스타
  4. 윈도우 8
  5. 윈도우 10
윈도우의 순서(1)
  1. 윈도우 98
  2. 윈도우 XP
  3. 윈도우 비스타
  4. 윈도우 8
  5. 윈도우 10
윈도우의 순서(a)
  1. 윈도우 98
  2. 윈도우 XP
  3. 윈도우 비스타
  4. 윈도우 8
  5. 윈도우 10
윈도우의 순서(A)
  1. 윈도우 98
  2. 윈도우 XP
  3. 윈도우 비스타
  4. 윈도우 8
  5. 윈도우 10
윈도우의 순서(i)
  1. 윈도우 98
  2. 윈도우 XP
  3. 윈도우 비스타
  4. 윈도우 8
  5. 윈도우 10
윈도우의 순서(I)
  1. 윈도우 98
  2. 윈도우 XP
  3. 윈도우 비스타
  4. 윈도우 8
  5. 윈도우 10



4. 다중 목록 태그


다중 목록 태그라고 별 특별한 것은 없고, 그냥 여러개의 목록 태그를 겹쳐서 사용해도 된다~


이런 내용이고, 어떻게 겹쳐서 작성해야 할지에 대한 간단한 예제로 마무리 하도록 하겠습니다.



<ul>

    <li>

        일반 과목

        <ul>

            <li>국어</li>

            <li>영어</li>

            <li>수학</li>

        </ul>

    </li>

    <li>

        프로그래밍 과목

        <ul>

            <li><a href="http://www.w3schools.com">HTML 5</a></li>

            <li>JAVA</li>

            <li>C / C++</li>

        </ul>

    </li>

</ul>


출력

  • 일반 과목
    • 국어
    • 영어
    • 수학
  • 프로그래밍 과목



HTML5 에서는 w3c스쿨 홈페이지로 이동할 수 있도록 <a>태그를 이용해보았습니다.


실활용에서는?


실제 활용에서는 이런 그대로의 형태를 보기는 쉽지 않습니다.


목록 태그 자체에 있는 앞에 기호들이랑 들여쓰기, 개행 등등 되는 모든 것들을 스타일로 지워버리고 이용합니다.


예를 들면 이 블로그에서 게시판을 나열해둔 것이라던지 게시글 나열이라던지 등등에 사용됩니다

'프로그래밍 > HTML5' 카테고리의 다른 글

[HTML5] 테이블 태그 (1) - 기본  (0) 2016.07.22
[HTML5] 주석 달기  (3) 2016.07.20
[HTML5] 목록 태그  (0) 2016.07.20
[HTML5] 글자 모양 태그  (0) 2016.07.18
[HTML5] 하이퍼링크 태그 <a>  (0) 2016.07.15
[HTML5] 특수 문자 표기  (0) 2016.07.15

댓글 작성