무한 슬라이드 텍스트 만들기 스텝및 마크업 공유

무한 슬라이드 텍스트 최종 적용

안녕하세요무한텍스트스크롤CSS만 사용내용이 길어야 자연스러워요안녕하세요무한텍스트스크롤CSS만 사용내용이 길어야 자연스러워요안녕하세요무한텍스트스크롤CSS만 사용내용이 길어야 자연스러워요안녕하세요무한텍스트스크롤CSS만 사용내용이 길어야 자연스러워요안녕하세요무한텍스트스크롤CSS만 사용내용이 길어야 자연스러워요안녕하세요무한텍스트스크롤CSS만 사용내용이 길어야 자연스러워요안녕하세요무한텍스트스크롤CSS만 사용내용이 길어야 자연스러워요

무한 슬라이드 텍스트 만들기 마크업과 CSS

<style>
.bgost_slide {
font-size: 60px;
    font-family: Sans-serif;
    font-weight: 300;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 80px;
    padding: 30px 0 0 0;
    overflow-x: hidden;
    overflow-y: hidden;
    top: -40px;
}
.bgost_slide .track {
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 30s linear infinite;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (hover: hover) and (min-width: 700px) {
    .bgost_slide .content {
        -webkit-transform: translateY(calc(100% - 8rem));
        transform: translateY(calc(100% - 8rem));
    }}
</style>
<section class="bgost_slide">
    <div class="track">
        <div class="content"><span>안녕하세요</span><span>무한텍스트스크롤</span><span>CSS만 사용</span><span>내용이 길어야 자연스러워요</span><span>안녕하세요</span><span>무한텍스트스크롤</span><span>CSS만 사용</span><span>내용이 길어야 자연스러워요</span><span>안녕하세요</span><span>무한텍스트스크롤</span><span>CSS만 사용</span><span>내용이 길어야 자연스러워요</span><span>안녕하세요</span><span>무한텍스트스크롤</span><span>CSS만 사용</span><span>내용이 길어야 자연스러워요</span><span>안녕하세요</span><span>무한텍스트스크롤</span><span>CSS만 사용</span><span>내용이 길어야 자연스러워요</span><span>안녕하세요</span><span>무한텍스트스크롤</span><span>CSS만 사용</span><span>내용이 길어야 자연스러워요</span><span>안녕하세요</span><span>무한텍스트스크롤</span><span>CSS만 사용</span><span>내용이 길어야 자연스러워요</span>
    </div>
</section>

무한 슬라이드 텍스트 만들기 스텝

단계 1: 기본 스타일 설정하기

최상단에 .bgost_slide 클래스 적용하기 이 클래스에 움직이는 텍스트 영역에 기본적인 스타일을 적용할 것입니다.

CSS 속성	설명
font-size: 60px;	텍스트의 크기를 60픽셀로 설정합니다.
font-family: 사용하는 폰트패밀리;	폰트 스타일을 사용하는 폰트패밀리로 설정합니다.
position: relative;	이 클래스가 포함된 요소의 위치를 상대적으로 설정합니다.
width: 100%;	텍스트 영역이 화면의 전체 너비를 차지하도록 합니다.
height: auto;	텍스트 영역의 높이를 자동으로 조절합니다.
padding: 100px 0;	상하 패딩을 100픽셀로 설정해 줍니다.
overflow-x: hidden; overflow-y: hidden;	수평 및 수직 스크롤을 숨겨 화면 밖으로 텍스트가 넘어가지 않게 합니다.

단계 2: 텍스트의 움직임 설정하기

.bgost_slide .track 클래스. 이 클래스는 텍스트가 어떻게 움직일지를 정의합니다.

CSS 속성	설명
position: absolute;	텍스트의 위치를 절대적으로 설정해, 상위 요소인 .bgost_slide에 기반하여 위치가 결정됩니다.
white-space: nowrap;	텍스트가 줄바꿈 없이 한 줄로 표시되도록 합니다.
animation: marquee 5s linear infinite;	marquee라는 이름의 애니메이션을 5초 동안 일정한 속도로 무한 반복하도록 설정합니다.

단계 3: 애니메이션 효과 정의하기

@keyframes marquee. 이 부분은 실제로 텍스트를 움직이게 하는 애니메이션을 정의합니다.

CSS 속성	설명
from { transform: translateX(0); }	애니메이션이 시작할 때 텍스트가 화면 오른쪽에서 시작하도록 설정합니다.
to { transform: translateX(-100%); }	애니메이션이 끝날 때 텍스트가 화면 왼쪽으로 완전히 이동하도록 설정합니다.

단계 4: 화면 크기에 따른 스타일 변경하기

@media (hover: hover) and (min-width: 700px). 이 코드는 화면 크기가 700픽셀 이상일 때 특정 스타일이 적용되도록 합니다.

CSS 속성	설명
.bgost_slide .content:	transform: translateY(calc(100% – 8rem)); 이 설정은 텍스트 내용이 화면의 특정 위치에 맞춰지도록 조정합니다.

HTML 구조 구성 설명

적절한 HTML 구조를 통해 슬라이드를 구성하는 방법에 대한 설명입니다.

HTML 요소	설명
section class=”bgost_slide”	이 태그는 전체 텍스트 영역을 감쌉니다.
div class=”track”	이 태그는 텍스트가 움직이는 경로를 정의합니다.
div class=”content”	여기에 실제 움직이는 텍스트 내용을 넣습니다.