티스토리 뷰
무료이미지 다운 사이트 https://pixabay.com/ko/ 에서 사진 다운(1920px의 고화질로)
포토샵에서 이미지 보정
1. 이미지 사이즈
2. resolution-> 72 사진크기는 원래대로 다시 입력
3. 웹용으로 img 폴더(p_01.jpg) 저장
브라킷에서 확인 가능!
-------------------------------------------------------------------------------------
table.html, img.html, main.css, script.js 만들기
p.79~81
-------------------------------------------------------------------------------------
table.html 기본
<!DOCTYPE>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표만들기-table</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
</body>
</html>
-------------------------------------------------------------------------------------
img.html 기본
<!DOCTYLE>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>이미지 태그-img</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
</body>
</html>
-------------------------------------------------------------------------------------
table.html - 1
<!DOCTYPE>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표만들기-table</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th> <- 테이블 제목
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
</tr>
</table>
<table border="1">
<caption>Caption</caption>
<colgroup>
<col span="2" style="background: red">
<col style="background: blue">
</colgroup>
<thead style="background: green">
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
<tfoot style="background: yellow">
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tfoot>
</table>
</body>
</html>
-------------------------------------------------------------------------------------
줄: row
열(칸): col
요새는 테이블 다 css로 함
선생님께서 위에 것 안 하기로 방금 결정하심
-------------------------------------------------------------------------------------
<table border="1" width="200" height="200">
<tr>
<rowspan>
<td colspan="3">1</td> : colspan="3" 너는 세 칸 짜리야!
<td rowspan="3">4</td>
</rowspan>
</rowspan>
</tr>
<tr>
<td>5</td>
<td rowspan="2">6</td> 너는 두 줄 짜리야! 중복 칸은 지워준다
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
<th/td/tf colspan="n"> 열 합치기
<th/td/tf rowspan="n"> 행 합치기
이때는 <thead></thead><tbody></tbody> 안 붙여도 됨
-------------------------------------------------------------------------------------
<!DOCTYPE>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표만들기-table</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<table border="1" width ="300" height="200">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
</tr>
</table>
<hr>
<table border="1" width="200" height="200">
<tr>
<rowspan>
<td colspan="3">1</td>
<td rowspan="3">4</td>
</rowspan>
</tr>
<tr>
<td>5</td>
<td rowspan="2">6</td>
<td>7</td>
</tr>
<tr>
<td>9</td>
<td>11</td>
</tr>
</table>
<hr>
<table border="1" width="300" height="200">
<tr>
<th colspan="3">1</th>
<th rowspan="3">4</th>
</tr>
<tr>
<td>1</td>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
</tr>
</table>
<table border="1">
<caption>Caption</caption>
<colgroup>
<col span="2" style="background: red" />
<col style="background: blue" />
</colgroup>
<thead style="background: green">
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
<tfoot style="background: yellow">
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tfoot>
</table>
</body>
</html>
-------------------------------------------------------------------------------------