[SCSS] & 기호 (2탄)

728x90

HTML

<!-- 카테고리 아이콘 -->
        <div class="category-wrapper">
          <div class="category-container">
            <div class="category-img">
              <div class="overlay-wrap">
                <div class="overlay">
                  <span>LIVING</span>
                </div>
              </div>
              <a href="#"><img src="img/category1.gif" /></a>
            </div>
            <div class="category-img">
              <div class="overlay-wrap">
                <div class="overlay">
                  <span>DIGITAL</span>
                </div>
              </div>
              <a href="#"><img src="img/category2.jpg" /></a>
            </div>
            <div class="category-img">
              <div class="overlay-wrap">
                <div class="overlay">
                  <span>OUTDOOR</span>
                </div>
              </div>
              <a href="#"><img src="img/category3.jpg" /></a>
            </div>
            <div class="category-img">
              <div class="overlay-wrap">
                <div class="overlay">
                  <span>KIDS</span>
                </div>
              </div>
              <a href="#"><img src="img/category4.gif" /></a>
            </div>
            <div class="category-img">
              <div class="overlay-wrap">
                <div class="overlay">
                  <span>FASHION</span>
                </div>
              </div>
              <a href="#"><img src="img/category5.jpg" /></a>
            </div>
            <div class="category-img">
              <div class="overlay-wrap">
                <div class="overlay">
                  <span>COLLABO</span>
                </div>
              </div>
              <a href="#"><img src="img/category6.gif" /></a>
            </div>
          </div>
        </div>

SCSS

// 카테고리 상품이미지
.category-wrapper {
  padding: 0 20px;
  .category-container {
    display: flex;
    justify-content: space-around;
    gap: 20px; /* 이미지들 사이에 간격 추가 */
    .category-img {
      position: relative; /* 부모 요소를 relative로 설정 */
      .overlay-wrap {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        cursor: pointer;
        &:hover .overlay {
          margin-top: 50%;
        }
        .overlay {
          width: 100%;
          height: 100%;
          // background-color: rgba(0, 0, 0, 0.3);
          margin-top: 100%;
          transition: all 1s;
          display: flex;
          justify-content: center;
          span {
            font-size: 10px; /* 원하는 폰트 크기로 설정 */
            color: rgb(
              255,
              28,
              28
            ); /* 텍스트 색상도 설정해보세요, 필요에 따라 */
          }
        }
      }
      img {
        width: 100%;
      }
    }
  }
}

헷갈렸던 부분

 .overlay {
          width: 100%;
          height: 100%;
          // background-color: rgba(0, 0, 0, 0.3);
          margin-top: 100%;
          transition: all 1s;
          display: flex;
          justify-content: center;
          span {
            font-size: 10px; /* 원하는 폰트 크기로 설정 */
            color: rgb(
              255,
              28,
              28
            ); /* 텍스트 색상도 설정해보세요, 필요에 따라 */
          }
        }

올바른 예시

  &:span {
          font-size: 10px; /* 원하는 폰트 크기로 설정 */
          color: rgb(255, 28, 28); /* 텍스트 색상도 설정해보세요, 필요에 따라 */
        }

고치기 전, 이렇게 썼더니 적용이 안됐다.

overlay span 을 표현하고 싶었음.

& 기호

SCSS(Sass)에서 & 기호는 현재 선택자를 참조하거나 결합할 때 사용됩니다.

이를 통해 CSS를 더 간결하게 작성할 수 있습니다. 예제를 통해 자세히 설명드리겠습니다.

부모 선택자 참조 예시

기본적으로 &는 현재 선택자를 참조합니다. 가장 일반적인 사용 예는 부모 선택자의 상태를 나타낼 때입니다.

.button {
  color: blue;
  &:hover {
    color: red;
  }
}

.button {
  color: blue;
  &:hover {
    color: red;
  }
}

부모 선택자 결합 예시

&를 사용하면 부모 선택자와 결합하여 특정 상황에 맞게 스타일을 정의할 수 있습니다.

예제 2: 부모 선택자 결합

.nav {
  &-item {
    color: blue;
  }
}

.nav-item {
  color: blue;
}

자식 선택자와의 차이

SCSS에서 자식 선택자를 나타내려면 & 기호를 사용하지 않고 그냥 자식 선택자를 작성합니다.

자식 선택자 스타일링

자식 선택자 스타일링은 부모 선택자의 자식 요소에 스타일을 적용하는 것입니다.

이 경우, & 기호를 사용하지 않고 선택자를 중첩하여 작성합니다.

예제 3: 자식 선택자

.card {
  .title {
    font-size: 16px;
  }
}

.card .title {
  font-size: 16px;
}

기서 .title은 .card의 자식 요소를 의미합니다. & 기호를 사용하지 않습니다.

근데 span 의 부모는 overlay 니까 & 써도 되지 않는지?

span의 부모는 overlay입니다.

하지만 SCSS(Sass)에서 부모 선택자를 참조할 때 사용하는

& 기호는 현재 선택자에 상태나 클래스 이름을 결합할 때 주로 사용됩니다.

자식 요소의 스타일을 지정할 때는 & 기호를 사용하지 않고, 단순히 선택자를 중첩하여 작성합니다.

이 "현재 선택자"는 & 기호가 위치한 그 자리를 말합니다.

기본 개념

현재 선택자란?

현재 선택자는 & 기호가 위치한 선택자를 의미합니다.

예를 들어, .button 클래스 내부에서 &는 .button을 참조합니다.

상태나 클래스 이름을 결합할 때란?

상태나 클래스 이름을 결합할 때는 기존의 선택자에

새로운 상태(예: :hover)나 클래스 이름(예: -active)을 추가하는 것을 의미합니다.

잘못된 사용 예시

& 기호를 자식 선택자 스타일링에 사용하려고 하면 올바르게 동작하지 않습니다. 예를 들어:

.overlay {
  &:span {
    font-size: 10px;
    color: rgb(255, 28, 28);
  }
}

이 코드는 의미가 없습니다. &:span은 잘못된 사용법입니다.

올바른 사용법 요약

부모 선택자 참조: 현재 선택자의 상태나 클래스 이름을 결합할 때 & 기호를 사용합니다.
자식 선택자 스타일링: 자식 선택자를 스타일링할 때는 & 기호를 사용하지 않고, 선택자를 중첩하여 작성합니다.

.overlay {
  span {
    font-size: 10px;
    color: rgb(255, 28, 28);
  }
}

.overlay span {
  font-size: 10px;
  color: rgb(255, 28, 28);
}

결론

& 기호는 현재 선택자를 참조하거나 결합할 때 사용되며,

자식 요소의 스타일링을 위해서는 사용되지 않습니다.

자식 요소의 스타일링을 위해서는 단순히 선택자를 중첩하여 작성하면 됩니다.

이렇게 하면 overlay 요소의 자식인 span 요소에 스타일을 적용할 수 있습니다.

& 기호는 현재 선택자(부모 선택자)를 참조하거나 결합하는 용도로 사용됩니다.

자식 요소의 스타일링을 위해서는 사용되지 않습니다.

하단의 코드는 자식 선택자 스타일링인거 같은데, &을 사용한 거 같아서 헷갈려짐

  li {
    font-weight: bold;
    margin-bottom: 16px;
    color: $sub_color;
    &:last-child {
      margin-bottom: 0;
    }
    &:hover {
      font-weight: bold;
      color: white; // 밑줄 생기게 꾸며주기
    }
  }

이 예제에서 &는 자식 선택자를 스타일링하는 것이 아니라,

현재 선택자의 상태를 스타일링하는 데 사용됩니다.

&의 사용 목적

& 기호는 현재 선택자를 참조하거나 결합할 때 사용됩니다.

따라서, 현재 선택자의 상태나 클래스 이름을 추가할 때 유용합니다.

예제 분석

현재 선택자의 상태 스타일링

li {
  font-weight: bold;
  margin-bottom: 16px;
  color: $sub_color;

  &:last-child {
    margin-bottom: 0;
  }

  &:hover {
    font-weight: bold;
    color: white; // 밑줄 생기게 꾸며주기
  }
}

위의 예제에서 &:last-child와 &:hover는 현재 선택자인 li 요소의 상태를 스타일링합니다.

다른 예제: 부모 선택자에 상태를 추가

예를 들어, .button 클래스에 hover 상태를 추가하는 경우를 생각해 보겠습니다.

.button {
  color: blue;
  &:hover {
    color: red;
  }
}

결론

& 기호는 현재 선택자를 참조하거나 결합하여 상태나 클래스를 추가할 때 사용됩니다.
자식 선택자를 스타일링할 때는 & 기호를 사용하지 않고, 단순히 선택자를 중첩하여 작성합니다.

728x90

저작자표시 비영리 변경금지

'> 메모 > SASS' 카테고리의 다른 글

[SASS] 태그 중첩 사용 (0)	2024.06.21
[SASS] _reset 파일과 SASS 문법 (0)	2024.06.19
[SASS] & 의 사용법 (0)	2024.05.05

IT 아카이브

[SCSS] & 기호 (2탄)

부모 선택자 참조 예시

부모 선택자 결합 예시

예제 2: 부모 선택자 결합

자식 선택자와의 차이

자식 선택자 스타일링

예제 3: 자식 선택자

기본 개념

현재 선택자란?

상태나 클래스 이름을 결합할 때란?

잘못된 사용 예시

올바른 사용법 요약

결론

&의 사용 목적

예제 분석

현재 선택자의 상태 스타일링

다른 예제: 부모 선택자에 상태를 추가

결론

'> 메모 > SASS' 카테고리의 다른 글

티스토리툴바

[SCSS] & 기호 (2탄)

부모 선택자 참조 예시

부모 선택자 결합 예시

예제 2: 부모 선택자 결합

자식 선택자와의 차이

자식 선택자 스타일링

예제 3: 자식 선택자

기본 개념

현재 선택자란?

상태나 클래스 이름을 결합할 때란?

잘못된 사용 예시

올바른 사용법 요약

결론

&의 사용 목적

예제 분석

현재 선택자의 상태 스타일링

다른 예제: 부모 선택자에 상태를 추가

결론

'> 메모 > SASS' 카테고리의 다른 글

관련글

티스토리툴바