인천일보아카데미/- 학습일지
[학습일지] JAVA 교육일지 6일차
by w1z
2022. 5. 26.
표 스타일 지정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 600px; height: 200px;
}
table, td{
border: 1px solid greenyellow;
}
</style>
</head>
<body>
<!--
김건식 김황호 김길동
김길동은 김건식의 후예다. 김건식>김길동(x)
김길동은 김건식의 자식이다. 김건식>김황호(o)
table>tr*3>td*3 복붙은 안됨! 직접입력
div>ul>li*5 복붙은 안됨! 직접입력
-->
<table>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
#first, a 나열
#first>a 자식선택자
#first a 자손 선택자 또는 하위선택자
*/
table{
width:1200px; height: 300px;;
}
td{
text-align: center;
}
table, td {
border: 1px solid black;
border-collapse: collapse;
}
th{
height: 26px;
vertical-align: middle;
}
.button{
border-radius: 35px;
width: 220px; height: 45px;
border: 4px solid rgb(190, 139, 8);
background-color: rgb(122, 175, 175);
font-size: 16px;
color:#fff;
font-weight: bold;
}
.button:hover{
cursor: pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>수강 레벨</th>
<th>코스 A</th>
<th>코스 B</th>
<th>수강 기간</th>
<th>세부내용 보기</th>
</tr>
<tbody>
<tr>
<td>레벨 1</td>
<td>Side by Side 1</td>
<td>American Headway 1</td>
<td>1개월</td>
<td><input type="button" value="세부내용 보기" class="button"></td>
</tr>
<tr>
<td>레벨 2</td>
<td>Side by Side 2</td>
<td>American Headway 2</td>
<td>1개월</td>
<td><input type="button" value="세부내용 보기" class="button"></a></td>
</tr>
<tr>
<td>레벨 3</td>
<td>Side by Side 3</td>
<td>American Headway 3</td>
<td>1개월</td>
<td><input type="button" value="세부내용 보기" class="button"></a></td>
</tr>
<tr>
<td>레벨 4</td>
<td colspan="2">Exploring English 1</td>
<td>2개월</td>
<td><input type="button" value="세부내용 보기" class="button"></a></td>
</tr>
<tr>
<td>레벨 5</td>
<td colspan="2">Exploring English 1</td>
<td>2개월</td>
<td><input type="button" value="세부내용 보기" class="button"></a></td>
</tr>
</tbody>
</th>
</thead>
</table>
</body>
</html>
폼태그와 백데이터
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--사용자의 입력을 받아서 서버로 전달하는 영역 form-->
<form action="http://www.naver.com">
<!--input 요소로 입력-->
<input name="user_id">
<input name="nai">
<button>전달</button>
</form>
</body>
</html>
<!--?뒤에 오는 것이 넘어가는 값: user_id=sprimg&nai=22
넘어가는 값은 &기호로 구분: user_id=spring nai=22
이름과 값은 =로 구분
user id= spring
nai = 22-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://www.naver.com">
<!--file:///E:/HTML1/23.html?username=spring&password=1234#-->
<!--퀴즈 -->
<input name="category">
<input name="pno">
<input name="pageno">
<button>버튼</button>
</form>
</body>
</html>
