HTML reversed 속성 완벽 가이드 – 순서 목록을 내림차순으로 표시하는 방법

HTML의 reversed 속성은 <ol> 요소로 만든 순서 있는 목록의 번호를 내림차순으로 표시하도록 지정하는 불리언(Boolean) 속성입니다. 이 속성을 사용하면 목록 항목에 큰 번호부터 작은 번호 순으로 매겨지므로, 카운트다운이나 최신 항목을 위쪽에 배치하는 목록 등 역순 표현이 필요한 상황에서 유용하게 활용할 수 있습니다.

문법(Syntax)

reversed 속성의 기본 문법은 다음과 같습니다.

<ol reversed></ol>

reversed는 별도의 값을 지정하지 않는 불리언 속성이기 때문에, 태그에 속성 이름만 추가하면 곧바로 적용됩니다.

예제(Example)

다음 예제를 통해 reversed 속성이 실제로 어떻게 동작하는지 확인해 보겠습니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    }
</style>
<body>
<h1>HTML reversed Demo</h1>
<p>List of subjects: </p>
<ol reversed>
<li>Physics</li>
<li>Chemistry</li>
<li>Maths</li>
<li>Biology</li>
<li>Economics</li>
</ol>
</body>
</html>

출력 결과(Output)

HTML reversed 속성 완벽 가이드 – 순서 목록을 내림차순으로 표시하는 방법

위 코드를 실행하면 목록 번호가 5, 4, 3, 2, 1처럼 내림차순으로 표시되는 것을 확인할 수 있습니다. 즉, 첫 번째 항목인 Physics는 5번, 마지막 항목인 Economics는 1번으로 매겨집니다.

정리

reversed 속성은 JavaScript 없이 HTML만으로 목록 번호의 방향을 손쉽게 뒤집을 수 있는 간편한 기능입니다. 순위 발표, 카운트다운, 최신 게시물 목록 등 역순 정렬이 필요한 다양한 상황에서 활용해 보세요.