순서있는 <ol>,목록중첩에 대해 알아보려고 한다.
1. <li> 태그
항목을 나열할 때 <li> 태그 사용
2. <ol> 태그
<li> 항목들을 순서 있게 묶어줄 때 사용하는 것은<ol>태그, ol은 order list의 약자로, 순서 있는 목록 의미
3. 사용법
나열할 각 항목을 <li></li> 태그로 감싸준 후, <li> 태그를 포함한 해당 항목 전체를 <ol></ol>로 감싸기
| <ol> <li>항목1</li> <li>항목2</li> <li>항목5(?)</li> </ol> |
① 메모장을 열고 <! doctype html> 입력
② 아래와 같이 항목들 입력하고 <li>, </li> 태그로 감싸기
③ <ol>, </ol> 태그로 나열한 항목들 묶어주기
④ 목록의 제목은 <ol> 태그 안에 써도 되고 h1에 써 줘도 됨
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>순서 있는 목록 태그 ol</title> </head> <body> <h1>순서 있는 목록 태그 ol</h1> <h2>블록 요소 / 자동으로 숫자가 부여 </h2> <ol> <li>감자를 1/4 크기로 잘라욤</li> <li>부드러워질 때까지 15분-20분 동안 소금물에 서서히 끓인다.</li> <li>감자의 물을 따라 내고 으깬주세욤!</li> <li>우유, 버터, 육두구를 데워욤</li> <li>우유 혼합물에 넣고 쉐~~키!</li> </ol> </body> </html> |
4. 목록 중첩
| 1. 순서있는 목록 태그는 ? • ul • ol • li • h1 2. 링크 추가할 때 사용하는 태그는? • a 태그 • img 태그 • p 태그 • body 태그 3. 이미지 주소를 나타낼 때 사용하는 속성? • width • type • src • href |
숫자가 있는 문제는 1/2/3이라는 순서가 있음 항목이 3개인 순서 있는 목록이므로 <ol>, <li> 태그 사용
| <ol> <li>순서있는 목록 태그는?</li> <li>링크 추가할 때 사용하는 태그는?</li> <li>이미지 주소를 나타낼 때 사용하는 속성은?</li> </ol> |
⑤ 문제의 보기를 추가
각 문제의 보기는 4개의 항목을 가진 순서 없는 목록
따라서 1번 문제 보기는 <ul>, <li> 태그 입력
| <ul> <li>ul</li> <li>ol</li> <li>li</li> <li>h1</li> </ul> |
⑥ 그런데 1번 보기는 1번 문제에 딸려 있어야 함
보기를 나타내는 <ul>~</ul> 묶음을 1번 문제를 나타내고 있는 첫 번째 <li> 태그 안에 <li>와 </li> 사이에 <ul>~</ul> 묶음이 들어가야 함
| <ol> <li>순서있는 목록 태그는 ?</li> <ul> <li>ul</li> <li>ol</li> <li>il</li> <li>h1</li> </ul> <li>링크를 추가할 때 사용하는 태그는?</li> <li>이미지 주소를 나타낼 때 사용하는 속성은?</li> </ol> |
⑦같은 방법으로 2번, 3번 문제의 보기도 <li>, </li> 태그 사이에 목록을 넣어 주기
강력한 이유는 강력한 행동을 낳는다
-윌리엄 셰익스피어-
728x90
'일과공부' 카테고리의 다른 글
| [HTML/CSS 기초 강의] ⑬ 선택자 selector (0) | 2021.08.06 |
|---|---|
| [HTML/CSS 기초 강의] ⑫ HTML에 CSS적용 (0) | 2021.08.06 |
| [HTML 기초 강의] ⑩ 순서 없는 <ul>, <li> 태그 (0) | 2021.08.03 |
| [HTML 기초 강의] ⑨동영상 삽입 iframe video (0) | 2021.08.03 |
| [HTML 기초 강의] ⑧ 이미지에 링크 걸기 (0) | 2021.08.02 |
