<!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(){
$('.box1 button').on('click', function(){
$('li:first-child').css('border', '2px solid red')
$('li:first').css('background', 'yellow')
})
$('.box2 button').on('click', function(){
$('td:nth-child(1)').css('background', '#E6E6FA');
$('td:nth-child(2)').css('background', '#FFC0CB');
$('td:last-child').css('background', '#FFE4E1');
$('#tab2 tr:first-child td').css('background', 'black')
.css('color', 'white')
.css('font-size', '2.0em')
.css('font-weight', 'bold');
//$('#tab3 tr:nth-child(2n)') //2,4,6,8,10
$('#tab3 tr:nth-child(even) td').css('background', 'lightgreen');
//$('#tab3 tr:nth-child(2n-1)') //1,3,5,7,9
$('#tab3 tr:nth-child(odd) td').css('background', 'lightgray');
})
})
</script>
<style>
table{
border : 2px solid blue;
border-collape;
}
</style>
</head>
<body>
<div class = "box box1">
first-child : 부모의 그룹에서 첫번째 자식을 선택한다<br>
last-child : 부모의 그룹에서 마지막 자식을 선택한다<br>
$('li:first-child') : ol 그룹에서 각각 첫번째 자식을 선택<br>
$('li:first) : 모든 li에서 첫번째 li를 선택<br>
<br>
<button type = "button">확인</button>
<div id = "result1">
<h2>여자에게 인기있는 남자들</h2>
<ol>
<li>능력있는남자</li>
<li>잘생긴남자</li>
<li>돈많은남자</li>
<li>섹쉬한남자</li>
</ol>
<h2>남자에게 인기있는 여자들</h2>
<ol>
<li>능력있는여자</li>
<li>이쁜 여자</li>
<li>귀여운 여자</li>
<li>섹싀한 여자</li>
</ol>
</div>
</div>
<div class = "box box2">
td:nth-child(1), td:first-child
td:nth-child(2)
th:nth-child(3), td:last-child
<br>
<button type = "button">확인</button>
<div id = "result2">
<table border =1>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>홍길동</td>
<td>대전</td>
<td>010-2222-3333</td>
</tr>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
</table>
<br>
<table id="tab2" border =1>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>홍길동</td>
<td>대전</td>
<td>010-2222-3333</td>
</tr>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
</table>
<br>
<table id="tab3" border =1>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>홍길동</td>
<td>대전</td>
<td>010-2222-3333</td>
</tr>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
</table>
</div>
</div>
</body>
</html>
신입 개발자 입니다!!!