자바스크립트 classList 로 패널 선명도 조절하기 (5)

#웹사이트만들기 #자바스크립트clsslist

​

웹사이트 디자인 소개 및 학습목표

디자인소개

패스트 캠퍼스 "최성일"강사님의 강의를 듣고 내용정리를 한 것 입니다. 디자인은 강의의 템플릿을 아주 살짝 변형하였습니다. 모든 디자인 저작권은 강사님께 있습니다.

​

학습목표

1. 현재 재생 음악패널은 선명하게, 그외 패널은 약간 투명하게 만든다
2. java classList를 활용하여 이전/이후버튼​을 누를 때마다 패널에 클래스를 추가/삭제 시킨다.

​

사용되는 언어

HTML

가장 첫 번째 패널에 class="on"을 부여한다

​

CSS

class ="on"인 패널에는 선명하게, 그 외의 패널들은 약간 투명하게 만든다.

​

js

이전/이후 버튼을 클릭할 때마다 다음 패널로 class="on"이 옮기도록 구현하겠다.

HTML

                                    <body>

<main>
  <article class = "on">
    <div class="inner">
    </div>
  </article> *8

</main>

</body>

main안에 들어있는 패널의 구조이다.제일 처음 패널에 article class= "on"을 지정해주었다. aritcle 안에 또다른 시멘틱 테그 div class="inner"을 만들어 패널안쪽을 꾸며보겠다.

CSS

1.패널 안쪽 기본틀 만들기

                                     main{
    article{
       .inner{
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 15px;
            box-shadow: 10px 10px 20px rgba(0,0,0,.1);
            padding: 5vh 2.5vw 8vh;
            opacity: 0.6;
            transform: scale(0.8); //on활성화시 -> 1로 확대하기
            display: flex;
            flex-wrap: wrap;//아~ 이거 쓰면 세로로 됨 !!
            justify-content: center;
            transition: 1s;
            align-content: space-around;
            }
         }
     }

<큰틀잡기>

• width: 100% / height: 100% 부모 넓이/크기 그대로 가져오기
• background : #fff ; //패널 배경색 흰색
• border-radius: 15px ; //패널 모서리 둥글게
• box-shadow :10px 10px 20px rgba(0,0,0,.1); // 가로길이,세로길이,범위
• opacity : 전체 패널을 우선 흐리게 만든 후 on만 1값줘서 선명하게 하기
• transform: scale (0.8) // 전체 패널 작게 만든 후 on만 1로 확대하기

​

2.class="on"일때 모양 적용하기

                                    aticle{
  .inner{
  }
  &.on {
     .inner{
            opacity: 1;
            transform: scale(1);
            }
      }

}

article의 class가 on일 경우에 css요소를 변경

​

• opacity 0.7 -> 1로 변경하기
• transform: scale(0.7)->scale(1) 로 변경

패널 기본틀 완성(좌) / class on일 때만 선명하게 (우)

​

​

JS

Prev & Next 버튼 클릭시 class 옮기기 (Prev만 설명)

                                    const prev= documemt.querySelector(".btnPrev")
const frame= documet.querySelector("main") //main패널 전체 틀
const list = frame.querySelector("article") //main 중에서도 article = 패널의 틀(구체적)
let active = 0;

prev.addEventListener('click', e=>{
   frame.style.transform=`rotate(${deg* ++num}deg)`;//시계방향회전이기 때문에 deg=45 : 360/len

   (active===0) ? active=len-1 : active--;//최초순번

    for(let el of list) el.classList.remove('on');
    list[active].classList.add('on');   //처음 패널에서만 가능..찾아야함
})

<클릭이벤트 & 패널회전>

• Prev 버튼 클릭시 다음 이벤트를 발생시켜라
• 패널을 좌/우 방향으로 회전시키는 것. 여기를 클릭해서 확인하기

​

​

<클래스 변경구문>

• active = 0이다
• 조건문 active===0 이면, len(=8)-1 하고 아니면 active를 하나씩 배라
• 반복문 for of 설명 : 클릭이벤트 동안, list = 패널의 class on을 제거하고

active번째 패널에 class on을 추가하라 (think)

​

자바스크립트 논리회로 추가설명

1. 첫번째 패널에 on이 붙어있다 / active=0이다.
2. 첫번째 패널에서 Prev를 클릭한다 -> 이벤트가 발생한다
3. active=0이기 때문에 len-1로 active는 7이된다.
4. for of 문은 첫번째 패널의 class on을 제거한다 / 이후 active(7)번째 패널에 class on을 추가한다.
5. 누를때 마다 반복되면서 class on버튼이 옮겨다닌다.

결과

#

처음 패널의 class on이 이전 패널에 옮겨가면서 on속성을 그대로 가져온다.

여기서 패널에 on이 붙을때는 위에 설정한대로 transform:scale(1) ; opacity:1 ; 이 설정된다.