CSS 그룹 셀렉터 — 콤마로 한 번에 스타일 적용 완전 정리

 

 

Web Development · CSS Selectors

CSS 그룹 셀렉터 —
콤마로 한 번에 스타일 적용

반복 코드를 절반으로 줄이는 가장 단순한 기법

시작 오늘 분석할 코드

블루베리 연구 글에서 "제목 두 개를 한 번에 가운데 정렬"하는 방식. 콤마(,)로 셀렉터를 묶는 그룹 셀렉터의 정석.

h1, h2 { text-align: center; } p { font-size: 12px; margin-left: 20px; }

실제 출력 결과

블루베리에 관한 연구

블루베리와 항산화 효능

블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.

블루베리와 노화

블루베리를 먹임으로써 노화에 의한 인지능력의 손실을 예방해 준다는 사실을 발견하였습니다.

---

1 콤마(,) — "한 번에 여러 개"

CSS에서 콤마는 "여기 나열된 모든 요소에 동일 스타일을 적용"한다는 뜻이다. 같은 스타일을 여러 셀렉터에 반복하지 않게 해준다.

콤마 없이 (반복)

h1 { text-align: center; }
h2 { text-align: center; }
h3 { text-align: center; }

→ 같은 코드 3번

콤마로 묶기

h1, h2, h3 {
  text-align: center;
}

→ 한 번에

---

2 다양한 그룹 셀렉터 패턴

/* 태그 그룹 */ h1, h2, h3 { color: #333; } /* 태그 + 클래스 그룹 */ button, .btn { padding: 10px 20px; } /* 태그 + ID 그룹 */ header, footer, #sidebar { background: #eee; } /* 다양한 셀렉터 섞어서 */ h1, .title, #main-heading { font-weight: 900; }

※ 콤마로 묶을 셀렉터의 종류는 자유. 태그·클래스·ID·속성·가상클래스 등 어떤 조합이든 가능.

---

3 결합 셀렉터 — 콤마 외 다른 결합

콤마 말고도 셀렉터를 결합하는 방법이 여러 가지 있다. 공백·꺾쇠·플러스·물결이 모두 다른 의미.

결합자	의미	예시
, (콤마)	그룹 — 또는	h1, h2 = h1 또는 h2
(공백)	후손 — 안 어딘가	div p = div 안의 모든 p
> (꺾쇠)	자식 — 바로 아래만	div > p = div 직속 p
+ (플러스)	인접 형제 — 바로 다음	h1 + p = h1 다음 p
~ (물결)	일반 형제 — 같은 부모 아래	h1 ~ p = h1 뒤 모든 p

※ 가장 헷갈리는 둘: 공백(후손)은 깊이 안에 있어도 적용, 꺾쇠(자식)은 바로 한 단계 아래만.

---

4 그룹 셀렉터 vs 다중 클래스

비슷해 보이지만 의미가 다르다.

.box, .panel { ... } → .box "또는" .panel .box.panel { ... } → .box "와" .panel 둘 다 가진 요소 .box .panel { ... } → .box 안의 .panel

※ 콤마와 점·공백이 섞이면 의미가 달라진다. 띄어쓰기에 주의.

---

반응형

5 자주 하는 실수

실수	증상	해결
콤마와 공백 혼동	의도와 다른 요소 적용	콤마=or, 공백=후손
마지막 셀렉터 뒤 콤마	일부 브라우저 무시	마지막엔 콤마 X
같은 스타일 반복	코드 비대 + 수정 어려움	그룹 셀렉터로 묶기
너무 많은 그룹화	의미가 흐려짐	의미 단위로 분리

---

핵심 한 줄 요약

,그룹 — 여러 셀렉터에 같은 스타일

(공백)후손 — 안 어디든

>자식 — 바로 아래만

+인접 형제 — 바로 다음

~일반 형제 — 뒤 모두

.a.b두 클래스 모두 가진 요소

코드 절약반복을 줄이는 첫걸음

Tags

#CSS #그룹셀렉터 #콤마 #h1 #h2 #text-align #font-size #margin-left #HTML #셀렉터 #결합셀렉터 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

CSS, 그룹셀렉터, 콤마, h1, h2, text-align, font-size, margin-left, HTML, 셀렉터, 결합셀렉터, 웹개발, 티스토리