[2021.07.28] 인턴 +149 HTML List(리스트) - 10
Unordered HTML List (● 이런 모양으로 리스트 표시)
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
* li 란?
-> list item의 줄임말
* <ul><li></li></ul>
-> <ul>는 리스트에서 ● 이런 모양으로 출력하게 함
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
<출력 결과>
+@ CSS list-style-type속성은 목록 항목 마커의 스타일을 정의하는 데 사용
<ul style="list-style-type:???;">
---------------------------------------------------------------------------------------------------------------------------
Ordered HTML List (정렬된 숫자로 리스트 표시)
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
* <ol><li></li></ol>
-> <ol>는 리스트에서 숫자로 정렬되어서 출력함
<!DOCTYPE html>
<html>
<body>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
<출력 결과>
+@ type속성은 <ol>목록 항목 마커의 유형을 정의
<ol type="1">
-> type 값에 따라, 정렬된 값이 다름. 예 type="a" 로 한다면 목록에 따라 a,b,c,d로 정렬됨
---------------------------------------------------------------------------------------------------------------------------------
HTML Description List
* <dl>태그 : 상기 설명 목록을 정의
* <dt>태그: 이름(용어)을 정의
* <dd> 태그: 정의한 이름(용어)에 대한 설명
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
<출력 결과>
'Web' 카테고리의 다른 글
| [2021.07.28] 인턴 +149 HTML class Attribute? - 12 (+@ How to use class attributes in javascript?) (0) | 2021.07.28 |
|---|---|
| [2021.07.28] 인턴 +149 HTML Block and Inline Elements - 11 (블록 및 인라인 요소) (0) | 2021.07.28 |
| [2021.07.27] 인턴 +148 HTML Tables(테이블) - 9 (0) | 2021.07.27 |
| [2021.07.27] 인턴 +148 HTML Image - 8 (0) | 2021.07.27 |
| [2021.07.27] 인턴 +148 HTML Link - 7 (1) | 2021.07.27 |
댓글