zhaoJian의 기술 노트

IT 과정 HTML 기초 012_리스트와 테이블

학습 / HTML 기초 약 5565자 · 14분 소요 - 조회

리스트

HTML 리스트는 웹페이지에서 정보를 구성하고 표현하는 중요한 요소입니다. 다양한 유형의 리스트를 사용하여 콘텐츠를 더 잘 구조화하고 표시할 수 있습니다.

HTML 리스트에는 세 가지 유형이 있습니다:

  1. 순서 없는 리스트(Unordered list): <ul> 요소로 생성하며, 각 리스트 항목은 <li> 요소로 표시합니다.
  2. 순서 있는 리스트(Ordered list): <ol> 요소로 생성하며, 리스트 항목도 동일하게 <li> 요소로 표시하지만 자동으로 번호가 추가됩니다.
  3. 정의 리스트(Definition list): <dl> 요소로 생성하며, <dt>(정의 제목)와 <dd>(정의 설명) 요소를 포함합니다.
순서 없는 리스트

순서 없는 리스트는 가장 일반적인 리스트 유형으로, 각 리스트 항목 앞에 작은 원형 기호(리스트 마커라고도 함)를 추가합니다. <ul>을 리스트 컨테이너로 사용하고, <li>로 구체적인 리스트 항목을 표시합니다.

예시:

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

효과:

예시 효과

순서 있는 리스트

순서 없는 리스트와 달리, 순서 있는 리스트의 각 항목은 숫자로 표시됩니다. 순서 있는 리스트는 <ol>을 리스트 컨테이너로 사용하며, 동일하게 <li>로 구체적인 리스트 항목을 표시합니다.

예시:

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

효과:

예시 효과

정의 리스트

정의 리스트는 <dl>(정의 리스트), <dt>(정의 항목), <dd>(정의 설명) 요소로 구성됩니다. 정의 리스트는 일반적으로 용어와 그 정의를 표시하는 데 사용됩니다.

예시:

<dl>
  <dt>용어 1</dt>
  <dd>설명 1</dd>
  <dt>용어 2</dt>
  <dd>설명 2</dd>
</dl>

효과:

예시 효과

[!요약]

  • 리스트 항목 내부에는 단락, 줄바꿈, 이미지, 링크 및 다른 리스트 등을 사용할 수 있습니다.

테이블

HTML 테이블은 구조화된 데이터를 표시하는 강력한 요소입니다. 기본 HTML 테이블은 <table> 요소로 표현되며, <tr>(테이블 행), <th>(헤더 셀), <td>(테이블 데이터 셀)와 같은 주요 하위 요소를 포함합니다.

예시:

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>성별</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>20</td>
    <td>남성</td>
  </tr>
  <tr>
    <td>김영희</td>
    <td>21</td>
    <td>여성</td>
  </tr>
</table>

효과:

예시 효과

테이블 요소:
  • <table>: 전체 테이블을 나타냅니다.
  • <thead>: 테이블 헤더 부분을 정의하며, 열 제목을 나타내는 <th> 요소를 포함합니다.
  • <tr>: 테이블 행으로, 헤더 셀 <th>를 포함합니다.
  • <th>: 헤더 셀로, 열의 제목을 식별하는 데 사용됩니다.
  • <tbody>: 테이블 본문 부분을 정의하며, 각 행은 실제 데이터를 나타내는 <td> 요소를 포함합니다.
  • <td>: 테이블 데이터 셀로, 실제 데이터를 포함합니다.
  • <tfoot>: 테이블 하단 부분을 정의하며, 일반적으로 테이블의 요약, 집계 또는 기타 하단 정보를 배치하는 데 사용됩니다.
  • <caption>: HTML 테이블에 제목을 추가하는 데 사용되며, 제목은 일반적으로 테이블 상단에 표시됩니다.
  • <colgroup>: 테이블 열의 그룹을 정의합니다.
  • <col>: 테이블 열의 속성을 정의합니다.

예시:

<table border="1">
  <caption>테이블 제목입니다</caption>
  <colgroup>
    <col style="width: 50px; background-color: #f2f2f2;">
    <col style="width: 100px; background-color: #ddd;">
    <col style="width: 150px; background-color: #f2f2f2;">
  </colgroup>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>도시</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>25</td>
      <td>서울</td>
    </tr>
    <tr>
      <td>김영희</td>
      <td>30</td>
      <td>부산</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">총 인원: 2</td>
    </tr>
  </tfoot>
</table>

효과:

예시 효과

테이블 속성:
  • border: 테이블의 테두리를 지정합니다. 값은 테두리의 너비를 나타내는 숫자입니다.
  • cellpadding: 셀 간의 간격을 지정합니다. 값은 간격의 크기를 나타내는 숫자입니다.
  • cellspacing: 셀 테두리 간의 간격을 지정합니다. 값은 간격의 크기를 나타내는 숫자입니다.
  • width: 테이블의 너비를 지정합니다. 값은 너비를 나타내는 숫자입니다.
  • height: 테이블의 높이를 지정합니다. 값은 높이를 나타내는 숫자입니다.
  • style: 테이블의 스타일을 지정합니다.

예시:

<table style="border-collapse: collapse; width: 60%; margin: 20px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
  <caption style="font-size: 1.5em; font-weight: bold; padding: 10px; background-color: #3498db; color: #fff;">멋진 테이블입니다</caption>
  <colgroup>
    <col style="width: 30%;">
    <col style="width: 30%;">
    <col style="width: 40%;">
  </colgroup>
  <thead>
    <tr>
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">이름</th>
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">나이</th>
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">도시</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">홍길동</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">25</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">서울</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">김영희</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">30</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">부산</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3" style="border: 1px solid #ddd; padding: 8px; text-align: center; background-color: #3498db; color: #fff;">총 인원: 2</td>
    </tr>
  </tfoot>
</table>

효과:

예시 효과

테이블 병합

테이블 병합은 두 개 이상의 셀을 하나의 셀로 병합하는 것을 의미합니다. 테이블 병합은 테이블 레이아웃을 단순화하거나 특정 데이터를 강조하는 데 사용할 수 있습니다. colspan 속성을 사용하여 셀이 걸쳐 있는 행 수를 지정하거나, rowspan 속성을 사용하여 셀이 걸쳐 있는 열 수를 지정합니다. 속성 값은 걸쳐 있는 행 수를 나타내는 숫자입니다.

예시:

<table border="1">
  <tr>
    <td>셀 1</td>
    <td colspan="2">두 열 가로 병합</td>
    <td>셀 4</td>
  </tr>
  <tr>
    <td rowspan="2">두 행 세로 병합</td>
    <td>셀 3</td>
    <td>셀 4</td>
    <td>셀 5</td>
  </tr>
  <tr>
    <td>셀 7</td>
    <td>셀 8</td>
    <td>셀 9</td>
  </tr>
</table>

효과:

예시 효과

[!요약]

  • 테이블은 기본적으로 테두리를 표시하지 않습니다.
  • <tr>은 table row의 약자로, 테이블의 행을 나타냅니다.
  • <td>: td는 table data의 약자로, 테이블의 데이터 셀을 나타냅니다.
  • <th>: th는 table header의 약자로, 테이블의 헤더 셀을 나타냅니다.
  • 대부분의 브라우저는 헤더를 굵고 중앙 정렬된 텍스트로 표시합니다.
  • 테이블 내에는 텍스트, 이미지, 리스트, 단락, 폼, 수평선, 테이블 등을 포함할 수 있습니다.
IT 강좌 HTML 강좌 CSS 강좌 JavaScript 강좌 Java 강좌 컴퓨터 시스템 및 네트워크 HTML 리스트 HTML 테이블
공유:

댓글