고급 선택자

1. 도입 (왜 배워야 하는가)

CSS에서 선택자는 HTML 요소를 스타일링하는 매우 중요한 도구입니다. 고급 선택자는 특정 요소를 정확히 선택하여 보다 정교하고 효율적인 스타일링을 가능하게 합니다. 실무에서는 다양한 상황에 맞춰 정확히 원하는 요소에 스타일을 적용해야 할 때가 많습니다. 예를 들어, 특정 클래스가 있는 버튼에만 스타일을 적용하거나, 자식 요소만 선택하여 스타일링하고 싶을 때 고급 선택자가 필요합니다.

고급 선택자를 모르면 CSS 코드가 비효율적이거나, 불필요한 스타일이 적용될 수 있으며, 결과적으로 유지보수가 어려워질 수 있습니다. 또한, 브라우저 호환성 문제로 인해 원하는 스타일이 적용되지 않을 위험도 있습니다.

2. 핵심 개념 설명

고급 선택자는 기본 선택자 외에도 여러 조건을 결합하여 특정 요소를 선택하는 방식입니다. 주요 고급 선택자는 다음과 같습니다:

비유하자면, 고급 선택자는 마치 특정 조건을 가진 학생을 선별하는 것과 같습니다. 예를 들어, "3학년 학생 중 수학 점수가 90점 이상인 학생"처럼 특정 조건을 만족하는 학생만을 골라내는 것입니다.

3. 기본 코드 예제

/ 자식 선택자 /
ul > li {
    color: blue; / 리스트의 직접 자식인 요소에 파란색 적용 /
}

/ 인접 형제 선택자 /
h1 + p {
    font-weight: bold; / h1 바로 다음의 p 요소를 굵게 적용 /
}

/ 일반 형제 선택자 /
h1 ~ p {
    color: green; / h1 다음의 모든 p 요소에 녹색 적용 /
}

• 실행 결과:

- ul > li 선택자는 ul의 직접 자식인 li 요소에 파란색 텍스트를 적용합니다. - h1 + p 선택자는 h1 다음에 위치한 p 요소를 굵게 만듭니다. - h1 ~ p 선택자는 h1 이후 모든 p 요소에 녹색 텍스트를 적용합니다.

• 코드 한 줄씩 동작 설명:

- ul > li: ul 리스트의 직접 자식인 li 요소에만 스타일을 적용합니다. - h1 + p: h1 요소 바로 뒤에 오는 첫 번째 p 요소를 선택하여 스타일을 적용합니다. - h1 ~ p: h1 요소 다음에 오는 모든 p 요소를 선택하여 스타일을 적용합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰 장바구니

장바구니에서 선택한 상품의 수량을 조절하는 버튼을 스타일링할 때, 특정 클래스를 가진 버튼만 선택해 스타일을 적용할 수 있습니다.

/ 장바구니 내 'increase' 클래스 버튼만 파란색으로 스타일링 /
.cart .increase {
    background-color: blue;
}

예제 2: 포트폴리오 갤러리

포트폴리오 갤러리에서 각 이미지의 제목 아래에 설명이 있는 경우, 제목 바로 아래의 설명 텍스트에만 스타일을 적용할 수 있습니다.

/ 각 프로젝트 제목 아래의 첫 번째 p 요소에 스타일 적용 /
.project-title + p {
    font-style: italic;
}

5. 흔한 실수와 주의사항

실수 1: 자식 선택자 잘못 사용하기

/ 잘못된 코드 /
ul li {
    color: red; / 모든 li에 적용되어 자식이 아닌 요소까지 포함됨 /
}

• 올바른 코드:

ul > li {
    color: red; / ul의 직접 자식인 li에만 적용 /
}

실수 2: 인접 형제 선택자 이해 부족

/ 잘못된 코드 /
h1 p {
    font-weight: bold; / h1 아래 모든 p에 적용되지만, 인접 형제가 아님 /
}

• 올바른 코드:

h1 + p {
    font-weight: bold; / h1 바로 다음의 p만 적용 /
}

6. 정리

• 고급 선택자는 CSS에서 요소를 정교하게 선택할 수 있게 해줍니다.
• 자식 선택자, 인접 형제 선택자, 일반 형제 선택자, 속성 선택자를 이해하는 것이 중요합니다.
• 실무에서의 활용 예로 쇼핑몰 장바구니와 포트폴리오 갤러리 등을 들 수 있습니다.

다음에 학습하면 좋은 주제로는 CSS Flexbox나 CSS Grid를 추천합니다. 이 두 주제는 레이아웃을 구성하는 데 매우 유용합니다.