HTML CSS JAVASCRIPT (11) 썸네일형 리스트형 자바스크립트로 게임 만들기 (슬라이딩 퍼즐) 자바스크립트로 3X3 슬라이딩 퍼즐을 만들어봤습니다.(못 푸는 경우도 있으니 안되면 새로고침...) "> CSS Transition 종료 후 다른 기능 실행 (자바스크립트) CSS 로 div 에 애니메이션 효과를 준 뒤 자바스크립트로 다른 기능을 실행할 때이것을 순차적으로 실행할 수 있게 해주는 기능입니다. 순서1. div에 class를 추가하여 애니메이션 하기 (classList.add)2. div가 애니메이션이 끝났는지 확인 (Promise 함수)3. 다음 기능 실행하기 (얼럿창이나 하나 띄워봅시다.) 사전 세팅 CSS html나는 길어진다.클릭하면 실행됨 이런 화면입니다.(볼품이 없습니다.) 1. 클래스 추가하기document.querySelector('.btn').addEventListener('click', () => { document.querySelector('.div1').classList.add('on');}); 2. 애니메이션 끝났는지 확인하기d.. 웹페이지가 이미지처럼 확대/축소 되는 효과 모바일 / 태블릿 타겟의 웹앱을 작업하는 중필요에 의해 작성한 스크립트 입니다. 화면의 UI가(여백 / 이미지 / 텍스트 포함)이미지 처럼 확대/축소 됩니다. 조건1. rem 방식으로 CSS를 작성2. 가능한 SVG 이미지를 활용할 것3. UI 디자인은 FHD 해상도의 font-size: 16px 기준으로 작업할 것(필수는 아니지만 스크립트를 수정해야 함) 결과는 이런식으로 동작합니다. 아래의 스크립트가 포인트 입니다.function setFontSize(){ const deviceWidth = window.innerWidth; //디바이스의 가로넓이를 가지고옴 const defaultScreenSize = 1920; //디자인 시안의 가로 사이즈 const defaultFontSize.. 이전 1 2 다음
