제작 기간: 2024.05 ~ 2024.05 기여도: 퍼블리싱 100% 사용 기술: HTML, SCSS, JavasScript(ES6+), GSAP URL: https://kimbangul.github.io/enterpriseblockchain/

GSAP 라이브러리를 활용한 스크롤 인터랙션 구현에 중점을 두어 클론 코딩한 사이트입니다.

🔍Overview

마크업

클래스명 부여에는 BEM 방법론을 사용하였습니다.

기본적으로 section별로 .sc 클래스로 묶고, background 적용 및 컨텐츠 정렬을 위한 .sc__inner 클래스를 추가하였습니다.

        <div class="arrow-down">
          <img
            src="assets/icons/arrow_down_40.svg"
            alt="아래 방향 화살표 아이콘"
          />
          <span class="sound-only">아래로 스크롤하세요</span>
        </div>

.sound-only {
  font-size: 0;
  position: absolute;
  z-index: -9999;
  text-indent: 9999;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
}

화면에는 보이지 않지만 스크린 리더를 통해서 읽을 수 있는 텍스트를 삽입(.sound-only)하여 접근성을 높이고, 스크린리더 이용자에게 의미 전달을 더욱 명확히 전달하고자 하였습니다.

<!-- ticker -->
        <div class="ticker">
          <h3 class="sound-only">join us</h3>
          <div class="ticker__inner">
            <div class="ticker__scroller">
              <div class="ticker__item" aria-hidden="true">
                <span class="ticker__text">JOIN <i>us</i></span>
              </div>
              <div class="ticker__item" aria-hidden="true">
                <span class="ticker__text">JOIN <i>us</i></span>
              </div>
              <div class="ticker__item" aria-hidden="true">
                <span class="ticker__text">JOIN <i>us</i></span>
              </div>
              <div class="ticker__item" aria-hidden="true">
                <span class="ticker__text">JOIN <i>us</i></span>
              </div>
             ....

반복되는 장식용 텍스트에는 aria-hidden="true" 속성을 추가하여 접근성 트리에서 제거하였습니다.

재사용 가능한 미디어쿼리

$size__pc-lg: 1440px;
$size__pc-md: 1024px;

@mixin pc-lg {
  @media (max-width: $size__pc-lg) {
    @content;
  }
}
@mixin pc-md {
  @media (max-width: $size__pc-md) {
    @content;
  }
}

@mixin util__head-title {
  font-size: 7.2rem;
  font-weight: 800;

  @include pc-lg {
    font-size: 5.4rem;
  }
  @include pc-md {
    font-size: 4rem;
  }
}