부모 선택자 &의 역할과 사용법 - by. UXKM

Publishing
SCSS
SCSS 기본 문법
부모 선택자 &의 역할과 사용법

요약 설명
부모 선택자 참조 기호(&)는 SCSS에서 부모 선택자를 참조할 때 사용하는 특수 기호입니다.
&를 사용하면 가상 클래스(:hover, :active 등)를 중첩하거나, BEM 네이밍을 간결하게 작성할 수 있습니다.

이 페이지에서는 & 기호의 기본 개념부터 다양한 사용 패턴, 실제 활용 예시, 그리고 주의사항까지 상세히 알아봅니다.

부모 선택자 참조 기호(&)란?

& 기호는 SCSS에서 부모 선택자를 참조할 때 사용하는 특수 문자입니다.
컴파일 시 &는 부모 선택자로 치환되어 최종 CSS 선택자가 완성됩니다.

& 기호의 기본 개념

&는 "현재 선택자의 부모"를 의미합니다.
중첩된 선택자 안에서 &를 사용하면 부모 선택자를 참조할 수 있습니다.

								.button {
								  padding: 8px 16px;
								  background: #0a58ca;

								  &:hover {
								    background: #084298;
								  }
								}

위 코드에서 &:hover는 부모 선택자인 .button과 결합되어 .button:hover가 됩니다.

								.button {
								  padding: 8px 16px;
								  background: #0a58ca;
								}
								.button:hover {
								  background: #084298;
								}

& 없이 작성한 경우

&를 사용하지 않으면 어떻게 되는지 비교해봅니다.

								.button {
								  padding: 8px 16px;

								  :hover {  // & 없이 작성
								    background: #084298;
								  }
								}

								.button {
								  padding: 8px 16px;
								}
								.button :hover {  // 공백이 있어서 자식 요소의 hover가 됨
								  background: #084298;
								}

& 없이 작성하면 공백이 생겨 자식 선택자가 되어버립니다.
.button :hover는 "button 안의 모든 요소에 hover"를 의미하므로, 의도한 대로 동작하지 않습니다.

& 기호의 다양한 사용 패턴

& 기호는 다양한 상황에서 활용할 수 있습니다. 가장 많이 사용되는 패턴들을 살펴봅니다.

가상 클래스와 함께 사용

&는 가상 클래스(:hover, :active, :focus 등)와 함께 자주 사용됩니다.

								.button {
								  padding: 8px 16px;
								  background: #0a58ca;
								  color: #fff;

								  &:hover {
								    background: #084298;
								  }

								  &:active {
								    background: #063c86;
								  }

								  &:focus {
								    outline: 2px solid #0a58ca;
								  }

								  &:disabled {
								    opacity: 0.5;
								    cursor: not-allowed;
								  }
								}

이렇게 작성하면 버튼의 모든 상태 스타일을 한 곳에 모아 관리할 수 있어 유지보수가 편리합니다.

가상 요소와 함께 사용

&는 가상 요소(::before, ::after 등)와도 함께 사용할 수 있습니다.

								.button {
								  position: relative;
								  padding: 8px 16px;

								  &::before {
								    content: "";
								    position: absolute;
								    top: 0;
								    left: 0;
								  }

								  &::after {
								    content: "→";
								    margin-left: 4px;
								  }
								}

BEM 네이밍과 함께 사용

&는 BEM¹⁾(Block Element Modifier) 방법론과 함께 사용할 때 특히 유용합니다.
BEM의 요소(Element)와 수정자(Modifier)를 간결하게 작성할 수 있습니다.

1) BEM이란?
BEM은 CSS 클래스 네이밍 방법론으로, Block(블록), Element(요소), Modifier(수정자) 세 가지 개념으로 구성 요소를 명명합니다. 예를 들어 .card__title--large에서 card는 블록, title은 요소, large는 수정자입니다. BEM을 사용하면 클래스 이름만 봐도 구조와 역할을 쉽게 파악할 수 있어 유지보수가 쉬워집니다.

BEM 방법론은 큰 프로젝트에서 CSS 클래스 이름을 체계적으로 관리하기 위한 방법입니다. SCSS의 & 기호를 사용하면 BEM 네이밍을 더욱 간결하고 읽기 쉽게 작성할 수 있습니다.

BEM Element 작성

&__element 형태로 요소를 작성합니다.

									.card {
									  padding: 16px;

									  &__title {
									    font-size: 18px;
									  }

									  &__body {
									    margin-top: 8px;
									  }

									  &__link {
									    color: #0a58ca;
									  }
									}

위 코드는 컴파일되면 .card__title, .card__body, .card__link가 됩니다.

									.card {
									  padding: 16px;
									}

									.card__title {
									  font-size: 18px;
									}

									.card__body {
									  margin-top: 8px;
									}

									.card__link {
									  color: #0a58ca;
									}

BEM Modifier 작성

&--modifier 형태로 수정자를 작성합니다.

									.button {
									  padding: 8px 16px;

									  &--primary {
									    background: #0a58ca;
									    color: #fff;
									  }

									  &--secondary {
									    background: #6c757d;
									    color: #fff;
									  }

									  &--large {
									    padding: 12px 24px;
									    font-size: 18px;
									  }
									}

위 코드는 컴파일되면 .button--primary, .button--secondary, .button--large가 됩니다.

									.button {
									  padding: 8px 16px;
									}

									.button--primary {
									  background: #0a58ca;
									  color: #fff;
									}

									.button--secondary {
									  background: #6c757d;
									  color: #fff;
									}

									.button--large {
									  padding: 12px 24px;
									  font-size: 18px;
									}

복합 선택자와 함께 사용

&는 여러 선택자와 조합하여 사용할 수 있습니다.

								.button {
								  padding: 8px 16px;

								  // .button.active
								  &.active {
								    background: #28a745;
								  }

								  // .button.disabled
								  &.disabled {
								    opacity: 0.5;
								  }

								  // .button:hover.active
								  &:hover.active {
								    background: #218838;
								  }
								}

이렇게 작성하면 여러 클래스가 동시에 적용된 상태의 스타일을 명확하게 정의할 수 있습니다.

문맥 선택자와 함께 사용

&는 부모 요소의 선택자와 조합하여 사용할 수도 있습니다.

								.card {
								  padding: 16px;

								  // .dark-theme .card
								  .dark-theme & {
								    background: #333;
								    color: #fff;
								  }

								  // .sidebar .card
								  .sidebar & {
								    padding: 12px;
								  }
								}

위 코드는 컴파일 시 아래 예제와 같은 형태로 변환됩니다.

								.card {
								  padding: 16px;
								}

								.dark-theme .card {
								  background: #333;
								  color: #fff;
								}

								.sidebar .card {
								  padding: 12px;
								}

&를 뒤에 두면 부모 선택자가 뒤에 오는 형태로 컴파일됩니다.
이렇게 하면 특정 컨텍스트에서만 적용되는 스타일을 명확하게 표현할 수 있습니다.

실제 활용 예시

& 기호를 활용한 실제 프로젝트 예시를 살펴봅니다.
버튼, input, 드롭다운처럼 자주 사용하는 컴포넌트를 예제로 보면서, 이 문법이 실제 UI 설계와 컴포넌트 구조화에 어떻게 기여하는지 감을 잡을 수 있습니다.

버튼 컴포넌트

다양한 상태와 변형을 가진 버튼 컴포넌트를 &로 작성하는 예시입니다.

이렇게 작성하면 버튼의 모든 변형과 상태를 한 곳에 모아 관리할 수 있어 유지보수가 편리합니다.

input 컴포넌트

BEM 방법론을 사용한 input 컴포넌트 예시입니다.

Dropdown / Select 컴포넌트

BEM 방법론을 사용한 Dropdown / Select 컴포넌트 예시입니다.

& 사용 시 주의사항

&는 매우 유용한 기능이지만, 사용할 때 몇 가지 주의해야 할 점들이 있습니다.
잘못 사용하면 의도하지 않은 CSS 선택자가 생성되거나, 컴파일 에러가 발생할 수 있습니다.

& 앞뒤 공백 주의

& 앞뒤의 공백에 따라 컴파일 결과가 달라집니다.

								.button {
								  // & 앞에 공백 없음: .button:hover
								  &:hover {
								    background: #084298;
								  }

								  // & 앞에 공백 있음: .button :hover (자식 선택자)
								  :hover {
								    background: #084298;
								  }

								  // & 뒤에 공백 없음: .button--primary
								  &--primary {
								    background: #0a58ca;
								  }

								  // & 뒤에 공백 있음: .button --primary (잘못된 선택자)
								  & --primary {
								    background: #0a58ca;
								  }
								}

&를 사용할 때는 앞뒤 공백을 주의해야 합니다.
일반적으로 & 앞뒤에는 공백을 두지 않습니다.

중첩 깊이 고려

&를 여러 단계 중첩해서 사용하면 선택자가 복잡해질 수 있습니다.

								.card {
								  &__title {
								    &--large {
								      &:hover {
								        // .card__title--large:hover
								        color: #0a58ca;
								      }
								    }
								  }
								}

너무 깊게 중첩하면 가독성이 떨어지므로, 2-3단계를 넘지 않는 것을 권장합니다.

&는 부모 선택자만 참조

&는 직접 부모 선택자만 참조합니다.
할아버지나 조상 선택자는 참조하지 않습니다.

								.page {
								  .section {
								    .card {
								      // &는 .card만 참조 (직접 부모)
								      &:hover {
								        // .card:hover (페이지나 섹션은 참조 안 함)
								        background: #f0f0f0;
								      }
								    }
								  }
								}

정리

SCSS 부모 선택자 참조 기호(&)에 대해 알아본 내용을 정리합니다.

&의 개념: 부모 선택자를 참조하는 특수 기호, 컴파일 시 부모 선택자로 치환됨
주요 사용 패턴: 가상 클래스/요소, BEM 네이밍, 복합 선택자, 문맥 선택자
BEM과의 조합: &__element, &--modifier 형태로 BEM을 간결하게 작성 가능
주의사항: & 앞뒤 공백 주의, 중첩 깊이 제한, 직접 부모만 참조

다음 페이지에서는 SCSS의 주석 처리 방식에 대해 자세히 알아봅니다.