<!DOCTYPE html>
<html lang="ko">
<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">
<title>선택자사용.html</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//HTML 문서의 요소를 선택할때는 $('selector')를 사용한다.
//$('selector')로 문서의 요소를 선택하면 요소(:박스)는 DOM(Document Object Model,문서객체)이 된다.
//기본선택자: 전테 선택자, 아이디 선택자, 클래스 선택자, 태그 선택자
$('*').css('border','5px dashed #0F0');//Object.method();
$('#title').css('color','#FC0').css('background','#000');
//css ('스타일 속성','스타일 값'):스타일시트를 적용하는 메서드이다.
//css('스타일속성'):스타일 속성에 해당하는 스타일값을 얻어온다.
//메서드를 연속적으로 사용하는 것을 '메서드 체이닝(체인으로 메서드를 엮는다)'' 라고 한다.
$('.subtitle').css('color','#FFF').css('background','#FC0');
$('h3').css('text-transform','uppercase');
//그룹선택자(쉼표(,)로 선택)
$('h1,h3').css('border','5px solid #36F');
//종속선택자(자기 자신을 선택):스타일 시트 코드만 보고 스트럭처를 분별하고자 할 때 사용한다.
$('h1#title,h2.subtitle').css('transform','rotate(15deg)');
});
</script>
</head>
<body>
<h1 id="title">title</h1>
<h2 class="subtitle">subtitle</h2>
<h3>minititle</h3>
</body>
</html>