웹 페이지에 목록과 테이블(표) 표현하기– HTML5

목록 & 테이블 태그 살펴보기

지금까지 텍스트 관련 태그에 대해 살펴봤다면 오늘은 조금 더 심화(?) 된 내용을 다뤄봅니다. 웹 페이지에 목록과 테이블(표)를 만들어 봅니다. 웹 프로그래밍에서 자주 사용되는 표현 방식이오니 기본 구조는 잘 살펴보겠습니다.

목록으로 처리
<ul> ~ <li>	순서 없는 목록
<ol> ~ <li>	순서 있는 목록
<dl> <dt> <dd>	설명 목록

<ul> 태그는 순서가 없는 목록을 작성할 때 사용하며 세부 목록 리스트 태그로 <li>를 사용합니다.

<ul>

<li>파이썬</li>

<li>HTML</li>

</ul>

 

<ol> 태그는 순서가 있는 목록을 작성할 때 사용하며 세부 목록 리스트 태그로 <li>를 사용합니다. <ul>태그의 세부 리스트 태그와 동일합니다.

<ol>

<li>C언어</li>

<li>파이썬</li>

<li>HTML</li>

</ol>

 

<ol> 태그는 순서를 type 속성값에 따라 숫자, 영문, 로마자로 표기 가능합니다. (default로 숫자가 지정됩니다.) 그리고 start, reverse 속성을 이용하여 번호의 중간 번호부터 목록 번호를 지정하거나, 역순으로 번호를 지정할 수도 있습니다.

여기서 특이한 점은 </li>가 없더라도 문제없이 출력되는 것을 알 수 있습니다. type="a" start="4"는 목록 번호를 영문 소문자로 지정하며, 4번째부터 시작한다는 의미입니다. 그래서 목록 번호가 d, e, f로 지정되는 것을 확인합니다. <ol> 태그의 type 속성에 대해 살펴봅니다.

type 속성 값	설명
1	숫자(default)
a	영문 (소문자)
A	영문 (대문자)
i	로마 숫자 (소문자)
I	로마 숫자 (대문자)

<dl><dt><dd> 태그는 하나의 제목과 하나의 설명 또는 여러 개의 용어와 여러 개의 정의 목록 리스트를 만들 수 있습니다.

<dl> 밥이좋아의 코딩 이야기

<dt>살펴본 프로그래밍 언어와 라이브러리</dt>

<dd>파이썬</dd>

<dd>판다스</dd>

<dd>플라스크</dd>

<dt>살펴볼 프로그래밍 언어와 라이브러리</dt>

<dd>HTML/CSS</dd>

<dd>자바스크립트</dd>

<dd>텐서플로우</dd>

</dl>

<dd> 태그 항목들이 들여쓰기 되었으며, <mark> 태그가 적용된 결과를 확인합니다.

 

이제 테이블을 만드는 태그에 대해 살펴봅니다. 아래는 4행(row) 4열(column)으로 만들어진 테이블(table)이며 하나의 요소를 셀(cell)이라 합니다.

table	1열	2열	3열
1행
2행		cell
3행

<table><tr><td><th> 태그는 아래와 같은 구조로 사용됩니다.

<table>

<tr>

<th>table</th>

<td>1열</td>

<td>2열</td>

<td>3열</td>

</tr>

<tr>

<th>1행</th>

<td>python</td>

<td>C++</td>

<td>Java</td>

</tr>

<tr>

<th>2행</th>

<td>HTML</td>

<td>CSS</td>

<td>Javascript</td>

</tr>

</table>

 

<table>태그에 border를 이용하여 테이블 외곽선을 넣었습니다. 엑셀을 사용하면 일도 아닌데 HTML로 구현하기가 훨씬 귀찮습니다. ㅠㅠ 하지만 나중을 위해서 배워 둡니다.

 

<th><td>태그에서 colspan, rowspan 속성을 이용하여 엑셀처럼 셀 합치기도 가능합니다.

<td colspan="합칠 셀의 개수">텍스트</td>

<th rowspan="합칠 셀의 개수">텍스트</th>

 

<caption> 태그를 사용하여 테이블 상단 중앙 위치에 제목을 표시합니다.

<caption>표 제목</caption>

 

<figcaption> 태그는 <figure>태그와 함께 사용하며 좀 더 적극적인 방법으로 테이블 제목과 설명을 표시 가능케 합니다. 다만 <caption> 태그와 달리 중앙에 정렬되지 않습니다.

<thead><tbody><tfoot> 태그는 테이블 구조를 정의할 때 사용합니다. 이렇게 정의된 테이블은 CSS 또는 자바스크립트로 각각 다르게 스타일을 꾸밀 수 있도록 합니다. 마차가지로 <col><colgroup> 태그로 열(column)을 묶어서 별도의 색상이나 스타일을 적용할 수도 있습니다.

 

<colgroup>태그에서 첫 번째 <col>은 아무것도 적용하지 않으며, 두 번째 <col>에서 span=”2”로 2개의 열을 지정 배경을 yellow로 변경합니다. 그리고 마지막 세 번째 <col>태그로 배경색을 red로 변경합니다. 행단위로 스타일을 지정할 때는 <tr>태그에서 지정하면 그대로 반영됩니다.

 

---

HTML이 계속 업그레이드되면서 똑똑해진 것인지 잘못된 문법을 사용하더라도 제가 의도한(?) 결과물을 출력하는 것을 확인합니다. <dl>태그에 별도의 텍스트를 허용하지 않지만 화면에 출력하는 것을 알 수 있습니다. 다른 언어(예를 들어 파이썬)에서는 용납되지 않을 만큼의 에러임에도 화면에 출력된다면 어떻게 에러 여부를 확인할 수 있을까요?! ^^ HTML 문법이 제대로 적용되었는지를 확인할 수 있는 사이트를 올려놓습니다.

The W3C Markup Validation Service

html 파일을 업로드하면 오류를 찾습니다. (제가 작성한 HTML에도 역시나 오류가 몇 개 발생했군요~!)