Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML ol 태그로 순서 있는 목록 만들기: 주요 속성과 예제 총정리

HTML 순서 있는 목록(<ol>)이란?

HTML의 <ol>(ordered list) 태그는 각 항목에 번호가 자동으로 붙는 순서 있는 목록을 만들 때 사용합니다. 단계별 절차나 순위처럼 순서가 중요한 내용을 나타낼 때 유용하며, 목록의 개별 항목은 <li> 태그로 작성합니다.

아래 코드를 실행하면 <ol> 태그를 이용해 순서 있는 목록을 만들 수 있습니다.

<ol> 태그의 주요 속성

HTML <ol> 태그는 다음과 같은 추가 속성을 지원합니다.

속성

설명
compact
compact
목록을 더 좁은 형태(압축)로 렌더링할지 지정합니다. (HTML5에서는 지원되지 않는 비권장 속성입니다.)
reversed
reversed
목록의 순서를 내림차순으로 지정합니다.
start
숫자(number)
목록 번호가 시작되는 초기 값을 지정합니다.
type
A
a
I
i
1
목록 번호의 스타일을 지정합니다. 대문자(A), 소문자(a), 대문자 로마자(I), 소문자 로마자(i), 숫자(1) 중 선택할 수 있습니다.

예제 코드

다음 예제를 직접 실행해 보면 <ol> 태그로 순서 있는 목록을 만드는 방법을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML ol Tag</title>
   </head>
   <body>
      <p>Programming Languages:</p>
      <ol>
         <li>Java</li>
         <li>C++</li>
         <li>C</li>
      </ol>
   </body>
</html>

이 코드를 브라우저에서 실행하면 Java, C++, C 세 가지 프로그래밍 언어가 1, 2, 3번으로 번호가 매겨진 목록으로 출력됩니다.