개인작업에서 발생한 이슈

팀프로젝트에서 내가 맡은 영역은 슬라이드영역과 cus 부분 이다.

• 슬라이드
  

슬라이드작업은 슬릭슬라이더라는 라이브러리를 활용하여 슬라이더기능을 구현하였다.
슬릭슬라이더 홈페이지 : https://kenwheeler.github.io/slick/

Html

    <div class="news_wrap">
      <div class="news_content_wrap">
        <div class="title tit_center">
          <h2 class="h-title"> 프로젝트 </h2>
          <p class="subTitleEng"> resoft projects</p>
        </div>
      </div>
      <div class="container_slider">
        <div id="slider-div">
          <div class="slide_box">
            <div class="slide_list">
              <div class="slide_list_item">
                <p class="proj_title">송파 구청 송파 둘레기 <br />비대면 걷기대회</p>
                <img src="../img/송파둘레길.png" alt="slide 01">
              </div>
            </div>
          </div>
          <div class="slide_box">
            <div class="slide_list">
              <div class="slide_list_item">
                <p class="proj_title">대구인문사회대학</p>
                <img src="../img/inmun_logo.png" alt="slide 02">
              </div>
            </div>
          </div>
          <div class="slide_box">
            <div class="slide_list">
              <div class="slide_list_item">
                <p class="proj_title">제 15회 달서 하프 <br />비대면 마라톤대회</p>
                <img src="../img/달서구청로고.png" alt="slide 03">
              </div>
            </div>
          </div>
          <div class="slide_box">
            <div class="slide_list">
              <div class="slide_list_item">
                <p class="proj_title">제 8회 한성 백제 마라톤대회</p>
                <img src="../img/한성백제마라톤.png" alt="slide 04">
              </div>
            </div>
          </div>
          <div class="slide_box">
            <div class="slide_list">
              <div class="slide_list_item">
                <p class="proj_title">2020 대구 마스크쓰GO <br />코로나극복 레이스</p>
                <img src="../img/컬러풀대구로고.jpg" alt="slide 05">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

slide-div>slide_box> slide_list> slide_list_item 구조를 만들었다. 여기서
슬라이드가 적용될 영역으로 slide-div가 설정되고 전체적인 슬라이드 사이즈와 마진값을 설정해 주었다. slide_box에는 overflow : hidden 을 설정하여 영역에서 넘어가는 부분이 안보이도록 했다. slide_list에는 배경색과 높이를 지정하였고
slide_list_item에서는 각 슬라이드 내용들의 위치정렬을 했다.

코드 작성할때 하나의 아이템을 만들어놓고 css를 작성하여 원하는 스타일로 만든후 아이템의 내용을 바꾸는 방식으로 진행하였다.

슬릭슬라이드를 적용하게 되면 별도로 가로 정렬을 하지 않아도 정렬되어 보여진다.

슬릭슬라이더를 하면서 참고한 사이트

https://kkt102.tistory.com/49

이페이지에는 슬릭슬라이더 홈페이지에서 번역이 안되어 아쉬웠던 옵션들에 설명이 번역이 되어있다.

https://fresh-mint.tistory.com/entry/%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-slick-%EC%82%AC%EC%9A%A9%EB%B2%95%EB%B0%98%EC%9D%91%ED%98%95

슬릭슬라이더 부분을 하며 아쉬웠던 내용들은 원본홈페이지의 구조를 보면서 하느라 내가 알아보기에 편한 클래스명을 사용하기 보다는 원본홈페이지에서 사용한 클래스명을 사용했던 부분이다.
두번째 시안작업을 할때는 각영역들의 이름을 미리 생각해보고 팀원들과도 클래스명에대해 고민해보고 공통된 부분은 같은 클래스 따로 설정할 부분으로 나누어서 지정하는것이 좋다는 생각이 들었다.