3월11일 내용정리
1.테이블 만들기
제일 먼저 이해해야 할 부분 각 한줄한줄을 tr(table row)
칸칸을 th(table header) 또는 td(table data)
여기서 th(table header)는 말그대로 header이기 때문에 좀더 강조표시가 되어 있음
<!--테이블은 표 형태임-->
<!--테이블은 행단위로 움직인다, 행과 열로 나눠어져 분리한다.-->
<!--<th>굵게 가운데 쓰고싶다.헤더제목</th><td>일반적으로 쓰고싶을때</td>-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테이블 연습 에 연습</title>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<style>
tr{
height: 80px;
}
th{
width:80px;
}
.tr1{
width:150px;
background-color: antiquewhite;
}
.tr1>th, .tr2>td, .tr3>td, .tr4>td{ /*td{ } 게 써도 되지만, 명확히 하는게 좋음*/
width:180px;
text-align: center;
}
.tdImg{
width:80px;
height:80px;
}
.tr4{
background-image: url("./images/background04.jpg"); /*표에 배경그림 삽입*/
background-size: 200px;
}
.tr3>td{
font-size: 40px;
font-weight: bold;
color: blue;
font-family: 'Nanum Pen Script', cursive;
}
</style>
</head>
<body>
<h1>테이블 연습 에 연습</h1>
<!--난 테이블을 쓸거예요-->
<!--border 라는 말을 안쓰면 선이 안보인다.-->
<table border="1">
<tr class="tr1">
<th>영화제목</th>
<th>연도</th>
<th>감독</th>
<th>평가</th>
</tr>
<tr class="tr2">
<td><a href="./지난수업/exam04.html" target="_blank">라이프 오브 파이</a></td> <!--링크 연결-->
<td>2013
<a href="./images/big_Tree01.jpg" target="_blank"> <!--링크 연결-->
<img class="tdImg" src="./images/big_Tree01.jpg"><!--표에 사진넣기-->
</td>
<td>이안</td>
<td>8.68</td>
</tr>
<tr class="tr3">
<td><a href="./지난수업/exam05.html" target="_blank">레미제라블</a></td><!--링크 연결-->
<td>2012
<a href="./images/big_Tree02.jpg" target="_blank"><!--링크 연결-->
<img class="tdImg" src="./images/big_Tree02.jpg"><!--표에 사진넣기-->
</a>
</td>
<td>톰후퍼</td>
<td>8.28</td>
</tr>
<tr class="tr4">
<td><a href="./지난수업/flexbox_0310.html" target="_blank">장고:분노의추적자</a></td><!--링크 연결-->
<td>
2012
<a href="./images/big_Tree03.jpg" target="_blank"><!--링크 연결-->
<img class="tdImg" src="./images/big_Tree03.jpg"><!--표에 사진넣기-->
</a>
</td>
<td>타란티노</td>
<td>8.29</td>
</tr>
</table>
</table>
</table>
</table>
</body>
</html>- 병합 또는 합치기
-열 합치기 "colspan=합치는 열 수" 예)colspan=2
-행 합치기 "rowspan=합치는 행 수" 예)rowspan=2
아래 그림과 같이 병합된거 까지 한줄로 본다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표 합치기</title>
</head>
<body>
<table border="1">
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<td rowspan="2">row1 cell 1</td>
<td>row1 cell 2</td>
<td>row1 cell 3</td>
</tr>
<tr>
<td>row2 cell2</td>
<td>row2 cell3</td>
</tr>
<tr>
<td colspan="3">row3 cell1</td>
</tr>
</table>
</body>
</html>
좋은개발자가 되기위한 삽질기록 노트