슬라이드 부분을 진행하시는 팀원분이 힘들어 하셔서 같이 코드작성을 시작함
code
<div class="news_wrap"> <div class="news_content_wrap"> <div class="title tit_center"> <h2 class="h_tit">프로젝트</h2> <p class="subTitleEng">resoft projects</p> </div> <div class="btn_wrap"> <!-- <a href="#" class="more"><span>more</span></a> --> </div> </div> <div class="container_slide"> <section class="news_list slider slick-initialized slick-slider"> <div aria-live="polite" class="slick-list draggable"><div class="slick-track" role="listbox" style="opacity: 1; width: 3809px; transform: translate3d(-1465px, 0px, 0px);"><div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide01" style="width: 273px;" data-slick-index="-4" aria-hidden="true"> <a href="javascript:void(0);" tabindex="-1"> <div class="new_img" style="height:300px; background-color: #ffffff;"> <div class="cont"><p class="work-title">대구인문사회대학<br></p> <img class="logo" src="./img/inmun_logo.png" alt="[WEB]"></div> </div> </a> </div><div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide02" style="width: 273px;" data-slick-index="-3" aria-hidden="true"> <a href="javascript:void(0);" tabindex="-1"> <div class="new_img" style="height:300px; background-color: #ffffff;"> <div class="cont"><p class="work-title">제15회 달서 하프 비대면 마라톤대회<br></p> <img class="logo" src="./img/달서구청로고.png" alt="[APP]"></div> </div> </a> </div><div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide03" style="width: 273px;" data-slick-index="-2" aria-hidden="true"> <a href="javascript:void(0);" tabindex="-1"> <div class="new_img" style="height:300px; background-color: #ffffff;"> <div class="cont"><p class="work-title">제8회 한성백제 비대면 마라톤대회<br></p> <img class="logo" src="./img/한성백제마라톤.png" alt="[APP]"></div> </div> </a> </div><div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide04" style="width: 273px;" data-slick-index="-1" aria-hidden="true"> <a href="javascript:void(0);" tabindex="-1"> <div class="new_img" style="height:300px; background-color: #ffffff;"> <div class="cont"><p class="work-title">2020 대구 마스크 쓰GO 코로나 극복 레이스<br></p> <img class="logo" src="./img/컬러풀대구로고.jpg" alt="[APP]"></div> </div> </a> </div><div class="slide slick-slide" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 273px;" data-slick-index="0" aria-hidden="true"> <a href="javascript:void(0);" tabindex="-1"> <div class="new_img" style="height:300px; background-color: #ffffff;"> <div class="cont"><p class="work-title">송파구청 송파둘레길 비대면 걷기대회<br></p> <img class="logo" src="./img/송파둘레길.png" alt="[APP]"></div> </div> </a> </div><div class="slide slick-slide slick-current slick-active" tabindex="-1" role="option" aria-describedby="slick-slide01" style="width: 273px;" data-slick-index="1" aria-hidden="false"> <a href="javascript:void(0);" tabindex="0"> <div class="new_img" style="height:300px; background-color: #ffffff;"> <div class="cont"><p class="work-title">대구인문사회대학<br></p> <img class="logo" src="./img/inmun_logo.png" alt="[WEB]"></div> </div> </a> </div><div class="slide slick-slide slick-active" tabindex="-1" role="option" aria-describedby="slick-slide02" style="width: 273px;" data-slick-index="2" aria-hidden="false"> <a href="javascript:void(0);" tabindex="0"> <div class="new_img" style="height:300px; background-color: #ffffff;"> <div class="cont"><p class="work-title">제15회 달서 하프 비대면 마라톤대회<br></p> <img class="logo" src="./img/달서구청로고.png" alt="[APP]"></div> </div> </a> </div><div class="slide slick-slide slick-active" tabindex="-1" role="option" aria-describedby="slick-slide03" style="width: 273px;" data-slick-index="3" aria-hidden="false"> <a href="javascript:void(0);" tabindex="0"> <div class="new_img" style="height:300px; background-color: #ffffff;"> <div class="cont"><p class="work-title">제8회 한성백제 비대면 마라톤대회<br></p> <img class="logo" src="./img/한성백제마라톤.png" alt="[APP]"></div> </div> </a> </div><div class="slide slick-slide slick-active" tabindex="-1" role="option" aria-describedby="slick-slide04" style="width: 273px;" data-slick-index="4" aria-hidden="false"> <a href="javascript:void(0);" tabindex="0"> <div class="new_img" style="height:300px; background-color: #ffffff;"> <div class="cont"><p class="work-title">2020 대구 마스크 쓰GO 코로나 극복 레이스<br></p> <img class="logo" src="./img/컬러풀대구로고.jpg" alt="[APP]"></div> </div> </a> </div><div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 273px;" data-slick-index="5" aria-hidden="true"> <a href="javascript:void(0);" tabindex="-1"> <div class="new_img" style="height:300px; background-color: #ffffff;"> <div class="cont"><p class="work-title">송파구청 송파둘레길 비대면 걷기대회<br></p> <img class="logo" src="./img/송파둘레길.png" alt="[APP]"></div> </div> </a> </div><div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide01" style="width: 273px;" data-slick-index="6" aria-hidden="true"> <a href="javascript:void(0);" tabindex="-1"> <div class="new_img" style="height:300px; background-color: #ffffff;"> <div class="cont"><p class="work-title">대구인문사회대학<br></p> <img class="logo" src="./img/inmun_logo.png" alt="[WEB]"></div> </div> </a> </div><div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide02" style="width: 273px;" data-slick-index="7" aria-hidden="true"> <a href="javascript:void(0);" tabindex="-1"> <div class="new_img" style="height:300px; background-color: #ffffff;"> <div class="cont"><p class="work-title">제15회 달서 하프 비대면 마라톤대회<br></p> <img class="logo" src="./img/달서구청로고.png" alt="[APP]"></div> </div> </a> </div><div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide03" style="width: 273px;" data-slick-index="8" aria-hidden="true"> <a href="javascript:void(0);" tabindex="-1"> <div class="new_img" style="height:300px; background-color: #ffffff;"> <div class="cont"><p class="work-title">제8회 한성백제 비대면 마라톤대회<br></p> <img class="logo" src="./img/한성백제마라톤.png" alt="[APP]"></div> </div> </a> </div></div></div></section> </div> </div>
슬릭슬라이드 적용, css 적용