[HTML] <ul><ol><li><dl><dt><dd> 목록 태그

목록 리스트 태그들을 알아보자.

리스트 태그에는 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>

ul,ol,li tag 코드 이미지

dl,dt,dd tag

<dl>

dl태그는 제목과 설명이 한 쌍인 설명 목록을 만들 때 사용한다.

<dt>,<dd>

dt태그는 제목을 표시하며, dd태그는 설명(내용)을 표시한다.

    <Container>
      <Dl>
        <dt>🍎사과</dt>
        <dd>사과는 빨간색이다.</dd>
      </Dl>
      <Dl>
        <dt>🍊오렌지</dt>
        <dd>오렌지는 주황색이다.</dd>
      </Dl>
    </Container>

dl,dt,dd tag 코드이미지

 

지금까지 리스트 태그의 종류는 ul, ol에 li 요소 태그밖에 없는 줄 알았는데, 

시멘틱 태그를 공부하게 되면서, 리스트 태그를 다시 살펴보다가, 설명 목록을 만들 때 사용하는 

dl,dt,dd 태그에 새로 대해 알게 되었다. 

 

또한 각각의 태그들은 중첩하여 사용이 가능하다!

ex. <ul> -> <li> -> <ol> -> <li>