[HTML/CSS] ] css만으로 움직이는 배너 만들기

안녕하세요. 오늘은 CSS만으로 움직이는 배너를 만들어보겠습니다. 움직이는 배너 구현에 사용할 주요 사용 개념은 @-규칙의 @keyframe 인데, @keyframe에 앞서 @-규칙에 대해 간략히 알아봅시다.

@-규칙(At-rule) :
1. @-규칙은 식별자(identifier)가 뒤따르는 at 기호('@' (U+0040 COMMERCIAL AT))로 시작하는 CSS 문이며 다음 세미콜론(';' (U+003B SEMICOLON)) 또는 다음 CSS 블록 중 먼저 오는 쪽까지 모든 것을 포함합니다.
- 출처: mozilla
2. CSS 에 행동 방식을 지시하는 CSS 문 입니다. at 기호 ' @ ' ( U+0040 COMMERCIAL AT )로 시작하고 그 뒤에 식별자가 오고 다음 세미콜론 ' ; ' ( U+003B SEMICOLON ) 또는 다음 CSS 블록 중 먼저 오는 것
-출처: https://runebook.dev/

예시)
/ * 일반 구조 */
@IDENTIFIER (RULE);

/ * 예 : 브라우저에 UTF-8 문자 집합을 사용하도록 지시 * /
@charset "utf-8";

 

@규칙에는 오늘 사용할 @keyframe외에도 여러가지가 있습니다. 아래에는 자주 사용되는 @규칙 중 일부입니다.

 

@charset — 스타일 시트에 의해 사용되는 문자 집합을 정의.
@import — CSS 엔진에게 외부 스타일 시트를 포함하도록 알림.
@media — 장치가 미디어 질의(media query)를 사용하여 정의된 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙.
@font-face — 다운로드되는 외부 글꼴의 양상을 설명. 

외 규칙들 아래 링크를 참고해주세요.

 

@keyframe은 CSS 애니메이션 sequence 내 중간 단계의 양상을 설명하는 규칙을 설정한다고 mozilla에서는 소개하고 있습니다. 즉, 이 규칙은 애니메이션 효과를 정의할 때 사용됩니다. @keyframes 규칙은 애니메이션의 각 단계(step)별로 CSS 스타일을 정의하고, 이를 사용하여 애니메이션을 제어합니다.

 

@keyframes 규칙은 다음과 같은 구문을 가집니다.

 

@keyframes animation-name {
  from {
    /* 애니메이션 시작 상태에 대한 스타일 정의 */
  }
  to {
    /* 애니메이션 종료 상태에 대한 스타일 정의 */
  }
}

 

from 과 to를 사용하여 애니메이션 시작과 종료상태에 대한 스타일을 정의합니다. 이 외에도 from과 to 대신에 % 기호를 사용하여 애니메이션 과정들을 특정 퍼센티지(단계)에 따라 정의할 수도 있습니다.

 

@keyframes animation-name {
  0% {
    /* 애니메이션 시작 상태에 대한 스타일 정의 */
  }
  50% {
    /* 애니메이션 중간 상태에 대한 스타일 정의 */
  }
  100% {
    /* 애니메이션 종료 상태에 대한 스타일 정의 */
  }
}

 

@keyframes 규칙을 사용하여 애니메이션을 정의하면, 해당 애니메이션을 사용하는 요소에 대해 animation 속성을 사용하여 애니메이션을 적용할 수 있습니다. 

.element {
  /*애니메이션에 사용될 @keyframes 규칙 이름*/
  animation-name: animation-name;
  /*애니메이션이 실행될 시간을 설정*/
  animation-duration: 2s;
  /*애니메이션 반복횟수 지정*/
  animation-iteration-count: infinite;
}

html_moveBanner.html

<div class="slider">
        <div class="slide-track">
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
            <div class="slide">
                <img src="robot.png" height="100" width="250" alt="" />
            </div>
        </div>
    </div>

css_moveBanner.css

body {
  align-items: center;
  background: #E3E3E3;
  display: flex;
  height: 100vh;
  justify-content: center;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}
.slider {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}
.slider::before, .slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.slider .slide {
  height: 100px;
  width: 250px;
}

 

완성되면 아래와 같이 움직이는 것을 확인 할 수 있습니다. 

 

css로 만든 움직이는 배너

 

+자세한 내용은 아래 링크 참고부탁드립니다. 

https://developer.mozilla.org/ko/docs/Web/CSS/At-rule

@-규칙 - CSS: Cascading Style Sheets | MDN

http://www.ktword.co.kr/test/view/view.php?m_temp1=6034 

CSS @ 규칙

https://runebook.dev/ko/docs/css/at-rule

CSS - At-rules는 행동 방법을 지시하는 CSS 문입니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

@keyframes - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN