서비스설명
간단한 페이지로 1만시간을 계산해줍니다.
🛠 기술스택🛠
- HTML
- CSS
- JavaScript
기술 구현 사항
-
index.html
-
meta tag
//index.html <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-
10000hours.js
-
모달창 열고 닫기
//10000hours.js function openModal() { modal.style.display = 'flex'; } function closeModal() { modal.style.display = 'none'; } window.onclick = function (e) { if (e.target == modal) { closeModal(); } }
-
주소복사(공유하기)
//10000hours.js function copyUrl() { let url = window.location.href; let temp = document.createElement('input'); document.body.appendChild(temp); temp.value = url; temp.select(); document.execCommand("copy"); document.body.removeChild(temp); alert('주소가 복사되었습니다'); }
-
-
10000hours.css
프로젝트 후기
ID # , Class . 을 항상 깜박하는데 자주 사용해서 한동안은 잊지않을 것 같다.
setTimeout 같은 비동기 작업은 아직 헷갈린다. 더 노력할 것.
기본적인 html, css, js만 사용해서 하드코딩으로 만들었는데 id, class들이 많아서 연결이 헷갈렸다. 하나하나 작동이 되는지 확인하며 작업함.
새롭게 배운 것
폰트를 자주 사용하지 않는다면 그 폰트로 만들어서 img로 만들어서 넣는것이 용량적으로 추천함(폰트 용량이 의외로 크다)