목록의 종류
| 목록의 종류 | 설명 |
| 순서없는 목록(Unordered List) | 글머리 기호( • )를 붙여 목록의 각 항목을 표시 <ul> ... </ul> 자식요소 -> li |
| 순서있는 목록(Odered List) | 순서(1,2,3 ...)를 매겨서 목록의 각 항목을 표시 <ol> ... </ol> 자식요소 -> li |
| 서술 목록(Description List) | 어떤 용어나 이름에 대해서 서술하는 형식 <dl> ... </dl> 자식요소 -> dt, dd |
순서 없는 목록을 지정하는 <ul> 태그
: 각 항목 앞에 순서를 나타내지 않는 기호를 붙여서 표시
CSS를 통해서 기호의 모양을 바꿀 수 있음
<ul>
<li> 항목 1 </li>
<li> 항목 2 </li>
...
<li> 항목 n </li>
</ul>
<li> 태그
:<ul>과 <ol> 태그 내에서 공통으로 사용되는 자식 태그
목록에서 각 항목의 내용을 표현/ 들여쓰기 자동 줄바꿈을 수행
종료 태그없이 사용가능
<body>
목록의 종류
<ul>
<li>순서없는 목록 ul~li</li>
<li>순서있는 목록 ol~li</li>
<li>서술 목록 dl ~ dt,dd</li>
</ul>
</body>▼
순서 있는 목록을 지정하는 <ol> 태그
: 각 항목 앞에서 순서를 나타내는 기호를 붙여서 표시
순서있는 기호 -> 숫자(기본), 영문자, 로마자 등
<ol>
<li> 항목 1</li>
<li> 항목 2</li>
<li> 항목 3</li>
...
<li> 항목 n</li>
</ol><ol> 태그에 사용되는 속성
• type = "값" -> 순서가 부여된 기호의 유형을 지정
• start="숫자" -> 항목의 시작번호를 지정
• reversed -> 항목번호를 역순으로 지정
<body>
ol태그의 reversed 속성
<ol reversed>
<li>순서 없는 목록 ul~li</li>
<li>순서 있는 목록 ol~li</li>
<li>서술 없는 목록 dl~dt,dd</li>
</ol>
</body>
<li> 태그의 속성
value="숫자" -> 항목 번호를 중간에 변경할 때 사용(이후의 모든 항목에 적용)
<body>
<h4><li> 태그의 특징</h4>
<ol type="a"start="2">
<li>List Item</li>
<li>순서 없는 목록과 순서 있는 목록에서 공통으로 사용</li>
<li value="5"><li vlaue="5">를 통해 항목 번호를 중간에 변경</li>
<li>들여쓰기 기능, 줄바꿈 기능 포함</li>
<li>종료태그 없이 시작태그만 사용 가능</li>
</ol>
</body>
서술 목록을지정하는 <dl> 태그
: 용어/이름을 나열하고, 이에 대한 설명을 제공하는 목록
<dt>태그 -> 용어/이름을 나열하기 위한 것. 자동 줄바꿈
<dd>태그 -> 나열된 용어/이름에 대한 설명을 표시. 자동 줄바꿈 및 들여쓰기 기능
<dl>
<dt>용어1</dt>
<dd>설명1</dd>
...
<dt>용어n</dt>
<dd>설명n</dd>
</dl>
<body>
웹페이지를 작성하기 위해서는
<dl>
<dt>HTML</dt>
<dd>문서의 내용과 형식을 표현</dd>
<dt>CSS</dt>
<dd>콘텐츠의 표현(디자인)방법을 정의</dd>
<dt>자바스크립트</dt>
<dd>각종 API를 통해 웹페이지의 동적 상호작용을 제공</dd>
</dl>
이러한 부분들의 협업이 필요하다.
</body>▼
'WEB > HTML' 카테고리의 다른 글
| HTML - 그림과 링크 (0) | 2021.04.13 |
|---|---|
| 콘텐츠 그룹핑 (0) | 2021.04.13 |
| 글자 스타일 지정 (0) | 2021.04.13 |
| 텍스트 표현 (0) | 2021.04.13 |
| HTML 문서 - 구성 요소 (0) | 2021.04.13 |
