HTML Academy · 강의

순서 있는 목록 ol, start, reversed, type

번호 매기기 목록을 만들고 순서를 사용자 지정합니다.

순서 있는 목록 ol, start, reversed, type은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

순서 있는 목록이란 무엇입니까

순서 있는 목록은 순서가 중요한 항목을 표시합니다:

<ol>
  <li>Install Node.js</li>
  <li>Create project folder</li>
  <li>Run npm init</li>
  <li>Install dependencies</li>
</ol>

ol 요소

<ol>(순서 있는 목록) 요소는 기본적으로 목록 항목을 연속된 숫자로 렌더링합니다:

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
<!-- Numbers are generated by the browser -->
<!-- You do not need to type 1. 2. 3. -->
<!-- Reordering items updates numbering automatically -->

start 속성

start 속성은 시작 번호를 설정합니다:

<p>Steps 1-3 are covered in Part One. Continuing from step 4:</p>

<ol start="4">
  <li>Configure the database</li>
  <li>Set environment variables</li>
  <li>Run migrations</li>
</ol>
<!-- Numbers start at 4, 5, 6 -->

reversed 속성

reversed 속성은 숫자를 올리는 대신 내림차순으로 셉니다:

<!-- Top 3 countdown -->
<ol reversed>
  <li>Bronze: 95 points</li>
  <li>Silver: 98 points</li>
  <li>Gold: 100 points</li>
</ol>
<!-- Renders: 3. Bronze... 2. Silver... 1. Gold -->
<!-- reversed is a boolean attribute — no value needed -->

type 속성

type 속성은 표식 스타일을 변경합니다:

<ol type="1">...</ol>   <!-- 1, 2, 3 (default) -->
<ol type="a">...</ol>   <!-- a, b, c (lowercase letters) -->
<ol type="A">...</ol>   <!-- A, B, C (uppercase letters) -->
<ol type="i">...</ol>   <!-- i, ii, iii (lowercase Roman) -->
<ol type="I">...</ol>   <!-- I, II, III (uppercase Roman) -->

CSS의 type과 HTML의 type 비교

HTML의 type 속성보다 CSS의 list-style-type을 우선 사용합니다:

<!-- HTML type (still valid): -->
<ol type="A">
  <li>Option A</li>
</ol>

<!-- CSS approach (separates concerns): -->
<!--
ol.lettered {
  list-style-type: upper-alpha;
}
-->
<ol class="lettered">
  <li>Option A</li>
</ol>

li의 value 속성

value로 개별 목록 항목의 번호를 재정의합니다:

<ol>
  <li>First item</li>
  <li value="10">Tenth item</li>   <!-- jumps to 10 -->
  <li>Eleventh item</li>            <!-- continues: 11 -->
</ol>

중첩된 ol과 ul

목록은 중첩할 수 있으며, 순서 있는 목록과 순서 없는 목록을 섞어 사용할 수 있습니다:

<ol>
  <li>
    Install tools
    <ul>
      <li>VS Code</li>
      <li>Node.js</li>
    </ul>
  </li>
  <li>Create project</li>
  <li>Write code</li>
</ol>

의미론적 사용 사례

순서가 의미가 있을 때 <ol>을 사용합니다:

단계별 지침
순위가 매겨진 결과(상위 10개 목록)
법률 문서 섹션
레시피 단계
번호가 매겨진 섹션으로 구성된 목차

CSS의 카운터 재설정

CSS 카운터를 사용하면 목록 번호 매기기 스타일을 완전히 제어할 수 있습니다:

ol {
  list-style: none;
  counter-reset: step;
}

ol li {
  counter-increment: step;
}

ol li::before {
  content: 'Step ' counter(step) ': ';
  font-weight: bold;
  color: #0070f3;
}

ol로 이동 경로 만들기

이동 경로 탐색은 의미론적으로 순서 있는 목록입니다:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Documentation</a></li>
    <li><span aria-current="page">HTML Lists</span></li>
  </ol>
</nav>

빠른 확인

ol이 거꾸로 세도록 만드는 속성은 무엇입니까?

복습: 순서 있는 목록

순서 있는 목록의 핵심 내용:

<ol> — 순서가 중요한 연속 목록
start — 사용자 지정 번호부터 번호 매기기 시작
reversed — 내림차순으로 세기
type — 표식 변경: 1, a, A, i, I
<li>의 value — 개별 항목 번호 재정의
더 세밀하게 제어하려면 CSS list-style-type과 카운터를 사용합니다

자주 묻는 질문

“순서 있는 목록 ol, start, reversed, type” 강의는 무료인가요?

네 — “순서 있는 목록 ol, start, reversed, type” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“순서 있는 목록 ol, start, reversed, type”에서 뭘 배우나요?

번호 매기기 목록을 만들고 순서를 사용자 지정합니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“순서 있는 목록 ol, start, reversed, type” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기