[HTML] HTML - 13.리스트와 테이블

이번 시간에서는 HTML 리스트와 테이블을 

삽입하는 방법을 알아보겠습니다.

 

HTML 리스트(List)

리스트(list)란 여러 요소들을 일려로 나열한

목록이나 명단을 의미합니다.

 

HTML에서는 이러한 리스트를 표현하기 

위해서 다음과 같은 리스트를 제공합니다.

• 순서가 없는 리스트(unoredered list)
• 순서가 있는 리스트(ordered list)
• 정의 리스트(definition list)

---

순서가 없는 리스트

순서가 없는 리스트는 <ul>태그로 시작되며,

여기에 포함되는 각각의 리스트 요소는 

 

<li>태그로 시작합니다. 

각각의 리스트 요소 앞에는 

 

기본 마커(marker)로 검정색의 작은 원(bullet)

이 위치합니다.

<ul>
    <li>사과</li>
    <li>멜론</li>
    <li>바나나</li>
</ul>

CSS의 list-style-type 속성을 사용하면

리스트 요소 앞에 위치하는 

 

마커(marker)를 다른 모양으로 변경할 수 

있습니다.

• disc: 검정색 작은 원 모양(기본 설정)
• circle: 흰색 작은 원 모양
• sqaure: 사각형 모양

<ul style="list-style-type: circle">
   <li>수박</li>
   <li>참외</li>
   <li>옥수수</li>
</ul>
 <ul style="list-style-type: square">
     <li>사과</li>
     <li>멜론</li>
     <li>포도</li>
 </ul>

---

순서가 있는 리스트

 

순서가 있는 리스트는 <ol> 태그로 시작하며

여기에 포함되는 각각의 리스트 요소는 

<li>태그로 시작됩니다.

 

각각의 리스트 요소 앞에는 

기본 마커로 아라비아 숫자가 위치합니다.

<ol>
    <li>사과</li>
    <li>멜론</li>
    <li>바나나</li>
</ol>

CSS의 list-style-type 속성을 사용하면

리스트 요소 앞에 위치하는 마커(marker)를

다른 모양으로 변경할 수 있습니다.

• decimal : 숫자(기본설정)
• upper-alpha: 영문 대문자
• lower-alpha: 영문 소문자
• upper-roman: 로마 숫자 대문자
• lower-roman: 로마 숫자 소문자

<ol stlye="list-style-type: upper-alpha">
     <li>사과</li>
     <li>멜론</li>
     <li>바나나</li>
</ol>
<ol style="list-style-type: lower-alpha;">
    ...
</ol>
<ol style="list-style-type: upper-roman;">
     ...
</ol>
<ol style="list-style-type:lower-roman;">
    ...
 </ol>

---

정의 리스트(description list)

 

정의 리스트(description list)는 용어와 그에 대한 정의를

모아놓은 리스트로 <dl> 태그로 시작합니다.

 

<dl>태그에는 용어의 이름이 들어가고

<dd>태그는 해당 용어에 대한 정의가 들어갑니다.

<dl>
    <dt>호박</dt>
    <dd>- 박과의 한해살이 덩굴성 채소</dd>
    <dt>상추</dt>
    <dd>- 국화과의 한해살이 두해살이풀</dd>
 </dl>

---

HTML 테이블(Table)

테이블(Table)이란 여러 종류의 데이터(data)를 

보기 좋게 정리하여 보여주는 표를 의미합니다.

 

HTML에서는 <table>태그를 사용해

이러한 테이블을 작성할 수 있습니다.

 

<table> 태그는 다음과 같은 태그들로 구성됩니다.

1. <tr>태그는 테이블에서 열을 구분해 줍니다.
2. <th>태그는 각 열의 제목을 나타내며, 모든 내용은 
   자동으로 굵은 글씨에 가운데 정렬 됩니다.
3. <td>태그는 테이블의 열을 각각의 셀(cell)로
   나누어 줍니다.

<table style="width:100%">
   <tr style="background-color:antiquewhite">
      <td>참치</td>
      <td>고래</td>
   </tr>
   <tr>
      <td>상어</td>
      <td>문어</td>
    </tr>
    <tr>
      <td>오징어</td>
      <td>고등어</td>
    </tr>
 </table>

CSS의 border 속성을 이용해 테이블에 

테두리를 표현할 수 있습니다.

 

border 속성값을 따로 명시하지 않으면

해당 테이블은 언제나 빈 테두리를

가지게 됩니다.

<style>
   table, th, td {border: 1px solid blue;}
</style>

위의 예제에서 테이블의 테두리(border)가 

두줄 씩 나타나는 이유는 <table>태그와

 

<th>태그 <td> 태그가 모두 자신만의

테두리를 가지고 있기 때문입니다.

 

위와 같이 두 줄로 표현되는 테두리를

한 줄로 설정하려면 border-collapse 

속성을 사용해야 합니다.

 

border-collapse 속성값을 collapse로

설정하면, 테이블의 테두리를 한 줄로

표현할 수 있습니다.

<style>
    table, th, td {border: 1px solid blue; border-collapse: collapse;}
</style>

---

테이블 열 합치기

colspan 속성을 사용하면 테이블의 열(column)을 

합칠 수 있습니다.

 <table style="width:100%">
      <tr>
         <td>참치</td>
         <td colspan="2">고래</td>
      </tr>
      <tr>
        <td>상어</td>
        <td>문어</td>
        <td>꽁치</td>
      </tr>
      <tr>
        <td>오징어</td>
        <td>고등어</td>
        <td>상어</td>

      </tr>
    </table>

---

테이블의 행 합치기

colspan 속성과 rowspan 속성을 함께 사용해

더욱 복잡한 테이블도 표현할 수 있습니다.

<table style="width:100%">
   <tr>
      <td rowspan="2">상어</td>
      <td>문어</td>
      <td>연어</td>
   </tr>
   <tr>
      <td>돌고래</td>
      <td>광어</td>
   </tr>
</table>

---

테이블의 열과 행 합치기

 

colspan 속성과 rowspan 속성과 함께 사용하면,

더욱 복잡한 테이블도 표현할 수 있습니다.

<table style="width:100%">
   <tr>
     <td colspan="6">1</td>
   </tr>
   <tr>
     <td colspan="6">2</td>
   </tr>
   <tr>
     <td rowspan="3">3</td>
     <td rowspan="3">4</td>
     <td rowspan="3">5</td>
     <td>6</td>
     <td>7</td>
   </tr>
   <tr>
     <td colspan="3">8</td>
     <td>9</td>
   </tr>
   <tr>
     <td colspan="4">10</td>
   </tr>
</table>

---

테이블의 캡션(caption) 설정

<caption> 태그를 사용하여 테이블 상단에

제목이나 짧은 설명을 붙일 수 있습니다.

<table style="width:100%">
   <caption>해양 생물</caption>
   <tr>
      <td>참치</td>
      <td>고래</td>
      <td>상어</td>
   </tr>
</table>

참고 자료

코딩교육 티씨피스쿨

 

GitHub - Koras02/html-study: html 블로그 작성용 - study1