HTML ol 태그 reversed 속성 – 목록 번호를 내림차순으로 표시하는 방법

HTML의 <ol> 요소에 사용되는 reversed 속성은 순서 있는 목록의 항목 번호를 역순, 즉 내림차순으로 표시하는 기능입니다. 이 속성을 사용하면 10번부터 1번까지 번호가 매겨진 목록을 간단하게 만들 수 있으며, HTML5에서 새롭게 도입되었습니다.

reversed 속성은 불리언(Boolean) 속성이므로 별도의 값 없이 태그에 작성만 하면 활성화됩니다. 기본 문법은 다음과 같습니다.

<ol reversed>

예제: 내림차순 순위 목록 만들기

다음 예제는 reversed 속성을 적용하여 참가자 명단을 내림차순으로 출력하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<body>
<h2>내림차순 순위</h2>
<ol reversed>
   <li>Tom</li>
   <li>Jack</li>
   <li>Will</li>
   <li>Harry</li>
   <li>Tim</li>
   <li>Steve</li>
   <li>David</li>
   <li>Kane</li>
   <li>William</li>
   <li>John</li>
</ol>
</body>
</html>

출력 결과

HTML ol 태그 reversed 속성 – 목록 번호를 내림차순으로 표시하는 방법

위 코드를 실행하면 목록 항목에 10부터 1까지 번호가 내림차순으로 매겨져 표시됩니다.

코드 상세 설명

먼저 <li> 요소를 사용해 다음과 같은 목록 항목들을 정의합니다.

<li>Tom</li>
<li>Jack</li>
<li>Will</li>
<li>Harry</li>
<li>Tim</li>
<li>Steve</li>
<li>David</li>
<li>Kane</li>
<li>William</li>
<li>John</li>

이 항목들은 순서 있는 목록을 나타내는 <ol> 요소 안에 배치됩니다. 일반적인 <ol> 목록은 1부터 시작하여 오름차순으로 번호가 붙지만, reversed 속성을 추가하면 아래와 같이 번호가 역순으로 표시됩니다.

<ol reversed>
<li>Tom</li>
<li>Jack</li>
<li>Will</li>
<li>Harry</li>
<li>Tim</li>
<li>Steve</li>
<li>David</li>
<li>Kane</li>
<li>William</li>
<li>John</li>
</ol>

알아두면 좋은 점

reversed 속성은 HTML5에서 도입된 불리언 속성으로, 값 없이 사용합니다.
Chrome, Firefox, Safari, Edge 등 주요 최신 브라우저에서 모두 지원됩니다.
start 속성과 함께 사용하면 역순 목록의 시작 번호를 지정할 수 있습니다. 예: <ol reversed start="20">