label_gender.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 스크립트에서 변경하는 것은 동적 바디를 그냥 고정 초기값은 정적 -->
<style>
fieldset {
width : 80%;
min-width : 80%;
<!--border-box : content-box or border-box -->
}
label {
display : inline-block;
width : 100px;
height : 30px;
}
.gend {
width : 50px;
}
body {
background-color : #efd3e9;
font-size : 1.2em;
}
</style>
<script>
function proc1() {
a = document.getElementById('color').value;
//위에것 또는 아래것 // 스크립트에서는 ' ' "" 둘다 가능 ()?)
b = document.querySelector('#color').value ;
console.log(a + "," + b);
//alert(a + "," + b);
document.body.style.backgroundColor = b ; //또는 b ( 둘다 위에 동일한것 )
}
</script>
</head>
<body>
<fieldset>
<legend>인적사항 입력</legend>
<label>이름</label><input type="text" name="name"><br> <!-- name 이 없으면 전송해도 이름이 안간다. -->
<label>주소</label><input type="text" name="addr"><br>
<label>전화번호</label><input type="tel" name="tel"><br> <!-- tel이라고 써도 똑같이 text 같다. -->
<label>성별</label>
<input type="radio" name="gend1" value="남자">남자
<input type="radio" name="gend1" value="여자">여자<br>
<br>
<label class="gend">남자</label>
<input type="radio" name="gend2" value="남자">
<label class="gend">여자</label>
<input type="radio" name="gend2" value="여자">
<!-- name="gend1" 이런식으로 이름을 주었기 때문에 radio 중에 한개만 선택이 가능하다. -->
</fieldset>
<fieldset>
<legend>경력사항 입력</legend>
<label>이메일</label><input type="email" name="email"> <br> <!-- type="email" 은 유용가치가 없는게 골뱅이@만 체크해줘서... -->
<label>수량</label><input type="number" value="10" min="10" max="100" step="10" name ="qty"> <br>
<!-- value="10"을 주면 초기디폴트값을 지정해주는것 , step은 늘어나는 정도 -->
<label>가격</label><input type="range" value="10000" min="1000" max="10000000" name="price"><br>
</fieldset>
<fieldset>
<legend>수상경력 입력</legend>
<label>색상</label> <input type="color" name="color" id="color" > <br>
<input type="button" value="변경" onclick="proc1()">
<button type ="button" onclick="proc1()" >변경</button>
</fieldset>
<fieldset>
<legend>봉사활동</legend>
<pre>
pattern : 정규식을 이용한 데이터 형식을 지정
required : 필수 항목을 지정
placeholder : 흐리게 나타나는 예시 문자를 지정
title : 마우스를 올려놨을 때 말풍선처럼 나타나는 문자를 지정
size : 입력요소의 크기를 지정
</pre>
<form>
<label>이름</label><input type="text" name="name" size="5" pattern="[가-힣]{3,5}" required><br>
<label>전화번호</label><input type="tel" name="tel" required title="010-1234-5678"><br>
<label>이메일</label><input type="email" name="email" placeholder="kk123@abc.com"><br>
<!-- placeholder 는 형식을 희미하게 보여주는것 title은 마우스 올려주었을때 보여준다. required 는 꼭 입력해야하는것 -->
<input type="submit" value="전송">
</form>
</fieldset>
</body>
</html>
----------------------------------------------------------------------------------------------------
의사클래스_구조 html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/publuc.css">
<style>
table {
border : 1px solid pink;
}
td {
width : 200px;
height : 50px;
}
#tab1 td:nth-child(even) {
background : lightblue;
}
#tab1 td:nth-child(odd){
background : lightgreen;
}
#tab2 tr:nth-child(2n) {
background : lightgray;
}
#tab2 tr:nth-child(2n-1) {
background : lightblue;
}
</style>
</head>
<body>
<pre>
의사 코드 : 구조나 상태에 따라서 선택
구조 :
부모를 기준으로 짝수번째 요소를 선택 : nth-child(2n) nth-child(even)
부모를 기준으로 홀수번째 자식요소를 선택
td : nth-child(2n-1) //tr(부모) 를 기준으로
table : nth-child)(odd) //table (부모) 를 기준으로
부모를 기준으로 지정한 번쨰의 자식요소를 선택
nth-child(3) nth-child(1)
</pre>
td:nth-child(even) { background : lightblue ; } <br>
td:nth-child(odd) { background : lightgreen ; }
<table id="tab1" border="1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br><br>
<table id="tab2" border="1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
댓글
댓글 쓰기