2024-08-28 :: 026 Java Script 활용 ④

 

   이 화면에서 JS로 만든 기능은 총 3가지 (배너 슬라이드, 네비게이션 메뉴 hover, 드롭다운 박스)

 

 

   < 배너 슬라이드 >   

let heroL = document.querySelector('#heroLeft') let heroR = document.querySelector('#heroRight') console.log(heroL, heroR) //배너에 배치되어 있는 버튼을 가져온다. let heroS = document.querySelectorAll('.hero_slider') //움직일 배너 부분을 가져온다. let heroCount = 0; //기능 작동에 필요한 변수를 초기화 한다, 지역변수로 할당하면 안된다. (전역에서 변해야 하는 값이므로) heroL.addEventListener('click', heroLeft) heroR.addEventListener('click', heroRight) //가져온 버튼에 이벤트를 할당한다. 클릭하면 작성한 기능이 실행된다. function heroLeft(){   heroCount--;   //왼쪽 버튼을 누르면 1씩 감소된다.   //변수의 값이 음수가 되는 경우 배너의 인덱스 마지막 부분으로 이동할 수 있도록 한다.   //배열의 길이는 1부터 시작하지만 인덱스 번호는 0부터 시작하므로 -1을 해주어야 실제 길이가 맞다.   if(heroCount<0){     heroCount = heroS.length-1   }   heroL.style.backgroundColor = "#fda417"   heroL.style.color = "white"   heroR.style.backgroundColor = "white"   heroR.style.color = "#07092f"   //누르면 버튼의 색이 교차로 바뀌는 속성을 지정해주었다.   heroShow()   //실제 배너가 움직이는 기능을 포함시켜주어야 화면이 움직인다. } function heroRight(){   heroCount++;   //오른쪽 버튼을 누르면 1씩 증가한다.   //변수의 값이 배너의 인덱스 수 보다 많아지게 되면 다시 초기값(0)으로 돌린다.   if(heroCount>=heroS.length){     heroCount = 0   }   heroR.style.backgroundColor = "#fda417"   heroR.style.color = "white"   heroL.style.backgroundColor = "white"   heroL.style.color = "#07092f"   heroShow() } //실제 배너가 움직이는 효과를 내어 줄 기능이다. function heroShow(){   console.log('배너')   heroS.forEach(function(array){     array.style.transform = `translateX(-${heroCount*100}%)`   }) }

 

 

   <네비게이션 메뉴 마우스 over/out 기능 >

let navHover = document.querySelectorAll('#nav_ul > li > a') //네비게이션 메뉴를 가져오기, CSS 선택자로 작성해도 이상없다. navHover.forEach(function(array){   array.addEventListener("mouseover", navColor1)   array.addEventListener("mouseout", navColor2)   //이벤트는 같은 항목에 여러번 할당할 수 있다. }) //각 메뉴들에게 over와 out 이벤트를 지정하고 기능을 연결하기 function navColor1(){   console.log('오버')   this.style.color = "#fda417"   // this는 해당 이벤트가 발생한 요소를 가져오게 되는데, 그렇게 가져온 요소의 속성을 변경할 수 있다. } function navColor2(){   console.log('아웃')   this.style.color = "white" }

 

 

   <드롭다운 박스>

let testimonial = document.querySelector('#nav_test') let testBox = document.querySelector('#nav_test_box') let testCount = 0; //드롭다운 박스를 클릭을 할 때마다 나타났다 사라지게 만드는 기능이다 //필요한 요소를 HTML에서 가져오고 전역변수로 필요한 카운트를 선언 및 초기화 해둔다. testimonial.addEventListener('click', navTestbox) //클릭 이벤트를 두번 주게되면 나타났다, 사라졌다를 순차적으로 반복하기 때문에 이번 기능에서는 그렇게 하면 안된다. function navTestbox(){   testCount++;   //기본적으로 클릭 할 때마다 변수의 값이 1씩 증가하도록 한다.   //변수의 값을 2로 나누었을 때의 나머지가 0인 경우는 짝수라는 뜻이므로, 짝수일 때 드롭박스가 보이지 않게 한다.   //반대로 나누었을 때 나머지가 있다면 홀수라는 뜻이므로, 홀수일 때 드롭박스가 나타나게 만든다.   if(testCount%2==0){     testBox.style.opacity = "0"     testBox.style.top = "50px"   } else{     testBox.style.opacity = "1"     testBox.style.top = "25px"     //투명도와 위치를 조절하여 나타나게 만든다.   } }

---

   이 화면에서 쓰인 JS기능은 탭의 색상을 바꾸는 한가지

   하단의 슬라이드는 CSS애니메이션 효과를 사용해 자동으로 넘어가게끔 만들었으므로 오랜만에 기록해보겠다.

 

let proTab = document.querySelectorAll('.pro_ul > li > a') //탭의 버튼들을 가져와준다. proTab.forEach(function(array){   array.addEventListener('click', projectTap) }) //각 탭에 이벤트를 할당한다. function projectTap(){   proReset()   //색상 초기화 기능을 만들어 넣었지만 그냥 해당 기능의 구문을 여기에 작성해도 정상적으로 작동한다.   //아래에서 색상을 바꾼 탭들이 다음으로 넘어갈 때마다 원래 색으로 돌아오게 하는 기능이다.   //위에서부터 순차적으로 기능이 실행되기 때문에 초기화를 하고 그 이후 if문에 맞는 탭의 색상이 변하게 된다.   let proID = this.id.charAt(this.id.length-1)   //클릭한 탭의 속성에서 ID값의 맨 끝자리를 가져와 배열의 숫자와 비교해 같을 경우 색상을 변경하도록 만들었다.   //탭의 아이디 뒤에는 0부터 5까지의 숫자를 입력해두었기 때문에 비교가 가능하다.   for(let i=0; i<proTab.length; i++){     //1씩 증가하는 i의 값이 가져온 ID의 값과 동일하면 색상이 바뀐다.     if(proID == i){       proTab[i].style.backgroundColor = "#fda417"     }   } } //다음 탭으로 넘어가면 원래의 색상으로 돌아오는 기능 function proReset(){   proTab.forEach(function(array){     array.style.backgroundColor = "white"   }) }

 

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.

.pro_slider{   width: 100%;   display: inline-block;   animation: proSlider 4.5s ease-in-out infinite;   //keyframes로 만든 애니메이션을 지정하기   //총 과정을 4.5초 동안 진행되게 만들고 애니메이션의 속도를 지정한 후 반복여부를 결정하면 설정은 끝 } @keyframes proSlider{   0% {     transform: translateX(0%);     //제자리인 상태   }   40% {     transform: translateX(-100%);     //-100%만큼 이동한 상태   }   100%{     transform: translateX(-100%);     //그 상태로 일시정지   } }