TABLE, TR, TD, TH, CAPTION
이 망할눔의 소스들이 번번히 기억이 안날때가 허다하다.
요즘 잘 사용하지 않는 table은 특히나 더;;
게다가 요즘엔 웹접근성(웹표준)을 준수하는 소스를 한번 습득하고자 한다.
테이블만 이쁴게 만들어도 느낌이 확 달라지니까 말이야 요즘같은 세상에 굳이 이런거 학원다니면서 배울 필요는 없잖아?
가장먼저 해결해야할 궁금점은
매번 <tr>과 <td>가 적걸하게 사용되고 있는지에대한 의문이 든다는거지;;
<tr> table row의 약자이며 가로한줄을 만들어준다.
<td> table data의 약자이,세로한줄의 내용을 입력할 수 있다.
<th> table head의 약자이며 제목을 의미하며 bold+중앙정렬이 된다.
여태 <th>는 사용을 잘안하지만 웹표준을 위해 이번에 한번 사용해서 체득해야지
일단 내가 만들고자하는 표의 구조는 이미지가 삽입되는 2열 5행의 기본구조이고 이 행열이 반복되는 구조야
뭐 텍스트로 보는건 이해가 안갈테니 기본적인 구조먼저 짜보자는거지
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
기본틀
<table border="1px">
<tr>
<td>img1</td><td>img2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1-1</td><td>2-1</td>
</tr>
<tr>
<td>1-2</td><td>2-2</td>
</tr>
<tr>
<td>1-3</td><td>2-3</td>
</tr>
</table>
마크업 시작
<table border="1px">
<thead>
<tr>
<td>img1</td><td>img2</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1-1</td><td>2-1</td>
</tr>
<tr>
<td>1-2</td><td>2-2</td>
</tr>
<tr>
<td>1-3</td><td>2-3</td>
</tr>
</tbody>
</table>
마크업 개선 기본구조
<table border="1px" summary="2열 5행">
<!--<caption>2열 5행</caption> *caption은 노출이되는 문제로 summary로 대체하여 입력-->
<thead>
<tr>
<td border="1" width="365px"><img width="360" src="https://tse3.mm.bing.net/th?id=OIP.VgthcWngGoKl7gC6t3P9KQHaHa&pid=Api"></td>
<td border="1" width="365px"><img width="360" src="https://tse3.mm.bing.net/th?id=OIP.VgthcWngGoKl7gC6t3P9KQHaHa&pid=Api"></td>
</tr>
</thead>
<tbody>
<tr>
<td>TEXT AREA1</td><td>TEXT AREA2</td>
</tr>
<tr>
<td>SUB TEXT1</td><td>SUB TEXT1</td>
</tr>
<tr>
<td>SUB TEXT2</td><td>SUB TEXT2</td>
</tr>
<tr>
<td>SUB TEXT3</td><td>SUB TEXT3</td>
</tr>
</tbody>
</table>
| cs |
일단 이런식의 3가지스텝을 밟은후에 기본적인 틀이 완성이 되었고 이제 여기서 꾸밈꾸밈을 하면 되는건데
이거는 순전히 이미지 작업을 하기 싫어하는 디자이너의 게으름에서 시작된 쓸데없는 작업이야 =)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>product list</title>
<style type="text/css">
table{
line-height: 0.6em;
margin-left: auto;
margin-right: auto;
}
.title{
font-size: 1.4em;
font-weight: bold;
text-indent: 0.3em;
}
.price{
font-size: 1.5em;
color: red;
font-weight: bold;
text-align-last: right;
padding-right: 5px;
}
.sub{
text-indent: 0.5em;
}
.list{
margin-top:5px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 15px;
align-content: center;
border: 1px solid #A8A8A8;
width: 360px;
}
td{
border: 1px solid #A8A8A8;
padding-bottom: 2em;
width: 370px;
}
</style>
</head>
<body>
<table summary="2열 5행 반복">
<tbody>
<tr>
<td><img class="list" src="https://tse3.mm.bing.net/th?id=OIP.VgthcWngGoKl7gC6t3P9KQHaHa&pid=Api" alt="상품이미지">
<p class="title">TEXT AREA1</p>
<p class="sub">SUB TEXT1</p>
<p class="sub">SUB TEXT2</p>
<p class="price">SUB TEXT3</p>
</td>
<td><img class="list" src="https://tse3.mm.bing.net/th?id=OIP.VgthcWngGoKl7gC6t3P9KQHaHa&pid=Api" alt="상품이미지">
<p class="title">TEXT AREA1</p>
<p class="sub">SUB TEXT1</p>
<p class="sub">SUB TEXT2</p>
<p class="price">SUB TEXT3</p>
</td>
</tr>
<tr>
<td><img class="list" src="https://tse3.mm.bing.net/th?id=OIP.VgthcWngGoKl7gC6t3P9KQHaHa&pid=Api" alt="상품이미지">
<p class="title">TEXT AREA1</p>
<p class="sub">SUB TEXT1</p>
<p class="sub">SUB TEXT2</p>
<p class="price">SUB TEXT3</p>
</td>
<td><img class="list" src="https://tse3.mm.bing.net/th?id=OIP.VgthcWngGoKl7gC6t3P9KQHaHa&pid=Api" alt="상품이미지">
<p class="title">TEXT AREA1</p>
<p class="sub">SUB TEXT1</p>
<p class="sub">SUB TEXT2</p>
<p class="price">SUB TEXT3</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
| cs |
페이지가 좀더 길어지고 스타일시트도 첨부되었고 웹표준 테스트에도 합격점을 맞은 소스일세;;
원하는 구조의 테이블이고 반복되어도 문제없이 적용이 되니 추후 수정에도 원할할것으로 보인다는거지
이제 조금의 이펙트를 추가해서 닝겐들의 반응을 살펴보려하니 효과를 어떻게 집어 넣을지에대해 다시 고뇌모드
이미지에 들어가는 효과는 다음 라운드로!!!
댓글
댓글 쓰기