반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>리스트</title>
</head>
<body>
<h1>리스트</h1>
<p>2개 이상의 비슷한 컨텐츠 혹은 구성을 갖고 있는 요소들을 표현할 때 씀</p>
<hr><!--list는 반드시 부모에 ol이나 ul이 있어야 하고, li 태그 단독으로 쓸 수 없다.-->
<h2>비순서형 리스트 - ul</h2>
<p>리스트 간 순서의 관계가 없을때_목차가 없음</p><!--비순서형 리스트 ex-->
<h3>내가 좋아하는 동물</h3>
<ul><!--현업에선 ul태그가 90%이상, ol 태그는 10%, dl 태그는 40~50% 활용되는 태그-->
<li>코끼리
</li>
<li>강아지
</li>
<li>고양이
</li>
</ul>
<hr>
<h2>순서형 리스트 - ol</h2>
<p>리스트 간 순서의 관계가 있을 때 사용_목차가 있음</p><!--순서형 리스트 ex-->
<h3>라면 끓이는 순서</h3>
<ol type="1" start="1">
<li>물을 끓인다.
</li>
<li>스프를 넣는다.
</li>
<li>면을 넣는다.
</li>
</ol>
<hr>
<h1>정의형 리스트</h1><!--정의형 리스트 ex-->
<p>정의형 리스트는 정의할 대상에 대한 내용과 설명 이미지 등으로 구성</p>
<dl><!--dl태그 아래는 2개 이상의 dt 태그를 사용할 수 있음, dt나 dd태그는 보통 탭메뉴가 쓰임-->
<dt><b>제목1 : 정의할 대상 컨텐츠(텍스트/이미지/영상)</b></dt>
<dd>설명1 : 정의할 대상에 대한 내용 컨텐츠1(텍스트/이미지/영상)</dd>
<dd>설명2 : 여러 개 쓰일 수 있다. 컨텐츠2(텍스트/이미지/영상)</dd>
<dt><b>제목2 : 정의할 대상 컨텐츠2(텍스트/이미지/영상)</b></dt>
<dd>설명1 : 정의할 대상에 대한 내용 컨텐츠1(텍스트/이미지/영상)</dd>
<dd>설명2 : 여러 개 쓰일 수 있다. 컨텐츠2(텍스트/이미지/영상)</dd>
<dd>설명3 : 여러 개 쓰일 수 있다. 컨텐츠3(텍스트/이미지/영상)</dd>
</dl>
</body>
</html>반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [HTML] 탭제목_기초(2021-08-17) (0) | 2021.11.07 |
|---|---|
| [HTML] 기본프레임 만들기(2021-08-17) (0) | 2021.11.07 |
| [HTML] a태그/속성(2021-08-19) (0) | 2021.11.07 |
| [HTML] 이미지/영상/유튜브 링크 올리기(2021-08-24) (0) | 2021.11.07 |
| [html] 리스트 활용(2021-08-26) (0) | 2021.11.07 |