<!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>선택자 사용</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('text-transform','uppercase').css('color','#FC0').css('background','#000').css('width','250px').css('height','45px').css('margin','10px auto').css('text-align','center').css('line-height','45px');
//css('스타일 속성', '스타일 값') : 스타일시트를 적용하는 메서드이다. ->메서드 오버로딩
//css('스타일속성') : 매개변수의 개수가 하나일 경우가 있다. : 스타일 속성에 해당하는 스타일 값을 얻어온다.->메서드 오버로딩
// 메서드를 연속적으로 사용하는 것을 '메서드 체이닝' 이라고 한다.
$('.subtitle').css('text-transform','uppercase').css('color','pink').css('background','gray').css('width','250px').css('height','45px').css('margin','10px auto').css('text-align','center').css('line-height','45px');
$('h3').css('text-transform','uppercase').css('color','gray').css('background','pink').css('width','250px').css('height','45px').css('margin','10px auto').css('text-align','center').css('line-height','45px');
// ↑기본선택자 : 전체, 아이디, 클래스, 요소 선택자↑ //
// ↓그룹선택자↓ //
$('h1, h3')/*-> 문서 객체가 된다.*/.css('border','5px solid blue')/*문자열에 '', "" 둘 다 사용가능하다.*/
// ↑그룹선택자 : ,↑
// ↓종속선택자↓ //
$('h1#title,h2.subtitle').css('transform','rotate(15deg)');
// ↑종속선택자↑ //
// 스타일시트 코드만 보고 스트럭처를 분별하고자 할 때 사용한다.
// 후손과 다르게 띄어쓰기가 없음 ↑ // (45deg) = 괄호 안에 들어가는 값 = 매개변수,파라미터
// 같은 레벨의 값을 띄어쓰기 없이 사용
// ex) ul#main-menu, ul.sub-menu
});
</script>
</head>
<body>
<h1 id="title">title</h1> <!-- <h1 id="title"> : 박스에 클래스명을 붙였다.-->
<h2 class="subtitle">subtitle</h2>
<h3>minititle</h3>
</body>
</html>