목록 리스트 태그들을 알아보자.
리스트 태그에는 ul, ol, li, dl, dt, dd 태그가 있다.
짝에 맞게 순서대로 살펴보자!🧞♂️
ul,ol,li tag
<ul>,<ol>
ul태그는 순서가 없는 목록을 만들 때 사용하며,
ol태그는 순서가 있는 목록을 만들 때 사용한다.
<li>
li태그는 <ul>,<ol>
내부에 들어가는 요소를 의미한다.
<Container>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</Container>
dl,dt,dd tag
<dl>
dl태그는 제목과 설명이 한 쌍인 설명 목록을 만들 때 사용한다.
<dt>,<dd>
dt태그는 제목을 표시하며, dd태그는 설명(내용)을 표시한다.
<Container>
<Dl>
<dt>🍎사과</dt>
<dd>사과는 빨간색이다.</dd>
</Dl>
<Dl>
<dt>🍊오렌지</dt>
<dd>오렌지는 주황색이다.</dd>
</Dl>
</Container>
지금까지 리스트 태그의 종류는 ul, ol에 li 요소 태그밖에 없는 줄 알았는데,
시멘틱 태그를 공부하게 되면서, 리스트 태그를 다시 살펴보다가, 설명 목록을 만들 때 사용하는
dl,dt,dd 태그에 새로 대해 알게 되었다.
또한 각각의 태그들은 중첩하여 사용이 가능하다!
ex. <ul> -> <li> -> <ol> -> <li>
'Front-end > HTML' 카테고리의 다른 글
[HTML] <pre>태그- 텍스트를 그대로 표현 & 줄바꿈 (2) | 2022.05.12 |
---|---|
[HTML] 시맨틱태그 (Semantic Tag) (0) | 2022.04.30 |