① <ul> 태그는 순서없는 리스트(unordered list)를 작성할 때 사용한다.
㉠ 각각의 리스트 항목은 <li> 태그를 사용해 작성한다.
㉡ 리스트 항목들의 앞은 작은 원이 글머리 기호로 표기된다.
| <body> | |
| <ul> | |
| 메뉴 | |
| <li> | |
| 크림파스타 | |
| </li> | |
| <li> | |
| 로제파스타 | |
| </li> | |
| <li> | |
| 알리올리오 파스타 | |
| </li> | |
| </ul> | |
| </body> |
-
메뉴
- 크림파스타
- 로제파스타
- 알리올리오 파스타
㉢ 글머리 기호는 CSS의 list-style-type을 이용해 변경할 수 있다.
ⓐ 값으로 disc를 사용하면 기본값인 작은 원(bullet)이 글머리 기호로 사용된다.
ⓑ 값으로 circle을 사용하면 원이 글머리 기호로 사용된다.
ⓒ 값으로 square를 사용하면 사각형이 글머리 기호로 사용된다.
ⓓ 값으로 none을 사용하면 글머리 기호가 사용되지 않는다.
| <body> | |
| <ul style="list-style-type:disc"> | |
| 메뉴 | |
| <li> | |
| 크림파스타 | |
| </li> | |
| </ul> | |
| <ul style="list-style-type :circle"> | |
| <li> | |
| 로제파스타 | |
| </li> | |
| </ul> | |
| <ul style="list-style-type :square"> | |
| <li> | |
| 알리올리오 파스타 | |
| </li> | |
| </ul> | |
| <ul style="list-style-type :none"> | |
| <li> | |
| 할라피뇨 파스타 | |
| </li> | |
| </ul> | |
| </body> |
-
메뉴
- 크림파스타
- 로제파스타
- 알리올리오 파스타
- 할라피뇨 파스타
② <ol> 태그는 순서있는 리스트(ordered list)를 작성할 때 사용한다.
㉠ 각각의 리스트 항목은 <li> 태그를 사용해 작성한다.
㉡ 리스트 항목들의 앞에 번호가 매겨진다.
| <body> | |
| <ul> | |
| 메뉴 | |
| <li> | |
| 크림파스타 | |
| </li> | |
| <li> | |
| 로제파스타 | |
| </li> | |
| <li> | |
| 알리올리오 파스타 | |
| </li> | |
| </ul> | |
| </body> |
-
메뉴
- 크림파스타
- 로제파스타
- 알리올리오 파스타
㉢ <ol> 태그의 type 속성을 이용해 리스트 항목의 문자를 변경할 수 있다.
ⓐ type="1"를 사용하면 기본값인 숫자가 글머리 문자가 된다.
ⓑ type="A"을 사용하면 대문자가 글머리 문자가 된다.
ⓒ type="a"를 사용하면 소문자가 글머리 문자가 된다.
ⓓ type="I"을 사용하면 대문자 로마 숫자가 글머리 문자가 된다.
ⓔ type="i"을 사용하면 소문자 로마 숫자가 글머리 문자가 된다.
| <body> | |
| <ol type="1"> | |
| <li>Amazon</li> | |
| </ol> | |
| <ol type="A"> | |
| <li>Apple</li> | |
| </ol> | |
| <ol type="a"> | |
| <li>Google</li> | |
| </ol> | |
| <ol type="I"> | |
| <li>Microsoft</li> | |
| </ol> | |
| <ol type="i"> | |
| <li>Netflix</li> | |
| </ol> | |
| </body> |
- Amazon
- Apple
- Microsoft
- Netflix
㉣ 일반적으로는 1부터 수를 세지만, start 속성을 사용해 다른 숫자부터 시작할 수 있다.
| <body> | |
| <ol start="2"> | |
| <li>SK하이닉스</li> | |
| <li>네이버</li> | |
| <li>카카오</li> | |
| </ol> | |
| </body> |
- SK하이닉스
- 네이버
- 카카오
③ <dl> 태그를 이용해 정의 리스트(description list)를 작성할 때 사용한다.
㉠ 각각의 리스트 항목은 <dt> 태그를 이용해 작성한다.
㉡ <dd> 태그를 이용해 <dt>태그에 쓰인 내용을 자세히 설명해줄 수 있다.
| <body> | |
| <dl> | |
| 메뉴 | |
| <dt>신라면</dt> | |
| <dd>-농심에서 만든 매운 라면-</dd> | |
| <dt>진라면 순한맛</dt> | |
| <dd>-오뚜기에서 만든 순한맛 라면-</dd> | |
| </dl> | |
| </body> |
-
메뉴
- 신라면
- -농심에서 만든 매운 라면-
- 진라면 순한맛
- -오뚜기에서 만든 순한맛 라면-
④ 리스트는 중첩될 수 있다.
| <body> | |
| <ul> | |
| 메뉴 | |
| <ul> | |
| 파스타 | |
| <li>크림파스타</li> | |
| <li>로제파스타</li> | |
| <li>알리올리오 파스타</li> | |
| </ul> | |
| <ul> | |
| 라면 | |
| <li>신라면</li> | |
| <li>진라면</li> | |
| </ul> | |
| </ul> | |
| </body> |
-
메뉴
- 크림파스타
- 로제파스타
- 알리올리오 파스타
- 신라면
- 진라면
-
파스타
-
라면
⑤ float 속성을 이용해 수평리스트를 만들 수 있다.
| <body> | |
| <ul> | |
| <li style="float:left"> | |
| 크림파스타 | |
| </li> | |
| <li style="float:left"> | |
| 로제파스타 | |
| </li> | |
| <li style="float:left"> | |
| 알리올리오 파스타 | |
| </li> | |
| <li> | |
| 할라피뇨 파스타 | |
| </li> | |
| </ul> | |
| </body> |
- 크림파스타
- 로제파스타
- 알리올리오 파스타
- 할라피뇨 파스타
'All about WEB > All about HTML' 카테고리의 다른 글
| 18. HTML 클래스(Class) (0) | 2021.07.18 |
|---|---|
| 17. HTML 테이블(Tables) (0) | 2021.07.18 |
| 16. HTML 이미지(Images) (0) | 2021.07.18 |
| 15. HTML Links (0) | 2021.07.17 |
| 14. HTML 색(Colors) (0) | 2021.07.17 |
