자바스크립트 for반복문을 활용하여 패널 회전시키기 (2)

#자바스크립트for

​

​

디자인 소개

이 글은 "패스트캠퍼스" 최성일 강사님의 수업 내용을 정리한 글입니다. 웹페이지 디자인은 강사님의 디자인을 살짝 변형하여 제작하였습니다.

MAIN 영역 제작

메인패널

음악사이트의 메인패널은 총 8개 들어간다. HTML 코드는 main> article \*8> .inner 이다. 한 패널만 따서 아래에 코드로 나타내었다.

                                    <main>
    <article>
        <div class="inner"></div>
    </article>
  </main>

scss(css) 디자인

main요소 자체의 크기를 지정해주었다.

                                    main{
    width: 15vw;
    height: 60vh;
    position: absolute;
    left: 50%;
    top : 150%;
    margin-top: -25vh;
    margin-left: -7vw;
}

#CSS중앙배치 팁

1. main전체 넓이 15vw, 높이 60vh이다. left 50%를 하면 메인영역의 시작점이 좌측 정가운데로 배치된다.

​

1. 시작점이 좌측 정가운데로 배치되니 패널 모양은 가운데가 아니다. 이때 넓이의 -반 만큼 마진을 두면된다.

​

1. 높이도 마찬가지이다.

​

​

패널 박스 다듬기

이제 패널 박스를 조금 이쁘게 만들어 보겠다.

                                    css

 .inner {
  border-radius: 15px; //둥근테두리
  opacity: 0.7; //흐리게
  box-shadow: 10px 110px 20px rgba(0,0,0,.1); //박스 그림자
}

#css둥근테두리

박스 테두리를 둥글게 만들고 싶으면 끝의 반지름을 px로 계산해 주면된다. ->나중에 그림추가

​

#css박스그림자

box-shadow: 오른쪽, 아래 , 흐림정도 , 색깔 = box-shadow : 10px 10px 20px rgba(0,0,0,.1);

​

자바를 활용하여 패널을 360° 배치하기

현재는 8개의 패널이 중첩되어있다. 각 패널을 동일한 간격으로 360° 배치시켜보겠다.

​

자바스크립트

#document.querySelector​ : HTML의 테그나 클래스, id를 선택할 수 있습니다.

#document.querySelectorAll : 위외 동작방법은 같으나, 포함된 모든 자식요소를 선택합니다.

                                    js

const frame = document.querySelector('main'); //main요소 선택
const list = document.querySelectorAll('frame'); //main안의 자식요소 모두선택 -> article 8개

위 식을 통해 article요소를 모두 선택하였다. 이제 for문을 이용하여 article을 360도 돌려보자.

                                    js

const len = list.length; //list에 포함된 요소의 갯수를 구함 : article이 8개임
const deg = 360/len; //각 요소를 일정 간격으로 돌려주기 위해 변수를 지정

#list.length : article요소의 갯수를 구합니다. 각 패널을 일정 각도만큼 동일하게 돌릴겁니다. 일정 각도를 구하기 위해 360/article요소 의 갯수(=len)을 할 것이다.

                                    js

for(i=0; i<len; i++){
  list[i].style.transform= `rotate(${deg*i}deg)`;
}

위에서 list는 article요소 전체를 의미하며, list\[i\] 는 article요소의 N번째 요소를 의미한다.

​

#.style.transform : css요소를 java로 변환하고 싶을 때 쓰는 표현이다. 여기서는 transform 요소를 추가한 것. N번째 article요소의 각도를 15\*N씩 돌리는 구문이다. (N=0,1,2....7)

​

각 패널이 45도씩 회전한 모습이다. 이제 회전에 따라 Y축 위로 보내어 처음 UI를 구현해보자. 각 패널을 Y축 방향으로 올려주면된다.

​

                                    js

for(i=0; i<len; i++){
  list[i].style.transform= `rotate(${deg*i}deg) translateY(-100vh)`;
}

각 패널에 css - trasnlateY를 추가할 필요없이 자바내에서 바로 추가해주면 된다.

패널이 위로 올라가게 될경우 top값을 주어 낮춰주자

main 요소에 top 150%를 적용하면 된다.

​

이제 좌,우 음악 전환 버튼과 패널안에 컨텐츠를 넣어 보겠다. 3편에 계속