[2022-08-17] TIL - 15일차
2022. 8. 17. 14:57ㆍGolfzon tech/TIL
😁 Today I Learned
- HTML , CSS (bootstrap)
- element 사용
test02_table.html
- link를 써서 외부 css 파일을 적용시킬 수 있다.
test02.css
body {
background-color: antiquewhite;
}
table tr td {
/* background-color: rgb(129, 205, 129); */
width: 100px;
text-align: center;
}
th {
background-color: rgb(7, 113, 7);
color: aliceblue;
}
/* 띄어쓰기 하면 인식 못함. */
tr:nth-child(odd) {
background-color: rgb(96, 96, 238);
}
col:nth-child(odd) {
background-color: rgb(13, 13, 125);
}
h1 {
text-align: center;
}
table{
margin: auto; /*테이블 중앙 */
}
form.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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<title>Document</title>
<style>
form,
h1 {
text-align: center;
}
</style>
<script>
var a = 10;
console.log(a);
// 얘가 있다면 첨부터 실행하여 순서없이 ㅁ[서드가 실행될 수 ㄷ있다. body 가 전부 읽혀지고 얘가 읽힌다.
window.onload = function(){
// 여기는 위에라 id 를 찾지 못해 null 이다.
// var btn_idcheck = document.getElementById("btn_idcheck");
var btn_idcheck = document.querySelector("#btn_idcheck"); // #을 붙이려면 querySelector 를 쓴다.
// var btn_idcheck = $("#btn_idcheck"); // 얘는 Jquery
console.log(btn_idcheck);
// 자바스크립트 파라미터는 일단 타입없이 넣고 본다.
btn_idcheck.onclick = function (event) {
console.log("onClick...");
// 얘가 form 에서 다른데로 못가게 막는다.
event.preventDefault();
// 영역에 해당 되어지는 걸 포함해서 없애버리겠다?
event.stopPropagation();
};
};
</script>
</head>
<body>
<!-- form:get, post get방식이냐 post 방식이냐 아무것도 안적으면 그냥 get방식이다. -->
<h1>로그인</h1>
<form action="loginOK.do" method="get">
<label for="id">ID : </label><input type="text" id="login_id" placeholder="ID 입력하세요" name="id"><br>
<label for="pw">PW : </label><input type="password" id="login_pw" placeholder="PW" name="pw"><br>
<input type="submit">
</form>
<h1>회원가입</h1>
<form id="form1" action="signUpOK.do" method="get">
<label for="id">ID : </label><input type="text" id="id" placeholder="ID 입력하세요" name="id">
<button id="btn_idcheck">중복체크</button><br>
<label for="pw">PW : </label><input type="password" id="pw" placeholder="password" name="pw"><br>
<label for="pw_check">PW확인 : </label><input type="password" id="pw_check" placeholder="password 확인"
name="pw확인"><br>
<label for="email">Email :</label><input type="text" id="email" placeholder="Email" name="email"><br>
<label for="tel">Tel : </label><input type="tel" id="tel" placeholder="Tel" name="tel"><br>
<input type="submit" value="가입하기" class="btn btn-primary">
</form>
<h1>추가정보</h1>
<!-- post로 바꾸고 enctype="multipart" 로 해야 전송이 가능하다. -->
<form action="infoAddOK.do" method="post" enctype="multipart/form-data">
<!-- name 이 같아야 하나씩만 선택할 수 있네 -->
<label for="M"> M : </label><input type="radio" id="m" name="mf" value="m" checked>
<label for="F">F : </label><input type="radio" id="f" name="mf" value="f"><br>
<label for="Hobby">야구 : </label><input type="checkbox" id="hobby" name="hobby" value="baseball">
<label for="id">축구 : </label><input type="checkbox" class="hobby" name="hobby1" value="soccer">
<label for="id">골프 : </label><input type="checkbox" class="hobby" name="hobby2" value="golf"><br>
<label for="id">습득율 : </label><input type="range" name="pct"><br>
<label for="birthday">생일 : </label> : </label><input type="date" id="birthday" name="birthday"
value="2022-01-01"><br>
<label for="color">color : </label> <input type="color" id="color" name="color"><br>
<!-- 사용자가 고칠 수 없게끔 하는 것 히든타입-->
<label for="Num">Num : </label> <input type="hidden" id="num" name="num" value="1"><br>
<label for="file">프로필 이미지</label> <input type="file" id="file1" name="file1"><br>
<input type="submit" value="추가">
</form>
<!-- <script>
var a = 10000;
console.log(a);
// 여기서 btn_idcheck 가 읽힌다.
var btn_idcheck = document.getElementById("btn_idcheck");
console.log(btn_idcheck);
</script> -->
</body>
</html>
- window.onload 는 <script> 를 어디서 사용하던지 가장 마지막에 실행하여 모든 자바스크립트 코드를 적용할 수 있게 한다.
- input element 는 type 별로 쓰이는 게 다르다.
- form element 에서 action으로 이동하며 파일 추가할 때는 enctype = multipart/form-data 형식을 적어줘야 한다.
- 파라미터. preventDefault()는 form 태그에서 action으로 설정해준 경로로 넘어가지 못하도록 막아준다.
728x90
'Golfzon tech > TIL' 카테고리의 다른 글
| [2022-08-19] TIL - 17일차 (0) | 2022.08.20 |
|---|---|
| [2022-08-18] TIL - 16일차 (0) | 2022.08.18 |
| [2022-08-16] TIL - 14일차 (0) | 2022.08.16 |
| [2022-08-12] TIL - 13일차 (0) | 2022.08.16 |
| [2022-08-11] TIL - 12일차 (0) | 2022.08.11 |