반응형 자바스크립트6 퀴즈 만들기 자바스크립트 프로젝트 북을 보며 공부한 내용입니다. https://book.naver.com/bookdb/book_detail.nhn?bid=12285042 자바스크립트 프로젝트북 실무 개발자를 위한 웹 프로그래밍 레시피!프로그래밍 언어를 공부할 때는 실무에서 많이 사용하는 코드를 조금씩 구현해보면서 익히는 것이 좋다. 이 책에서는 실무와 밀접한 내용을 다양한 유형의 웹 애플리케이션이나 UI 요소로 익힐 수 있도록 9가지 프로젝트를 구성했다. 프로젝트 주요 부분에 자바스크립트와 제이쿼리 소스를 함께 수록하여, 자바스크립트와 제이쿼리를 함께 이해하고 실무 능력을 키울 수 있게 했다. book.naver.com 퀴즈 진행 정보 body { font-size: 18px; } .grid { padding: 10.. 2019. 10. 18. 3d page 만들기 3d 페이지를 만들어봤습니다. ie에서는 Edge 이상에서만 지원합니다. 터치 제스처를 구현해주는 hammer.js를 같이 사용했습니다. Desktop 3D Page page1 page2 page3 page4 .container { position: absolute; width: 100%; height: 100%; margin: 0 auto; perspective: 800px; overflow: hidden; box-sizing: border-box; } .wrapper { position: relative; width: 100%; height: 100%; margin: auto; transform-style: preserve-3d; transition-duration: 1s; } .wrapper>.pa.. 2019. 10. 8. 스크롤했을때 나타나는 이미지 처음엔 안보이다가 스크롤을 했을때 스르륵 나타나는 이미지를 ES6를 사용해 만들어 봤습니다. .img { position: relative; background: url(http://lorempixel.com/output/nightlife-q-c-400-400-3.jpg) 50% / cover; width: 400px; height: 400px; } .fill { position: absolute; left: 0; top: 0; z-index: 5; background: #ddd; width: 100%; height: 100%; transform-origin: 100% 0; transition: all 1s ease; } .img.on .fill { transform: scaleX(0); } functi.. 2019. 9. 26. 스크롤 상태 표시바 만들기 본문의 상단에 진행상태를 표시해주는 상태표시바를 만드는 소스입니다. Scroll Indicator 본문내용.... body { margin: 0; font-size: 28px; } .header { position: fixed; top: 0; z-index: 1; width: 100%; background-color: #f1f1f1; } .header h2 { text-align: center; } .progress-container { width: 100%; height: 8px; background: #ccc; } .progress-bar { height: 8px; background: #4caf50; width: 0%; transition:all .3s ease; } .content { paddin.. 2019. 9. 26. 플로팅 배너 푸터에서 멈추기 스크롤하는동안 따라다니는 배너가 푸터영역에서 멈추는 코드입니다. footer banner * { margin:0; padding:0; } main { position:relative; } #content { height: 1500px; } footer { background: #333; height: 300px; font-size: 30px; color: #fff; } #banner { position: fixed; right: 20px; bottom: 50px; width: 50px; height: 100px; background: salmon; box-shadow: 0 0 10px rgba(0, 0, 0, .6); } #banner.on { position: absolute; bottom: 350px.. 2019. 9. 26. 스코프(Scope) 자바스크립트에서 스코프란 어떤 변수들에 접근할 수 있는지를 정의합니다. 스코프엔 두 가지 종류가 있는데요, 전역 스코프(global scope)와 지역 스코프(local scope)가 있습니다. 전역스코프(Global Scope) 변수가 함수 바깥이나 중괄호 {} 바깥에 선언되었다면, 전역 스코프에 정의된다고 합니다. 전역 변수를 선언하면, 여러분의 코드 모든 곳에서 해당 변수를 사용할 수 있습니다. 심지어 함수에서도 말이죠. const hello = 'Hello CSS-Tricks Reader!' function sayHello () { console.log(hello) } console.log(hello) // 'Hello CSS-Tricks Reader!' sayHello() // 'Hello CS.. 2019. 9. 26. 이전 1 다음 반응형
