결합자(Combinator)
결합자는 CSS 선택자를 결합하여 보다 복잡한 선택자를 생성하는 방법입니다.
아래 예시를 통해 결합자를 분석해 보겠습니다.
결합자 코드 예시
HTML
<body>
<p>첫 번째 문단</p>
<h1>제목 1</h1>
<h1 class="my-class">제목 2</h1>
<p class="your-class">두 번째 문단</p>
<div id="my-id">내 ID</div>
<div id="your-id">너의 ID</div>
</body>
CSS
.my-class {
color: red;
}
#my-id {
font-size: 24px;
}
p + h1 {
background-color: lightblue;
}
h1.your-class {
font-weight: bold;
}
#your-id {
text-decoration: underline;
}
이 예시에서 CSS는 다음과 같이 적용됩니다.
-
my-class : 해당 클래스를 가진 요소의 글자색은 빨간색입니다.
-
#my-id : 해당 ID를 가진 요소의 글자 크기는 24px입니다.
-
p + h1 :
<p>
바로 다음에 오는<h1>
은 배경색이 연한 파란색입니다. -
h1.your-class : h1 태그 중 클래스가
your-class
인 요소의 글자 두께는 굵은 글씨체입니다.
코드의 별표로 강조된 부분을 따라 입력해 보세요.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!