코딩 배우기 | Learning Coding | Clickable Photo Page
코딩 배우기 | Learning Coding | Clickable Photo Page
HTML STRUCTURE : TABLES, DIVS, AND SPANS _ Clickable Photo Page
Have you ever wanted to make a photo album or collection of images like the ones you've seen on Facebook or Pinterest? All it takes is a table. You can use a table to create a beautifully formatted grid of photos.
| 이번 공부의 결과물
1/7 Some photos on your table
File1 _ index.html
<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>My Photo Page</title>
</head>
<body></body>
</html>
File2 _ stylesheet.css
img {width:100px;
height:100px;
}
table, td {
border: 1px #70b8ff dashed;
}
2/7 Row by row
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>My Photo Page</title>
</head>
<body>
<table>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</body>
</html>
File2 _ stylesheet.css
img {width:100px;
height:100px;
}
table, td {
border: 1px #70b8ff dashed;
}
3/7 Cell by cell
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>My Photo Page</title>
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
File2 _ stylesheet.css
img {width:100px;
height:100px;
}
table, td {
border: 1px #70b8ff dashed;
}
4/7 Remember : it's better with a header
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>My Photo Page</title>
</head>
<body>
<table>
<thead>
<th>Remember</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
File2 _ stylesheet.css
img {width:100px;
height:100px;
}
table, td {
border: 1px #70b8ff dashed;
}
5/7 Nine pictures are worth 9,000 words
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>My Photo Page</title>
</head>
<body>
<table>
<thead>
<th>Remember</th>
</thead>
<tbody>
<tr>
<td><img src=""/></td>
<td><img src=""/></td>
<td><img src=""/></td>
</tr>
<tr>
<td><img src=""/></td>
<td><img src=""/></td>
<td><img src=""/></td>
</tr>
<tr>
<td><img src=""/></td>
<td><img src=""/></td>
<td><img src=""/></td>
</tr>
</tbody>
</table>
</body>
</html>
File2 _ stylesheet.css
img {width:100px;
height:100px;
}
table, td {
border: 1px #70b8ff dashed;
}
6/7 Link 'em up!
File1 _ index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>My Photo Page</title>
</head>
<body>
<table>
<thead>
<th>Remember</th>
</thead>
<tbody>
<tr>
<td><a href="http://jonestudio.blogspot.kr/"><img src="http://s3.amazonaws.com/kpcbweb/companies/451/logo/grid_3/codecademy-logo-black.jpg"/></a></td>
<td><a href="http://jonestudio.blogspot.kr/"><img src="http://s3.amazonaws.com/kpcbweb/companies/451/logo/grid_3/codecademy-logo-black.jpg"/></a></td>
<td><a href="http://jonestudio.blogspot.kr/"><img src="http://s3.amazonaws.com/kpcbweb/companies/451/logo/grid_3/codecademy-logo-black.jpg"/></a></td>
</tr>
<tr>
<td><a href="http://jonestudio.blogspot.kr/"><img src="http://s3.amazonaws.com/kpcbweb/companies/451/logo/grid_3/codecademy-logo-black.jpg"/></a></td>
<td><a href="http://jonestudio.blogspot.kr/"><img src="http://s3.amazonaws.com/kpcbweb/companies/451/logo/grid_3/codecademy-logo-black.jpg"/></a></td>
<td><a href="http://jonestudio.blogspot.kr/"><img src="http://s3.amazonaws.com/kpcbweb/companies/451/logo/grid_3/codecademy-logo-black.jpg"/></a></td>
</tr>
<tr>
<td><a href="http://jonestudio.blogspot.kr/"><img src="http://s3.amazonaws.com/kpcbweb/companies/451/logo/grid_3/codecademy-logo-black.jpg"/></a></td>
<td><a href="http://jonestudio.blogspot.kr/"><img src="http://s3.amazonaws.com/kpcbweb/companies/451/logo/grid_3/codecademy-logo-black.jpg"/></a></td>
<td><a href="http://jonestudio.blogspot.kr/"><img src="http://s3.amazonaws.com/kpcbweb/companies/451/logo/grid_3/codecademy-logo-black.jpg"/></a></td>
</tr>
</tbody>
</table>
</body>
</html>
File2 _ stylesheet.css
img {width:100px;
height:100px;
}
table, td {
border: 1px #70b8ff dashed;
}
7/7 The sky's the limit