Button scss hover not working 원인과 예제

SASS SCSS :hover 예제와 동작하지 않는 사례 - 원인과 해법

서론

SASS(SCSS)는 CSS의 확장 버전으로, 변수, 중첩 규칙, 함수 등을 사용하여 스타일시트 작성을 간편하고 효율적으로 만들어줍니다. 그리고 :hover는 웹 개발에서 자주 사용되는 유용한 CSS 의사 클래스 중 하나입니다. 하지만 때때로, SASS(SCSS)를 사용할 때 :hover가 원하는 대로 동작하지 않는 사례들이 있습니다. 이러한 문제들을 해결하는 방법과 함께, :hover를 SASS(SCSS)에서 사용하는 예제들을 살펴보겠습니다.

:hover 사용 예제

먼저, 간단한 예제를 통해 :hover를 SASS(SCSS)에서 어떻게 사용하는지 살펴보겠습니다.

// SCSS
.button {
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: #2980b9;
  }
}

위의 예제는 버튼에 마우스를 올렸을 때, 배경 색상이 바뀌는 효과를 가지고 있습니다. 이렇게 SASS(SCSS)에서 :hover를 사용할 때에는 &를 활용하여 해당 요소 자체를 선택하도록 해야 합니다.

:hover가 동작하지 않는 사례 - 원인과 해법

1. :hover가 적용되지 않는 경우

가장 흔한 실수 중 하나는 :hover에 해당하는 CSS 규칙을 누락하는 경우입니다. 만약 .button:hover와 같이 :hover에 대한 스타일을 따로 지정하지 않으면 마우스를 올렸을 때 효과가 동작하지 않을 수 있습니다.

해법: :hover에 대한 스타일을 명확히 정의해야 합니다. 위에서 제시한 예제와 같이 &:hover를 사용하여 해당 요소의 :hover 상태를 정의하는 것이 좋습니다.

2. 중첩 규칙 오용

SASS(SCSS)에서는 중첩 규칙을 사용하여 코드를 보다 구조적으로 작성할 수 있습니다. 그러나 :hover를 중첩된 요소 안에 정의하면 의도치 않게 :hover 효과가 동작하지 않을 수 있습니다.

해법: :hover는 상위 요소에 적용해야 합니다. 중첩된 규칙 안에서 :hover를 사용하지 말고, 상위 규칙으로 이동시킵니다.

3. :hover와 관련 없는 오류

not working이라고 기술한 문제가 :hover와 직접적인 관련이 없는 다른 문제일 수 있습니다. 예를 들어, SASS(SCSS) 문법 오류, 잘못된 클래스 또는 선택자 사용, 브라우저 지원 범위 등이 해당될 수 있습니다.

해법: 오류 메시지를 확인하고, 문법적 오류를 수정하거나 잘못된 선택자를 찾아 수정해야 합니다. 또한, 브라우저 지원 범위를 확인하여 필요에 따라 대체 스타일을 추가할 수도 있습니다.

결론

이 블로그 포스트에서는 SASS(SCSS)에서 :hover를 사용하는 예제를 살펴보았으며, :hover가 동작하지 않는 경우에 대한 원인과 해법을 다루었습니다. :hover를 사용할 때에는 중첩 규칙 오용을 피하고, :hover에 대한 스타일을 명확히 정의해야 함을 기억해 주세요. 또한, :hover와 무관한 오류들을 체크하여 문제를 해결해야 합니다.

참고 자료

• SASS 공식 문서
• CSS :hover 가이드

:hover - CSS: Cascading Style Sheets | MDN

Sass: Syntactically Awesome Style Sheets

이 블로그 포스트는 SASS(SCSS)의 :hover 예제와 동작하지 않는 사례들을 다루며, 독자들에게 문제 해결에 대한 직관력을 향상해 줄 것입니다. SASS(SCSS)를 사용하면서 발생할 수 있는 hover 관련 문제들을 이해하고, 해결책을 제시함으로써 웹 개발자들에게 도움이 될 것입니다.

---

SASS SCSS 아래 a 태그의 각기 다른 색 요소를 a:hover 색은 같게 만들기

서론

이번 블로그 포스팅에서는 SCSS(Sassy CSS)를 사용하여 a 태그 아래에 있는 각기 다른 색 요소들이 a:hover 상태일 때 같은 색상으로 변경되도록 하는 방법에 대해 알아보겠습니다. 이는 간단한 스타일링 요소이지만 SCSS의 특징과 사용법을 설명하기 위한 예시로도 적합합니다.

상세 설명

우선, 아래와 같은 HTML 구조를 가정하겠습니다:

<ul class="latest">
  <li>
    <div class="card">
      <div class="cardInnerWrap">
        <div class="overThumb">
          <span class="thumb card-img-top">
            <img src="/assets/images/~mockup/s1.png">
          </span>
        </div>
        <div class="card-body">
          <a href="/pb_contents/publish/publish_view.php">
            <p class="contentCate">Contents</p>
            <p class="ContentTitle">스페인하숙 3화</p>
            <p class="card-text">미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요</p>
          </a>
        </div>
      </div>
    </div>
  </li>
</ul>

위의 HTML 구조에서 a 태그 아래에 있는 p 요소들의 색상을 a:hover 상태일 때 같은 색상으로 변경하고자 합니다.

이를 위해 SCSS를 사용하여 아래와 같은 스타일링을 적용할 수 있습니다:

// SCSS 코드
.card {
  border: 0 none;
  border-radius: 0;

  .cardInnerWrap {
    display: inline-flex;

    .thumb {
      width: 133px;
      height: 75px;
    }

    .card-body {
      padding: 0 1.25rem;
      width: calc(100% - 150px);

      a {
        &:hover, &:focus {
          // &:hover와 &:focus 상태일 때 p 요소들의 색상 변경
          p {
            color: #5e7fdc;
          }
        }

        .contentCate {
          color: #AAAAAA;
        }

        .ContentTitle, .card-text {
          display: block;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          color: #555555;
        }
      }
    }
  }
}

결론

위의 SCSS 코드를 적용하면 a 태그 아래에 있는 p 요소들이 a:hover 또는 a:focus 상태일 때 같은 색상으로 변경됩니다. 이를 통해 SCSS의 기능을 활용하여 간결하고 효과적인 스타일링을 구현할 수 있습니다.

---

성별 통계 CSS 디자인

서론

이번 블로그 포스팅에서는 성별 통계를 시각적으로 나타내기 위한 CSS 디자인에 대해 살펴보겠습니다. 특히, 원형 차트에서 퍼센트에 따라 다른 색상을 부여하고 배경 이미지를 적절하게 활용하는 방법을 다루겠습니다.

상세 설명

아래는 HTML과 SCSS 코드로 이루어진 성별 통계 차트의 예시입니다:

<ul class="chartSex">
  <li>
    <dl>
      <dt>여성</dt>
      <dd class="stat-cs-data1 female">
        <div class="data-bar" style="height:73%"></div>
      </dd>
      <dd class="stat-cs-percent">73%</dd>
      <dd class="stat-cs-count">7300</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>남성</dt>
      <dd class="stat-cs-data1 male">
        <div class="data-bar" style="height:27%"></div>
      </dd>
      <dd class="stat-cs-percent">27%</dd>
      <dd class="stat-cs-count">2300</dd>
    </dl>
  </li>
</ul>

// SCSS 코드
.chartSex {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: space-around;

  &>li {
    flex: 0 1 50%;

    &:nth-child(1) {
      padding-left: 50px;
    }

    &:nth-child(2) {
      padding-right: 50px;
    }

    dl {
      dt {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
      }

      dd {
        &.stat-cs-data1 {
          width: 68px;
          height: 136px;
          margin: 0 auto 20px auto;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;

          .data-bar {
            display: block;
            margin-bottom: 0;
            width: 100%;
          }

          &.female {
            background: url(/assets/images/bg/stat_female.png) center bottom no-repeat;

            .data-bar {
              background: url(/assets/images/bg/stat_female_on.png) center bottom no-repeat;
            }
          }

          &.male {
            background: url(/assets/images/bg/stat_male.png) center bottom no-repeat;

            .data-bar {
              background: url(/assets/images/bg/stat_male_on.png) center bottom no-repeat;
            }
          }
        }

        &.stat-cs-percent {
          font-size: 14px;
          font-weight: 500;
          color: $color-blk;
          margin-bottom: 5px;
        }

        &.stat-cs-count {
          font-size: 11px;
        }
      }
    }
  }
}