HTML 리스트와 테이블 태그
HTML에서는 데이터를 구조화하고 조직화하기 위해 리스트와 테이블 태그를 제공합니다. 이번 글에서는 HTML에서 순서 있는 리스트, 순서 없는 리스트, 그리고 테이블 태그에 대해 알아보겠습니다.
1. 순서 있는 리스트 (Ordered List)
순서 있는 리스트는 항목이 특정 순서를 따라 나열될 때 사용됩니다. 순서 있는 리스트는 <ol> 태그를 사용하여 정의하며, 각 항목은 <li> 태그로 표시됩니다.
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>위의 예제에서는 <ol> 태그가 리스트의 시작과 끝을 나타내며, 각각의 항목은 <li> 태그로 감싸져 있습니다. 순서 있는 리스트는 기본적으로 숫자로 항목이 표시됩니다.
리스트 유형 변경
type 속성을 사용하여 리스트 항목의 유형을 변경할 수 있습니다. 지원되는 유형은 다음과 같습니다:
1: 기본 숫자A: 대문자 알파벳a: 소문자 알파벳I: 대문자 로마 숫자i: 소문자 로마 숫자
<ol type="A">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>이 예제에서는 리스트 항목이 대문자 알파벳으로 표시됩니다.
2. 순서 없는 리스트 (Unordered List)
순서 없는 리스트는 항목이 특정 순서를 따르지 않을 때 사용됩니다. 순서 없는 리스트는 <ul> 태그를 사용하여 정의하며, 각 항목은 <li> 태그로 표시됩니다.
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>위의 예제에서는 <ul> 태그가 리스트의 시작과 끝을 나타내며, 각각의 항목은 <li> 태그로 감싸져 있습니다. 순서 없는 리스트는 기본적으로 불릿(bullet)으로 항목이 표시됩니다.
불릿 유형 변경
list-style-type CSS 속성을 사용하여 불릿의 유형을 변경할 수 있습니다. 지원되는 유형은 다음과 같습니다:
disc: 기본 불릿circle: 원형 불릿square: 사각형 불릿none: 불릿 없음
<ul style="list-style-type: circle;">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>이 예제에서는 리스트 항목이 원형 불릿으로 표시됩니다.
3. HTML 테이블 태그
HTML 테이블 태그는 데이터를 행과 열로 구성하여 표시할 때 사용됩니다. 테이블은 <table> 태그를 사용하여 정의하며, 행은 <tr>, 셀은 <td> 태그를 사용하여 구성됩니다.
기본 테이블 구조
<table>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
</tr>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
</tr>
</table>위의 예제에서는 <table> 태그가 테이블의 시작과 끝을 나타내며, 각 행은 <tr> 태그로 감싸져 있습니다. <th> 태그는 테이블 헤더 셀을, <td> 태그는 데이터 셀을 나타냅니다.
테이블 구성 요소
HTML 테이블은 다음과 같은 구성 요소를 포함할 수 있습니다:
- : 테이블의 제목 행을 정의합니다.
- : 테이블의 본문을 정의합니다.
- : 테이블의 바닥글을 정의합니다.
<table>
<thead>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
</tr>
<tr>
<td>데이터 3</td>
<td>데이터 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>바닥글 1</td>
<td>바닥글 2</td>
</tr>
</tfoot>
</table>이 예제에서는 <thead>, <tbody>, <tfoot> 태그를 사용하여 테이블의 각 부분을 구분하고 있습니다.
테이블 스타일링
CSS를 사용하여 테이블을 스타일링할 수 있습니다. 예를 들어, 테두리를 추가하고, 패딩을 설정할 수 있습니다.
<table>
<thead>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
</tr>
<tr>
<td>데이터 3</td>
<td>데이터 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>바닥글 1</td>
<td>바닥글 2</td>
</tr>
</tfoot>
</table>table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
thead {
background-color: #f2f2f2;
}
tfoot {
background-color: #f9f9f9;
}위의 CSS 예제에서는 테이블의 너비를 100%로 설정하고, 셀의 테두리를 1px의 검은색 실선으로 설정하였습니다. 또한, 제목 행과 바닥글에 배경색을 추가하였습니다.
결론
HTML 리스트와 테이블 태그를 사용하면 데이터를 구조화하고 조직화하여 웹 페이지에 표시할 수 있습니다. 순서 있는 리스트와 순서 없는 리스트를 사용하여 항목을 나열하고, 테이블을 사용하여 데이터를 행과 열로 구성할 수 있습니다. 이러한 태그들을 잘 활용하면, 더 명확하고 깔끔한 웹 페이지를 만들 수 있습니다. 다양한 HTML 태그를 이해하고 활용하여 웹 페이지를 더욱 풍부하고 유용하게 만들어 보세요.
