본문 바로가기

  • 교재 소개

  • 3장 일단 글을 적어보자!

  • 3.2 목록 관련 태그 ul,ol,dl

목록 관련 태그 ul,ol,dl

1. 순서 있는 목록 (ol)

<ol>(ordered list)은 순서가 중요한 목록을 만들 때 사용합니다. 보통 번호(1, 2, 3...)나 알파벳(A, B, C...)으로 표시되며, 단계나 절차, 순위를 표현할 때 사용하면 좋습니다.

주요 속성

속성설명
type항목의 번호 형식 (1, A, a, I, i)
start목록의 시작 번호
reversed순서를 거꾸로 표시

🤔 브레드크럼 (BreadCrumbs) - 빵부스러기, 빵가루 사이트 구조와, 현재 페이지의 계층구조를 링크 목록등으로 나타낸 것을 말합니다. 사용자의 웹사이트의 탐색을 도와줍니다.

서울시청 브레드크럼
<nav aria-label="breadcrumb">
  <ol>
    <li>HOME</a></li>
    <li>서울소식</li>
    <li>새소식</li>
    <li>분야별 새소식</li>
  </ol>
</nav>

2. 순서 없는 목록 (ul)

<ul>(unordered list)은 순서가 중요하지 않은 목록을 나타냅니다. 항목은 보통 불릿(bullet, ●)으로 표시되며, 목록의 순서를 바꿔도 의미가 변하지 않을 때 사용합니다.

ol vs ul 순서 변경 시 의미가 달라진다면 → <ol> 순서가 중요하지 않다면 → <ul>

3. 목록 항목 (li)

<li>(list item)은 목록 내의 각 항목을 나타냅니다. 반드시 <ol> 또는 <ul>의 자식 요소로만 사용해야 하며, 단독으로는 사용할 수 없습니다.

<ol>
  <div>item</div>
  <!-- X -->
  <li>item</li>
  <li>item</li>
</ol>

자손요소로는 사용가능합니다

<ol>
  <li>
    item
    <div>first item</div>
  </li>
  <li>item</li>
</ol>

ol의 자식요소 li 특성

  • type: 넘버링 타입. ol요소에 지정하는 유형을 덮어씁니다.
  • value: 항목의 현재 서수 값을 나타내는 정수입니다. 목록의 특정 항목의 번호를 설정하는 데 사용됩니다.

3.1 중첩 목록

목록 안에 또 다른 목록을 넣을 수 있습니다. 이 경우 시각적으로 들여쓰기(indent) 되어 표시됩니다.

<ul>
  <li>
    프론트엔드
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>백엔드</li>
</ul>

4. 정의 목록 (dl)

<dl> 태그는 Definition List(설명 목록)의 줄임말로, 용어와 그 설명을 짝지어 표현하는 특별한 목록입니다. 마치 사전에서 단어와 뜻이 함께 나오는 것처럼, 웹 페이지에서도 체계적으로 정보를 정리할 수 있게 해줍니다.

주요 특징

<dl>은 용어와 그 설명(정의)을 짝지어 표현할 때 사용합니다. 키-값 구조(key-value pair)의 정보를 표현하는 데 적합합니다.

구성 요소

태그설명
<dl>전체 설명 목록을 감싸는 컨테이너
<dt>정의되는 용어(term)
<dd>용어의 설명(description)
<!-- 일반 목록으로 표현한다면 -->
<ul>
  <li>HTML: 웹페이지의 구조를 만드는 언어</li>
  <li>CSS: 웹페이지의 스타일을 꾸미는 언어</li>
  <li>JavaScript: 웹페이지에 동작을 추가하는 언어</li>
</ul>

<!-- dl 태그로 표현한다면 -->
<dl>
  <dt>HTML</dt>
  <dd>웹페이지의 구조를 만드는 언어</dd>

  <dt>CSS</dt>
  <dd>웹페이지의 스타일을 꾸미는 언어</dd>

  <dt>JavaScript</dt>
  <dd>웹페이지에 동작을 추가하는 언어</dd>
</dl>

활용 예시

회사 정보, 인물 프로필, 메타데이터 표시에 자주 사용됩니다.

<h3>위니브 정보</h3>
<dl>
  <dt>회사설명</dt>
  <dd>제주도에 위치한 ICT 콘텐츠 회사</dd>
  <dt>연락처</dt>
  <dd>02-1234-5679</dd>
  <dt>대표이사</dt>
  <dd>이호준</dd>
  <dt>사업자등록번호</dt>
  <dd>123-45-67890</dd>
</dl>

여러 용어 그룹을 시각적으로 구분하려면 <div>로 묶어 사용할 수 있습니다. 이 경우에도 시맨틱 구조는 <dl> 내부에 유지됩니다.

<dl>
  <div>
    <dt></dt>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </div>
  <div>
    <dt></dt>
    <dt></dt>
    <dd></dd>
    <dd></dd>
  </div>
</dl>