웹 꾸미기 CSS기초 자손, 후손, 동위 선택자 알아보기 Combinators

CSS는 Cascading Style Sheets의 약자입니다. 간단하게 말해서 웹 문서를 꾸며주는 부분이라고 생각하면 됩니다. HTML 태그가 웹 문서를 구성하는 기능이라면 CSS는 HTML 웹 문서를 꾸며주는 기능인셈이죠.

 

오늘은 CSS의 선택자중에 [자손 선택자, 후손 선택자, 동위 선택자]에 대해서 알아보도록 하겠습니다.

 

css 선택자 자손 후손 동위

 

선택자(Seletors)

먼저 선택자 라는것에대해 확실히 개념을 알아두어야 합니다. 물론 자연스럽게 알게 되는 개념이지만, 처음 접하는 사람에게는 모든 것이 어렵습니다. '선택자'는 Selectors의 번역입니다. 풀어서 설명하면 <내가 꾸며주고 싶은 부분을 선택하는 문자>입니다. 결국 선택자가 있어야 원하는 부분을 꾸며줄 수 있는 것입니다.

 

예를 들어

 

  "나는 <h1>제목</h1>의 글씨를 파란색으로 바꾸고 싶어"

 

라고 했을 때, CSS항목에서 

 

 h1 { color : blue; } 

 

라고 적으면 되는데, 여기서 h1 이 [선택자]가 되는 것입니다.

 

 

Combinators

한글로 번역된 단어를 아직 찾지 못했어요. 제가 공부하는 책에서는, 선택자들 분류가 다 따로따로 되어있지만 저는 W3C 문서를 기준으로, 비슷한 선택자들끼리 묶어서 설명을 하려고 합니다. 보통 [자손 선택자], [후손 선택자], [동위 선택자]가 각자 설명되어있지만 이것들이 전부 컴비네이터(Combinators) 선택자들입니다. 

 

선택자(Seletors)가 한 번에 선택할 수 있다면 좋겠지만 예를 들어

 

 "A태그 안에 들어있는 B태그"

 "A태그 안에 들어있는 모든 C태그"

 "A태그 다음에 오는 모든 B태그"

 "A태그 바로 다음에 오는 B태그"

 

라는 태그들은 한 번에 선택할 수 없습니다. 그래서 Combinators가 이 역할을 해줍니다.

 

 A + B 라고 적으면 <A바로 뒤에 있는 B를 선택한다>가 되는 것입니다. 이렇게 두 개를 결합하여 나타내는 선택자를 Combinators라고 합니다. 

 

그리고 W3C 웹페이지에 따르면, 총 4개의 Combinators가 있습니다. 그것이 오늘 주제인 자손, 후손, 동위 선택자 입니다.(동위 선택자 2개)

 

1) 자손 선택자 (Child combinators)

자손 선택자는 [ > ]라는 기호로 표현합니다. A>B 라고 했을 경우 [A태그 안에 들어가 있는 B를 선택한다]라는 뜻이 됩니다. 여기서 중요한 것은 A태그 안에 B태그와 C태그가 들어있고, C태그 안에 또 B라는 태그가 들어가 있을 경우, 자손 선택자는 C태그 안에 들어있는 B태그는 선택하지 않습니다. 여기서 말하는 자손이란, 직계 자손인 듯싶습니다. 

 

2) 후손 선택자 (Descendant combinators)

후손 선택자는 특별한 기호 없이 [    ] 띄어쓰기로 표현합니다. A B 라고 했을 경우 [A태그 안에 들어가 있는 모든 B를 선택한다] 라는 뜻이 됩니다. 여기서 중요한 것은 아마 자손의 개념과 다르게 A안에 들어가 있는 모든 B를 선택합니다. 내 후손들이면 B태그 다 선택하라는 뜻이죠

 

3) 동위 선택자 Next-sibling combinators 

찾아보니 형제 선택 자라고도한다고 합니다. 그렇다면 더 이해하기 쉬울 것 같습니다. Next-sibling combinators는 인접 형제 선택 자라고 한다고 합니다. 표현은 [ + ]라는 기호로 나타냅니다. 만약 [A + B]라고 한다면, X라는 태그 안에 있는 A, B, B, B, C라는 형제들 중 [A 바로 뒤에 오는 B를 선택한다]라는 뜻이 됩니다. B라는 형제가 셋이나 되지만, A바로 뒤에 오는 B만을 선택하는 것이죠.

 

4) 동위 선택자 Subsequent-sibling combinators

Subsequent-sibling combinators는 일반 형제 선택 자라고 한다고 합니다. 기호는 [ ~ ]라고 표현하며, 만약 [A ~ B]라고 한다면, X라는 태그 안에 있는 A, B, B, B, C라는 형제들 중 [A 바로 뒤에 오는 모든 B를 선택한다]라는 뜻이 됩니다. 그러므로 A 뒤에 오는 B 세 개 모두를 선택하는 것이죠.

 

---

오늘은 CSS의 선택자(Selectors) 중에서 제가 가장 헷갈렸던 자손, 후손, 동위(형제) 선택자들을 알아보았습니다. 역시 CSS를 공부하기 시작하니 조금 복잡해집니다. 하지만 차근차근 익혀나가려고 합니다. 순서가 조금씩 뒤죽박죽이 될 수도 있지만, 제가 이해하기 어려웠던 것들을 위주로 정리할 계획입니다. HTML과 CSS는 하면 할수록 매력 있는 공부인 것 같습니다. 이해할 수 없었던 영어들이 조금씩 눈에 보이는 것이 즐겁네요.