반응형 이펙트24 자바스크립트 게임 이펙트01 : 음악 효과(2) 자바스크립트 게임 이펙트01 : 음악 효과(2) 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 반복(한곡 반복, 랜덤 반복, 전체 반복), 뮤직 리스트에 대한 자바스크립트를 추가했습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2 / MUSIC.CSS / JS) / 완성화면 반복(한곡 반복, 랜덤 반복, 전체 반복) JAVASCRIPT // 반복 버튼 클릭 musicRepeat.addEventListener("click", () => { let getAttr = musicRepeat.getAttribute("class"); switch(getAttr){ case "repeat" : musicRepeat.setAttribute("class", "repeat_one"); music.. 2023. 5. 5. 2023 웹디자인 기능사 실기 레이아웃: 슬라이드 이펙트 2023 웹디자인 기능사 실기 레이아웃: 이미지 슬라이드 이펙트 레이아웃, 메뉴바, 이미지 슬라이드 참고 코드 참고 : https://github.com/dongjin6539/web2023/tree/main/webd 레이아웃 코드 참고 : https://github.com/dongjin6539/web2023/tree/main/webd/layout MENU-1, MUNUE-2 참고 : https://github.com/dongjin6539/web2023/tree/main/webd/menu IMAGE SLIDE 이펙트 참고(s-1, s-2, s-3) : https://github.com/dongjin6539/web2023/tree/main/webd/menu 레이아웃 다양한 방법 참고 : https://don.. 2023. 4. 30. 자바스크립트 게임 이펙트01 : 음악 효과 자바스크립트 게임 이펙트01 : 음악 효과 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2 / MUSIC.CSS / JS) / 완성화면 코드 블럭 Music Player 노래 제목 노래 작가 이름 0:00 3:55 구성 기존에 했던 블로그 참고해서 main 태그 구역 사이에 추가 시켰습니다. https://dongjin6539.tistory.com/90 CSS CSS1 참고(https://github.com/dongjin6539/web2023/blob/main/javascript/game/css/reset.css) CSS1에서는 코드를 작성하면 기본적인 태그들을 리셋시키는 스타일을 작성했습니다. CSS2 참고 (https://github.. 2023. 4. 27. 자바스크립트 게임 이펙트01 자바스크립트 게임 이펙트01 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면 코드 블럭 WEBS GAME WORLD 2023년 4월 24일 09시 30분 15초 뮤직 뮤직 뮤직 뮤직 현재 뮤직듣기를 클릭했습니다. 구성 header 태그를 사용해서 제목과 목록을 태그를 사용해 각각 만들어줍니다. main 태그를 사용해서 구역 안에 div 태그를 사용해서 각각 알맞는 구성의 이미지와 태그를 입력해줍니다. footer 태그를 사용해서 현재 정보를 입력해줄 태그를 사용해줍니다. CSS CSS1 참고(https://github.com/dongjin6539/web2023/blob/main/javascript/game/css/reset.. 2023. 4. 24. 패럴랙스 이펙트(Parallax Effect) : 메뉴 효과 패럴랙스 이펙트(Parallax Effect) : 메뉴 효과 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면 코드 블럭 Javascript parallax Effect01 패럴랙스 이펙트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section01 삶이 있는 한 희망은 있다. 02 Section02 산다는것 그것은 치열한 전투이다. 03 Section03 언제나 현재에 집중할수 있다면 행복할것이다. 04 Section04 신은 용기있는자를 결코 버리지 않는다. 05 Section05 먼저 자신을 비웃어라. 다른 사람이 당신을 비웃기 전에 06 Section0.. 2023. 4. 18. 슬라이드 이펙트 : 이미지 슬라이드(썸네일) 슬라이드 이펙트 : 이미지 슬라이드(썸네일) 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면 코드 블럭 Javascript slider Effect06 슬라이드 이펙트 : 이미지 슬라이드(썸네일) 1 2 3 4 5 6 7 prev next dongjin6539@naver.com 구성 코드는 간단하게 header 구역 부분에 제목 태그, 목록 태그를 사용해서 텍스트를 입력해줍니다. main 구역에는 이미지가 들어갈 구역, 썸네일 이미지가 들어갈 구역, 화살표 버튼을 class 명을 사용해서 만들어줍니다. css는 유형별로 공통으로 사용될 스타일은 파일로 따로 만들어서 링크 태그를 사용해 가지고 와서 입력해주고 유형별로 다르게.. 2023. 4. 14. 이전 1 2 3 4 다음 반응형
