📝메인페이지 content(실시간 인기 프로그램, 인기 Live 채널)마크업 및 스타일링📝

[wlstmd1004v]

swiper.js 를 사용하기 위해 swiper CDN을 연결해주었다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

[wlstmd1004v]

웹 접근성을 고려하여 aria-label을 이용하여 스크린리더가 읽지 못하게 하였고 어떤 의미 마크업인지 나타내주었다 아래와 같이 작성해주었다.

<dl class="favorite__poster -text--white">
  <dt aria-label="순위"></dt>
  <dd  class="text__rank bg-darkAccent absolute left-0 top-0 font-bold italic leading-none" >2</dd>

[wlstmd1004v]

태그는 ul > li > a > Img src 경로를 사용해 이미지를 사용했고 드라마 순위 이름을 나타내주는 거여서 dl > dt > dd 태그로 나타내주었다