<ol>
태그의 정의 및 사용법
<ol>
태그는
순서가 지정되어 있는 항목(items)의 목록(list)를 나타내는 태그입니다.
<ol>
은 순서를 변경하면 그 의미가 실질적으로 변경된다는 의미인 Ordered List(순서가 지정된 목록)의 약자로 사용된 것입니다.
<ol>
태그는 순서가 중요한 항목들을그룹화하기 위해 사용됩니다. 이 요소의 하위 항목은 <li>
태그로 구성된 요소입니다. 이 항목 앞에는 글머리 번호(예를 들어 "1, 2, 3, ...")가 순서대로 자동으로 생성되어 표시됩니다.
순서가 지정되지 않는 항목들을 그룹화하기 위해서는 <ul>
태그를 사용하세요.
다음은 <ol>
태그를 사용한 간단한 예제입니다.
<p>우리동네 분식점 메뉴중에서 맛있는 순서입니다.</p>
<ol>
<li>라면</li>
<li>김밥</li>
<li>돈까스</li>
<li>김치볶음밥</li>
</ol>
우리동네 분식점 메뉴중에서 맛있는 순서입니다.
- 라면
- 김밥
- 돈까스
- 김치볶음밥
허용되는 콘텐츠와 주의할 점
<ol>
태그의 자식 요소로 사용될 수 있는 콘텐츠는 제한적입니다.
0개 이상의 이 요소들을 제외하고 다른 요소, 혹은 텍스의 삽입(text node를 의미함) 등은 사용할 수 없습니다.
다음의 예시는 <ol>
태그의 허용되지 않는 콘텐츠를 사용한 잘못된 사례들과 올바른 사례들입니다.
잘못된 사례와 올바른 사례
<ol>
태그의 자식 요소로 사용할 수 없는 <p>
태그가 사용되었습니다.
<ol>
<p>우리동네 분식점 메뉴중에서 맛있는 순서입니다.</p>
<li>라면</li>
<li>김밥</li>
<li>돈까스</li>
<li>김치볶음밥</li>
</ol>
<ol>
태그의 콘텐츠로 텍스트가 사용되었습니다.
<ol>
우리동네 분식점 메뉴중에서 맛있는 순서입니다.
<li>라면</li>
<li>김밥</li>
<li>돈까스</li>
<li>김치볶음밥</li>
</ol>
<p>우리동네 분식점 메뉴중에서 맛있는 순서입니다.</p>
<ol>
<li>라면</li>
<li>김밥</li>
<li>돈까스</li>
<li>김치볶음밥</li>
</ol>
<ol>
태그의 자식 요소로 사용할 수 없는 <a>
태그가 사용되었습니다.
<h3>실시간 검색 순위</h3>
<ol>
<a href=""><li>HTML 공부하는 방법</li></a>
<a href=""><li>CSS 공부하는 방법</li></a>
<a href=""><li>JavaScipt 공부하는 방법</li></a>
<a href=""><li>PHP 공부하는 방법</li></a>
</ol>
<h3>실시간 검색 순위</h3>
<ol>
<li><a href="">HTML 공부하는 방법</a></li>
<li><a href="">CSS 공부하는 방법</a></li>
<li><a href="">JavaScipt 공부하는 방법</a></li>
<li><a href="">PHP 공부하는 방법</a></li>
</ol>
<ol>
태그에 콘텐츠가 없어도 구문상 잘못된 사례는 아닙니다. 하지만 HTML의 콘텐츠 맥락상 사용을 권장하지 않습니다.
<ol>
<!-- 콘텐츠가 없습니다. -->
</ol>
유용한 속성
<ol>
태그에는 유용한 두 가지의 속성이 있습니다. reversed
와 start
속성입니다.
reversed
속성
reversed
는 목록의 순서를 역순으로 바꿔주는 속성입니다. 이 속성은 부울 속성(boolean attribute)으로 값을 별도로 작성하지 않고 속성만 작성합니다.
<p>우리동네 분식점 메뉴중에서 맛있는 순서입니다.</p>
<ol reversed>
<li>라면</li>
<li>김밥</li>
<li>돈까스</li>
<li>김치볶음밥</li>
</ol>
우리동네 분식점 메뉴중에서 맛있는 순서입니다.
- 라면
- 김밥
- 돈까스
- 김치볶음밥
start
속성
start
는 <ol>
태그의 첫 번째 항목이 시작하는 순서를 지정합니다. 값은 정수값을 사용합니다. 음의 정수, 0
, 양의 정수를 모두 사용할 수 있습니다.
<p>우리동네 분식점 메뉴중에서 맛있는 순서입니다.</p>
<ol>
<li>라면</li>
<li>김밥</li>
<li>돈까스</li>
<li>김치볶음밥</li>
</ol>
<p>그 다음으로 맛있는 메뉴는 다음과 같습니다.</p>
<ol start="5">
<li>만두</li>
<li>라뽂이</li>
<li>칼국수</li>
</ol>
우리동네 분식점 메뉴중에서 맛있는 순서입니다.
- 라면
- 김밥
- 돈까스
- 김치볶음밥
그 다음으로 맛있는 메뉴는 다음과 같습니다.
- 만두
- 라뽂이
- 칼국수
중첩된 목록 사용하기
<ol>
태그 하위 항목인 <li>
태그에 <ul>
태그나 <ol>
태그를 필요한 만큼 중첩해서 사용할 수 있고 서로 교차해서도 사용할 수 있습니다.
<p>우리동네 분석점은 맛있는 메뉴가 많습니다.</p>
<ol>
<li>
면류
<ul>
<li>라면</li>
<li>칼국수</li>
<li>스파게티</li>
</ul>
</li>
<li>
김밥류
<ul>
<li>참치김밥</li>
<li>야채김밥</li>
<li>날치알김밥</li>
</ul>
</li>
<li>
돈까스류
<ul>
<li>일반돈까스</li>
<li>돈까스정식</li>
</ul>
</li>
</ol>
우리동네 분석점은 맛있는 메뉴가 많습니다.
-
면류
- 라면
- 칼국수
- 스파게티
-
김밥류
- 참치김밥
- 야채김밥
- 날치알김밥
-
돈까스류
- 일반돈까스
- 돈까스정식
<p>우리동네 분석점의 메뉴의 순서입니다.</p>
<ol>
<li>
면류
<ol>
<li>라면</li>
<li>칼국수</li>
<li>스파게티</li>
</ol>
</li>
<li>
김밥류
<ol>
<li>참치김밥</li>
<li>야채김밥</li>
<li>날치알김밥</li>
</ol>
</li>
<li>
돈까스류
<ol>
<li>일반돈까스</li>
<li>돈까스정식</li>
</ol>
</li>
</ol>
우리동네 분석점의 메뉴의 순서입니다.
-
면류
- 라면
- 칼국수
- 스파게티
-
김밥류
- 참치김밥
- 야채김밥
- 날치알김밥
-
돈까스류
- 일반돈까스
- 돈까스정식
CSS 활용 팁
CSS를 사용하여 리스트 마커를 스타일링하는 다양한 방법에 대해 소개합니다.
브라우저 호환성
태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<ol>
|
1 | 12 | 1 | 4 |
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
reversed
|
18 | 79 | 18 | 4 |
start
|
1 | 12 | 1 | 4 |
명세서
명세서 사양 | |
---|---|
<ol>
|
HTML Standard #the-ol-element |