<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
p ~ span {
color : red;
}
</style>
</head>
<body>
<span>p태그의 앞에 있기 때문에 이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p>
<b>그리고 코드도 있습니다.</b>
<span>p태그와 형제이기 때문에 이건 빨강입니다!</span>
<b>더 많은 코드가 있습니다.</b>
<span>이것도 p태그와 형제이기 때문에 빨강입니다!</span>
</body>
</html>
출력 값
인접 형제 결합자 (+)
selectorA의 형제 요소 중 바로 뒤에 위치하는 selectorB 요소를 선택
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
p + span {
color : red;
}
</style>
</head>
<body>
<span>p태그의 앞에 있기 때문에 이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p>
<span>p태그와 인접한 형제이기 때문에 이건 빨강입니다!</span>
<p>더 많은 코드가 있습니다.</p>
<span>p태그와 인접한 형제가 아니기 때문에 이건 빨강이 아닙니다.</span>
</body>
</html>
출력 값
CSS 원칙
모든 요소는 네모(박스모델)이고, 위에서부터 아래로, 왼쪽에서 오른쪽으로 쌓인다 (좌측 상단에 배치)
