[HTML] 리스트(List)와 테이블(Table)

 

1. 개요

보를 나열하거나 정리된 표 형태로 보여줘야 할 상황에 사용

 

---

2. 내용

2.1. 리스트 태그

설명

• <li>는 반드시 <ul> 또는 <ol> 안에서만 사용해야 한다.
• <dl>은 용어집, 설명서 등에서 유용하다.

 

태그 종류

종류	태그	설명
순서 없는 목록	<ul>	점(dot)으로 나열
순서 있는 목록	<ol>	숫자 또는 문자로 순서가 매겨짐
정의형 목록	<dl>	용어와 설명 쌍으로 구성됨

 

예시 코드

<!-- 순서 없는 목록 -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- 순서 있는 목록 -->
<ol>
  <li>로그인</li>
  <li>상품 검색</li>
  <li>결제</li>
</ol>

<!-- 정의형 목록 -->
<dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 담당하는 마크업 언어</dd>

  <dt>CSS</dt>
  <dd>웹 페이지의 디자인을 담당하는 스타일 시트 언어</dd>
</dl>

 

실행 결과

 

---

2.2. 테이블 태그

태그 설명

• <table> : 테이블 정의
• <tr> : 하나의 행
• <th> : 헤더 정의
• <tr> : 데이터

 

기본 구조

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>30</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>김영희</td>
    <td>28</td>
    <td>디자이너</td>
  </tr>
</table>

 

실행 결과

 

---

3. Git 코드 링크

https://github.com/suhan77/study_typescript/blob/main/html_list_table.html