id와 for 같은 값으로 해야한다 ! (사용자들이 편하게 하기위해)
exam05- checkbox.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<fieldset>
<div>
<!-- 체크박스 -->
<input type="checkbox" name="hobby" id="hobby1" value="축구" checked="checked" />
<label for="hobby1">축구</label>
<input type="checkbox" name="hobby" id="hobby2" value="농구" />
<label for="hobby1">농구</label>
<input type="checkbox" name="hobby" id="hobby3" value="야구" />
<label for="hobby1">야구</label>
</div>
</fieldset>
</form>
</body>
</html>
<fieldset>
<legend>성별 선택하기</legend>
<div>
<!-- 라디오 버튼 -->
<input type="radio" name="gender" id="gender_m" value="M" checked />
<label for="gender_m">남자</label>
<input type="radio" name="gender" id="gender_f" value="F" />
<label for="gender_F">여자</label>
</div>
</fieldset>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<fieldset>
<div>
<!-- 드롭다운(싱글타입) -->
<label for="telecom">이동통신사 선택</label>
<select name="telecom" id="telecom">
<option>----- 선택하세요 -----</option>
<option value="SKT">SKTelecom</option>
<option value="KT">KT</option>
<option value="LG">LG</option>
</select>
</div>
</fieldset>
</form>
</body>
</html>
<fieldset>
<legend>스마트폰 운영체제 선택하기</legend>
<div>
<!-- 드롭다운(멀티타입) -->
<label for="smartphone">스마트폰 운영체제</label>
<select name = "smartphone" id ="smartphone" multiple size="5">
<option value="android" selected="selected">안드로이드</option>
<option value="iOS">iOS</option>
<option value="window">window</option>
</select>
</div>
</fieldset>
multiple size="5" 이거의 차이다 위에랑
selected="selected" 차이 - 없으면 첫 번째께 콤보로 뜬다.
체크박스와 라디오는 checked
datalist 요소는 input 요소에 대해 미리 정의된 옵션 리스트를 명시해 주는 요소입니다.
사용자는 텍스트를 바로 입력해도 되고, 드롭다운 메뉴에서 미리 정의한 옵션 중의 하나를 골라도 됩니다.
단, input 요소의 list 속성값이 datalist 요소의 id 속성값과 반드시 일치해야 연결됩니다.
exam07 - datalist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="">
<input list="lectures" name="lectures">
<datalist id="lectures">
<option value="HTML">
<option value="CSS">
<option value="JAVA">
<option value="C++">
</datalist>
<input type="submit" value="전송">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form enctype="multipart/form-data" action="">
<fieldset>
<legend>
파일첨부
</legend>
<div>
<label for="photo">사진선택</label>
<input type="file" name="photo" id="photo">
</div>
</fieldset>
</form>
</body>
</html>
파일 업로드하기 위해서는 파일 type이 들어가야하며 → <input type="file"
enctype="multipart/form-data" 이 부분이 필요하다.
submit ~ action
- <form>태그 안에 있는 입력상자의 데이터를 들고 페이지 이동
* button
button ~ onclick
<inpt type="button" />
<button /> - 자동 submit 해준다.
* 이미지
<img src="" alt="" />
<input type="image" src="" alt="" />
자동으로 submit 해준다.
on~~~ : ~할 때
onclick : 클릭했을 때
onchange : 변화일어났을 때
페이지를 이동
1. Get → default
→ Query String (주소 표시줄) 통해 이동
2. Post
→ 클라이언트가 post로 요청했을 때
<form method="post" action="result.html"></form>
이런식으로 하면 넘어가는 데이터가 안 보인다.
exam09-form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form method="get" action="result.html">
<fieldset>
<legend>이름 입력하기</legend>
<div>
<label for="user_name">이름 : </label>
<input type="text" name="user_name" id="user_name" />
</div>
<br/>
<div>
<input type="submit" value="입력완료"/>
<input type="reset" value="초기화"/>
<input type="button" value="입력완료"/>
</div>
</fieldset>
</form>
</body>
</html>
submit은 action을 찾아서 가는 것
button은 onclick → 자바스크립트와 연결
http://localhost:8080/HTML5/html/exam09-form.html 요청
http://localhost:8080/HTML5/html/result.html?변수=값&변수=값 &변수=값
http://localhost:8080/HTML5/html/result.html?user_name = 홍길동
result.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>입력결과를 전송받기 위한 페이지</h1>
<p>사용자가 form에 입력한 내용을 전송받아서, 후속 처리를 수행하게 됩니다.</p>
</body>
</html>
result.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>입력결과를 전송받기 위한 페이지</h1>
<p>사용자가 form에 입력한 내용을 전송받아서, 후속 처리를 수행하게 됩니다.</p>
<br/>
<input type="button" value="뒤로" onclick="location.href='exam09-form.html'" >
</body>
</html>
밑에처럼 해도 된다. (JavaScript 문법)
<input type="button" value="뒤로" onclick="history.go(-1)" >
<!-- 자동으로 submit -->
input type="image" src="../image/ok.png" width="30" height="30" alt="OK"/>
자동으로 submit 안 하고싶을 때
<input type="image" src="../image/ok.png" width="30" height="30" alt="OK" onclick="return false;"/>
input type에
뭐뭐 들어가는지 check
exam10-table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" width="300">
<!-- 제목 영역 -->
<thead>
<tr><!-- 행, 줄 -->
<th width="50" height="50">NO</th><!-- 열, 칸 -->
<th>획득포인트</th> <!-- 가운데 정렬, 굵게 -->
</tr>
</thead>
<!-- 본문 영역 -->
<tbody>
<tr align="center"> <!-- "left, center, right -->
<td>2</td><!-- 행, 줄 -->
<td>루비 결제 5000G</td> <!-- td는 기본이 왼쪽정렬, 평법 -->
</tr>
<tr align="center">
<td>1</td>
<td>가입 축하 10000G 지급</td>
</tr>
</tbody>
<!-- 하단 영역 -->
<tfoot>
<tr>
<th width="50" height="30">합계</th>
<th>15000G</th>
</tr>
</tfoot>
</table>
</body>
</html>
exam11-table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" width="300">
<thead>
<tr>
<th colspan="2">획득 포인트</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td rowspan="2" valign="top">G획득</td> <!-- valign = "top / middle(center) / bottom -->
<td>루비 결제 5000G</td>
</tr>
<tr align="center">
<td>가입 축하 10000G 지급</td>
</tr>
</tbody>
<tfoot>
<tr>
<th width="50" height="30">합계</th>
<th>15000G</th>
</tr>
</tfoot>
</table>
</body>
</html>
padding - 안쪽
margin - 바깥쪽
exam12-table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>Cell과 내용 사이의 여백 - cellpadding</h1>
<table border="1" cellpadding="30">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
</table>
<hr/>
<h1>Cell과 Cell 사이의 여백 - cellspacing</h1>
<table border="1" cellspacing="10">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
</table>
<hr/>
</body>
</html>
<table border="1" cellpadding="30" cellspacing="0">
<tbody>
<tr>
<td colspan="2">1-1</td>
<td>1-2</td>
</tr>
<tr>
<td colspan="2">2-1</td>
<td>2-2</td>
</tr>
<tr align="center">
<td colspan="3">3-1</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2" rowspan="2"><img src="../image/img1.gif"/></th>
<th>4-2</th>
</tr>
<tr>
<th>5-2</th>
</tr>
</tfoot>
</table>
<table border="1" cellpadding="30" cellspacing="0">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr align="center">
<td colspan="3">3-1</td>
</tr>
<tr>
<th rowspan="2"><img src="../image/img1.gif" width="100"/></th>
<th>4-2</th>
</tr>
<tr>
<th>5-2</th>
</tr>
</table>
이미지 누르면 페이지 이동하게 ! + 이미지에 갖다대면 손가락 이미지 나오게!
<tr>
<th rowspan="2"><img src="../image/img1.gif" width="100"
onclick="location.href='https://www.naver.com'"
style="cursor: pointer"/></th>
<th>4-2</th>
</tr>
exam13-a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
<!-- 게시판 제목 -->
<div>
<h1>공지사항</h1>
<!-- h태그는 알아서 줄바꿈 -->
<h2>우리 사이트의 새로운 소식을 알려드립니다.</h2>
</div>
<hr />
<!-- 게시물 리스트 -->
<div>
<table border="1" width="800" align="center">
<!-- 표 제목 -->
<thead>
<tr>
<th width="50">번호</th>
<th>제목</th>
<th width="100">작성자</th>
<th width="70">조회수</th>
<th width="120">작성일</th>
</tr>
</thead>
<!-- 본문 영역 (글목록) -->
<tbody>
<tr>
<td align="center">3</td>
<td><a href="#">웹 표준 + 웹 접근성 실무완성 수강안내</a>
<td align="center">관리자</td>
<td align="center">123</td>
<td align="center">2024-08-07</td>
</tr>
<tr>
<td align="center">2</td>
<td><a href="#">HTML5+반응협웹 수강안내</a>
<td align="center">관리자</td>
<td align="center">123</td>
<td align="center">2024-08-07</td>
</tr>
<tr>
<td align="center">1</td>
<td><a href="#">JavaScript+JQuery+AJax 수강안내</a>
<td align="center">관리자</td>
<td align="center">123</td>
<td align="center">2024-08-07</td>
</tr>
</tbody>
<!-- 하단 영역 (페이지 번호, 쓰기링크) -->
<tfoot>
<tr>
<td colspan="5" align="center">
<a href="#" class="num">1</a>
<a href="#" class="num">2</a>
<a href="#" class="num">3</a>
<a href="#" class="num">4</a>
<a href="#" class="num">5</a>
</td>
</tr>
<tr>
<td colspan="5" align="right">
<a href="#">새 글 쓰기</a>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
a:link { color: black; text-decoration: none; }
a:visited { color: green; text-decoration: none; }
a:hover { color: red; text-decoration: underline;}
a:active { color: magenta; text-decoration: none;}
</style>
똑같은게 여러개이면 id가 아니라 class 속성으로 걸어야함
값이 여러개일 때는 class 속성으로 걸기 !
id 속성은 #
class 속성은 .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
a:link { color: black; text-decoration: none; }
a:visited { color: green; text-decoration: none; }
a:hover { color: red; text-decoration: underline;}
a:active { color: magenta; text-decoration: none;}
.num:link{ color: black; text-decoration: none; }
.num:visited{ color: black; text-decoration: none; }
.num:hover{ color: hotpink; text-decoration: underline; }
.num:active{ color: black; text-decoration: none; }
</style>
span {
border:1px solid black;
padding: 3px, 5px, 3px, 5px; /* 시계방향 - top, right, bottom, left */
}
<span><a href="#" class="num">1</a></span>
person.html
'HTML CSS JS' 카테고리의 다른 글
| DAY 29 - CSS - 박스 / 테두리 / Position / float / inline / inline-block (2024.08.12) (0) | 2024.08.12 |
|---|---|
| DAY 28 - CSS (2024.08.09) (0) | 2024.08.09 |
| DAY 28 - HTML 연습 (2024.08.09) (0) | 2024.08.09 |
| DAY 27 - HTML - inline / block / div / 커스텀 /video / audio (2024.08.08) (0) | 2024.08.08 |
| DAY 25 - HTML (2024.08.06) - Tomcat 설치 / font / img / ul / form (1) | 2024.08.06 |
