HTML 태그 - 목록태그

 

HTML 태그 - 목록 태그

 

1. ol태그

• 순서가 있는(정렬된) 목록
• ol은 li만 자식으로 포함 가능
• li의 태그는 종료 태그를 넣지 않아도 무관
• li요소는 자동으로 줄 바꿈
• 블록방식의 태그

<h2>Orderd List</h2>
<!-- ol 태그: 순서가 있는 목록을 표현-->
<ol>
  <!-- ol 이나 ul 안에는 li 요소만 들어갈 수 있다. -->
  <li>Facebook</li>
  <li>Instagram</li>
  <li>Twitter</li>
</ol>

---

실행결과

순서가 있는 리스트(ol)

 

2. ul태그

• 순서가 없는(정렬되지 않은) 목록
• ul은 li만 자식으로 포함 가능
• li의 태그는 종료 태그를 넣지 않아도 무관
• li요소는 자동으로 줄 바꿈
• 블록방식의 태그

<h2>Unordered List</h2>
 
<!-- ul 태그: 순서가 없는 목록을 표현 -->
<ul>
  <!-- li 요소: 목록의 항목(list item)을 표현 / 구조부터 만들고(복사) 컨텐츠 채우기 -->
  <li>Google</li>
  <li>Naver</li>
  <li>Daum</li>
</ul>

---

실행결과

순서가 없는 리스트(ul)

3. dl태그

• 정의 목록
• dl은 자식으로 dd, dt만 포함 가능
• dt : 제목, dd : 정의 부분
• 키(key)/값(value) 형태를 표현할 때 유용
• 블록방식의 태그

 <h2>Definition List</h2>
 <!-- dl 요소: 정의 목록을 표현-->
 <dl>
   <!-- dt요소 : 정의 용어(definition term)을 표현 -->
   <dt>HTML</dt>
   <!-- dd 요소: 정의 설명(definition description)을 표현-->
   <dd>HTML stands for Hyper Text Markup Language</dd>
   <dd>HTML is the standard markup language for web pages.</dd>
   <dd>HTML describes the structure of a Web page</dd>
 
  <dt>CSS</dt>
  <dd>CSS is langage that describes the style of an HTML document</dd>
  <dd>CSS describes how HTML elements should be displayed</dd>
</dl>

---

실행결과

정의 목록 리스트(dl)

 

 

 

 

참고자료

• https://developer.mozilla.org/ko/docs/Web/HTML/Element
• poiemaweb.com/html5-syntax