예제 2-12. <ol>로 라면 끓이는 순서나열. 예제 2-13. <ul>로 좋아하는 음식 나열. 예제 2-14. 중첩 리스트 만들기.
WEB/HTML5-CONCEPT 2017. 11. 4. 18:36 |<ol> 태그 : 순서있게 나열
1 2 3 4 5 6 7 8 9 10 11 | <ol type = "1"|"A"|"a"|"I"|"i" > <li>아이템<li> <li>아이템<li> </ol> - type : 마커종류 type = "1" (디폴트) 1, 2, 3... type = "A" A, B, C... type = "a" a, b, c... type = "I" I, II, II... type = "i" i, ii, iii | cs |
<ul>태그 : 순서없이 나열
1 2 3 4 | <ul> <li>아이템</li> <li>아이템</li> </ul> | cs |
<li>태그 : type선택하여 나열
<li type = "1"|"A"|"a"|"I"|"i">아이템</li>
예제 2-12. <ol>로 라면 끓이는 순서나열.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>라면을 끓이는 순서</title></head> <body> <h3>라면을 끓이는 순서</h3> <hr> <ol type="A" > <li>물을 끓인다.</li> <li>라면과 스프를 넣는다.</li> <li>파를 썰어 넣는다.</li> <li>5분 후 먹는다.</li> </ol> </body> </html> | cs |
예제 2-13. <ul>로 좋아하는 음식 나열.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>내가 좋아하는 음식</title></head> <body> <h3>내가 좋아하는 음식</h3> <hr> <ul> <li>감자탕 <li>스파게티 <li>올레국수 </ul> </body> </html> | cs |
예제 2-14. 중첩 리스트 만들기.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>중첩 리스트 만들기</title></head> <body> <h3>내가 사는 이유</h3> <hr> <ul> <li>내가 좋아하는 음식 많아요 <ul> <li>감자탕 <li>스파게티 <li>올레국수 </ul> <li>라면 먹기 좋아해요 <ol type="1" > <li>물을 끓인다. <li>라면과 스프를 넣는다. <li>파를 썰어 넣는다. <li>한 입에 다 먹는다. </ol> <li>여름에는 바다로 <li>가을에는 산으로 </ul> </body> </html> | cs |
'WEB > HTML5-CONCEPT' 카테고리의 다른 글
| 예제 2-16. 기본 표 만들기. 예제 2-17. 이미지를 가지는 표 만들기 (0) | 2017.11.04 |
|---|---|
| 예제 2-15. 정의 리스트 만들기 (0) | 2017.11.04 |
| 예제 2-11. <img> 태그로 이미지 삽입 (0) | 2017.11.04 |
| 예제 2-10. <div> 블록과 <span> 인라인 (0) | 2017.11.04 |
| 예제 2-9. 텍스트 꾸미기 (0) | 2017.11.04 |