10주차 - jsp (12) <caption>
2022. 9. 8. 18:21ㆍjsp/html
이번의 목표
01. <table>의 디자인적인 속성을 <style> 태그 내에 작성해보자
02. <caption> 태그의 사용
코드를 작성할때에 <body> 태그 안에서 스타일을 지정하면 사후관리가 번거로워집니다.
그렇기 때문에 디자인적인 요소는 <head> 안의 <style> 태그안에서 관리하는 것이 일반 적입니다.
이번에는 그 <style> 태그안에 정리하는 것을 해볼것 입니다.
그리고 다음으로는 <table> 태그에는 <caption> 태그를 사용하여 제목을 지정할 수 있습니다.
이것 또한 해볼것입니다.
01. jsp 코드
02. 실행 화면
01. jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex13</title>
<style>
caption {
font-weight: bold;
font-size: 20px
}
table {
width:300px;
margin:auto;
border: 1px solid;
}
th, td {
border: 1px solid;
}
.tr1 {
align: center;
height: 100px;
}
.tr2 {
align:center;
vertical-align:top;
height:200px;
text-align:center;
}
.tr3 {
text-align:center;
height:100px;
}
</style>
</head>
<body>
<table>
<caption>테이블 제목</caption>
<tr class="tr1">
<th>월</th>
<th>화</th>
<th>수</th>
</tr>
<tr class="tr2">
<td>영어</td>
<td>국어</td>
<td>미술</td>
</tr>
<tr class="tr3">
<td>수학</td>
<td>과학</td>
<td>영어</td>
</tr>
</table>
</body>
</html>02. 실행 화면
① <caption> 태그로 제목이 달린것을 확인할 수 있습니다.
② <style> 태그 안에서 작성한 코드가 정상적으로 작동되는 것을 확인할 수 있습니다.
'jsp > html' 카테고리의 다른 글
| 10주차 - jsp (14) <form> (0) | 2022.09.13 |
|---|---|
| 10주차 - jsp (13) <input> (0) | 2022.09.13 |
| 10주차 - jsp (11) rowspan, colspan (0) | 2022.09.08 |
| 10주차 - jsp (11) <table>, <th>, <td> (0) | 2022.09.08 |
| 10주차 - jsp (10) id, class, <style> (0) | 2022.09.08 |