3시간째 머리싸메고 하고있는중인데

라이브할 것이 없으면 방송대기상태를 띄우는 슬라이드를 js안에서 바로 집어넣으려고 고민중

html = "";
  for (let i = 0; i < liveApiData.length; i++) {
    let tag = "";
    if (liveApiData[i].live) {
      const isReplay = liveApiData[i].방송 === "라이브 다시보기";
      tag = `
      <div class="swiper-slide">
        <a href="#" class="live_slide_item">  
          <div class="live_image${isReplay ? " replay" : ""}">
            <img
              src="${liveApiData[i].이미지}"
              alt="${liveApiData[i].alt}"
            />      
          </div>
          <div class="live_info">
            <div class="live_state">
              <span class="live_wait">${liveApiData[i].방송}</span>
            </div>
            <p class="live_item_title">
              ${liveApiData[i].타이틀}
            </p>
            <div class="live_day">
              <div class="live_day_date">${liveApiData[i].날짜}</div>
              <div class="live_day_time">${liveApiData[i].시간}</div>
            </div>
            <div class="live_detail">
              <div class="live_detail_image">
                <img
                  src="${liveApiData[i].디테일이미지}"
                  alt="${liveApiData[i].디테일alt}"
                />
              </div>
              <p class="live_detail_title">
                ${liveApiData[i].디테일타이틀}
              </p>
            </div>
          </div>
        </a>
      </div>
  `;
    } else {
      tag += `
        
      <div class="swiper-slide">
          <a href="#" class="live_slide_item">
            <div class="live_image">
              <img
              src="images/live_99.jpg"
              alt="방송대기"
              />   
            </div>
            <div class="unlive_lifo">
              <div class="unlive_image">
              <img src="images/live_logo.svg" alt="unlive_logo" />
              </div>
              <div class="unlive_title">
              방송준비중입니다.
              </div>
              <div class="unlive_more">
                <a href="#" class="unlive_more_bt">
                  편성표 바로가기
                </a>
              </div>
            </div>
          </a>
        </div>
      `;
    }

    html = html + tag;
  }

이렇게 적용했더니

슬라이드 자체가 너무 길어져 버리고, 이미지와 타이틀, 바로가기 버튼은 아예 공간을 넘어와버림;

<div class="swiper-slide">
          <a href="#" class="live_slide_item">
            <div class="live_image">
              <img
              src="images/live_99.jpg"
              alt="방송대기"
              />   
            </div>
            <div class="unlive_lifo">
              <div class="unlive_image">
              <img src="images/live_logo.svg" alt="unlive_logo" />
              </div>
              <div class="unlive_title">
              방송준비중입니다.
              </div>
              <div class="unlive_more">
                <a href="#" class="unlive_more_bt">
                  편성표 바로가기
                </a>
              </div>
            </div>
          </a>
        </div>

이 코드에서 생각해보니 a태그가 두개라 그런가 싶어 안쪽의 unlive_more_bt 의 a태그를 div로 바꿔줌

<div class="swiper-slide">
          <a href="#" class="live_slide_item">
            <div class="live_image">
              <img
              src="images/live_99.jpg"
              alt="방송대기"
              />   
            </div>
            <div class="unlive_lifo">
              <div class="unlive_image">
              <img src="images/live_logo.svg" alt="unlive_logo" />
              </div>
              <div class="unlive_title">
              방송준비중입니다.
              </div>
              <div class="unlive_more">
                <div class="unlive_more_bt">
                  편성표 바로가기
                </div>
              </div>
            </div>
          </a>
        </div>

그랬더니 얼추 문제가 해결된모습; 생각보다 답은 간단했네

유추하기 쉽게 html 을 조금 손봐주고

<div class="swiper-slide">
        <a href="#" class="live_slide_item">
          <div class="unlive_image">
            <img src="images/live_99.jpg" alt="방송대기" />
          </div>
          <div class="unlive_info">
            <div class="unlive_info_logo"><img src="images/live_logo.svg" alt=""></div>
            <div class="unlive_info_title">방송준비중입니다.</div>
            <div class="unlive_info_button">편성표 바로가기</div>
          </div>
        </a>
      </div>

css 로 꾸며줌