HTML 문서작성을 위한 목록태그 / 번호가 없는 리스트

HTML 목록태그

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

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

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

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

형식1

<ul>

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

</ul>

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

- 타입 설정 해 보기

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

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

</ul>
</html>

번호없는리스트 결과

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

<!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>

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

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

대중소항목

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

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

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

저작자표시 비영리 변경금지 (새창열림)

' IT > 웹디자인' 카테고리의 다른 글

HTML 링크 태그 사용법 / CSS 링크색상 지정하기 (3)	2018.05.31
HTML 문서 입력 창 만들기 / textarea 태그 (2)	2018.05.28
CSS 기본구조 및 선택자 (3)	2018.05.23
CSS 사용 방법 완벽 가이드 (2)	2018.05.22
웹디자인의 꽃 CSS란 무엇인가 (8)	2018.05.21