반갑습니다. 촉끼남입니다.
이번에는 ol태그와 li태그를 사용하여 순번이 있는 목록을 만드는 방법에 대해서 정리해 보겠습니다.
태그 설명
<ol><li>...</li></ol> 형식으로 태그를 사용합니다.
<ol>태그는 순번이 있는 목록을 만들겠다는 설정이고, <li>태그는 목록 리스트를 나열한다는 설정입니다.
기본적으로 순번은 순자 1부터 시작합니다.
<ol><li>...</li></ol>태그 사용 예제
<body>
<p>대한민국 교육과정 순서</p>
<ol>
<li>초등학교</li>
<li>중학교</li>
<li>고등학교</li>
<li>대학교</li>
</ol>
</body>
자.. 그럼 위의 소스로 작성한 html문서를 IE10으로 확인해 보도록 하겠습니다.
html소스로 작성할 때에 순서를 지정해 주지 않았음에도 불구하고, 숫자로 된 순번이 자동을 입력되는 것을 확인할 수 있습니다.
<ol start="#">...</ol> 태그 응용
<ol start="#">...</ol>태그를 사용하면 자동으로 입력되는 순번의 시작 숫자를 설정할 수 있습니다.
<body>
<p>대한민국 교육과정 순서</p>
<ol start="2">
<li>초등학교</li>
<li>중학교</li>
<li>고등학교</li>
<li>대학교</li>
</ol>
</body>
위와 같이 적용을 하면 목록이 숫자 2부터 순번을 매기게 됩니다.
<ol><li value="#">...</li></ol> 태그 응용
<ol><li value="#">...</li></ol>태그를 사용하면 순번 자동 입력 도중에 순번의 번호를 바꿀수 있습니다.
<body>
<p>대한민국 교육과정 순서</p>
<ol>
<li>초등학교</li>
<li>중학교</li>
<li value="7">고등학교</li>
<li>대학교</li>
</ol>
</body>
위와 같이 적용을 하게 되면 순번이 자동으로 입력되다가 고등학교에서 7, 대학교에서 8 순번으로 입력되게 됩니다.
순번이 있는 목록 만들기에 대해서 정리해 보았습니다.
기본적인 개념만 잡고 있다면, 크게 어렵지 않은 내용이라고 생각되오니,
여러분들도 실제로 html 문서를 작성해 보시기 바랍니다.
오늘 포스팅은 여기까지입니다. 지금까지 잡지식스토리의 촉끼남이였습니다.
'웹문서 공부' 카테고리의 다른 글
| [웹문서]동일 페이지에서 지정한 위치로 이동하기 (1) | 2013.11.28 |
|---|---|
| [HTML]div 태그, 일반적인 영역 설정하기 (0) | 2013.11.15 |
| [웹문서] ul 태그, li 태그, 목록 만들기 (1) | 2013.10.30 |
| [웹문서]pre 태그, 입력한대로 표시하기 (0) | 2013.10.28 |
| [웹문서]footer 태그, 바닥글 나타내기 (0) | 2013.10.24 |
