• 목록

CSS 연결 선택자: 부모와 자식 요소 이해

1. 하위 선택자 (Descendant Selector)

특정 요소의 내부에 포함된 모든 하위 요소를 선택합니다. 

부모 바로 아래에 있는 자식뿐만 아니라 손자, 증손자 등 모든 후손이 포함됩니다.

• 작성법: 부모선택자 (공백) 하위선택자

• 예시: section p { color: blue; }

• 의미: section 태그 안에 있는 모든 p 태그의 글자 색상을 파란색으로 바꿉니다.

2. 자식 선택자 (Child Selector)

부모 바로 한 단계 아래에 위치한 직계 자식만을 선택합니다. 손자 이상의 하위 요소는 영향을 받지 않습니다.

• 작성법: 부모선택자 > 자식선택자

• 예시: ul > li { list-style: none; }

• 의미: ul 태그 바로 밑에 있는 li 태그만 선택하며, li 안에 또 다른 ul과 li가 중첩되어 있어도 그 안쪽 li는 선택되지 않습니다.

3. 인접 형제 선택자 (Adjacent Sibling Selector)

특정 요소 바로 다음에 오는 첫 번째 형제 요소 하나만 선택합니다. 두 요소는 반드시 부모가 같아야 하며 순서가 이어져야 합니다.

• 작성법: 요소A + 요소B

• 예시: h1 + p { margin-top: 0; }

• 의미: h1 태그 바로 뒤에 나오는 첫 번째 p 태그의 상단 여백을 없앱니다.

4. 일반 형제 선택자 (General Sibling Selector)

특정 요소 다음에 오는 모든 형제 요소를 선택합니다. 바로 뒤에 붙어 있지 않아도 순서상 뒤에 위치한 같은 층위의 요소라면 모두 해당됩니다.

• 작성법: 요소A ~ 요소B

• 예시: h1 ~ p { color: gray; }

• 의미: h1 태그 뒤에 나오는 같은 레벨의 모든 p 태그 글자 색상을 회색으로 바꿉니다.

실무 활용 요약표

요약

부모와 자식 관계를 활용한 선택자는 HTML 마크업 구조를 따라 디자인을 입히는 가장 기본적인 방법입니다. 

전체적인 스타일은 하위 선택자로 잡고, 특정 구역의 직계 요소만 정밀하게 제어하고 싶을 때는 자식 선택자를 사용하는 것이 효율적입니다.

• 목록