태그하나하나에클래스를두고타겟팅할때불편한이유:
1. 만든 클래스 이름을 다 기억하지도 못할 뿐더러
2. 그래서 이 클래스가 도대체 무슨 효과를 주는지 하나하나 짝지으며 찾아 다녀야 합니다.
바로결합자 (combinators)를활용해코드를짜는것입니다!
결합자 (Combinator)는선택자를여러개결합하여세밀하게찾을수있게합니다.
결합자는 크게 4가지로 나누어진다.
div > p : 자식 결합자. div의 자식인 p
div p : 하위 결합자. div의 자손(자식, 손자 등등)인 p
div ~ p : 형제 결합자. div 이후의 형제인 p
div + p : 인접 형제 결합자. div 이후의 형제 중 첫 번째 p
자식 결합자
div > p
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div > p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>파란색</p>
<div>
<p>파란색</p>
</div>
<div>
<div>
<p>파란색</p>
</div>
</div>
</div>
<p>안파란색</p>
</body>
</html>div의자식중에p가있나찾으면 된다.
<div> #1번째 div
<p>파란색</p> #1번째 p, 1번째 div의 자식
<div> #2번째 div
<p>파란색</p> #2번째 p, 2번째 div의 자식
</div> #2번째 div 닫음
<div> #3번째 div
<div> #4번째 div
<p>파란색</p> #3번째 p, 4번째 div의 자식
</div> #4번째 div 닫음
</div> #3번째 div 닫음
</div> #1번째 div 닫음
<p>안파란색</p> #4번째 p, body의 자식하위 결합자
div p : 하위 결합자. div의 자손(자식, 손자 등등)인 p
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div button {
color: red;
}
</style>
</head>
<body>
<div>
<table border : 2px;>
<td>
<button type="button">버튼</button>
</td>
</table>
</div>
</body>
</html>button은div의자식이아니라손자이기때문에 하위결합자 사용.
자식 결합자를 사용하면 div 자식만 보기 때문.
형제 결합자
div ~ p : 형제 결합자. div 이후의 형제인 p
형제결합자는앞선택자이후의형제들중뒷선택자인것들을뜻
div~p라고했으니div하나씩잡고아래로내려가면서div의형제인p를찾으면돼요.
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div ~ p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>안파란색</p>
<div>
<p>안파란색</p>
</div>
<p>파란색</p>
<div>
<div>
<p>안파란색</p>
</div>
</div>
</div>
<p>파란색</p>
</body>
</html>인접형제결합자
div + p : 인접 형제 결합자. div 이후의 형제 중 첫 번째 p
인접형제결합자는형제결합자와같으나첫번째만선택
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div + p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>안파란색</p>
<div>
<p>안파란색</p>
</div>
<p>파란색</p>
<p>안파란색</p>
<div>
<div>
<p>안파란색</p>
</div>
</div>
</div>
<p>파란색</p>
<p>안파란색</p>
</body>
</html>
천방지축😛 얼레벌레🙄 빙글빙글🙃 돌아가는 수지의 코드~🎵