Tables(표) & Lists(목록)
html은 표(Table)와 목록(List)의 형식을 지원합니다. 우리는 이를 통해서 주어진 데이터들을 row, column을 기준으로 정렬 및 분류하거나(표를 만들어서) 순서 또는 순서가 없는 목록을 만들어서 데이터에 대한 가독성을 높일 수 있습니다.
표(Tables)
우선 Table에 대해서 먼저 알아보도록 하겠습니다. html 문서에서 표를 정의하여 사용하기 위해서는 한 가지 태그가 아닌 여러가지 종류의 태그를 혼용하여 사용합니다.(<table>, <tr>, <th>, <td>). 지금부터 이 각각의 태그들을 어떻게 사용하여서 표를 정의하고 데이터를 넣을 수 있는 지 확인해보도록 하겠습니다.
<table>
html 문서에서 표(Table)를 정의 및 사용하기 위해서 사용하는 태그
<tr>
표의 row(열) 부분을 정의하기 위해서 사용하는 태그
<th>
표의 header(최상단에서 데이터의 유형을 표시하는 부분) 부분을 정의하기 위해서 사용하는 태그
<td>
표에서 데이터(data)와 셀(cell) 부분을 정의하기 위해서 사용하는 태그
위에서 소개한 태그들을 적절히 조합해서 간단한 표를 정의해보도록 하겠습니다.
현재 아래의 코드는 다음과 같은 표를 만들고자 하는 표 입니다.
| 순번 | 이름 | 학번 | 전공 | 연락처 |
| 1 | 홍길동 | 21700000 | 기계공학 | 010-0000-0000 |
| 2 | 김한동 | 21900000 | 컴퓨터 공학 | 010-1234-1234 |
| 3 | 라이언 | 2200000 | 전자공학 | 010-0987-0987 |
<h1>학생 리스트</h1>
<table>
<tr>
<th>순번</th>
<th>이름</th>
<th>학번</th>
<th>전공</th>
<th>연락처</th>
</tr>
<tr>
<td>1</td>
<td>홍길동</td>
<td>21700000</td>
<td>기계공학</td>
<td>010-0000-0000</td>
</tr>
<tr>
<td>2</td>
<td>김한동</td>
<td>21900000</td>
<td>컴퓨터 공학</td>
<td>010-1234-1234</td>
</tr>
<tr>
<td>3</td>
<td>라이언</td>
<td>20000000</td>
<td>전자공학</td>
<td>010-0987-0987</td>
</tr>
</table>위와 같이 코드를 작성하면 다음과 같이 표가 만들어진 것을 확인할 수 있습니다.
웹 브라우져에서 위의 코드를 실행한 결과를 살펴보면 각 항목별 구분선이 존재하지 않아서 가독성이 떨어지는 편입니다. 여기서 우리는 몇가지 속성을 활용함으로서 구분선을 추가할 수 있습니다. 아래의 코드는 CSS에 대한 내용입니다. 현재 단계에서는 css에 대한 코드를 모두 이해하려고 하시지 않아도 됩니다. 다만, table에 구분선을 추가해서 가독성을 향상시킬 수 있고 그를 위해서 이용하는 것이 디자인에 사용되는 CSS 라는 것을 기억하시면 됩니다.
아래의 코드를 html 문서의 <head> 태그 사이에 삽입하게 되면 표에 구분선을 추가할 수 있게 됩니다. 추후에 CSS를 공부하면서 알게 되겠지만 <head> 태그 사이에 삽입하는 <style> 태그는 디자인을 위한 css 코드에 대한 부분이고 사용한 border 속성은 해당 태그의 항목에 대해서 바깥쪽에 윤곽선을 그리는 속성입니다. 즉, table, th, tr, td 각 항목에 대해서 윤곽선을 그림으로서 표에 구분선을 만드는 효과를 낸 것이라고 이해하시면 됩니다.
<style>
table, th, tr, td {
border: 1px solid black;
}
</style>
하지만 위의 구분선도 조금 아쉬운 부분이 있습니다. 왜냐하면 저희가 생각한 한 줄 짜리 구분선이 아니기 때문입니다. 여기서 우리는 css 코드에 border-collapse라는 속성을 사용해서 구분선을 한줄 짜리 구분선으로 만들 수 있습니다.
<style>
table, th, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
위에서 사용한 border-collapse 속성을 사용함으로서 두줄로 겹치게 되는 border로 한줄의 border로 합쳐주는 기능을 수행하게 됩니다. 이번에는 표의 각 항목들에 대해서 내부 여백을 추가해서 조금 여유가 있는(?) 표를 만들어보도록 하겠습니다. 이번에는 padding 이라는 속성을 사용합니다.
<style>
table, th, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>padding 속성은 해당 태그가 차지하는 공간에서 내부 여백을 지정하는 속성입니다. 그렇기 때문에 padding 속성을 통해서 th와 td 태그에 대한 padding 값을 설정하게 되면 다음과 같이 여유있는 공간을 가진 표를 얻을 수 있습니다.
이제 다음으로 표 내부의 텍스트 내용들을 정렬하는 방향에 대해서 생각해보록 하겠습니다. 일상속에서 MS Word나 한컴 한글을 사용하시면서 텍스트를 어떻게 정렬할 것인지에 대해서 고민하신 분들이 많이 있을 것입니다. 우리가 흔히 알고 있는 정렬의 종류로는 "중앙정렬", "좌측정렬", "우측정렬" 등을 생각해볼 수 있습니다. 텍스트에 대한 정렬은 text-align이라는 속성을 사용해서 지정할 수 있습니다.
<style>
table, th, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
td {
text-align: center;
}
</style>위의 코드를 보면 <td> 태그에서 text-align 속성을 사용해서 텍스트의 정렬을 지정한 모습 입니다. 여기서 text-align 속성에 left를 사용하면 좌측정렬, right를 사용하면 우측정렬, 그리고 center를 사용하면 중앙정렬이 됩니다. 위의 코드에서는 td의 내용들을 중앙정렬 하였습니다. 그러면 여기서 heading인 th 태그에 대한 부분은 왜 중앙정렬을 하지 않았는 지에 대해서 의문이 생기실 수 있습니다. 그 이유는 <th> 태그의 경우 text-align: center를 기본값으로 가지고 있습니다. 그렇기 때문에 별도로 지정하지 않으면 자동으로 중앙정렬 됩니다. 반대로 <td> 태그의 경우 text-align: left를 기본값으로 가지고 있습니다. 참고하시기 바랍니다.
잠깐 이전으로 돌아가 보겠습니다. 이전처럼 구분선이 두줄로 되어 각 항목이 구분되어있는 표를 만들고 싶은 경우에는 어떻게 해야할까요? 이러한 경우 border-spacing 속성을 활용해서 이를 지정할 수 있습니다. 해당 속성은 각 border 간의 거리를 조정할 수 있는 속성입니다.
<style>
table, th, tr, td {
border: 1px solid black;
border-spacing: 10px;
}
th, td {
padding: 15px;
}
td {
text-align: center;
}
</style>
지금까지 만들어본 표는 모든 항목이 같은 row, column 면적을 가진 표 였습니다. 그런데 항상 이런 경우만 있는 것은 아닙니다. 각 항목들이 통합되어야 하는 경우가 있습니다. 예를 들어서 다음과 같은 표를 만들어야한다고 가정해보겠습니다.
| 항목 | 연락처 | 부모님 연락처(부/모) | |
| 1 | 010-0000-0000 | 010-1111-1111 | 010-2222-2222 |
| 2 | 010-1234-1234 | 010-3333-3333 | 010-8888-8888 |
| 3 | 010-0987-0987 | 010-5555-5555 | 010-7777-7777 |
다음과 같이 상위 heading이 하나로 통합되어 있는 경우입니다. 이러한 경우 우리는 colspan이라는 속성을 사용함으로서 이를 구현할 수 있습니다. 이를 위해서는 특별히 면적을 확장할 필요가 있는 태그의 영역에 속성을 할당하게 됩니다. 위와 같은 표를 만들기 위해서는 다음과 같이 코드를 작성할 수 있습니다.
<table>
<tr>
<th>항목</th>
<th>연락처</th>
<th colspan="2">부모님 연락처(부/모)</th>
</tr>
<tr>
<td>1</td>
<td>010-0000-0000</td>
<td>010-1111-1111</td>
<td>010-2222-2222</td>
</tr>
<tr>
<td>2</td>
<td>010-1234-1234</td>
<td>010-3333-3333</td>
<td>010-8888-8888</td>
</tr>
<tr>
<td>3</td>
<td>010-0987-0987</td>
<td>010-5555-5555</td>
<td>010-7777-7777</td>
</tr>
</table>
그렇다면 다음과 같이 날짜에 따른 방문자 정보를 관리하는 표를 만들고 싶은 경우 다음과 같은 형식의 표를 만들어야 하는 데 이를 어떠한 방식으로 구현할 수 있을까요?
| 날짜 | 방문자 이름 | 방문자 연락처 |
| 2020.08.15 | 홍길동 | 010-1234-1234 |
| 김한동 | 010-0000-0000 | |
| 라이언 | 010-0987-0987 | |
| 2020.08.16 | 어피치 | 010-3456-3456 |
| 네오 | 010-5678-5678 | |
| 2020.08.17 | 프로도 | 010-3333-3333 |
| 무지 | 010-9999-9999 |
이전과는 달리 세로 방향으로 셀들이 병합된 모습입니다. 우리는 이러한 형태의 표를 rowspan 속성을 사용하여 수행할 수 있습니다.
위의 표의 형식은 다음과 같이 코드를 작성함으로서 구현 가능합니다.
<table>
<tr>
<th>날짜</th>
<th>방문자 이름</th>
<th>방문자 연락처</th>
</tr>
<tr>
<td rowspan="3">2020.08.15</th>
<td>홍길동</td>
<td>010-1234-1234</td>
</tr>
<tr>
<td>김한동</td>
<td>010-0000-0000</td>
</tr>
<tr>
<td>라이언</td>
<td>010-0987-0987</td>
</tr>
<tr>
<td rowspan="2">2020.08.16</th>
<td>어피치</td>
<td>010-3456-3456</td>
</tr>
<tr>
<td>네오</td>
<td>010-5678-5678</td>
</tr>
<tr>
<td rowspan="2">2020.08.17</th>
<td>프로도</td>
<td>010-3333-3333</td>
</tr>
<tr>
<td>무지</td>
<td>010-9999-9999</td>
</tr>
</table>
또한 우리가 표를 만들어서 사용할 때에는 해당 표에 대한 간략한 설명, 즉, 표에 대한 제목, 캡션을 사용해야하는 경우가 있습니다. 이 때 우리는 <caption>태그를 활용할 수 있습니다. 이전 예제의 테이블에 대한 코드내에 <caption>태그를 추가하면
<table>
<caption>연락처</caption>
<tr>
<th>날짜</th>
<th>방문자 이름</th>
<th>방문자 연락처</th>
</tr>
<tr>
<td rowspan="3">2020.08.15</th>
<td>홍길동</td>
<td>010-1234-1234</td>
</tr>
<tr>
<td>김한동</td>
<td>010-0000-0000</td>
</tr>
<tr>
<td>라이언</td>
<td>010-0987-0987</td>
</tr>
<tr>
<td rowspan="2">2020.08.16</th>
<td>어피치</td>
<td>010-3456-3456</td>
</tr>
<tr>
<td>네오</td>
<td>010-5678-5678</td>
</tr>
<tr>
<td rowspan="2">2020.08.17</th>
<td>프로도</td>
<td>010-3333-3333</td>
</tr>
<tr>
<td>무지</td>
<td>010-9999-9999</td>
</tr>
</table>
위와 같이 표의 상단 중앙에 지정한 내용의 캡션이 추가된 것을 확인할 수 있습니다. 이를 이용해서 표에 대한 간단한 설명을 첨부하거나 표에 이름을 부여하고 싶은 경우 아주 유용하게 사용할 수 있습니다. 여기서 주의할 점은 <caption> 태그는 <table>태그 내에서 사용되어야 한다는 점입니다. 태그 사용 시에 위치를 혼동하지 않도록 주의 하시기 바랍니다.
목록(Lists)
이제 목록(List)에 대해서 알아보도록 하겠습니다. 리스트도 표에서 설명했던 것과 같이 하나의 태그가 아닌 다양한 태그들이 모여서 하나의 리스트 구조를 이루게 됩니다. 단, 표와 달리 리스트에는 몇가지 종류가 있습니다. 그렇기 때문에 우선 리스트의 종류에 대해서 간단히 정리해보고 이어가도록 하겠습니다. html에서 지원하는 리스트 형식의 종류는 다음과 같습니다.
1. Unordered List - 순서가 없는 리스트
2. Ordered List - 순서가 있는 리스트
3. Description List - item과 그 item에 대한 설명이 포함되는 리스트
각 리스트의 종류에 따라서 사용하는 태그의 종류가 모두 다르기 때문에 처음부터 순서대로 알아보도록 하겠습니다.
Unordered List(순서가 없는 리스트)
순서에 대한 정보를 가지고 있지 않거나 순서정보가 의미없는 데이터를 리스트로 표현해야하는 경우 우리는 unordered list를 사용할 수 있습니다. 예를 들어서 다음과 같이 제가 좋아하는 카카오프렌즈의 캐릭터의 이름을 나열한다고 가정해보겠습니다.
- 라이언
- 무지
- 어피치
- 제이-지
- 프로도
- 네오
- 튜브
- 콘
위의 데이터들은 각 데이터들이 가지는 순서가 존재하지 않으며 또한 의미가 없습니다. 그렇기 때문에 이러한 데이터들을 리스트로 표현할 때 unordered list를 사용해서 이를 유용하게 표현할 수 있습니다. unordered list는 총 2개의 태그를 이용해서 작성됩니다.(<ul>, <li>) 각 태그의 이름은 각각 다음과 같이 연관시켜서 기억하시면 쉽게 기억하실 수 있을 것입니다.
ul : unordered list
li : list item
다음과 같이 코드를 작성함으로서 순서가 없는 리스트를 표현한 것을 확인할 수 있습니다.
<h2>Kakao Friends</h2>
<ul>
<li>라이언</li>
<li>무지</li>
<li>어피치</li>
<li>제이-지</li>
<li>프로도</li>
<li>네오</li>
<li>튜브</li>
<li>콘</li>
</ul> 
그리고 undered list의 경우 각 항목을 표시하는 데 가장 앞에붙는 문자(이를 List Item Marker라고 합니다.)를 list-style-type 속성을 이용함으로서 지정하여 사용할 수 있습니다. List Item Marker와 관련해서 사용할 수 있는 속성값의 종류는 다음과 같습니다.
| 값 | 내용 |
| disc | 속이 꽉찬 원(default) |
| circle | 속이 빈 원 |
| square | 속이 꽉찬 사각형 |
| none | List Item Marker를 사용하지 않음 |
각각에 대한 코드와 실행결과는 다음과 같습니다.
<h2>Kakao Friends</h2>
<ul style="list-style-type: disc;">
<li>라이언</li>
<li>무지</li>
<li>어피치</li>
<li>제이-지</li>
<li>프로도</li>
<li>네오</li>
<li>튜브</li>
<li>콘</li>
</ul>
<h2>Kakao Friends</h2>
<ul style="list-style-type: circle;">
<li>라이언</li>
<li>무지</li>
<li>어피치</li>
<li>제이-지</li>
<li>프로도</li>
<li>네오</li>
<li>튜브</li>
<li>콘</li>
</ul>
<h2>Kakao Friends</h2>
<ul style="list-style-type: square;">
<li>라이언</li>
<li>무지</li>
<li>어피치</li>
<li>제이-지</li>
<li>프로도</li>
<li>네오</li>
<li>튜브</li>
<li>콘</li>
</ul><h2>Kakao Friends</h2>
<ul style="list-style-type: square;">
<li>라이언</li>
<li>무지</li>
<li>어피치</li>
<li>제이-지</li>
<li>프로도</li>
<li>네오</li>
<li>튜브</li>
<li>콘</li>
</ul>
또한 unordered list를 중첩해서 사용하는 것 또한 가능합니다.
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
여기서 주목할 점은 List Item Marker가 바뀌어서 나타났다는 점 입니다. 그래서 기존의 리스트와 구분되는 것을 확인할 수 있습니다. 또한 <li> 태그는 새로운 리스트, 다른 html 태그들을 포함할 수 있다는 점을 잘 기억하시고 활용하시기 바랍니다. 또한 리스트는 css를 통해서 다양한 방법으로 디자인 될 수 있습니다. 이에 대한 자세한 내용은 css에 대한 글에서 다룰 수 있도록 하겠습니다.
Ordered List(순서가 있는 리스트)
특정 데이터가 어떤 기준에 의한 순서를 가지고 있거나 그 순서가 의미가 있는 데이터인 경우 우리는 데이터를 ordered list로 표현할 수 있습니다. 예를 들어서 위에서 사용한 예시에서 각 캐릭터들을 제가 좋아하는 순서대로 나열하는 상황이라고 가정해보겠습니다. 이렇게 되면 이전과 달리 캐릭터들의 이름에 대한 데이터는 순서가 의미를 가지게 됩니다. 즉, 다음과 같이 나타내야 합니다.
- 라이언
- 무지
- 어피치
- 제이-지
- 프로도
- 네오
- 튜브
- 콘
위의 데이터는 각 데이터들이 가지는 순서에 의미가 있으며 누락되서는 안되는 중요한 정보입니다. 그렇기 때문에 이러한 데이터를 표현할 때 ordered list를 사용해서 이를 유용하게 나타낼 수 있습니다. ordered list는 다음 2개의 태그로 리스트를 표현합니다. (<ol>, <li>) 이전과 마찬가지로 다음과 같이 기억한다면 기억하는 데 무리가 없으실 겁니다.
ol : ordered list
li : list item
다음과 같이 코드를 작성함으로서 순서가 있는 리스트를 만들 수 있습니다.
<h2>Kakao Friends</h2>
<ol>
<li>라이언</li>
<li>무지</li>
<li>어피치</li>
<li>제이-지</li>
<li>프로도</li>
<li>네오</li>
<li>튜브</li>
<li>콘</li>
</ol> 
ordered list는 List Item Marker를 type 이라는 속성의 속성값을 정의함으로서 지정하고 변경할 수 있습니다. ordered list의 type 속성에 사용할 수 있는 속성값의 종류는 다음과 같습니다.
| type | 내용 |
| type="1" | 숫자로 순서를 표시(default) |
| type="A" | 대문자 알파벳으로 순서를 표시 |
| type="a" | 소문자 알파벳으로 순서를 표시 |
| type="I" | 대문자 로마자로 순서를 표시 |
| type="i" | 소문자 로마자로 순서를 표시 |
각각에 대한 예시코드는 다음과 같습니다.
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> <h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> <h2>Ordered List with Lowercase Letters</h2>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol><h2>Ordered List with Roman Numbers</h2>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol><h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> 
또한 ordered list에서는 start 속성을 사용함으로서 순서 값에 대한 카운트를 시작하는 수를 지정할 수 있습니다. 예를 들어서 start 속성에 속성값을 50으로 전달하면 리스트가 순서값에 대한 카운트를 50부터 시작 합니다. 예시코드는 다음과 같습니다.
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
그리고 ordered list 또한 unordered list처럼 리스트를 중첩하여 사용할 수 있습니다. 예시코드는 다음과 같습니다.
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
Discription list(기술하는 리스트)
기술하는 리스트(?) 이름이 크게 와닿지 않는 표현입니다. Discription list는 각 리스트의 항목이 있고 그 각각의 항목에 대한 기술(설명)이 들어가는 리스트를 말합니다. 즉, 위의 예시를 다음과 같이 변형하면 Discription list가 됩니다.
- 라이언
- 위로의 아이콘, 믿음직스러운 조언자
- 무지
- 토끼옷을 입은 무지
- 어피치
- 뒤태가 매력적인 애교만점 어피치
- 제이-지
- 힙합을 사랑하는 자유로운 영혼
- 프로도
- 부잣집 도시개 프로도
- 네오
- 세침한 패셔니스타 네오
- 튜브
- 화나면 미친 오리로 변신하는 튜브
- 콘
- 악어를 닮은 정체불명 콘
우리가 html에서 사용하게 될 Discription List의 형태는 위의 예시와 약간 다른 부분이 있지만 개념적으로는 동일합니다. Discription List를 표현하기 위해서는 다음 3개의 태그를 사용합니다.(<dl>, <dt>, <dd>) Discription List는 개념적으로 각각의 항목들을 term 그리고 그 각 항목들에 대한 설명/기술을 discription 이라고 합니다. 각 3가지의 태그는 다음과 같이 기억하시면 편리할 것입니다.
dl - Description List
dt - Description List Term
dd - Description List Description
다음과 같이 코드를 작성함으로서 Discription List를 표시할 수 있습니다.
<h2>Kakao Friends</h2>
<dl>
<dt>라이언</dt>
<dd>위로의 아이콘, 믿음직스러운 조언자</dd>
<dt>무지</dt>
<dd>토끼옷을 입은 무지</dd>
<dt>어피치</dt>
<dd>뒤태가 매력적인 애교만점 어피치</dd>
<dt>제이-지</dt>
<dd>힙합을 사랑하는 자유로운 영혼</dd>
<dt>프로도</dt>
<dd>부잣집 도시개 프로도</dd>
<dt>네오</dt>
<dd>세침한 패셔니스타 네오</dd>
<dt>튜브</dt>
<dd>화나면 미친 오리로 변신하는 튜브</dd>
<dt>콘</dt>
<dd>악어를 닮은 정체불명 콘</dd>
</dl> 
이것으로 표(Table) & 리스트(List)에 대한 글을 마칩니다. 긴글 읽어주셔서 감사합니다.
'Web Basic > HTML' 카테고리의 다른 글
| HTML forms (0) | 2020.07.21 |
|---|---|
| Block & Inline 요소 (0) | 2020.07.20 |
| HTML Images(이미지) (0) | 2020.07.20 |
| HTML Quotation & Comments (인용구 & 주석) (0) | 2020.07.20 |
| HTML Formatting(서식) (0) | 2020.07.20 |