코딩공부/html, css
[html] 목록 만들 때 사용하는 태그들(<ul>,<li>,<ol>,<dl>,<dt>,<dd>)
mol_kka
2021. 12. 7. 00:46
목록을 만들 때 사용하는 리스트 태그들에 대해 알아보겠습니다. 리스트 태그는 global navigation bar를 구현할 때 많이 씁니다. 여러 게시글이나 이미지 등을 개념적으로 묶어 관리하고자 할 때 용이한 거 같네요.
(1) 순서가 없는 <ul>, <li> 태그
: <ul>의 자식으로 <li>가 옵니다. 구현은 아래와 같이 하면 되는데요. 각 항목 앞에 불릿이 붙고 css의 'list-style-type'으로 불릿 수정이 가능합니다. li간에 순서가 부여되지 않습니다.
<ul>
<li>순서가 없는 ul 태그</li>
<li>자식으로 li 태그만 가능</li>
<li>각 항목 앞에 불릿 붙음</li>
<li>css로 불릿 수정 가능</li>
</ul>
(2) 순서가 있는 <ol>, <li> 태그
: <ol>의 자식으로 <li>가 옵니다. 구현은 다음과 같습니다. 각 항목 앞에 숫자가 붙고 css의 'list-style-type'으로 불릿 수정이 가능합니다.
+<ol> 태그의 속성
- type 속성 : 불릿 앞의 매겨지는 순서를 숫자, 알파벳 등으로 설정
- start 속성 : 시작 순서가 몇번째인지 수정
- reserved 속성 : 역순으로 표시
<ul>
<li>li태그 안에 자식은 이것저것 사용 가능
<ol>
<li>ol태그 안의 자식은 li태그만 가능</li>
<li>ol태그는 순서가 있는 태그</li>
</ol>
</li>
<li>여기는 ul의 자식인 li태그
<ol type="a" start ="3">
<li>type속성은 순서 표기를 어느 타입으로 할지 설정</li>
<li>start속성은 시작 순서 설정</li>
<li>reserved속성은 역순으로 표시함</li>
</ol start>
</li>
</ul>
(2) 설명이 들어가는 <dl>, <dt>, <dd> 태그
: <dl>의 자식으로 '제목'에 해당하는 <dt>와 '설명'에 해당하는 <dd>태그를 사용합니다. <dt>는 하나<dd>는 여러개 사용 가능합니다. 구현은 아래와 같습니다.
<dl>
<dt>2021년</dt>
<dd>함께해서 즐거웠고</dd>
<dd>두번 다시는 만나지 말자</dd>
<dt>2022년</dt>
<dd>올테면 와보라 했지만</dd>
<dd>이렇게 빨리 오란 건 아니었습니다.</dd>
</dl>