html code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- jquery라이브러리 다운로드 //두가지 순서가 바뀌면 안됨 -->
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/jqueryBasic.js"></script>
</head>
<body>
<h1>태그 선택자 실습</h1>
<p id="idselector">아이디 선택자 실습</p>
<p class="classselector">클래스 선택자 실습</p>
</body>
</html>
js code
/**
*
*/
$(document).ready(function(){
//전체 선택자 : $("*")
$("*").css("margin",0)
//태그 선택자 : h1태그의 테두리 적용
$("h1").css("border","2px solid red")
//아이디 선택자
//자바스크립트 : document.getElementById("idselector")
$("#idselector").css({"background-color":"gray","color":"red"})
//클래스 선택자
$(".classselector").css("background-color","yellow").css("color","red");
});
결과 확인
(Eclipse / html 창에서 마우스 오른쪽 버튼 클릭 - Open With - Web Browser)
