학원에서 배운 것/JavaScript19 KDT 5th 웹개발자 입문 수업 21일차 - 2 뮤직 플레이어 마무리 https://funny-sawine-0efe56.netlify.app/ 뮤직 플레이어 Lorem ipsum dolor sit amet consectetur. funny-sawine-0efe56.netlify.app 패널을 전체적으로 이용할 줄 알아야 한다. for(let i = 0; i < len; i++) { articleList[i].style.transform = `rotate(${deg * i}deg) translateY(-100vh)`; //사진 일괄 적용 const pic = articleList[i].querySelector('.pic'); pic.style.backgroundImage = `url("./source/img/${names[i]}.jpg")`; //음악 .. 2023. 2. 23. 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: absolu.. 2023. 2. 22. KDT 5th 웹개발자 입문 수업 20일차 - 1 1. @keyframes CSS 속성을 구간별로 정의해서 애니메이션 효과를 줄 수 있다. @keyframes 애니메이션변수명 { from { } to { } // or 0% { } 25% { } 50% { } 75% { } 100% { } } CSS 안에 animation 속성으로 지정해줄 수 있고 animation : 애니메이션변수명 애니메이션지속시간 지연시간 반복여부 타이밍함수; animation-name animation-duration animation-delay animation-iteration-count aniamtion-timing-function 2. window.localStorage 브라우저에 간단한 정보를 영구히 저장하기 위한 수단 프론트에서 저장할 것이 필요할 때, 브라우저에게 간.. 2023. 2. 22. KDT 5th 웹개발자 입문 수업 19일차 - 2 랜딩 페이지 제작 1. 영상 고르기 https://pixabay.com/videos/ 2. 폰트 세팅 구글 폰트의 import 방식으로 scss에 @import 로 넣어주기 3. _reset.scss 구현 margin, padding 0 ul, ol list-style none a text-decoration none 4. Header 부분 KDT ABOUT HOBBY COMMUNICATION EFFORT 랜딩페이지므로 헤더만 있으면 된다. 5. SCSS를 사용하여 스타일 시트 작성하기 // Variable $font-color : white; // Common body { background-color: black; a { color: $font-color; } } // Header header { w.. 2023. 2. 21. 이전 1 2 3 4 5 다음
