KDT 5th 웹개발자 입문 수업 20일차 - 3

뮤직 플레이어 만들기

기본 세팅 : index.html 을 만들고, main CSS와 JS를 연동시켜준다.

필요에 따라 아이콘CDN을 추가한다.

다만 reset CSS와 구글 폰트는 @import 형식으로 main CSS에 불러와준다.

 

 

1. 기본적인 HTML CSS

figure 태그를 사용하여 구조를 만든다.

CSS로 기본적인 헤더와 푸터 등 구조를 잡아준다.

 

 

 

 

2. 음악 패널 작업

새로운 scss 파일을 만들어서 메인 CSS에 @import 해주고,

section 태그를 사용하여 음악 패널은 article에 작업해준다.

패널마다 transform 효과가 필요하므로 .inner 클래스를 배치하여 transform이 중복되어 효과가 안걸리는 문제를 회피해야한다

 

section {
  position: absolute;
  width: 20vw;
  height: 65vh;
  top : 150%;
  left: 50%;
  margin-left: -10vw;
  margin-top: -32.5vh;

  article {
    width: 100%;
    height: 100%;
    position : absolute;
    top : 0;
    left: 0;

    .inner {
      width: 100%;
      height: 100%;
      background-color: white;
      padding: 5vh2.5vw 8vh;
      border-radius: 10px;
      box-shadow: 10px 10px 20px rgba(0, 0, 0, .1);
      opacity: .6;
    }
  }
}

// 패널 돌리기
const frame = document.querySelector('section');
const articleList = frame.querySelectorAll('article')

const len = articleList.length;
const deg = 360 / len;
console.log(deg);
for(let i = 0; i < len; i++) {
  articleList[i].style.transform = `rotate(${deg * i}deg) translateY(-100vh)`;
}

 

.btnPrev {
  width : 60px;
  height: 60px;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-20vw, -50%);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0;
  padding-left: 20px;
  cursor: pointer;

  &::before, &::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: white;
    position: absolute;
    left: 0;
    transform-origin : left center;
    transform: rotate(-180deg);
    transition: .5s;
  }

  &::after {
    transform: rotate(180deg);
  }

  span {
    font-size: 18px;
    color: white;
    transition: .6s;
  }

  &:hover {
    span {
      transform: translateX(100%);
      opacity: 0;
    }

    &::before {
      transform: rotate(-30deg);
    }
    &::after {
      transform: rotate(30deg);
    }
  }
}

.btnNext {
  width: 60px;
  height: 60px;
  position: absolute;
  top:50%;
  right: 50%;
  transform: translate(20vw, -50%);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0;
  cursor: pointer;
  padding-right: 20px;

  &::before, &::after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: white;
    display: block;
    position: absolute;
    right: 0;
    transform: rotate(180deg);
    transform-origin: right center;
    transition: .5s;
  }
  &::after {
    transform: rotate(-180deg);
  }

  &:hover {
    &::before {
      transform: rotate(30deg);
    }
    &::after {
      transform: rotate(-30deg);
    }
    
  }


  span {
    font-size: 18px;
    color: white;
    transition: .6s;
  }

  &:hover {
    span {
      transform: translateX(-100%);
      opacity: 0;
    }
  }
}

 

 

CSS 애니메이션이 감이 잡히지 않아서...ㅠ 한번 다시 만들어봐야겠다.