(css, script) 참고

blind

.blind{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    margin: -1px;
}

변수

:root{
    --___: ___;
}

투명도

(배경 투명도50%, 폰트 투명x)

/*css속성*/
background: rgba(0,0,0,.5);

swiper slide

/*html*/
<div class="swiper main-slide">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<a href=""><img src="./assets/images/main_vis1.jpg" alt=""></a>
		</div>
	</div>
	<a href="" class="btn-nav prev"><span class="blind">이전 슬라이드</span></a>
	<a href="" class="btn-nav next"><span class="blind">다음 슬라이드</span></a>
	<div class="swiper-pagination">
		<span class="bullet active"></span>
		<span class="bullet"></span>
		<span class="bullet"></span>
	</div>
</div>

/*script*/
const  mainSlide = new Swiper('.main-slide',{
	spaceBetween:20,           (--> 슬라이드간 간격)
    slidesPerView:2,           (--> 화면에 보일 슬라이드 개수)
    loop:true,                 (--> 무한 슬라이드)
    navigation:{               (--> 슬라이드 이전, 다음 버튼)
    	nextEl:'.next',
        prevEl:'.prev'
    },
    pagination:{               (--> 슬라이드 페이징)
    	el:'.swiper-pagination',
        type:'fraction'
    }
}

min-width

최소 보장되는 너비 설정

mobile : 320px, 340px, 360px