결합자(Combinators)란?
선택자들의 간의 관계를 설정해주는 것이다.
관계를 설정해준다..? 라는 말이 조금은 이해가 되지 않는다.
쉽게 말하면 연관관계가 있는 예를 들면 부모자식 간의 관계를
어떤 결합자(부호)를 써서 설명한다는 것!!
결합자는 4가지가 있다.
(사실 세부적으로 나뉘면 더 나눌 수 있고 줄이면 줄일 수 있지만
나는 w3school 기준으로 4개로 설명하겠다ㅇㅅㅇ)
(공통) HTML 코드
<body>
<h1> combinators | 결합자 | 조합자 </h1>
<ul class="girlGroup">
<li>아이브</li>
<li>뉴진스</li>
<li>엔믹스</li>
<li>에스파
<ul>
<li>카리나</li>
<li>윈터</li>
<li>닝닝</li>
<li>지젤</li>
</ul>
</li>
</ul>
</body>
1. Descendant Selector ( 하위 선택자 | 자손 선택자 | 자손 결합자)
: 해당 요소의 하위 요소 중에서 특정 요소를 모두 선택하는 것이다.
상위 하위 { 속성 : 속성값; }
으로 상위요소와 하위요소가 공백(space)을 기준으로 나뉜다.
예를 들어
<div> 태그의 하위 요소 중에서 <p> 태그를 모두 선택하려면
div p {속성 : 속성값; } 으로 선택하면 된다.
예제 ) <ul> 태그의 하위 요소 <li> 태그를 모두 hotpink색으로 변경
!참고!
현재 예시에서 걸그룹 class가 1개이므로
girlGroup클래스의 <li> 태그를 변경하는 것과 같다.
/* Descendant Selector (자손 선택자 | 자손 결합자) */
ul li {
color : hotpink;
}
/* 클래스의 하위 태그 */
.girlGroup li {
color: hotpink;
}
결과
2. child selector (1촌 자손 결합자 | 자식 선택자)
: 하위 요소 중 지정된 요소만 선택하는 것이다.
바로 아래 자식(1촌 자식)만 선택된다고 생각하면 이해하기 쉽다.
상위 > 하위 { 속성 : 속성값; } 으로 정의된다.
위의 HTML 예제를 들면
<ul> 태그의 하위 요소로 <li> 태그가 있고
그 하위 요소로 <ul> <li> 구조가 또 있는 상태이다.
즉, 자손 결합자로 모든 <li> 태그를 선택했다면
1촌 자손 결합자로 바로 밑의 <li>만 선택하는 것이다.
예제 ) <ul> 태그의 1촌 자식 <li> 태그만 색상을 연두색으로 변경한다.
CSS 코드
/* child selector (1촌 자손 결합자 | 자식 선택자) */
.girlGroup > li {
color: greenyellow;
}
결과
!참고!
1촌 자식이 아닌 1촌 자식의 하위 요소를 선택하고 싶다면?
상위 > 하위 하위 { 속성 : 속성값; } 으로 공백으로 요소들 간 구분을 해준다.
즉 부모 > 1촌 2촌 3촌 .. 등 선택(결합)을 하면 된다.
예제) <ul> 태그의 1촌 자식의 하위 요소를 선택하여 색상을 노란색으로 변경하겠다.
CSS코드
/* 1촌 자손이 아닌 더 밑의 하위 자손을 선택 */
.girlGroup > li li {
color : gold;
}'
결과
3. Adjacent Sibling Selector (인접 형제 결합자 | 선택자)
: 특정 요소 바로 뒤에 있는 요소를 선택하는 데 사용된다.
한 마디로 " 너 말고 니 뒤에 "이다.
특정요소 + 그다음요소{ 속성 : 속성값; }로
+ 기호로 요소들을 구분하고 다음요소를 선택한다.
현재 예제는 ul(걸그룹 클래스) > li > ul > li 순서로 되어 있다.
마지막 <li> 태그의 leader class를 가진 카리나 뒤에 윈터를 선택하고 싶다면?
CSS 코드
/* child selector (1촌 자손 결합자 | 인접 형제 결합자) */
/* 같은 우선순위의 경우 부모 클래스가 우선 순위로 적용된다. */
.leader + li {
color: blue;
}
결과
!주의!
같은 우선순위의 경우 부모클래스가 우선 적용된다.
앞서 자식선택자(1촌 자식결합자)로 girlgroup 클래스의 하위를 선택하였다.
leader 클래스는 grilgroup 클래스의 하위 클래스이므로 색이 변하지 않고 앞서 바꾼 노란색으로 유지가 된다.
따라서 앞에 1촌 자식 결합자로 선택한 코드를 지워주고 인접형제결합자를 사용한다.
!참고!
앞에 코드를 지우고 싶지 않다면?
id 선택자는 class선택자보다 우선순위가 높기 때문에
CSS를 적용한 요소에 id값을 부여하여 id선택자를 이용하여 변경한다.
CSS코드
#winter {
color : orange
}
결과
4. General Sibling Selector (일반 형제 선택자 | 모든 형제 결합자)
: 다음 형제 1개가 아닌 다음에 오는 모든 형제를 선택할 때 사용한다.
이전 인접형제결합자로 leader 클래스의 카리나 다음으로 윈터를 선택했다면,
일반형제결합자는 카리나 다음의 윈터, 닝닝, 지젤을 모두 선택한다.
첫째 ~ 그다음형제들 { 속성 : 속성값; } 으로 ~ 기호를 이용하여 구분한다.
예제) leader class의 카리나 밑으로 윈터,닝닝,지젤을 선택하여 보라색으로 변경한다.
CSS 코드
/* General Sibling Selector (일반 형제 선택자 | 모든 형제 결합자) */
.leader ~ li {
color : purple
}
결과
!참고!
선택한 요소의 형제 요소가 바로 인접하지 않더라도 선택할 수 있다.
아래 예제는 <h1> 태그 밑에 <p>만 선택을 하는 것이다.
HTML 코드
h1 ~ p {
font-weight: bold;
background-color: #333;
color: #fff;
padding: .5em;
}
CSS 코드
<article>
<h1>A heading</h1>
<p>I am a paragraph.</p>
<div>I am a div</div>
<p>I am another paragraph.</p>
</article>
결과
이상으로 Combinators(결합자, 조합자, 선택자)에 대해 알아보았다!
원래는 Pesudo-class(가상클래스, 의사클래스)까지 리뷰하려고 했는데
너무 길어져서 다음 포스팅에 이어서 하도록 하겠다.
그럼 이만~~~
📚지난 포스팅 리뷰
지금까지 CSS에 대해 배운 내용을 정리하면 아래와 같다.
1. CSS display 속성(HTML을 나누는 법) : block과 inline
2. CSS 적용방법 : 인라인, 내부스타일시트, 링킹 스타일 시트
3. CSS문법 : 선택자(모든 요소, class id, 그룹 선택자)
오늘은 4. 결합자와 가상클래스에 대해 배워볼 것이다.
참고로 (combinators = 결합자 = 결합 선택자= 조합자),
(Pesudo-class = 가상클래스 = 의사클래스) 이다.
하나로 통일해서 부르지.. ㅇㅅㅇ
'Study with Yedol > CSS' 카테고리의 다른 글
| CSS 글자 스타일 적용 (0) | 2023.12.26 |
|---|---|
| CSS 색상 변경 방법 (0) | 2023.12.23 |
| CSS 문법 선택자의 종류 (0) | 2023.12.21 |
| CSS 적용 방법 (0) | 2023.12.20 |
| CSS의 display 속성값 (0) | 2023.12.19 |
