본문 바로가기

Study/HTML

List

ol

어떤 정보를 관련있는 목록의 형태로 보여주고 싶을 때 list와 관련된 태그인 ul, ol, li를 사용할 수 있다. ol과 ul 태그의 direct 자식 요소로는 li 태그 를 사용하는 것이 웹 표준이다.

ordered list는 순서가 중요한 아이템들을 하나의 목록으로 감싸 주는 태그이다.

 

<ol>
 <li>첫번째 아이템</li>
 <li>두번째 아이템</li>
 <li>세번째 아이템</li>
</ol>

 

ul

un-ordered list는 순서가 바뀌어도 상관없는 아이템들을 하나의 목록으로 감싼다.

 

<ul>
 <li>순서가 중요하지 않은 아이템</li>
</ul>

 

dl

단어를 정의할 때, 또는 key-value 형태로 정보를 제공하고 싶을 때 dl, dt, dd, dfn을 사용할 수 있다. dl 태그의 direct 자식 요소로는 dt, dd, div를 사용한다.

 

Common uses for this element are to implement a glossary(용어집) or to display metadata (a list of key-value pairs).

 

dl | description list
dt | descriptrion term => key
dd | description detail/data=> value
dfn | definition

 

<dl class="good">
  <dt>
    <dfn>Development</dfn>
  </dt>
  <dd> 1. 발달, 성장 </dd>
  <dd> 2, (새로운 제품 등의) 개발 </dd>
</dl>

 

<dl class="good">
  <div class="good division">
    <dt> 이름 </dt>
    <dd> HyeonJurassic </dd>
  </div>
</dl>

 

'Study > HTML' 카테고리의 다른 글

Table  (0) 2022.05.06
Form  (0) 2022.05.06
HyperText  (0) 2022.05.05
Text | Heading & Paragraph  (0) 2022.05.05
What is HTML?  (0) 2022.05.05