4.3 li, ol, ul 요소(Element)
li 요소는 list item의 약자로 정렬된 리스트, 정렬되지 않은
리스트, 메뉴, 디렉토리 등에 포함되는 아이템(항목)을 나타내는데 사용되는 요소로 “<li>아이템이름</li>”의 형태로 사용합니다.
만약 li 요소가 ol 요소의 자식 요소로 사용될
경우 li는 value 속성을 가질 수 있으며 <li value=”3”>아이템이름</li>”처럼
정수형값으로 설정하여 사용할 수 있으며 뒤에 이어지는 아이템은 여기서 1씩 증가되어 표시됩니다.
ol 요소는 ol(ordered list)의 약자로 정렬된 리스트를 나열할 때 사용하며 다음과 같은 3가지 형태의 속성을 가지고 있습니다.
|
속성 |
기능 |
|
reversed |
순서가 내림차순으로 나열될 것인지를 설정하는 속성으로 생략되면 오름차순으로 적용됨 |
|
start |
첫 번째 리스트 아이템의 시작 번호를 특정 정수형으로 설정할 때 사용 |
|
type |
리스트에
사용되는 앞에 표시되는 마커(marker)의 종류를 설정하는데 사용 |
ol 요소는 li 요소를 자식 요소로 하여 순서가 있는 리스트를 다음과 같은 형식을 이용합니다.
<ol [reversed | start | type]>
<li>아이템이름</li>
…
<li>아이템이름</li>
</ol>
마지막으로 ul 요소는 ul(unordered list)의 약자로 리스트의 순서가 중요하지 않은 리스트를 나열할 때 사용하는 요소로 li 요소와 함께 다음과 같은 형태로 사용됩니다.
<ul>
<li>아이템이름</li>
…
<li>아이템이름</li>
</ul>
이제 예제를 해볼까요? 먼저 해볼 내용은 ol 요소의 기본형과 ol 요소 내에서 li 요소에 value 속성을 설정하여 사용하는 방법을 알아봅니다. 메모장을 연 다음 기본적인 코드들을 작성한 후 <body>…</body> 안에 다음과 같이 작성합니다.
<body>
ol 기본</br>
<ol>
<li>KTX</li>
<li>새마을호</li>
<li>무궁화호</li>
</ol>
ol 기본 + li
value 이용하기</br>
<ol>
<li>KTX</li>
<li value="9">새마을호</li>
<li>무궁화호</li>
</ol>
</body>
위와 같이 작성한 후 "li,ol,ulEx.html" 이름으로
저장한 후 브라우저를 열어서 확인하면 다음과 같이 나타납니다.
결과에서 보는 것처럼 ol 요소 내의 자식 요소로 li 요소를 이용하여 KTX, 새마을호, 무궁화 아이템을 나타내면 1 부터 시작하여 나타나게 되는데 li 요소의 value 속성에 특정 정수 여기서는 9로 설정하게 되면 보여지는 것처럼 9부터 시작해서 그 밑에 나오는
아이템에는 1이 증가된 형태로 표시되어 나타나게 됩니다.
이제 reversed, start 속성을 알아볼까요? li,ol,ulEx.html을 열어서 “ol
기본 + li value 이용하기”가 끝나는
부분 즉 </body> 마침 태그 위에 다음과 같이 코드를 작성합니다.
ol reversed
속성이용</br>
<ol
reversed="reversed">
<li>KTX</li>
<li>새마을호</li>
<li>무궁화호</li>
</ol>
ol start 속성이용</br>
<ol start="3">
<li>KTX</li>
<li>새마을호</li>
<li>무궁화호</li>
</ol>
위와 같이 작성한 후 저장하여 열어보면 다음과 같은 결과가 나타납니다.
아직까지 IE9, Opera, Firefox와 같은
대부분의 브라우저에서 reversed 속성은 제대로 적용이 되지 않고
start 속성은 대부분의 브라우저에서 적용됩니다.
마지막으로 ol요소의 type 속성과 ul 요소의 사용방법을 알아볼까요? 같은 방법으로
li,ol,ulEx.html을 열어서
ol start 속성이용 태그 끝 부분에 다음과 같이 코드를 작성합니다.
ol type 속성이용</br>
<ol type="i">
<li>KTX</li>
<li>새마을호</li>
<li>무궁화호</li>
</ol>
ul 이용</br>
<ul>
<li>KTX</li>
<li>새마을호</li>
<li>무궁화호</li>
</ul>
위와 같이 작성 저장한 후 브라우저를 통해 확인해 보면 ol 요소의 type 속성에 “i” 형태로 값을 설정하여 로마자 숫자를 소문자로
표기하는 형태로 나타내게 됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 4.5 figure, figcaption요소(Element) (0) | 2013.07.31 |
|---|---|
| 4.4 dl, dt, dd 요소(Element) (0) | 2013.07.31 |
| 4.2 blockquote 요소(Element) (0) | 2013.07.31 |
| 4. Grouping Content Elements (2) | 2013.07.31 |
| 3.4 footer 요소(Element)를 이용한 꼬리말 구성 (4) | 2013.07.31 |
