[SCSS] 지나가는 전광판 만들기

---

슬라이드 팝업창 생성하고 수정하기

 

HTML

 <!-- 팝업 시작 -->
        <div class="slide-pop">
          <div class="marquee-container">
            <span class="marquee">놓치면 후회할 단종제품</span>
            <strong class="marquee">💖80% 할인💖</strong>
          </div>
        </div>

SCSS

// pop-up 슬라이드 팝업창
.slide-pop {
  letter-spacing: 2px;
  font-size: 12px;
  position: relative;
  background-color: $main_color;
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  .marquee-container {
    display: inline-block;
    animation: marquee 10s linear infinite;
  }
  .marquee {
    display: inline-block;
    padding: 4px; /* 마진을 주어 텍스트 사이에 공간을 추가 */
    //  이거 값 수정해야함. 텍스트 사이에 공간
  }
}

// pop-up 슬라이드 팝업창 키프레임
@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

수정해야 할 것

---

white-space: nowrap 속성

 

.element {
  white-space: nowrap;
}

white-space: nowrap 속성은 CSS에서 텍스트가 줄바꿈 없이 한 줄로 유지되도록 설정하는 데 사용

주요 속성 값

• normal: 기본 값으로 텍스트는 공백과 줄바꿈 문자를 기준으로 자동으로 줄바꿈됩니다.
• nowrap: 텍스트가 줄바꿈 없이 한 줄로 유지됩니다.
• pre: 텍스트가 공백과 줄바꿈 문자를 그대로 유지합니다. 줄바꿈이 필요하면 <br> 태그를 사용해야 합니다.
• pre-wrap: 텍스트가 공백과 줄바꿈 문자를 그대로 유지하며, 컨테이너의 너비에 따라 줄바꿈이 발생합니다.
• pre-line: 텍스트가 공백 문자는 축소하지만 줄바꿈 문자는 유지합니다.

---

참고할만한 자료 

흐르는 글자 css로 표현하기 marquee (tistory.com)

흐르는 글자 css로 표현하기 marquee

 

웹의 구성을 재미있게 해주는 HTML / CSS 효과들 - RWDB

웹의 구성을 재미있게 해주는 HTML / CSS 효과들 - RWDB

흐르는 주가 전광판 스타일의 무한 롤링 배너 만들기 (apost.dev)

흐르는 주가 전광판 스타일의 무한 롤링 배너 만들기

흐르는 텍스트 구현하기 (velog.io)

흐르는 텍스트 구현하기

 

---

코드 분석

HTML

 <div class="slide-pop">
          <div class="marquee-container">
            <strong class="marquee">💖WIGGLE WIGGLE💖</strong>
            <strong class="marquee">💖WIGGLE WIGGLE💖</strong>
            <strong class="marquee">💖WIGGLE WIGGLE💖</strong>
            <strong class="marquee">💖WIGGLE WIGGLE💖</strong>
            <strong class="marquee">💖WIGGLE WIGGLE💖</strong>
            <strong class="marquee">💖WIGGLE WIGGLE💖</strong>
            <strong class="marquee">💖WIGGLE WIGGLE💖</strong>
            <strong class="marquee">💖WIGGLE WIGGLE💖</strong>
          </div>
        </div>

CSS

// pop-up 슬라이드 팝업창
.slide-pop {
  background-color: $main_color;
  white-space: nowrap; /* 자식 요소들이 한 줄로 나열되도록 설정 */
  .marquee-container {
    display: inline-block;
    overflow: hidden;
    animation: marquee 30s linear infinite;
    .marquee {
      padding: 0 3rem; // 글자 사이 간격 조정
    }
  }
}
@keyframes marquee {
  0% {
    transform: translateX(-100%); /* 시작 위치를 오른쪽 끝으로 설정 */
  }
  100% {
    transform: translateX(100%); /* 끝 위치를 왼쪽 끝으로 설정 */
  }
}

overflow:hidden 을 쓰는 이유

overflow: hidden; 속성을 사용하여 넘치는 화면 밖으로 넘치는 사진들은 안보이게 함.

텍스트나 이미지가 marquee 영역을 넘어갈 수 있는데, 이 부분을 숨기기 위해 overflow: hidden을 사용

그리고 요소 내부 내용이 넘칠 때 스크롤 바가 나타나는 것을 방지할 수 있다.

white-space: nowrap 속성 쓰는 이유

white-space: nowrap 속성은 텍스트가 한 줄로 표시되도록 함.

inline-block을 사용해야 하는 이유

우선 최종적으로 쓴 이유 = 글자가 잘림.

요소가 한 줄에 나란히 배치되면서도 각 요소의 너비를 설정할 수 있다.