[HTML5] 목록 태그

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

기본적인 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>

출력

• 일반 과목
  • 국어
  • 영어
  • 수학

• 프로그래밍 과목

  • HTML 5
  • JAVA
  • C / C++

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

실활용에서는?

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

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

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