HTML 목록태그

 

시각적으로 짜임새 있는 문서 작성을 위해 사용되는 태그로 목록 태그가 있습니다.

목록태그에는 다양한 종류들이 있습니다. 크게 번호가 없는 리스트 형식과 번호가 있는 리스트 형식의 태그로 구분 할 수 있습니다.

이번 포스팅에서는 목록이 없는 리스트 태그에 대하여 알아 보도록 하겠습니다.

 

  번호가 없는 리스트(Unordered List)

 

형식1 

 

<ul>

  <li type="속성값">리스트항목

  <li type="속성값">리스트항목

</ul> 

 

속성값의 종류 : disk, circle, square

 

- 타입 설정 해 보기 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>
<html>
<head>
  <title>번호 없는 리스트 예제</title>
</head>
  <ul>

    <li type="disk">disk
    <li type="circle">circle
    <li type="square">square

  </ul>
</html>

 

번호없는리스트 결과

 

 

- 타입 설정을 하지 않는다면 / 리스트항목 내용안에 줄바꿈이 일어난다면

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>
<html>
<head>
  <title>번호 없는 리스트 예제</title>
</head>
  <ul>

    <li>사과
    <li>
    <li>씨없는 수박<br>씨있는 수박
    <li>포도

  </ul>
</html>

 

타입설정안한결과

▶ disk가 기본 설정 값으로 적용 됩니다.

▶ <br>을 사용하여 줄바꿈을 하여도 짜임새 있게 적용 됩니다.

 

 

형식2 

 

<ul>

  <li type="속성값">대항목

    <ul> 

      <li type="속성값">중항목

        <ul>

          <li type="속성값">소항목

        </ul>

    </ul>

</ul> 

 

- 대, 중 소항목으로 구성도 가능합니다.

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>
<html>
<head>
  <title>번호 없는 리스트 예제</title>
</head>
  <ul>
    <li>과일 
      <ul>
        <li>수박
          <ul>
            <li>씨없는 수박
            <li>씨있는 수박
          </ul>
      </ul>
  </ul>

</html>

 

대중소항목

▶ 타입을 설정하지 않을 경우 대항목은 disk 중항목은 circle 소항목은 square 타입 속성 값으로 설정 됩니다.

▶ 소메뉴 이하 단계에서는 모두 square 타입으로 속성이 지정 됩니다. 

 

이것으로 HTML 문서작성을 위한 태그 중에서 번호가 없는 리스트 태그에 대하여 알아 보았습니다.

Posted by 행복한 유유로그

댓글을 달아 주세요