[웹 디자인] 3일차: HTML 리스트와 테이블

리스트

리스트는 HTML에서 항목의 집합을 정의하는 데 사용됩니다. HTML에는 세 가지 주요 리스트 유형이 있습니다: 순서 있는 리스트, 순서 없는 리스트, 설명 리스트입니다.

순서 있는 리스트

순서 있는 리스트는 항목이 특정 순서로 나열될 때 사용됩니다. 각 항목은 자동으로 번호가 매겨집니다.

• <ol>: 순서 있는 리스트를 정의하는 요소입니다.
• <li>: 리스트 항목을 정의하는 요소입니다.

예제:

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

순서 없는 리스트

순서 없는 리스트는 항목이 특정 순서에 상관없이 나열될 때 사용됩니다. 각 항목은 기본적으로 점이나 원으로 표시됩니다.

• <ul>: 순서 없는 리스트를 정의하는 요소입니다.
• <li>: 리스트 항목을 정의하는 요소입니다.

예제:

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

설명 리스트

설명 리스트는 용어와 그에 대한 설명을 나열하는 데 사용됩니다.

• <dl>: 설명 리스트를 정의하는 요소입니다.
• <dt>: 리스트 용어를 정의하는 요소입니다.
• <dd>: 리스트 용어의 설명을 정의하는 요소입니다.

예제:

<dl>
  <dt>HTML</dt>
  <dd>하이퍼텍스트 마크업 언어</dd>
  <dt>CSS</dt>
  <dd>종속형 시트</dd>
</dl>

테이블

테이블은 HTML에서 데이터를 행과 열로 구성하여 표시하는 데 사용됩니다.

테이블 요소

• <table>: 테이블을 정의하는 요소입니다.
• <tr>: 테이블 행을 정의하는 요소입니다.
• <th>: 테이블 헤더 셀을 정의하는 요소입니다.
• <td>: 테이블 데이터를 정의하는 요소입니다.

예제:

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>25</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>이순신</td>
    <td>30</td>
    <td>디자이너</td>
  </tr>
</table>

테이블 속성

테이블 요소에는 여러 속성을 통해 스타일을 지정할 수 있습니다.

• border: 테이블과 셀의 테두리를 설정합니다.
• cellpadding: 셀 내부 여백을 설정합니다.
• cellspacing: 셀 간의 여백을 설정합니다.

예제:

<table border="1" cellpadding="5" cellspacing="0">
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>25</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>이순신</td>
    <td>30</td>
    <td>디자이너</td>
  </tr>
</table>

병합 셀

행이나 열을 병합하여 테이블을 더 복잡하게 만들 수 있습니다.

• colspan: 셀의 가로 병합을 설정합니다.
• rowspan: 셀의 세로 병합을 설정합니다.

예제:

<table border="1" cellpadding="5" cellspacing="0">
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td rowspan="2">홍길동</td>
    <td>25</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>26</td>
    <td>팀장</td>
  </tr>
  <tr>
    <td colspan="3">이순신</td>
  </tr>
</table>

결론

리스트와 테이블은 HTML 문서에서 데이터를 구조화하여 표시하는 데 유용합니다. 순서 있는 리스트, 순서 없는 리스트, 설명 리스트는 각각의 상황에 맞게 데이터를 나열할 수 있으며, 테이블은 데이터를 행과 열로 구성하여 깔끔하게 표시할 수 있습니다.

다음 글에서는 링크와 이미지에 대해 알아보겠습니다.

다음 글에서 만나요!