전체적인 구현 방법은 순서도와 같다. 내용은 기본값은 <- 화살표만 활성화되어 있고 ->는 비활성화 상태이다. 그리고 카드의 전체 너비가 화면보다 크다면 <-, -> 화살표 모두 활성화되고 화면보다 작다면 <-는 비활성화 되고, ->만 활성화된다. 다만 ->의 활성화 조건은 첫카드 위치가 기본위치인지 아닌지를 확인하고 결정하는 방식이다.
첫째 화살표 아이콘의 작동과 관련된 class-card 태그는 ul 태그에서 시작이 된다. 그래서 ul태그에 기준 시작점을 세팅할 필요가 있고 그 시작점으로 부터 어느만큼 이동했는지 그 값을 활용하여 기능 구현을 할 수 있다. 이를 구현하는 방법으로는 HTML5에서 태그에 변수선언 및 변수값 지정으로 구현할 수 있는데 변수값을 넣고자 할때 "data-변수이름=변수값"으로 작성하면 된다. 따라서 여기에서는 data-position="0"으로 작성을 하였다[data-변수이름(position)=변수값("0")]. index.html 內 모든 ul 태그에 적용해야 한다.
두번째는 여러개의 class-list에는 각각의 화살표 아이콘이 있기에 하나의 화살표 아이콘을 눌렀을 때 이에 해당하는 class-list와 class-card만 동작해야 한다. 동일한 영역에 존재하지 않는 것들은 동작해서 안되는 것이다. 따라서 해당 화살표 아이콘과 해당 class-list & class-card간 연관관계는 위치값을 이용한 인자(ex. parent, nextsibling 등)를 이용해서 설정해야 한다. 연관관계를 정상적으로 찾은 경우 li 태그 내 class-card의 총 갯수를 계산하고 또한 화면에 보여질 class-card 숫자를 계산해서 li 태그 내 class-card 숫자가 화면에 보여지는 class-card보다 큰 경우에만 화살표 아이콘이 보이고, 작동되어야 한다. 또한 모든 화살표 아이콘을 활성화하는게 아니라 맨 첫카드의 위치에 따라 오른쪽 화살표 아이콘이 활성화 할 필요가 없다면 비활성화로 지정해준다. 또한 li 태그 내 class-card 숫자(전체 카드 너비)가 화면 사이즈보다 적다면 화살표가 보여질 필요도 없고 작동할 필요도 없다. 이러한 조건을 토대로 코드는 작성되어져야 한다.
<!-- HTML5에서는 태그에 확장적인 처리를 위해 변수값을 넣고자 할때 "data-변수이름=변수값"으로 작성하면 된다.--><!-- 따라서 여기에서는 data-position="0"으로 작성을 하였다. 모든 ul 태그에 작성해야 한다. --><ulclass="class-list"data-position="0"><liclass="class-card"><ahref="https://gibson1211.github.io/"target="_blank"><imgsrc="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG?raw=true"alt="IT분야"class="class-image"/><divclass="class-container"><divclass="class-skill"><divclass="class-type">제목1</div><divclass="class-format">제목2</div></div><divclass="class-desc"><divclass="class-title">세부내용1</div><divclass="class-detail">세부내용2</div></div></div></a></li>
화살표 왼쪽 아이콘에 해당하는 slide-prev class로 부터 출발하여 ul class와의 관계를 아래 그림과 같이 크롬 브라우저 개발자도구의 console에서 찾아본다.
위의 이미지에서 추출한 결과값(slidePrev.parentElement.parentElement.nextElementSibling;)을 아래에서 사용한다. 아래 이미지를 참고하자
/*----------------------------------------------------------------------*/functiontransformPrev(){/* 기능 구현 후 테스트를 위해 임시로 만든 함수 */};constslidePrevList=document.getElementsByClassName('slide-prev');/* 1. 여러개의 좌측 화살표를 한번에 적용시키고자 class 이름으로 동작을 조정 할 태그(slide-prev)를 list로 지정한다. */for(leti=0;i<slidePrevList.length;i++){/* 2. 리스트의 길이만큼 반복문을 돌린다. slide-prev가 세개면 세번 돌아간다.*//* 3.ul 태그를 아래와 같이 선택한다.(4번 방법을 이용한다.) 그리고 list로 담아준다. */letclassList=slidePrevList[i].parentElement.parentElement.nextElementSibling;/* 4. 크롬 브라우저의 개발자 도구를 이용해서 slidePrev에서 ul태그까지의 관계를 추출해 복사해서 위와 같이 사용한다. */letliList=classList.getElementsByTagName('li');/* tag 이름으로 li 태그를 사용하는 것들도 list로 담아준다. *//* 5. 왼쪽버튼과 오른쪽 화살표 아이콘을 모두 활성화 할 필요가 없다.
아래 조건을 활용하여 불필요한 화살표 아이콘은 비활성화한다.
총 카드의 너비(liList.length * 260)가 ul 태그 너비(classList.clientWidth)보다 넘치면,
왼쪽(PREV) 버튼은 활성화하고, 화면의 위치가 현재 맨 첫카드 위치를 의미하므로
오른쪽 화살표 아이콘(NEXT)은 비활성화한다. */if(classList.clientWidth<(liList.length*260)){/* 전체 카드 넓이가 화면 넓이보다 큰 경우임, 260px는 카드 240px에 좌우 margin 10px씩을 더한 값*/slidePrevList[i].classList.add('slide-prev-hover');/* 왼쪽 화살표 아이콘을 활성화한다. */slidePrevList[i].addEventListener('click',transformPrev);/* 클릭 할 경우 transformPrev라는 함수를 적용한다 */}else{/* 화면이 카드 전체 크기보다 크다면 PREV, NEXT 버튼이 불필요하므로 아예 삭제함,
태그를 삭제하는 경우 removeChild라는 메서드를 이용해서 삭제를 해야 한다.
다만 removeChild 메서드는 부모 요소를 통해서만 삭제가 가능하기에 부모요소를 먼저 찾아야 한다.
따라서, 1. 먼저 부모 요소를 찾아서,(slidePrev의 부모 요소는 arrow-container)
2. 부모 요소의 자식 요소로 있는 PREV 와 NEXT 요소를 삭제함 */constarrowContainer=slidePrevList[i].parentElement;/* 부모요소 찾기 */arrowContainer.removeChild(slidePrevList[i].nextElementSibling);/* 부모 요소를 통해서 오른쪽 버튼 먼저 삭제하기 */arrowContainer.removeChild(slidePrevList[i]);/* 오른쪽 버튼 삭제 후 자신인 왼쪽 버튼 삭제하기 *//* 여기까지 작성 후 실행을 해서 확인을 하고자 하는 경우 transformPrev라는 함수가 정의되지 않았기에 에러가 발생한다.
그래서 이런 경우 function transformPrev() { };라고 임시로 선언한 후 실행(상단에 작성)하여 기능 여부를 확인해야 한다.
*/}}
댓글남기기