Minwoo Dev.
[HTML/CSS] CSS 결합자 (CSS Combinters) 본문
css에서 선택자를 사용하다 보면 두 개 이상의 요소를 선택자로 사용하는 것을 본 적이 있을 것이다.
그런 것들은 대개 결합자(Combinaters)로 사용된 것이다.
CSS 결합자의 종류
- 자손 선택자(Descendant Selector)
- 자식 선택자(Child Selector)
- 인접 형제 선택자(Adjacent Sibling Selector)
- 일반 형제 선택자(General Sibling Selector)
하나하나 세부적으로 설명하겠다.
자손 선택자(Descendant Selector)
자손 선택자는 선택한 요소의 해당하는 하위 요소들에 모두 적용하는 선택자이다.
공백으로 나타낸다.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
#select{
color: red;
}
ul p{
background-color: chartreuse;
}
</style>
</head>
<body>
<h1>저녁메뉴 후보</h1>
<ol class="menu">
<li>짜장면</li>
<li>라면</li>
<li>김치볶음밥</li>
<li id="select">규동</li>
</ol>
<h2>결론</h2>
<p class="reason">면종류는 많이 먹었으니 김치볶음밥과 규동 중에서 오늘은 간장 베이스가 땡기니 규동으로 하자.</p>
<h2>재료</h2>
<p>1인분 기준</p>
<ul class="ingredient">
<li>
우삼겹 250g
<p>다른 부위를 사용해도 상관없다.</p>
</li>
<li>
양파 반 개
<p>채썰어서 준비한다.</p>
</li>
<li>다진마늘</li>
<li>간장 2큰술</li>
<li>
설탕 1큰술
<p>올리고당이나 다른 설탕류도 대체가능.</p>
</li>
<li>
밥
<p>먹을 만큼!</p>
</li>
<p>진짜 최고의 덮밥!</p>
</ul>
</body>
위 코드를 보면 select는 id 선택자로 색상을 빨간색으로 변경하였고, ul p 라는 요소의 배경 색상을 편집한 것을 알 수 있다.
ul p{
}
이처럼 공백을 이용하여 요소를 나열한다면 자손 태그에 대한 선택이다.
자식이 아닌 자손이라고 한 이유는 직계자식, 즉 바로 한 칸 아래의 하위 요소가 아니더라도 하위 요소들은 모두 해당되기 때문이다.
결과를 보자.
배경 색상이 지정된 제일 마지막 줄의 "진짜 최고의 덮밥!" 말고 나머지 4개의 문장은 ul 요소의 직계자손(바로 하위태그)이 아니다.
하지만 ul 태그의 하위태그 중 하나(손자?)이므로 적용이 된 것을 알 수 있다.
자식 선택자(Child Selector)
자식 선택자는 선택한 요소의 하위 요소들 중 직접적으로 한 칸 아래인 자식 요소에 대해서만 적용되는 선택자이다.
">" 를 사용한다.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
#select{
color: red;
}
ul>p{
background-color: chartreuse;
}
</style>
</head>
<body>
<h1>저녁메뉴 후보</h1>
<ol class="menu">
<li>짜장면</li>
<li>라면</li>
<li>김치볶음밥</li>
<li id="select">규동</li>
</ol>
<h2>결론</h2>
<p class="reason">면종류는 많이 먹었으니 김치볶음밥과 규동 중에서 오늘은 간장 베이스가 땡기니 규동으로 하자.</p>
<h2>재료</h2>
<p>1인분 기준</p>
<ul class="ingredient">
<li>
우삼겹 250g
<p>다른 부위를 사용해도 상관없다.</p>
</li>
<li>
양파 반 개
<p>채썰어서 준비한다.</p>
</li>
<li>다진마늘</li>
<li>간장 2큰술</li>
<li>
설탕 1큰술
<p>올리고당이나 다른 설탕류도 대체가능.</p>
</li>
<li>
밥
<p>먹을 만큼!</p>
</li>
<p>진짜 최고의 덮밥!</p>
</ul>
</body>
위 코드에서는 자손 선택자(Descendent Selector)와 다르게 ">"가 있는 것을 알 수 있다.
자손 선택자는 공백이 아닌 ">" 를 사용한다.
직계자식만이 해당되므로 다른 li 태그 안의 p 태그들은 해당되지 않는다.
ul 태그 아래의 p태그가 해당된다.
결과를 보자.
직계자식인 마지막 줄의 "진짜 최고의 덮밥!"만 배경 색상이 바뀐 것을 확인할 수 있다.
이렇듯 자식 선택자는 직계자식만을 선택한다.
인접 형제 선택자(Adjacent Sibling Selector)
부모와 자식은 하위와 상위의 포함관계를 통해 구분하였다. 형제관계는 같은 위치에 있는 태그들을 형제 관계라고 한다.
가독성을 위해 들여쓰기를 규칙적으로 해둔 경우에는, 같은 라인에 위치한 태그들이 형제 관계라고 봐도 무방하다.
인접 형제 선택자는 자신 외에 바로 다음(뒤따르는) 형제태그를 선택하는 선택자이다.
"+" 를 사용하여 표시한다.
예시를 통해 보자.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
#select{
color: red;
}
ol+h2{
background-color: aquamarine;
}
</style>
</head>
<body>
<h1>저녁메뉴 후보</h1>
<ol class="menu">
<li>짜장면</li>
<li>라면</li>
<li>김치볶음밥</li>
<li id="select">규동</li>
</ol>
<h2>결론</h2>
<p class="reason">면종류는 많이 먹었으니 김치볶음밥과 규동 중에서 오늘은 간장 베이스가 땡기니 규동으로 하자.</p>
<h2>재료</h2>
<p>1인분 기준</p>
<ul class="ingredient">
<li class="beef">
우삼겹 250g
<p>다른 부위를 사용해도 상관없다.</p>
</li>
<li class="onion">
양파 반 개
<p>채썰어서 준비한다.</p>
</li>
<li class="galic">다진마늘</li>
<li class="soi">간장 2큰술</li>
<li>
설탕 1큰술
<p>올리고당이나 다른 설탕류도 대체가능.</p>
</li>
<li class="rice">
밥
<p>먹을 만큼!</p>
</li>
<p>진짜 최고의 덮밥!</p>
</ul>
</body>
위 코드에서는 ol+h2 라는 선택자를 사용하였다.
이 말은, ol 태그 뒤에 따라오는 h2 태그를 선택한 것이다.
그래서 위 많은 내용들 중 결론이라는 부분이 배경색이 바뀐 것을 확인할 수 있다.
결과를 보자.
근처 형제 선택자는 위 결과처럼 바로 뒤에 따라오는 h2 태그를 선택하는 선택자라는 말이다.
일반 형제 선택자(General Sibling Selector)
일반 형제 선택자는 위의 인접 형제 선택자와 다르게 뒤따르는 형제 태그들도 모두 선택된다.
일반 형제 선택자는 선택한 태그의 뒤부터 해당되는 태그를 전부 선택하게 해주는 선택자이다.
"~"를 통해 나타낸다.
예제를 통해 보자.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
#select{
color: red;
}
ol~h2{
background-color: aquamarine;
}
</style>
</head>
<body>
<h1>저녁메뉴 후보</h1>
<ol class="menu">
<li>짜장면</li>
<li>라면</li>
<li>김치볶음밥</li>
<li id="select">규동</li>
</ol>
<h2>결론</h2>
<p class="reason">면종류는 많이 먹었으니 김치볶음밥과 규동 중에서 오늘은 간장 베이스가 땡기니 규동으로 하자.</p>
<h2>재료</h2>
<p>1인분 기준</p>
<ul class="ingredient">
<li class="beef">
우삼겹 250g
<p>다른 부위를 사용해도 상관없다.</p>
</li>
<li class="onion">
양파 반 개
<p>채썰어서 준비한다.</p>
</li>
<li class="galic">다진마늘</li>
<li class="soi">간장 2큰술</li>
<li>
설탕 1큰술
<p>올리고당이나 다른 설탕류도 대체가능.</p>
</li>
<li class="rice">
밥
<p>먹을 만큼!</p>
</li>
<p>진짜 최고의 덮밥!</p>
</ul>
</body>
위 코드에서는 ol~h2라는 부분이 있다. 이 부분이 일반 형제 선택자를 사용한 부분이다.
이 경우에, ol 태그와 h2 태그는 형제관계이고, ol 태그 뒤에 h2 태그가 존재하는 부분이 "결론" 부분부터이다.
일반 형제 연산자는 이 부분부터 h2 태그가 있다면 모두 선택하게 되므로, "결론" 과 "재료"의 콘텐트를 각각 가진 h2 의 배경색이 변경될 것이다.
결과를 보자.
"결론" 과 "재료" 가 선택자로 선택되어 배경 색상을 변경한 것을 확인할 수 있다.
개인적인 생각으로는, 자손 연산자(Descendant Selector)와 자식 선택자(Child Selector)가 비슷하여 헷갈릴 수 있을 거 같고,
인접 형제 선택자(Adjacent Sibling Selector)와 일반 형제 선택자(General Sibling Selector)가 비슷하므로 헷갈릴 수 있다고 생각한다.
| 자손 연산자(Descendant Selector) | 직계 자식이 아니더라도 선택됨 |
| 자식 연산자(Child Selector) | 직계 자식(바로 밑의 하위 태그)만 선택됨 |
| 인접 형제 선택자(Adjacent Sibling Selector) | 선택한 형제태그 형태의 바로 다음까지만 선택됨 |
| 일반 형제 선택자(General Sibling Selector) | 선택한 형제태그부터 형제태그에 해당되면 모두 선택됨 |
설명이 애매하여 덧붙이자면,
인접 형제 선택자는 a+b{ ... } 라고 했을 때, a 다음에 b라는 형제태그가 오는 형태를 확인하여, 그 b 태그까지만 선택한다.
일반 형제 선택자는 a~b{ ... } 라고 했을 때, a 다음에 b라는 형제태그가 오는 형태를 확인하고, 그 지점의 b 태그부터 같은 선상의(a태그와 형제 태그들) 형제들 중 b 태그가 있다면 모두 선택된다.
'Web' 카테고리의 다른 글
| [HTML/CSS] position : absolute , fixed (1) | 2023.12.17 |
|---|---|
| [HTML/CSS] CSS position:relative , static (1) | 2023.12.17 |
| [HTML/CSS] CSS 선택자 (CSS Selector) (0) | 2023.12.13 |
| [HTML/CSS] text-overflow : clip | ellipsis , 말 줄이기, 생략 처리하기 (0) | 2023.12.09 |
| [HTML/CSS] display : inline | inline-block | block | flex (2) | 2023.12.03 |
