웹 페이지에서 특정 콘텐츠를 주기적으로 보여주고 싶을 때 유용한 방법이 있습니다. 간단한 HTML과 CSS, 그리고 JavaScript 타이머 함수를 활용하면 div 요소를 3초마다 랜덤으로 서서히 나타났다 사라지게 만들 수 있습니다. 실습 예제를 통해 직접 확인하며 구현 방법을 배워보세요.

기본 HTML 구조

<div class="container">
  <div class="box"><a href="#">특가 이벤트</a></div>
  <div class="box"><a href="#">타임 세일 이벤트</a></div>
  <div class="box"><a href="#">당일 발송 이벤트</a></div>
</div>

<div class="container">
  <div class="box"><a href="#">특가 이벤트</a></div>
  <div class="box"><a href="#">타임 세일 이벤트</a></div>
  <div class="box"><a href="#">당일 발송 이벤트</a></div>
</div>

HTML

CSS: 기본 스타일 + 페이드 효과

.container {
  position: relative;
  width: 300px;
  height: 50px;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.box.show {
  opacity: 1;
}

.container {
  position: relative;
  width: 300px;
  height: 50px;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.box.show {
  opacity: 1;
}

CSS

💡Tip

opacity와 transition을 활용하면 자연스러운 페이드 인/아웃 구현 가능
position: absolute;로 겹쳐 놓고 하나씩만 보이도록 처리

JavaScript: 3초마다 랜덤 div 표시

const boxes = document.querySelectorAll('.box');
let currentIndex = -1;

function showRandomBox() {
  // 모든 박스 숨기기
  boxes.forEach(box => box.classList.remove('show'));

  // 랜덤 인덱스 선택 (이전과 다른 값)
  let randomIndex;
  do {
    randomIndex = Math.floor(Math.random() * boxes.length);
  } while (randomIndex === currentIndex);

  currentIndex = randomIndex;
  boxes[randomIndex].classList.add('show');
}

// 처음 실행
showRandomBox();

// 3초마다 반복
setInterval(showRandomBox, 3000);

const boxes = document.querySelectorAll('.box');
let currentIndex = -1;

function showRandomBox() {
  // 모든 박스 숨기기
  boxes.forEach(box => box.classList.remove('show'));

  // 랜덤 인덱스 선택 (이전과 다른 값)
  let randomIndex;
  do {
    randomIndex = Math.floor(Math.random() * boxes.length);
  } while (randomIndex === currentIndex);

  currentIndex = randomIndex;
  boxes[randomIndex].classList.add('show');
}

// 처음 실행
showRandomBox();

// 3초마다 반복
setInterval(showRandomBox, 3000);

JavaScript

예제 실행 결과

특가 이벤트

타임 세일 이벤트

당일 발송 이벤트

페이지에 들어가면 세 개의 div 중 하나가 랜덤으로 표시됨
3초마다 다른 div가 서서히 나타나고 이전 것은 사라짐
이벤트 배너, 공지, 광고 배치 등 실무에도 응용 가능
실행 결과 소스는 제 블로그에 맞춰서 예제 코드와 다를 수 있습니다.

마무리

opacity + transition → 자연스러운 애니메이션
setInterval() → 일정 시간 간격 반복
랜덤 인덱스 + 상태 저장 → 같은 요소가 연속으로 나오지 않게 처리

Summary in English

Learn how to create a fade-in and fade-out effect where div elements randomly appear and disappear every 3 seconds using HTML, CSS, and JavaScript. This practical tutorial is perfect for event banners, rotating ads, or interactive web design projects.

3초마다 랜덤으로 나타났다 사라지는 div 효과 만들기｜예제 코드