순서 목록

<ol class="krds-info-list ordered">
  <li><span class="num">1. </span>텍스트 목록 레벨1</li>
  <li>
    <span class="num">2. </span>텍스트 목록 레벨1
    <ol class="krds-info-list ordered">
      <li><span class="num">a. </span>텍스트 목록 레벨2</li>
      <li>
        <span class="num">b. </span>텍스트 목록 레벨2
        <ol class="krds-info-list ordered">
					<li><span class="num">①</span>텍스트 목록 레벨3</li>
					<li><span class="num">②</span>텍스트 목록 레벨3</li>
				</ol>
      </li>
			<li><span class="num">c. </span>텍스트 목록 레벨2</li>
    </ol>
  </li>
  <li><span class="num">3. </span>텍스트 목록 레벨1</li>
</ol>

<br>
<br>

<ol class="krds-info-list ordered">
  <li>
    <span class="num">1. </span>텍스트 목록 레벨1
    <ul class="krds-info-list dash">
      <li>
        텍스트 목록 레벨2
        <ol class="krds-info-list ordered">
					<li><span class="num">①</span>텍스트 목록 레벨3</li>
					<li><span class="num">②</span>텍스트 목록 레벨3</li>
				</ol>
      </li>
    </ul>
  </li>
	<li>
    <span class="num">2. </span>텍스트 목록 레벨1
    <ol class="krds-info-list ordered">
			<li>
				<span class="num">a. </span>텍스트 목록 레벨2
				<ul class="krds-info-list hollow">
          <li>텍스트 목록 레벨3</li>
          <li>텍스트 목록 레벨3</li>
        </ul>
			</li>
		</ol>
  </li>
</ol>

<template>
  <ol class="krds-info-list ordered">
  <li><span class="num">1. </span>텍스트 목록 레벨1</li>
  <li>
    <span class="num">2. </span>텍스트 목록 레벨1
    <ol class="krds-info-list ordered">
      <li><span class="num">a. </span>텍스트 목록 레벨2</li>
      <li>
        <span class="num">b. </span>텍스트 목록 레벨2
        <ol class="krds-info-list ordered">
					<li><span class="num">①</span>텍스트 목록 레벨3</li>
					<li><span class="num">②</span>텍스트 목록 레벨3</li>
				</ol>
      </li>
			<li><span class="num">c. </span>텍스트 목록 레벨2</li>
    </ol>
  </li>
  <li><span class="num">3. </span>텍스트 목록 레벨1</li>
</ol>

<br>
<br>

<ol class="krds-info-list ordered">
  <li>
    <span class="num">1. </span>텍스트 목록 레벨1
    <ul class="krds-info-list dash">
      <li>
        텍스트 목록 레벨2
        <ol class="krds-info-list ordered">
					<li><span class="num">①</span>텍스트 목록 레벨3</li>
					<li><span class="num">②</span>텍스트 목록 레벨3</li>
				</ol>
      </li>
    </ul>
  </li>
	<li>
    <span class="num">2. </span>텍스트 목록 레벨1
    <ol class="krds-info-list ordered">
			<li>
				<span class="num">a. </span>텍스트 목록 레벨2
				<ul class="krds-info-list hollow">
          <li>텍스트 목록 레벨3</li>
          <li>텍스트 목록 레벨3</li>
        </ul>
			</li>
		</ol>
  </li>
</ol>
</template>

<script setup lang="ts">
// 순서 목록 컴포넌트
// 순서가 있는 목록입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>