본문으로 건너뛰기

UZU Dev LogoUZU Dev LogoUZU-DEV

FrontendHTML

목록 태그와 구조적 나열

여러 항목을 묶어서 나열하는 구조, 즉 목록 태그를 정리하였다.

2026년 6월 24일

목록 태그와 구조적 나열 썸네일

1. 목록이 필요한 이유

정보를 나열할 때 단순히 줄바꿈으로 이어 쓰는 것과, 목록 태그로 묶는 것은 전혀 다른 의미를 갖는다.

<!-- 목록 태그 없이 나열: 시맨틱 정보 없음 -->
<p>HTML CSS JavaScript</p>

<!-- 목록 태그로 나열: "이 항목들은 하나의 집합" -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

목록 태그는 "이 항목들은 서로 같은 성격의 집합" 이라는 의미를 담는다. 스크린 리더는 목록을 만나면 "3개 항목으로 이루어진 목록입니다"처럼 안내해 사용자가 구조를 파악하게 한다. 검색 엔진도 목록 구조를 인식해 정보를 더 정확히 해석한다.

2. 순서 없는 목록: <ul>

2.1 기본 구조

<ul>(Unordered List) 은 항목의 순서가 의미 없는 목록이다. 기본 스타일은 각 항목 앞에 불릿 포인트(•)가 붙는다.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

렌더링 결과:

  • HTML
  • CSS
  • JavaScript
2.2 언제 <ul> 을 쓰나

항목의 순서를 바꿔도 의미가 달라지지 않을 때 <ul> 이 맞다.

  • 장 보기 목록 (계란, 우유, 빵의 순서는 중요하지 않다)
  • 기능 목록 (로그인, 회원가입, 검색의 순서는 중요하지 않다)
  • 내비게이션 메뉴 (메뉴 항목들은 순서 없는 집합)

내비게이션 메뉴는 <nav> 안에 <ul> 을 쓰는 것이 표준 패턴이다.

<nav>
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/about">소개</a></li>
    <li><a href="/blog">블로그</a></li>
  </ul>
</nav>

3. 순서 있는 목록: <ol>

3.1 기본 구조

<ol>(Ordered List) 은 항목의 순서가 의미 있는 목록이다. 기본 스타일은 숫자(1, 2, 3...)가 자동으로 붙는다.

<ol>
  <li>냄비에 물을 붓는다.</li>
  <li>물을 끓인다.</li>
  <li>라면 스프를 넣는다.</li>
  <li>면을 넣고 3분간 끓인다.</li>
</ol>

렌더링 결과:

  1. 냄비에 물을 붓는다.
  2. 물을 끓인다.
  3. 라면 스프를 넣는다.
  4. 면을 넣고 3분간 끓인다.
3.2 언제 <ol> 을 쓰나

항목의 순서를 바꾸면 의미가 달라질 때 <ol> 이 맞다.

  • 단계별 지침, 레시피 조리 순서
  • 검색 결과 순위, 순위표
  • 절차가 있는 설치 가이드
3.3 <ol> 의 속성

<ol> 은 번호 표시 방식을 제어하는 속성을 지원한다.

type — 번호 형식
<ol type="A">
  <li>첫 번째 항목</li>  <!-- A -->
  <li>두 번째 항목</li>  <!-- B -->
  <li>세 번째 항목</li>  <!-- C -->
</ol>
type 값표시 형식예시
1 (기본값)숫자1, 2, 3
A대문자 알파벳A, B, C
a소문자 알파벳a, b, c
I대문자 로마 숫자I, II, III
i소문자 로마 숫자i, ii, iii

type 속성은 시각적 표현보다 의미가 있을 때만 사용한다. 단순히 알파벳으로 보여주고 싶다면 CSS list-style-type 으로 조절하는 것이 원칙이다. type 속성은 알파벳 순서 자체가 콘텐츠의 일부일 때(예: 법령 조항 "A항, B항…") 쓴다.

start — 시작 번호
<!-- 4번부터 시작하는 목록 -->
<ol start="4">
  <li>네 번째 항목</li>  <!-- 4 -->
  <li>다섯 번째 항목</li>  <!-- 5 -->
</ol>

목록을 중간에 끊어서 이어 쓸 때 유용하다.

reversed — 역순
<!-- 카운트다운: 3, 2, 1 -->
<ol reversed>
  <li>세 번째</li>  <!-- 3 -->
  <li>두 번째</li>  <!-- 2 -->
  <li>첫 번째</li>  <!-- 1 -->
</ol>

4. 목록 항목: <li>

4.1 <ul> 과 <ol> 의 직접 자식

<li>(List Item)는 <ul> 과 <ol> 의 직접 자식 요소로만 쓴다. <ul> 이나 <ol> 의 직접 자식으로는 <li> 외의 요소를 두면 안 된다.

<!-- 잘못된 사용: ul의 직접 자식으로 div -->
<ul>
  <div>항목 A</div>
</ul>

<!-- 올바른 사용 -->
<ul>
  <li>항목 A</li>
</ul>
4.2 <li> 의 value 속성

<ol> 안의 <li> 에 value 속성을 지정하면 해당 항목부터 번호를 바꿀 수 있다.

<ol>
  <li>첫 번째</li>     <!-- 1 -->
  <li>두 번째</li>     <!-- 2 -->
  <li value="10">열 번째</li>  <!-- 10 -->
  <li>열한 번째</li>   <!-- 11 (이어서 증가) -->
</ol>

value 속성은 <ul> 의 <li> 에서는 아무 의미가 없다.

4.3 중첩 목록

<li> 안에 새로운 <ul> 이나 <ol> 을 넣어 목록을 중첩할 수 있다.

<ul>
  <li>프론트엔드
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>백엔드
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>
  • 새로운 중첩 목록은 반드시 <li> 안에 위치해야 한다. <li> 밖, <ul> 안에 직접 넣으면 유효하지 않은 HTML이다.
  • 중첩 깊이는 제한이 없으나, 너무 깊어지면 사용성이 떨어진다. 보통 3단계 이내를 권장한다.

5. <ul> vs <ol>: 선택 기준 정리

상황적합한 태그이유
요리 재료 나열<ul>재료의 순서는 의미 없음
요리 조리 순서<ol>순서가 틀리면 결과가 달라짐
내비게이션 메뉴<ul>메뉴 항목은 순서 없는 집합
검색 결과 순위<ol>1등~N등의 순서가 핵심
기능 목록<ul>기능들은 대등한 집합
설치 단계 가이드<ol>단계를 건너뛰면 안 됨

6. 정의형 목록: <dl>, <dt>, <dd>

6.1 정의형 목록이란

<dl>(Description List) 은 용어(Term)와 설명(Description)의 쌍으로 이루어진 목록이다. HTML4에서는 'Definition List(정의 목록)'로 불렸으나, HTML5에서 'Description List(설명 목록)'로 공식 명칭이 확장되었다. 용어 사전 외에도 더 넓은 맥락에서 쓸 수 있도록 의미를 넓힌 것이다.

  • <dt>(Description Term): 용어, 질문, 이름에 해당하는 부분
  • <dd>(Description Details): dt에 대응하는 설명, 정의, 답변
6.2 기본 구조
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language. 웹 문서의 구조와 의미를 정의하는 마크업 언어다.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets. HTML 문서에 시각적 스타일을 적용하는 언어다.</dd>

  <dt>JavaScript</dt>
  <dd>웹 페이지에 동적인 동작을 추가하는 프로그래밍 언어다.</dd>
</dl>
6.3 하나의 용어에 여러 설명

하나의 <dt> 뒤에 여러 <dd> 가 올 수 있다.

<dl>
  <dt>하이퍼텍스트</dt>
  <dd>비선형적으로 연결된 텍스트 구조다.</dd>
  <dd>팀 버너스리가 웹을 설계할 때 핵심 개념으로 삼았다.</dd>
  <dd>HTML의 `&lt;a&gt;` 태그가 이를 구현한다.</dd>
</dl>
6.4 여러 용어가 하나의 설명을 공유

여러 <dt> 가 연이어 나오고 하나의 <dd> 가 그 설명을 담는 것도 유효하다.

<dl>
  <dt>WWW</dt>
  <dt>월드 와이드 웹</dt>
  <dt>World Wide Web</dt>
  <dd>인터넷 위에서 동작하는 분산형 하이퍼미디어 정보 시스템이다.</dd>
</dl>
6.5 실제 활용 사례

<dl> 은 단순한 사전 이외에도 다양한 상황에 적합하다.

용어 사전·글로사리
<dl>
  <dt>DNS</dt>
  <dd>Domain Name System. 도메인 이름을 IP 주소로 변환하는 시스템이다.</dd>

  <dt>HTTP</dt>
  <dd>HyperText Transfer Protocol. 웹에서 데이터를 주고받는 통신 규약이다.</dd>
</dl>
FAQ (자주 묻는 질문)
<dl>
  <dt>HTML과 CSS의 차이는 무엇인가요?</dt>
  <dd>HTML은 문서의 구조와 의미를 정의하고, CSS는 그 문서에 시각적 스타일을 입힙니다.</dd>

  <dt>JavaScript는 왜 필요한가요?</dt>
  <dd>HTML과 CSS만으로는 정적인 페이지만 만들 수 있습니다. JavaScript는 클릭·입력 같은 사용자 인터랙션에 반응하는 동적 동작을 구현합니다.</dd>
</dl>
메타데이터 나열
<dl>
  <dt>작성자</dt>
  <dd>장유주</dd>

  <dt>작성일</dt>
  <dd><time datetime="2026-06-24">2026년 6월 24일</time></dd>

  <dt>태그</dt>
  <dd>HTML</dd>
  <dd>Web 기초</dd>
</dl>
6.6 <dl> 을 쓰면 안 되는 경우

<dl> 은 용어-설명 쌍의 관계가 있을 때만 적합하다.

<!-- 잘못된 사용: 들여쓰기 효과만 원해서 dd를 목록 항목처럼 쓴 경우 -->
<dl>
  <dd>HTML</dd>
  <dd>CSS</dd>
  <dd>JavaScript</dd>
</dl>

<!-- 올바른 방법: 일반 목록이라면 ul 사용 -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<dd> 의 기본 스타일이 들여쓰기(indent)이기 때문에, 이 시각 효과만을 노리고 <dl> 을 남용하는 경우가 있다. 들여쓰기가 필요하다면 CSS padding-left 또는 margin-left 로 처리한다.

7. CSS로 목록 스타일 변경하기

목록 태그의 기본 시각 스타일(불릿, 숫자)은 CSS로 자유롭게 바꿀 수 있다.

/* 불릿 제거 (내비게이션 메뉴에 자주 씀) */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 불릿 모양 변경 */
ul {
  list-style-type: square;   /* ■ */
}

/* 이미지를 불릿으로 */
ul {
  list-style-image: url('bullet.png');
}

/* ol 번호 형식 변경 */
ol {
  list-style-type: upper-roman;  /* I, II, III */
}

type 속성 vs CSS list-style-type

HTML의 type 속성과 CSS의 list-style-type 은 동일한 결과처럼 보이지만, 원칙적으로는 CSS를 써야 한다. HTML 속성은 내용의 의미에 관한 것이고, 시각적 스타일은 CSS가 담당한다는 관심사 분리 원칙 때문이다. type 속성은 알파벳 순서 자체가 콘텐츠 의미의 일부인 특수한 경우에만 사용한다.