[HTML5] HTML5 목록을 만드는 태그 (<ul>~</ul>, <li>~</li>, <dl>~</dl>

 

[HTML5] HTML5 목록을 만드는 태그 (<ul>~</ul>, <li>~</li>, <dl>~</dl>,
 <dt>~</dt>, <dd>~</dd>)
오늘은 HTML5 목록을 만드는 태그

<ul>~</ul>, <li>~</li>, <dl>~</dl>, <dt>~</dt>, <dd>~</dd>

에 대해서 설명 드리겠습니다.

1. <ul>~</ul>, <li>~</li>

 (1) <ul>~</ul>

  이 태그는 순서가 필요하지 않은 목록을 만들 때 사용하는 태그입니다.

 

 (2) <li>~</li>

  이 태그는 위의 <ul>~</ul> 태그로 목록을 만든 후

  그 안의 목록의 내용을 적는 태그입니다.

 <ul>~</ul>태그로 목록을 만든 후

그 사이에 <li>~</li> 태그를 이용해서

원하시는 목록을 만들어 주시면 됩니다.

 

나중에 CSS를 배우시게 된다면

CSS를 이용해서 목록을 표시하는

앞에 도형의 모양을 변경하 실수도 있습니다.

 

 

 

또한 CSS를 이용해서 도형을 지운 후

세로로 나두거나 가로로 변경하거나 해서

에서 설명했었던 <nav>~</nav> 태그 안에

메뉴를 만들때 사용이 됩니다.

2. <dl>~</dl>, <dt>~</dt>, <dd>~</dd>

 (1) <dl>~</dl>

  이 태그는 제목과 그에 대한 목록을 만드는 태그입니다.

 (2) <dt>~</dt>

  이 태그는 <dl>~</dl> 태그 안 목록의 제목을 나타내는 태그입니다.

 

 (3) <dd>~</dd>

  이 태그는 <dt>~</dt> 태그의 제목에 맞는 목록을 나타내는 태그입니다.

 

 <dl>~</dl> 태그를 이용해서 목록을 만든 후

<dt>~</dt> 태그 사이에 각각의 목록의 제목을 붙여 줍니다.

마지막으로 <dd>~</dd> 태그를 이용해서

제목에 맞는 목록을 작성해주시면 됩니다.
 

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

(회원가입을 하시면 편리한 시간에 자세히 설명해드립니다)