HTML 독학하기 HTML 기본요소 - 리스트, 테이블

HTML 리스트(List)

리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미합니다.

리스트의 종류는 다음과 같습니다.

 

1. 순서가 없는 리스트(unordered list)

2. 순서가 있는 리스트(ordered list)

3. 정의 리스트(definition list)

 

순서가 없는 리스트(unordered list)

순서가 없는 리스트는 <ul>태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작합니다.

각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 위치합니다.

 

입력

<ul>

    <li>강아지</li>

    <li>고양이</li>

    <li>햄스터</li>
    
    <li>앵무새</li>

</ul>

출력

• 강아지
• 고양이
• 햄스터
• 앵무새

CSS의 list-style-type 속성을 사용하면 마커(marker)를 다른 모양으로 변경할 수 있습니다.

- disc : 검정색 작은 원 모양 (기본설정)

- circle : 흰색 작은 원 모양

- square : 사각형 모양

 

예시

<ul style="list-style-type: circle">
    <li>리스트<li>
</ul>

 

순서가 있는 리스트

순서가 있는 리스트는 <ol>태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작합니다.

각각의 리스트 요소 앞에는 기본 마커로 아라비아 숫자가 위치합니다.

 

입력

<ol>

    <li>강아지</li>

    <li>고양이</li>

</ol>

출력

1. 강아지
2. 고양이

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있습니다.

 

- decimal : 숫자 (기본설정)

- upper-alpha : 영문 대문자

- lower-alpha : 영문 소문자

- upper-roman : 로마 숫자 대문자

- lower-roman : 로마 숫자 소문자

 

예시

<ol style="list-style-type: lower-alpha">

    <li>리스트</li>

</ol>

 

정의 리스트(description list)

정의 리스트(description list)는 용어와 그에 대한 정의를 모아놓은 리스트로 <dl>태그로 시작합니다.

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

 

입력

<dl>

    <dt>강아지</dt>

    <dd>- 개의 새끼를 일컫는 순우리말이다.</dd>

    <dt>고양이</dt>

    <dd>- 고양이(Felis catus)는 포유류 식육목 고양이과의 동물이다.</dd>

</dl>

출력

강아지

- 개의 새끼를 일컫는 순우리말이다.

고양이

- 고양이(Felis catus)는 포유류 식육목 고양이과의 동물이다.

 

 

HTML 테이블(Table)

테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다.

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

 

1. <tr>태그는 테이블에서 열을 구분해 줍니다.

2. <th>태그는각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다.

3. <td>태그는 테이블의 열을 각각의 셀(cell)로 나누어 줍니다.

<table style="width:100%">

    <tr style="background-color:yellow">

        <th>강아지</th>

        <th>고양이</th>      

    </tr>

    <tr>

        <td>말티즈</td>

        <td>먼치킨</td>
    </tr>
    </table>

강아지	고양이
말티즈	먼치킨

 

테이블 테두리

CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있습니다.

border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 됩니다.

 

<style>

    table, th, td { border: 1px solid black }

</style>

 

테이블의 테두리가 2겹으로 나타나는 경우 <th>태그,<td> 속성이 자신만의 테두리를 가지고 있기 때문입니다.

border-collapse 속성값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현할 수 있습니다.

 

<style>

    table, th, td { border: 1px solid black; border-collapse: collapse }

</style>

 

테이블의 열 합치기, 행합치기

colspan 속성을 사용하면 테이블의 열(column)을 합칠 수 있습니다.

 

입력

<table style="width:100%">

    <tr>

        <td>강아지</td>

        <td colspan="2">고양이</td>        

    </tr>

    <tr>

        <td>말티즈</td>

        <td>먼치킨</td>        

  

    </tr>

</table>

출력

 

강아지	고양이
말티즈	먼치킨

---

rowspan 속성을 사용하면 테이블의 행(row)을 합칠 수 있습니다.

 

입력

<table style="width:100%">

    <tr>

        <td>강아지</td>

        <td rowspan="2">고양이</td>        

    </tr>

    <tr>

        <td>말티즈</td>

        <td>먼치킨</td>        

  

    </tr>

</table>

출력

강아지	고양이
말티즈		먼치킨

 

테이블의 캡션(caption) 설정

<caption>태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있습니다.

 

입력

<table style="width:100%">

    <caption>반려 동물</caption>

    <tr>

        <td>강아지</td>

        <td>고양이</td>

        <td>햄스터</td>    

		<td>앵무새</td>    

    </tr>

</table>

출력

반려 동물

강아지

고양이

햄스터

앵무새