열심히 끝까지
디바이스 융합 자바(Java) day27 - 리스트(list),표(table),폼(form) 본문
디바이스 융합 자바(Java)기반 풀스택 개발자 양성과정(수업내용)
디바이스 융합 자바(Java) day27 - 리스트(list),표(table),폼(form)
노유림 2022. 7. 19. 15:23[오늘 수업]
-- 리스트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트</title>
</head>
<body>
<!-- 번호 리스트 ol(order list) -->
<ol>
<li>사과</li>
<li>바나나</li>
<li>키위</li>
</ol>
<!-- 점 리스트 ul(unorder list) -->
<ul>
<li>apple</li>
<li>banana</li>
<li>kiwi</li>
</ul>
<ul>
<li><a href="#">상의</a>
<ul>
<li><a href="#">긴팔티</a></li>
<li><a href="#">반팔티</a></li>
</ul>
</li>
<li>하의
<ul>
<li>청바지</li>
<li>반바지</li>
</ul>
</li>
<li>신발
<ul>
<li>운동화</li>
<li>슬리퍼</li>
<li>구두</li>
</ul>
</li>
</ul>
</body>
</html>
-- 표
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표</title>
<!-- 스타일 : 동작기능을 넣음 -->
<!-- head 위에 넣음 -->
<style type = "text/css">
table{
width : 100%;
}
.btn1{
background: lightblue;
}
.btn2{
background: lightpink;
}
</style>
</head>
<body>
<!-- body : 무엇이 들어가야 하는지를 기술 -->
<!-- 포트폴리오에서 많이 쓰이는 표(실무에서는 잘 안 쓰임) -->
<!-- border = 줄 및 칸을 표시해줌 -->
<table border="1px solid black">
<tr>
<td>아이디</td>
<td>아이디를 입력하세요</td>
</tr>
<tr>
<td>비밀번호</td>
<td>비밀번호를 입력하세요</td>
</tr>
<tr>
<td class = "btn1">회원가입하기</td>
<td class = "btn2">로그인 버튼</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 실습 -1</title>
<style>
table{
width : 100%;
}
.btn1{
background:yellow;
}
.btn2{
background:#0EFCFE;
}
th,td{
border : 1px solid black;
}
.c1{
background : yellow;
}
.c2{
background : aqua;
}
</style>
</head>
<body>
<table>
<!-- 내 방법
<tr>
<td class = "btn1" align = center><strong>교과목</strong></td>
<td class = "btn2" align = center><strong>점수</strong></td>
</tr>
<tr>
<td class = "btn1" align = center><strong>HTML</strong></td>
<td class = "btn2">93</td>
</tr>
<tr>
<td class = "btn1" align = center><strong>CSS</strong></td>
<td class = "btn2">92</td>
</tr>
<tr>
<td class = "btn1" align = center><strong>평균</strong></td>
<td class = "btn2">92.5</td>
</tr>
-->
<colgroup>
<col class = "c1">
<col class = "c2">
</colgroup>
<thead>
<tr>
<th>교과목</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<th>HTML</th>
<td>93</td>
</tr>
<tr>
<th>CSS</th>
<td>92</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>평균</th>
<td>92.5</td>
</tr>
</tfoot>
</table>
<hr>
<a href = "NewFile3.html">다음 페이지</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 실습 -2</title>
<style>
table{
width : 100%;
}
</style>
</head>
<body>
<table border = "1px solid black">
<tr>
<td colspan="3" >1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<br>
<table border = "1px solid black">
<tr>
<td rowspan="3" >1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
<hr>
<a href = "NewFile2.html">이전 페이지</a>
</body>
</html>
-- 폼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼</title>
</head>
<body>
<!-- 사용자의 입력을 받아들이는 공간 -->
<!-- form action="사용자가 form 태그에 입력한 값들을 어떤 페이지로 전달할 지를 작성" -->
<!-- method에 =을 하면 get(default)과 post가 들어간다고 뜬다 -->
<!-- get : URL에 사용자의 요청정보를 오픈 -->
<!-- post : URL에 사용자의 정보를 공개하지 않는다 -->
<form action="NewFile5.html" method="post">
<!-- type="text" : 일반적인 문자열 -->
아이디 : <input type="text" placeholder="아이디를 입력하세요." required="required"><br>
비밀번호 : <input type="password" placeholder="비밀번호를 입력하세요." required="required"><br>
<!-- readonly : 이미 들어간 값을 고칠 수 없도록 고정 -->
이메일 : <input type="email" required="required" value="asblue3235@naver.com" readonly="readonly"><br>
<!-- type="number" : 숫자 업다운 가능, 구간 지정 가능 -->
개수 : <input type="number" min = "1" max ="5" value="1"> <br>
남<input type="radio" name="gender" checked="checked" value="apple"> 여<input type="radio" name="gender" value="banana"><br>
과목선택<br>
C언어<input type="checkbox"> JAVA<input type="checkbox" checked="checked"> JSP<input type="checkbox"><br>
<!-- select : 선택을 하기 위한 용 -->
전화번호<select>
<option>지역번호</option>
<option>02</option>
<option>031</option>
<option>032</option>
<option>055</option>
</select>-<input type="text">-<input type="text"><br>
<!-- 입력가능한 버튼 -->
<!-- 해당 form 바로 action의 위치로 정보 바로 넘기기 -->
<input type="submit" value="확인">
<!-- 사용자가 기능을 커스터마이징 가능 -->
<input type="button" value="버튼" disabled="disabled">
</form>
</body>
</html>