<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>선택자 사용</title><scriptsrc="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><h1id="title">title</h1><!-- <h1 id="title"> : 박스에 클래스명을 붙였다.--><h2class="subtitle">subtitle</h2><h3>minititle</h3></body></html>