중첩(Nesting) 문법 이해하기 - by. UXKM

Publishing
SCSS
SCSS 기본 문법
중첩(Nesting) 문법 이해하기

요약 설명
중첩(Nesting)은 SCSS의 핵심 기능 중 하나로, 선택자를 HTML 구조처럼 안쪽으로 들여쓰기하여 작성할 수 있게 해줍니다.
중첩을 사용하면 코드의 가독성이 높아지고, 어떤 요소 안에 어떤 스타일이 적용되는지 한눈에 파악할 수 있습니다.

이 페이지에서는 SCSS 중첩 문법의 기본 개념부터 실제 사용 예시, 중첩의 장점과 주의사항, 그리고 깊은 중첩을 피하는 방법까지 상세히 알아봅니다.

중첩(Nesting)이란?

중첩(Nesting)은 선택자를 HTML 구조와 비슷하게 안쪽으로 들여쓰기하여 작성하는 SCSS 문법입니다.
CSS에서는 각 선택자를 별도로 작성해야 하지만, SCSS에서는 부모 선택자 안에 자식 선택자를 중첩하여 작성할 수 있습니다.

CSS와 SCSS 비교

같은 스타일을 CSS와 SCSS로 작성했을 때의 차이를 비교해봅니다.

CSS 방식 (중첩 없음)

.card 선택자를 반복해서 사용하고 있어, 선택자 이름이 변경될 경우 여러 줄에 걸쳐 수정해야 하는 불편함이 있으며, 반복 사용으로 인해 코드의 가독성도 떨어집니다.

								.card {
								  padding: 16px;
								}
								.card .card__title {
								  font-size: 18px;
								  margin-bottom: 8px;
								}
								.card .card__body {
								  margin-top: 8px;
								}
								.card .card__link {
								  color: #0a58ca;
								}
								.card .card__link:hover {
								  color: #084298;
								}

SCSS 방식 (중첩 사용)

SCSS 중첩을 사용하면 HTML 구조와 유사한 형태로 스타일을 작성할 수 있어, 어떤 요소가 어떤 부모 안에 있는지 한눈에 파악할 수 있습니다.
또한 .card 선택자를 반복해서 쓰지 않아도 되므로 코드가 더 간결해집니다.

								.card {
								  padding: 16px;

								  .card__title {
								    font-size: 18px;
								    margin-bottom: 8px;
								  }

								  .card__body {
								    margin-top: 8px;
								  }

								  .card__link {
								    color: #0a58ca;
								    &:hover {
								      color: #084298;
								    }
								  }
								}

중첩의 기본 구조

중첩은 부모 선택자 안에 자식 선택자를 들여쓰기하여 작성합니다.
들여쓰기는 보통 2칸(스페이스) 또는 1탭을 사용하며, 프로젝트에서 일관되게 유지하는 것이 중요합니다.

								// 부모 선택자
								.parent {
								  // 부모의 스타일
								  padding: 16px;

								  // 자식 선택자 (한 단계 들여쓰기)
								  .child {
								    // 자식의 스타일
								    margin-top: 8px;
										 
								    // 손자 선택자 (두 단계 들여쓰기)
								    .grandchild {
								      font-size: 14px;
								    }
								  }
								}

위 코드는 컴파일되면 다음과 같이 변환됩니다:

								.parent {
								  padding: 16px;
								}
								.parent .child {
								  margin-top: 8px;
								}
								.parent .child .grandchild {
								  font-size: 14px;
								}

중첩 사용 예시

실제 프로젝트에서 자주 사용하는 중첩 패턴을 예시로 살펴봅니다.
카드, 네비게이션, 미디어 쿼리처럼 현업에서 정말 많이 마주치는 사례를 중심으로, 어디까지 중첩이 유용하고 어디서부터 과한지를 감각적으로 익혀볼 수 있습니다.

카드 컴포넌트 중첩

카드 컴포넌트의 제목, 본문, 링크를 중첩으로 작성하는 예시입니다.

HTML 마크업

									<!-- HTML 마크업 -->
									<article class="card">
										<h3 class="card__title">카드 제목</h3>
										<div class="card__body">카드 본문 내용</div>
										<a href="#" class="card__link">더보기</a>
									</article>

SCSS 중첩 코드

									.card {
									  padding: 16px;
									  border: 1px solid #ddd;
									  border-radius: 8px;

									  .card__title {
									    font-size: 18px;
									    font-weight: 700;
									    margin-bottom: 8px;
									  }

									  .card__body {
									    margin-top: 8px;
									    line-height: 1.6;
									  }

									  .card__link {
									    color: #0a58ca;
									    text-decoration: none;
									    &:hover {
									      color: #084298;
									    }
									  }
									}

중첩을 사용하면 카드 컴포넌트의 모든 스타일이 하나의 블록 안에 모여 있어, 구조를 파악하기 쉽고 수정도 편리합니다.

네비게이션 메뉴 중첩

네비게이션 메뉴의 다단계 구조를 중첩으로 표현하는 예시입니다.

								.nav {
								  display: flex;
								  list-style: none;

								  .nav__item {
								    margin-right: 16px;
										 
								    .nav__link {
								      color: #333;
								      text-decoration: none;
								      &:hover {
								        color: #0a58ca;
								      }
								    }
										 
								    // 서브메뉴
								    .nav__submenu {
								      display: none;
								      position: absolute;
											 
								      .nav__submenu-item {
								        padding: 8px 16px;
								      }
								    }
								  }
								}

다단계 메뉴 구조도 중첩을 사용하면 계층 관계를 명확하게 표현할 수 있습니다.

미디어 쿼리 중첩

SCSS에서는 미디어 쿼리도 선택자 안에 중첩하여 작성할 수 있습니다.

								.container {
								  width: 100%;
								  padding: 16px;

								  @media (min-width: 768px) {
								    max-width: 720px;
								    margin: 0 auto;
								  }

								  @media (min-width: 1024px) {
								    max-width: 960px;
								  }
								}

미디어 쿼리를 중첩하면 해당 선택자의 반응형 스타일을 한 곳에 모아 관리할 수 있어 유지보수가 편리합니다.

								.container {
								  width: 100%;
								  padding: 16px;
								}
								@media (min-width: 768px) {
								  .container {
								    max-width: 720px;
								    margin: 0 auto;
								  }
								}
								@media (min-width: 1024px) {
								  .container {
								    max-width: 960px;
								  }
								}

중첩의 장점

코드 가독성 및 재사용성 향상

중첩을 사용하면 HTML 구조와 유사한 형태로 스타일을 작성할 수 있어, 어떤 요소가 어떤 부모 안에 있는지 한눈에 파악할 수 있습니다.
특히 복잡한 컴포넌트의 경우, 중첩 없이는 부모 선택자를 반복해서 써야 하지만, 중첩을 사용하면 구조가 명확하게 드러나 코드를 이해하기 쉬워집니다.

또한, 컴포넌트 단위로 코드를 모듈화할 수 있어, 같은 구조의 컴포넌트를 만들 때 코드를 재사용하기 쉬워집니다.

스타일 영향 범위 제한

중첩을 사용하면 스타일의 영향 범위를 특정 컴포넌트 안으로 제한할 수 있습니다.

								.card {
								  .card__title {
								    font-size: 18px;
								  }
								}

								// 다른 곳의 .title에는 영향 없음
								.article .title {
								  font-size: 24px;
								}

.card .card__title의 스타일은 카드 컴포넌트 안에서만 적용되므로, 다른 곳의 .title에 영향을 주지 않습니다.

중첩 사용 시 주의사항

중첩은 강력한 기능이지만, 과도하게 사용하면 오히려 문제가 될 수 있습니다.
다음 주의사항을 지키면 효율적으로 중첩을 활용할 수 있습니다.

깊은 중첩 피하기

중첩은 3단계 이상 깊게 하지 않는 것을 권장합니다.
너무 깊은 중첩은 가독성을 해치고, 컴파일된 CSS 선택자가 불필요하게 길어질 수 있습니다.

								.page {
								  .section {
								    .article {
								      .card {
								        .card__title {
								          font-size: 18px;
								        }
								      }
								    }
								  }
								}

위 코드는 컴파일되면 .page .section .article .card .card__title처럼 매우 긴 선택자가 됩니다.
이렇게 긴 선택자는 성능에도 영향을 줄 수 있고, 나중에 수정하기도 어렵습니다.

								.card {
								  padding: 16px;

								  .card__title {
								    font-size: 18px;
								  }

								  .card__body {
								    margin-top: 8px;
								  }
								}

컴포넌트 단위로 중첩을 제한하면 코드가 더 명확하고 관리하기 쉬워집니다.

불필요한 중첩 피하기

모든 선택자를 중첩할 필요는 없습니다.
독립적인 스타일은 중첩 없이 작성하는 것이 더 명확할 수 있습니다.

								// 불필요한 중첩
								.button {
								  .button--primary {
								    background: #0a58ca;
								  }
								}

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

.button--primary는 수정자(Modifier) 클래스이므로, 중첩 없이 독립적으로 작성하는 것이 더 명확합니다.

성능 고려사항

너무 깊거나 복잡한 중첩은 컴파일된 CSS 선택자가 길어져 성능에 영향을 줄 수 있습니다.
일반적으로 선택자는 3-4단계를 넘지 않는 것을 권장합니다.

								// 컴파일되면 매우 긴 선택자가 됨
								.page .section .article .card .card__title .card__title-text {
								  font-size: 18px;
								}

								.card__title-text {
								  font-size: 18px;
								}

BEM 방법론을 사용하면 클래스명 자체가 의미를 담고 있어 긴 선택자 체인 없이도 스타일을 명확하게 구분할 수 있습니다.

중첩과 BEM 방법론

중첩은 BEM(Block Element Modifier) 방법론과 함께 사용할 때 특히 효과적입니다.

BEM 방법론에서는 블록(Block), 요소(Element), 수정자(Modifier)를 명확히 구분합니다. 중첩을 사용하면 BEM 구조를 코드로도 명확하게 표현할 수 있습니다.

							// Block
							.card {
								padding: 16px;

								// Element
								&__title {
									font-size: 18px;
								}

								&__body {
									margin-top: 8px;
								}

								// Modifier
								&--featured {
									border: 2px solid #0a58ca;
								}
							}

& 기호(부모 선택자 참조)를 사용하면 BEM 네이밍을 더 간결하게 작성할 수 있습니다.
BEM 방법론에 대해서는 다음 페이지[부모 선택자 &의 역할과 사용법]에서 자세히 알아봅니다.

정리

SCSS 중첩(Nesting) 문법에 대해 알아본 내용을 정리합니다.

중첩의 개념: 선택자를 HTML 구조처럼 안쪽으로 들여쓰기하여 작성하는 문법
중첩의 장점: 코드 가독성 향상, 스타일 영향 범위 제한, 코드 재사용성 향상
사용 예시: 카드 컴포넌트, 네비게이션 메뉴, 미디어 쿼리 등 다양한 상황에서 활용
주의사항: 깊은 중첩 피하기(3단계 이하), 불필요한 중첩 피하기, 성능 고려
BEM과의 조합: BEM 방법론과 함께 사용하면 더 효과적

다음 페이지에서는 부모 선택자 참조 기호(&)의 역할과 사용법을 자세히 알아봅니다.