중첩에서의 결합자
이 글에서는 중첩에서의 결합자에 대해 설명합니다.
SASS에서 중첩 시 결합자 사용 방법을 단계별로 이해할 수 있도록 샘플 코드와 함께 설명합니다.
YouTube Video
중첩에서의 결합자
SASS에서는 부모-자식 관계를 바탕으로 CSS 선택자를 간결하게 작성할 수 있지만, 자식 선택자 및 인접 선택자와 같은 결합자를 올바르게 다루기 위해서는 특별한 주의가 필요합니다.
중첩의 기본
SASS에서는 자식 선택자를 부모 선택자 내부에 중첩시켜 CSS에서 부모-자식 관계를 명확하고 간결하게 표현할 수 있습니다.
예시: 기본 중첩
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}컴파일된 CSS
1.nav ul li {
2 color: blue;
3}부모 선택자 참조 (&)
SASS의 &는 현재 부모 선택자를 참조할 때 사용됩니다.
결합자와 &의 조합
&를 사용하면 유연한 선택자를 만들 수 있습니다.
샘플
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}컴파일된 CSS
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}&의 생략 표기
SASS에서 결합자가 선택자 앞에 나오면 상위 선택자가 암시적으로 삽입되므로 &를 생략할 수 있습니다.
생략이 가능한 경우
예를 들어, + .item이라고 작성하면 SASS는 내부적으로 이를 & + .item으로 해석하여 상위 선택자와의 조합을 자동으로 생성합니다.
샘플
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}컴파일된 CSS
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}결합자 개요
CSS 결합자는 선택자 간의 관계를 정의합니다. 다음은 결합자의 주요 유형입니다.
-
하위 선택자 (공백) 하위 선택자는 부모 요소에 포함된 모든 하위 요소를 선택합니다. 예시:
.parent .child -
자식 선택자 (
>) 자식 선택자는 바로 아래의 자식 요소만을 선택합니다. 예시:.parent > .child -
형제 인접 선택자 (
+) 형제 인접 선택자는 바로 다음에 오는 형제 요소를 선택합니다. 예시:.sibling1 + .sibling2 -
일반 형제 선택자 (
~) 일반 형제 선택자는 뒤따르는 모든 같은 레벨의 형제 요소를 선택합니다. 예시:.sibling1 ~ .sibling2
SASS에서 결합자 사용 방법
하위 선택자 (공백)
SASS 중첩에서는 공백 하위 선택자가 기본적으로 적용됩니다.
샘플
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}컴파일된 CSS
1.container .header .title {
2 font-size: 20px;
3}자식 선택자 (> )
자식 선택자를 사용하려면 SASS 코드에 >를 명시적으로 작성해야 합니다.
샘플
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}컴파일된 CSS
1.container > .header > .title {
2 font-size: 20px;
3}형제 인접 선택자 (+)
바로 다음 형제 요소에 스타일을 지정하려면 +를 사용하세요.
샘플
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}컴파일된 CSS
1.item + .item {
2 margin-top: 10px;
3}일반 형제 선택자 (~)
같은 레벨에서 뒤에 오는 모든 형제 요소에 스타일을 적용하려면 ~를 사용하세요.
샘플
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}컴파일된 CSS
1.alert ~ .alert {
2 border-top: 1px solid red;
3}중첩에서의 의사 클래스·의사 요소
SASS에서는 의사 클래스 및 의사 요소도 쉽게 작성할 수 있습니다.
샘플
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}컴파일된 CSS
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}실전 샘플
아래는 여러 결합자를 조합한 복합 스타일의 예시입니다.
SASS 코드
1.menu {
2 .menu-item {
3 & > .submenu {
4 display: none;
5
6 & > .submenu-item {
7 font-size: 14px;
8 }
9 }
10 & + .menu-item {
11 margin-left: 15px;
12 }
13 }
14}컴파일된 CSS
1.menu .menu-item > .submenu {
2 display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5 font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8 margin-left: 15px;
9}요약
SASS에서 중첩과 결합자를 올바르게 이해하면, 더 간결하고 읽기 쉬운 CSS를 작성할 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.