list를 만드는 태그들에 대해서 알아봅시다.
일상적으로 문서에서는 리스트를 작성할 일이 정말 많습니다. 예를 들면 전화번호부, 학교에서는 출석부, 사업을 하면 고객의 명단 등등... 우리의 일상에서는 리스트를 사용하는 일이 정말 많습니다. 자연스럽게 웹페이지에서도 리스트를 사용할 일이 많겠죠. 이번에는 리스트를 만드는 HTML 태그들에 대해 알아보겠습니다.
list를 만들 때 쓰는 태그는 세 가지가 있습니다. 바로 ul, ol, li 태그입니다.
사용법부터 알려드리면 ul태그나 ol태그 안에 li태그를 넣어서 리스트를 만듭니다.
<ul>
<li></li>
<li></li>
</ul><ol>
<li></li>
<li></li>
</ol>
여기서 ul과 ol의 차이는 무엇일까요?
ul은 unordered list (순서가 없는 리스트)의 줄임말입니다. ul태그로 감싼 리스트는 다음과 같은 머릿 기호가 붙습니다.
ol은 ordered list (순서가 있는 리스트)의 줄임말입니다. ol태그로 감싼 리스트는 숫자로 순서를 매기는 머릿 기호가 붙습니다.
* 예시코드
<body>
<h1>list - ul과 ol의 차이</h1>
<ul>
<li>a</li>
<li>b</li>
</ul>
<ol>
<li>a</li>
<li>b</li>
</ol>
</body>
* 출력 결과
ul과 ol태그는 안에 있는 리스트들의 순서가 매겨졌는지 아닌지에 대한 정보를 나타냅니다. 따라서 의미에 맞게 선택하여 사용하는 것이 좋습니다. 또한 이런 태그들을 이용해 만드는 리스트는 메뉴나 페이지네이션을 만드는 데에도 사용됩니다. 머릿 기호가 마음에 안 들어 바꾸고 싶은 경우에는 CSS를 이용해 바꿀 수 있습니다. 메뉴 구현, 페이지네이션 구현, CSS적용에 대한 내용은 이 포스팅에 모두 담기엔 글이 너무 길어져 생략하도록 하고, 기회가 되면 따로 포스팅하도록 하겠습니다.
table 태그로 표 만들기
보통 표를 만든다고 하면 행의 개수와 열의 개수가 필요합니다.
예를 들어 행의 개수가 3개, 열의 개수가 2개인 표는 다음과 같습니다.
| (1,1) | (1,2) |
| (2,1) | (2,2) |
| (3,1) | (3,2) |
마찬가지로 html문서에서도 표를 만든다고 하면 행의 개수와 열의 개수가 필요하겠죠?
안타깝게도 html언어 자체에는 이것을 한 번에 만드는 기능은 없습니다. 귀찮지만 각 행과 열을 손수 만들어줘야 하죠.
(혹은 자바스크립트로 동적으로 표를 만들어주면 편리하게 만들 수 있습니다.)
물론 emmet을 이용하면 한 번에 만들 수 있는데 그건 마지막에 꿀팁으로 알려드리겠습니다.
우선 어떤 태그가 필요한 지부터 볼까요?
table
th (table head)
tr (table row)
td (table date)
table 태그를 먼저 만들고 table 태그 안에 tr태그로 행을 만들어 줍니다.
그리고 tr태그 안에는 td태그로 열을 만들어줍니다.
th태그도 열을 만드는 태그이지만 이것은 가장 윗 행에서 헤더를 만들 때 사용하는 것입니다.
또한 헤더를 만들고 싶지 않다면 th태그를 사용하지 않아도 됩니다.
그러면 th태그도 사용했다고 하면 코드의 형태는 대략 다음과 같아집니다.
* 예시 코드
<table border=1>
<thead>
<tr>
<th>학번</th>
<th>성적</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>80</td>
</tr>
<tr>
<td>2</td>
<td>90</td>
</tr>
<tr>
<td>3</td>
<td>70</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>평균</td>
<td>80</td>
</tr>
</tfoot>
</table>
* 결과
| 학번 | 성적 |
|---|---|
| 1 | 80 |
| 2 | 90 |
| 3 | 70 |
| 평균 | 80 |
tr태그가 5개 있고 각 tr태그에는 td태그가 2개씩 있어 5x2 표가 완성됩니다.
tr태그의 개수가 행의 개수, th와 td태그의 개수의 합이 열의 개수가 됩니다.
th태그 안에 작성된 내용은 굵은 글씨와 가운데 정렬이 default css속성인 것 같네요.
이런 글자크기나 정렬 같은 것은 CSS를 이용하여 수정을 할 수 있습니다.
table태그에 border속성을 사용했는데, border는 테두리를 의미하고 border값 1은 테두리의 굵기를 의미합니다.
thead, tbody, tfoot의 의미
또 봐야 할 것은 thead, tbody, tfoot 태그입니다.
이 세 태그는 사용하든 사용하지 않든 출력되는 내용은 똑같습니다. 그럼에도 이런 태그들을 굳이 사용하는 이유는 다음과 같습니다.
저 세 태그는 각각
thead는 안에 있는 내용이 표의 제목 영역이다.
tbody는 안에 있는 내용이 표의 본문 영역이다.
tfoot은 안에 있는 내용이 표의 하단 영역이다.
라고 그 의미를 전달해주기 때문입니다.
HTML에서 각 태그들은 그 태그가 담고 있는 내용이 어떤 정보를 나타내는지를 나타냅니다. 이런 것들을 잘 지켜주는 것이 웹 표준에 맞는 HTML 문서를 만드는데 도움이 됩니다.
emmet으로 table 쉽게 만들기
emmet을 사용하는 분들은
간편하게
table>thead>tr>th*3^^tbody>tr*5>td*3^^tfoot>tr>td*3
라고 입력 후 tab키를 누르면 테이블이 한 번에 만들어집니다. (확장자가 .html인 파일에서 가능합니다.)
5는 행의 개수 3은 열의 개수입니다. thead안에 있는 tr과 tfoot안에 있는 tr까지 더하면 행의 개수는 총 7개가 되겠네요.
여기서 숫자만 자유롭게 바꿔서 사용하시면 됩니다.
열 합치기와 행 합치기 구현하기
1. 열 합치기
td태그에 rowspan속성을 주고 속성값으로는 합치고 싶은 셀의 개수를 넣어줍니다.
주의할 점은 합쳐질 셀들은 td태그로 만들면 안 된다는 것입니다. 아래의 예시 코드와 결과를 보시면 (2,2) 자리는 합쳐질 셀이기 때문에 두 번째 tr태그 안에는 1개의 td태그만 작성했습니다.
* 예시 코드
<table border=1>
<tr>
<td>(1,1)</td>
<td rowspan=2>(1,2)<br>(2,2)</td>
</tr>
<tr>
<td>(2,1)</td>
</tr>
</table>
* 결과
| (1,1) | (1,2) (2,2) |
| (2,1) |
2. 행 합치기
마찬가지로 이번엔 td태그에 colspan속성을 주고 속성값으로는 합치고 싶은 셀의 개수를 넣어줍니다.
열 합치기와 마찬가지로 이번 예시에서도 (2,2) 자리는 합쳐질 셀이기 때문에 두 번째 tr태그 안에는 1개의 td태그만 작성했습니다.
* 예시 코드
<table border=1>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<td colspan=2>(2,1), (2,2)</td>
</tr>
</table>style 속성은 css코드를 속성값으로 넣어주는 용도입니다.
예시를 좀 예쁘게 만들 의도로 텍스트를 중앙 정렬하기 위해 넣어줬습니다.
* 결과
| (1,1) | (1,2) |
| (2,1), (2,2) | |
최근댓글