본문 바로가기
반응형

분류 전체보기126

로컬스토리지 예제 로컬스트리지를 이용해 글상자의 background-color, color 값을 저장하고 다시 불러오는 예제입니다. change text color change bg color set color get color $('#txt').val('글상자 영역의 색상 값을 저장합니다.'); $('#textcolor').change(function() { var color = $(this).val(); $('#txt').css('color', color); }); $('#bgcolor').change(function() { var color = $(this).val(); $('#txt').css('backgroundColor', color); }); $('#set_color').click(function() { va.. 2019. 10. 21.
쿠키와 로컬스트리지 구분 쿠키 로컬 스트리지 목적 웹사이트 접속시 정보 기억해두기위함 클라이언트 측 데이터 저장 보안 웹사이트 접속시 서버에 쿠키 정보가 전달되므로 보안에 취약 서버에 전달되지 않음 유효기간 있음 없음(영구적) 용량 4KB로 제한 최소 5MB 형식 텍스트 객체 정보 저장 기능 2019. 10. 20.
퀴즈 만들기 자바스크립트 프로젝트 북을 보며 공부한 내용입니다. 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.
ES6의 클래스 자바스크립트 프로젝트 북을 보며 공부한 내용입니다. https://book.naver.com/bookdb/book_detail.nhn?bid=12285042 자바스크립트 프로젝트북 실무 개발자를 위한 웹 프로그래밍 레시피!프로그래밍 언어를 공부할 때는 실무에서 많이 사용하는 코드를 조금씩 구현해보면서 익히는 것이 좋다. 이 책에서는 실무와 밀접한 내용을 다양한 유형의 웹 애플리케이션이나 UI 요소로 익힐 수 있도록 9가지 프로젝트를 구성했다. 프로젝트 주요 부분에 자바스크립트와 제이쿼리 소스를 함께 수록하여, 자바스크립트와 제이쿼리를 함께 이해하고 실무 능력을 키울 수 있게 했다. book.naver.com ECMAScript 6 Class 기존의 자바스크립트에 없던 클래스가 ES6에서부턴 선언할 수 있.. 2019. 10. 17.
날씨 위젯 openweather 날씨 API를 통해 날씨 위젯을 만들었습니다. openweather API는 AJAX요청을 통해 해당 위치의 날씨 정보를 JSON으로 반환해줍니다. max min * { margin: 0; padding: 0; box-sizing: border-box; } body { color: #333; } p { margin: 0 0 10px; } #weather_info { position: relative; padding: 10px; margin: 0 auto; width: 50%; height: 310px; background: url(https://www.wired.com/wiredenterprise/wp-content/uploads//2013/02/clouds.jpg) no-repea.. 2019. 10. 11.
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.
반응형

티스토리툴바