반응형 분류 전체보기126 대각선 박스 호버 효과 대각선 형태 상자들의 마우스 호버 효과입니다. 가상선택자를 이용하여 만들었습니다. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none } a { text-decoration: none; color: #.. 2019. 9. 26. will-change will-change는 변화가 예상되는 요소를 브라우저에게 미리 알려줍니다. 브라우저는 실제 요소가 변화되기 전에 적절하게 최적화를 할 수 있습니다. 큰 비용이 드는 변화도 최적화로 인해 페이지의 반응성을 증가시킬 수 있습니다. will-change의 지원 범위 will-change의 속성 will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; will-change: top, left; auto 기본값으로 브라우저는 별다른 최적화를 실시하지 않습니다. scroll-position 스크롤 할 때 엘리먼트의 위치가 변경될 것을 알려줍니다. 이 값을 설정하면 브라우저는 스크롤 가능한 엘리먼트를 .. 2019. 9. 26. 로또 추첨 만들기 js로 로또 추첨 만들기 Math.random을 이용해 번호를 랜덤으로 생성합니다. setInterval로 카운트다운이 된 이후에 번호가 노출되도록 했습니다. 1 2 3 4 이번주 로또 번호 추첨 번호 분석중...... 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 let count = 3; let interval = setInterval(function() { if (count == 0) { clearInterval(interval); // 0이되면 인터벌종료 getNum(); // 번호생성 함수 실행 } document.getElementById('counter').innerHTML = count; count--; },.. 2019. 9. 26. javascript 끝말잇기 1 2 3 4 5 6 끝말잇기 click 끝단어와 같으면 딩동댕을 출력하고 틀리면 땡을 호출하는 소스입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 let word = document.getElementById('word'); let input = document.getElementById('in'); let btn = document.getElementById('btn'); let out = document.getElementById('out'); btn.addEventListener('click', function(e) { e.preventDefault(); if (word.textContent[word.textContent.length - 1] == inpu.. 2019. 9. 26. 텍스트에 색을 반씩 넣는 효과 가상 엘리먼트와 data 속성을 이용하여 만들어 보겠습니다. 1 split text color 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 body { height: 100vh; margin: 0; background: linear-gradient(90deg, #3498db 50%, #ffffff 50%); } p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; color: #3498db; font-size: 7vw; font-family: 'Open Sans', sans-serif; font-weigh.. 2019. 9. 25. vscode 유용한 기능 Vscode의 유용한 기능들 셀렉션 위/아래로 이동 alt + 방향키 위/아래 셀렉션 복사 alt + shift + 방향키 위/아래 멀티 커서 에디팅 (Multi Cursor Editing) ctrl + alt + 방향키 위/아래 떨어져 있는 단어들을 동시에 편집하려면 ctrl + shift + L 2019. 9. 25. 이전 1 ··· 16 17 18 19 20 21 다음 반응형
