<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('.box > button').on('click', function(){
//> : 위에것만 선택됨
$(':input').css('background', '#a2d3f1');
//input 요소 테두리 lime , 배경색 핑크
$('input').css('border','lime').css('background', 'pink');
//input type이 button 인 요소 배경색 노란
//$('input[type=button]').css('background', 'yellow')
$('input:button').css('background', 'yellow')
//Button 요소와 input type이 button 인 요소 배경색 하늘색
//$('button, input[type=button]')
$(':button').css('background', 'cyan');
//Type이 submit 요소의 배경색 녹색
// $('input[type=submit], button[type=submit]')
$(':submit').css('background', 'green');
//Type이 reset인 요소의 배경색 노랑
$('input[type=reset], button[type=reset]')
$(':reset').css('background', 'yellow');
//Type이 text, password 인 요소의 테두리 파랑
$(':text, :password').css('background', '2px solid blue');
//Type이 file, image인요소의 테두리 빨강
$(':file, :image').css('background', '5px solid red');
})
})
</script>
</head>
<body>
<div class = "box">
<br>
<button type = "button" >확인</button>
<div id = "result1">
<form onsubmit="return false;">
Text : <input type="text"/><br>
Password : <input type="password" /><br><br>
Radio :
<input type="radio" name="radioGroup" id="radioA" value="A"/> A
<input type="radio" name="radioGroup" id="radioB" value="B"/> B<br><br>
Checkbox :
<input type="checkbox" name="checkboxes" id="checkbox1" value="1"/> 1
<input type="checkbox" name="checkboxes" id="checkbox2" value="2"/> 2<br><br>
Textarea : <br> <textarea rows="15" cols="50" id="myTextarea" id="myTextarea"></textarea><br><br>
Image : <input type="image" src="../images/image.1.jpg"><br><br>
File : <input type="file"><br><br>
Buttons :
<button type="button" id="normalButton">Normal</button>
<button type="submit" id="submitButton">Submit</button>
<button type="reset" id="resetButton">Reset</button> <br><br>
<input type="button" value="일반버튼">
<input type="submit" value="전송버튼">
<input type="reset" value="초기화버튼"> <br><br>
</form>
</div>
</div>
</body>
</html>
신입 개발자 입니다!!!