티스토리 뷰

HTML

[HTML] <ul>

<ul>

일반적인 글이나 문장을 쓴다면 <p> 태그를 사용합니다. <ul> 태그는 일반적인 글 보다는 목록 형식의 글을 사용할 때 씁니다. 목록을 쓸 때 순서가 상관이 없다면 <ul> 태그를 사용하며, 순서가 상관이 있다면 <ol> 태그를 사용합니다. 무엇인가를 설명하고 정의할 때는 <dl> 태그를 사용합니다. 목록형 태그에는 각각의 항목이 있기 때문에 이 때에는 <li> 태그를 같이 사용해야 합니다. <dl> 태그의 경우에는 <dt> 또는 <dd>를 같이 사용합니다.

<li> 태그 안에는 또 다른 <ul> 태그 또는 <ol> 태그가 올 수 있으며, 2단 3단 목록형 태그로도 사용가능합니다. 목록형 태그를 사용하면 블릿기호가 생깁니다. ul 태그는 점과, 사각형 점이 생기고, ol 태그는 번호가 생기며, dl은 아무것도 생기지 않습니다. 이런 블릿기호는 CSS list-style-type에서 설정이 가능합니다.


<ul>

<ul> 태그는 순서가 없는 목록형 태그를 정의합니다.

정의(Definition)

  • <ul> 태그는 순서가 없는 목록을 정의합니다.
  • <ul> 태그는 항목을 나타내는 <li>와 같이 사용됩니다.
  • <ul> 태그를 사용하면 블릿 기호가 나타납니다. 보통 실무에선 블릿 기호가 브라우저마다 다르게 나오기 때문에 초기화하여 사용하지 않습니다.

비교(Compare)

  • 일반적인 문장이나 글을 쓴다면 <p> 태그를 사용합니다.
  • 순서가 필요없는 목록형 글을 쓴다면 <ul> 태그를 사용합니다.
  • 순서가 필요한 목록형 글을 쓴다면 <ol> 태그를 사용합니다.
  • 목록형 글의 항목은 <li> 태그를 사용합니다.
  • 설명이나 정의가 필요한 목록형 글을 쓴다면 <dl> 태그를 사용합니다.
  • 설명이나 정의가 필요한 목록형 글의 제목은 <dt> 태그를 사용합니다.
  • 설명이나 정의가 필요한 목록형 글의 항목은 <dd> 태그를 사용합니다.
  • 블릿 기호 수정은 CSS list-style-type에서 변경합니다.

샘플(Sample)

목록형 태그를 사용하면 블릿기호가 생깁니다. ul 태그는 점과, 사각형 점이 생기고, ol 태그는 번호가 생기며, dl은 아무것도 생기지 않습니다. 이런 블릿기호는 CSS list-style-type에서 설정이 가능합니다.

Sample1

순서가 필요없는 목록형 태그

  • 용어를 설명하는 목록형 태그
  • 제목을 설명하는 목록형 태그
  • 제목을 설명하는 목록형 태그

순서가 필요한 목록형 태그

  1. 용어를 설명하는 목록형 태그
  2. 제목을 설명하는 목록형 태그
  3. 제목을 설명하는 목록형 태그

설명이 필요한 목록형 태그

목록형 태그란?
목록이 필요한 글에는 목록형 태그를 사용합니다.
html
<h3>순서가 필요없는 목록형 태그</h3>
<ul>
    <li>용어를 설명하는 목록형 태그</li>
    <li>제목을 설명하는 목록형 태그</li>
    <li>제목을 설명하는 목록형 태그</li>
</ul>
<h3>순서가 필요한 목록형 태그</h3>
<ol>
    <li>용어를 설명하는 목록형 태그</li>
    <li>제목을 설명하는 목록형 태그</li>
    <li>제목을 설명하는 목록형 태그</li>
</ol>
<h3>설명이 필요한 목록형 태그</h3>
<dl>
    <dt>목록형 태그란?</dt>
    <dd>목록이 필요한 글에는 목록형 태그를 사용합니다.</dd>
</dl>

샘플(Sample)

목록형 태그는 2단 또는 3단으로 사용할 수 있습니다. 블릿기호는 브라우저마다 다르게 나올 수 있습니다.

Sample1

순서가 필요 없는 목록형 태그

  • 이것은 첫번째 목록입니다.
  • 이것은 첫번째 목록입니다.
    • 이것은 두번째 목록입니다.
    • 이것은 두번째 목록입니다.
      • 이것은 세번째 목록입니다.
      • 이것은 세번째 목록입니다.
    • 이것은 두번째 목록입니다.
  • 이것은 첫번째 목록입니다.
html
<h3>순서가 필요 없는 목록형 태그</h3>
<ul>
    <li>이것은 첫번째 목록입니다.</li>
    <li>이것은 첫번째 목록입니다.
        <ul>
            <li>이것은 두번째 목록입니다.</li>
            <li>이것은 두번째 목록입니다.
                <ul>
                    <li>이것은 세번째 목록입니다.</li>
                    <li>이것은 세번째 목록입니다.</li>
                </ul>
            </li>
            <li>이것은 두번째 목록입니다.</li>
        </ul>
    </li>
    <li>이것은 첫번째 목록입니다.</li>
</ul>

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<ul> 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • HTML

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
  • 프로필사진 ul 은 인라인 구조가 아니라 블록 구조아닌가요? 양영미 2019.06.27 19:04
댓글쓰기 폼