이 포스팅의 목차
1. CSS combinators(결합자)의 의미.
2. CSS combinators(결합자)의 종류와 사용법.
1. CSS Combinators(결합자)의 의미.
CSS 관련 책을 보다보면 Combinators를 한글로는 '결합자' 혹은 '조합 선택자'라고 이름지어져 있습니다.
Combinators가 뜻하는 바는 무엇일까요? 어원의 사전적 의미를 잠깐 파악 하고 들어가보도록 합시다.
제 나름의 추측으로는 '결합되다'라는 의미를 갖고있는 Combin에 접미사 'or'이 붙어서 만들어 진것이 아닐까 싶습니다.
그리고 CSS 관련 책에서는 선택자(selector)들을 복합적으로 조합하는 방법을 제공하므로 '조합 선택자'라고 표현하기도 합니다.
w3shools닷컴에서는 CSS Combinators를
the relationship between the selectors. 라고 표현하고 있습니다. Combinators의 의미는 selectors 같의 관계, 그래서 한글로 번역하자면 '조합 선택자'라는 의미가 강하겠네요. 그걸 한 단어로는 '결합자'라고 칭하게 되었을 것으로 짐작해봅니다.
제가 결합자를 주로 사용할 때는 같은 색상을 지정하고 싶다거나, 같은 글씨 폰트를 써야 할 경우에 자주 사용합니다.
이 아래에서는 예제와 함께 Combinators의 종류와 사용법을 간단하게 알아보도록 하겠습니다.
<div>
<p>This is a paragraph inside a div element.</p>
<p>This is another paragraph inside a div element.</p>
<span> <p>This a paragraph inside a span element, inside a div element.</p> </span>
</div>
<p>This is a paragraph, not inside a div element.</p>
<p>This is another paragraph, not inside a div element.</p>
<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
2. CSS combinators(결합자)의 종류와 사용법
5가지의 결합자 종류를 살펴보도록 합시다.
1) Descendant Selector (후손 선택자)
왼쪽에 있는 선택자A를 기준으로 선택자A의 하위 요소 중에서 선택자B와 일치하는 모든 요소가 선택됩니다. 앞의 선택자A와 뒤의 선택자B를 공란으로 연결합니다.
div p { color : #ff0000; font-weight:bold; }
2) Child Selector (자손 선택자)
왼쪽에 있는 선택자A를 기준으로 선택자A의 직계 자손 요소중에서 선택자B와 일치하는 요소가 선택됩니다. 먼저 소개해 드린 "후손 선택자"는 하위 모든 요소를 선택하는 것과는 달리 "자손 선택자"는 바로 아랫단계의 요소만 선택한다는 차이점이 있습니다. 앞의 선택자A와 뒤의 선택자B를 " > " 기호로 연결합니다.
div > p { color : #ff0000; font-weight:bold; }
3) Adjacent Sibling Selector (인접 형제 선택자)
왼쪽에 있는 선택자A를 기준으로 선택자A와 동일한 레벨로, 선택자A 바로 다음에 위치한 선택자B를 선택합니다. 다시 말해서 선택자A의 뒤에 오는 요소 중에서 선택자B와 일치하는 첫 번째 요소를 선택합니다. 앞의 선택자A와 뒤의 선택자B를 " + "기호로 연결합니다.
div + p { color : #ff0000; font-weight:bold; }
4) General Sibling Selector (일반 형제 선택자)
왼쪽에 있는 선택자A를 기준으로 선택자A와 동일한 레벨로, 뒤에 오는 요소 중 선택자B와 요소를 선택합니다. 선택자A 뒤에 인접하여 나타나는 모든선택자B를 선택한다는 의미 입니다. 먼저 소개해 드린 인접 형제 선택자가 뒤에 오는 첫 번째 요소만을 선택하는 것과 달리 일반 형제 선택자는 뒤의 선택자와 일치하는 뒤에 오는 모든 형제 요소를 선택한다는 점에서 차이가 있습니다.앞의 선택자A와 뒤의 선택자B를 " ~ "기호로 연결합니다.
div ~ p { color : #ff0000; font-weight:bold; }
5) Group Selector (그룹 선택자)
그룹 선택자는 여러 선택자에 같은 속성을 지정하기 위한 방법으로 같은 속성을 사용하는 선택자를 콤마 "," 기호로 연결합니다. 똑같은 스타일을 여러 번 선언하지 않고 한 번에 묶어서 적용할 수 있는 장점 있습니다.
h1, h2, h3 { color : #ff0000; font-weight:bold; }
이렇게 CSS의 선택자에 대해서 #2강과 #3강으로 알아보았습니다.
조합 선택자(결합자)에는 이렇게 5가지의 후손 선택자, 자손 선택자, 인접 형제 선택자, 일반 형제 선택자, 그룹선택자가 있음을 간단하게 알아 봤습니다. 처음에는 이런 기본 지식 습득만 하는것에만 끝나면, 내가 언느때에 무엇에 써야 할지 잘 모르실 수 있습니다. 무한의 연습을 통해 나아갈 수 있습니다. 연습! w3shools에서 제공하는 연습 사이트를 알려드릴께요, 이곳에 접속하셔서 오늘 배운 내용을 연습해보세요. 저는 CSS Combinators #3강을 마무리 하겠습니다.
참고 사이트 : w3shools.com
연습 할 수 있는 w3shools 사이트 : https://www.w3schools.com/css/exercise.asp?filename=exercise_combinators1
참고 도서 : HTML5 + CSS3 + javascript 차세대 웹 프로그래밍
