CSS 기초강좌 19 (Combinator 결합자)

 

오늘은 Combinator에 대해서 알아보죠 우리말로는 '결합자'라고 하는데 그래도 말이 어렵네요.
선택하려는 요소를 좀 더 정밀하게 선택하기 위해 요소들을 조합하여 콕 찝어서 선택한다는 말입니다.
예를들어 설명하면, 나의 가족이 번창하여 형제,자식,손자들이 아주 많이 있는데 그중 누구누구를 부르려면
"첫째아들의 자식들중 딸만 와라" : 자식+첫째자식 + 첫째자식의딸
"손자들중에 아들만 와라" : 자식 + 자식의 자식중 아들만
이런식으로 조합해서 선택한다는 말입니다.

이 Combinator 중 많이 사용하는 하는 것은 아래 4가지가 있습니다.

중요한 Combinator 4가지

1. 공백 : 하위 선택자 (ex: div p {background-color:blue;} )
2. > : 자식 선택자 (ex: div>p {font-size:10px;})
3. + : 가까운형제 선택자 (ex: div + p {font-weight:bolder;})
4. ~ : 형제 선택자 (ex: div ~ p {color:red;})

하위선택자 (descendant selector)
다른말로 자손 선택자라고도 합니다. 요소와 요소사이에 공백(스페이스)를 둡니다.
예제로 설명드리면

div p {background-color: red;}

div태그의 하위태그중 p태그는 모두 선택해서 바탕색을 빨간색으로 만들어라

자식선택자 (child selector)
매칭되는 자식은 모두 선택합니다. 부모와 자식사이에 > 이 있습니다.

div > p {background-color: red;}

div태그의 자식중 p태그는 모두 선택해서 바탕색을 빨간색으로 만들어라

하위선택자와 자식선택자가 비슷해보이지만 사실 많이 다릅니다.
하위선택자는 자손을 선택하는 것이고 자식선택자는 자식만을 선택하는 것입니다.
다른말로, 하위선택자(공백)는 "닥치고 자식이든 손자든 증손자든 다 모여..내 자손이면..."
자식선택자(>)는 "내자식들만 모여, 그 밑엣것들은 오지마.." 입니다.

가까운 형제 선택자 (Adjacent Sibling Selector) 형제와 형제사이에 + 가 있습니다.
동등한 위치에 있는 태그(형제)중에 매칭되는 첫번째 형제 하나만 선택

div + p {background-color: red;}

div태그와 같은 레벨에 있는 p태그 중 처음 나타나는 p태그의 바탕색을 빨간색으로 만들어라

형제 선택자 (General Sibling Selector) 형제와 형제 사이에 ~ 이 있습니다.
형제들중 매칭되는 모든 형제들을 선택

div ~ p {background-color: red;}

div태그의 형제들중 p태그는 모두 선택해서 바탕색을 빨간색으로 만들어라.



아래의 버튼을 눌러 보면서 결합자에 대한 개념을 이해해 보세요.

Combinator : 결합자

• 풀하우스
• 마운틴
• 까나리
• 조개젓

p 갈치젓갈

• 스트레이트
• 반달곰
• 사슴다리

p 들쥐

p 새앙쥐

• 노루코
• 주먹봉
• 트리플

p 플러쉬

div 원페어
div 투페어

p 스티풀

<ul id="list"> <li>풀하우스</li> <li>마운틴</li> <ul> <li>까나리</li> <li>조개젓</li> <p>p 갈치젓갈</p> </ul> <li>스트레이트</li> <ul> <li>반달곰</li> <li>사슴다리</li> <ul> <p>p 들쥐</p> <p>p 새앙쥐</p> </ul> <li>노루코</li> </ul> <li>주먹봉</li> <li>트리플</li> <p>p 플러쉬</p> <div>div 원페어</div> <div>div 투페어</div> <p>p 스티풀</p> </ul>

- 자손 요소를 찾아내는 결합자: 아이디 list 밑에있는 모든 자손 p태그 선택
- 자식 요소를 찾아내는 결합자: 아이디 list 밑에있는 자식중 p태그만 선택
- 가까운 형제 요소를 찾아내는 결합자: 아이디 list 밑에있는 p태그 형제중 첫번째 div선택
- 동등한 형제 요소 모두를 찾아내는 결합자:아이디 list 밑에있는 p태그의 형제중 모든 div선택

CSS탭의 주석기호인 /* 과 */을 하나씩 없애보면서 다른 Css 를 코딩해보면서 어떻게 바뀌는지 해보세요.

JS Bin

즐거운 하루되세요 vanxy..