자바스크립트 (13) 썸네일형 리스트형 프로젝트 - 계빨 게임 (Math Sprint) 가장 짧은 시간 안에 주어진 문제의 답이 맞는지 맞추는 게임입니다. math sprint 10 questions best score: '' 40 questions best score: '' 70 questions best score: '' 120 questions best score: '' 1 2 3 Go 1 1 1 1 YOUR TIME '' base time: '' penalty: '' start wrong correct try again CSS @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100.. 모듈 (Module) 프로젝트의 규모가 커지면 코드의 양이 늘어나고 가독성이 떨어지죠. 많은 언어에서 라이브러리, 패키지 등 다양한 이름으로 같은 기능을 하는 코드들을 분산해서 저장하고 필요할 때 불러와 쓰는 방식으로 이러한 문제를 해결하는데, 자바스크립트에서도 모듈화를 통해 효율적으로 코드를 작성할 수 있습니다. 모듈은 작성된 코드를 저장하는 별개의 자바스크립트 코드인데요. 어떻게 사용하는지 알아보겠습니다. 사용방법 index.html 파일에서 불러오는 메인스크립트에 type="module"을 추가합니다. 이후 모듈 자바스크립트 파일에서 내보내기 (export)와 이를 사용하고자 하는 자바스크립트 파일 (여기서는 index.js)에서 가져오기 (import)를 통해 사용합니다. module.js function hiWorl.. 자바스크립트로 주간 / 야간 모드 바꾸기 요즘 많은 웹 애플리케이션 야간, 주간 모드로 바꿀 수 있는 기능을 제공하는데요. HTML, CSS, JS를 사용하여 구현해 보겠습니다. 보편적인 기능이라 따로 도입하는 이유에 대한 별다른 설명은 생략하고 바로 코드를 보도록 하겠습니다 (해당 코드에 집중하기 위해 이해를 위해 필요한 코드만 작성) 구현하기 HTML Custom welcome CSS /* 전역변수 지정 */ :root { --bg-light-alt: rgba(0, 0, 0, 0.4); --font-primary: aliceblue; --font-alt: #000; --bg-primary: transparent; --btn-primary: rgb(255, 92, 92); --btn-secondary: #03dac5; } /* data-the.. 무한스크롤 (infinite scrolling) 웹 개발과정에서 이미지나 데이터를 가져와서 화면에 나열하는 작업이 필요한 경우가 많은데요. 화면의 크기가 한정되어 있어 유저에게 보여줄 수 있는 정보는 한정되어 있기 때문에 웹페이지 상에 처음 표시할 때 불필요한 정보까지 모두 서버에 요청하여 가져오는 것보다 필요한 부분만 그때 그때 요청하고 표시하는 것이 더욱 효율적입니다. 무한 스크롤은 서버에 요청하는 데이터의 양을 분할하여 필요한 부분만 화면에 표시 해 주기 때문에 상기에 언급된 기능 구현을 쉽게 구현 할 수 있는데요. 어떻게 하면 쉽게 구현이 가능한지 알려 드리겠습니다. HTML 삽입 미리보기할 수 없는 소스 앵귤러? 앵귤러는 웹 어플리케이션 개발 시 필요한 다양한 기능 (routing, forms validation, animations)들을 탑재한 JavaScript framework인데요. Component 구현방식을 통해 코드의 재사용성 향상으로 중복적인 작업을 줄여주고 생산성을 향상시켜주는 등 다양한 장점이 있습니다. 앵귤러의 시작과 다양한 기능들을 살펴 보도록 하겠습니다. List of Contents [ 소개 ] [ 장점, 단점 ] [ 주요기능 ] [ 어떻게 작동할까? ] [ 누가 사용할까? ] [ 마무리 ] [ 참고자료 ] 소개 앵귤러는 2010년 10월 20일 더 나은 웹 개발 환경을 제공하기 위해 Google (개발자: Misko Hevery)에 의해 Angular.Js (ver 1.0) 라는 이름으.. 이전 1 2 다음
