중첩 목록과 목록 스타일 지정
목록 안에 목록을 중첩하고 모양을 제어합니다.
중첩 목록과 목록 스타일 지정은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
목록 중첩하기
목록은 <li> elements inside에 중첩할 수 있습니다:
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Python</li>
</ul>
</li>
</ul>올바른 중첩
중첩 목록은 <ul> 또는 <ol>의 직접 자식이 아니라 <li> 요소 inside에 있어야 합니다:
<!-- WRONG: nested ul as direct child of outer ul -->
<ul>
<ul> <!-- INVALID -->
<li>Item</li>
</ul>
</ul>
<!-- CORRECT: nested ul inside li -->
<ul>
<li>
Parent item
<ul>
<li>Child item</li>
</ul>
</li>
</ul>다단계 글머리 기호 스타일
브라우저는 각 중첩 단계에 서로 다른 기본 글머리 기호를 적용합니다:
<ul>
<li>Level 1 — disc (filled circle)</li> <!-- • -->
<ul>
<li>Level 2 — circle (open circle)</li> <!-- ○ -->
<ul>
<li>Level 3 — square</li> <!-- ▪ -->
</ul>
</ul>
</ul>CSS로 재설정하기
CSS로 중첩된 목록의 스타일을 재정의합니다:
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
/* Style each level explicitly */
.nav > li > ul {
padding-left: 1rem;
list-style: disc;
}번호가 매겨진 중첩 목록
서로 다른 유형을 사용하는 중첩된 순서 있는 목록입니다:
<ol type="1">
<li>Introduction
<ol type="a">
<li>Background</li>
<li>Motivation</li>
</ol>
</li>
<li>Methods
<ol type="a">
<li>Data collection</li>
</ol>
</li>
</ol>사용자 지정 번호 매기기를 위한 CSS 카운터
CSS 카운터를 사용한 사용자 지정 계층 번호 매기기입니다:
ol {
list-style: none;
counter-reset: level1;
}
ol > li { counter-increment: level1; }
ol > li::before { content: counter(level1) '. '; }
ol ol {
counter-reset: level2;
}
ol ol > li { counter-increment: level2; }
ol ol > li::before {
content: counter(level1) '.' counter(level2) ' ';
}아코디언 탐색 패턴
중첩 목록을 확장 가능한 사이드바 탐색으로 만들 수 있습니다:
<ul class="tree-nav">
<li>
<details>
<summary>Frontend</summary>
<ul>
<li><a href="/html">HTML</a></li>
<li><a href="/css">CSS</a></li>
</ul>
</details>
</li>
<li><a href="/backend">Backend</a></li>
</ul>중첩 목록 간격 지정
CSS로 시각적 들여쓰기를 제어합니다:
ul {
padding-left: 1.5rem; /* Controls indent at each level */
margin: 0.5rem 0;
}
/* Tighter nested spacing */
ul ul {
margin: 0.25rem 0;
padding-left: 1.25rem;
}list-style 단축 속성 복습
모든 목록 스타일 속성을 결합합니다:
/* Shorthand: type position image */
ul {
list-style: square inside;
}
/* Longhand equivalents: */
ul {
list-style-type: square;
list-style-position: inside; /* inside or outside */
list-style-image: none;
}목록 표식으로 사용자 지정 아이콘 사용
SVG 또는 이모지를 목록 표식으로 사용합니다:
ul.checklist {
list-style: none;
padding: 0;
}
ul.checklist li::before {
content: '✓ ';
color: #22c55e;
font-weight: bold;
}
/* Or with a background SVG */
ul.icon-list li {
padding-left: 2rem;
background: url('/icons/arrow.svg') no-repeat 0 0.2em;
background-size: 1rem 1rem;
list-style: none;
}중첩 목록의 접근성
중첩 목록과 화면 낭독기:
- 화면 낭독기는 중첩 단계와 항목 수를 알립니다
- 깊은 중첩(4단계 이상)은 혼란스러우므로 최대 2~3단계로 유지합니다
- 바깥 목록에
list-style: none을 사용한다면role="list"를 추가합니다
빠른 확인
중첩 목록은 바깥 목록 안에서 어디에 배치해야 합니까?
복습: 중첩 목록
중첩 목록의 핵심:
<li>안에 목록을 중첩합니다 —<ul>바로 안에는 넣지 않습니다- 브라우저는 기본적으로 수준마다 원형 점 → 빈 원 → 사각형 순서를 사용합니다
- CSS 카운터를 사용하면 사용자 지정 계층형 번호 매기기를 구현할 수 있습니다
- 사용성을 위해 중첩은 2~3수준으로 제한합니다
- 펼칠 수 있는 중첩 탐색에는
<details>+<summary>를 사용합니다
자주 묻는 질문
“중첩 목록과 목록 스타일 지정” 강의는 무료인가요?
네 — “중첩 목록과 목록 스타일 지정” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“중첩 목록과 목록 스타일 지정”에서 뭘 배우나요?
목록 안에 목록을 중첩하고 모양을 제어합니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“중첩 목록과 목록 스타일 지정” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.