$http(XMLHttpRequest)를 이용해 json 데이터를 받아오자. [ guide ]1234567891011121314151617181920212223//Simple GET request example :$http.get('/someUrl'). success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response..
Angular js로 반복문 표현시 팁입니다. 앞선 예제 이어서 해보겠습니다. 1234567891011121314 {{ webtoons.length }}개의 작품 {{ $index+1 }} {{ webtoon.title }} {{ webtoon.cartoon.artists[0].name }} Colored by Color Scriptercs 조건문ng-if : 예제에는 index 가 3미만인것만 표기했습니다. (총 3개 노출)webtoon.img ? webtoon.img : 'default.jpg' 등으로도 표현가능합니다. 반복문$index : index 표현$first : 첫번째 요소$middle : 첫번째나 마지막 제외한 요소 모두$last : 마지막 요소$even : 짝수번째 요소$odd : 홀수번..
Angular js로 이런걸 만들겁니다. 우선 해야할일은 Angular 모듈 지정 : html 에 ng-app 을 통해 선언해줍니다. (실제 마크업에는 data-ng-app으로 되어있는데 w3c 벨리데이터 통과를 위함) 12[ html ] cs 12[ js ]var webtoonApp = angular.module('webtoonApp',[]);cs view에 표현할 div에 컨트롤러 지정 : ng-controller 사용 (webtoonListCtrl) 12[html] cs 12[ js ]webtoonApp.controller('webtoonListCtrl', function(){});cs 컨트롤러에서 내려주는 model을 루프 돌려줌 : ng-repeat 을 통해 webtoons 배열 루프 12[ h..
요즘 프로젝트를 할때 Backbone 사용이 늘고있는 추세다. 국내에 Backbone만을 위한 도서는 없었는데(내가 알기로는) 최근에 번역서가 있는 것을 보고 구입했다. (근데 막상 사고보니 6개월도 전에 나왔었다니;;)이 책은 O'Reilly 에서 나온 Developing Backbone.js Applications 의 번역서다. 우선 한번 쭈욱 읽어봤는데 상당히 정리가 잘 되어있다. 번역의 매끄러움도 그렇거니와, js MVC 패턴을 이해하는데 도움을 준다.지금까지는 Backbone 공식 사이트에서 영어로 된 정보로 작업했었는데, 한글로 한번 싹 정리하기에 이만한 책이 없는듯 하다.(방금 알게 된 사실인데.. Backbone 공식 사이트의 번역 사이트가 있었더라는.. http://iwidgets.kr/..
css에서도 변수나 조건문을 쓸 수 있다. 아직 draft상태이긴 하나.. 표준으로 채택되고 브라우저 지원률이 확대된다면 페이지 테마등을 한방에 바꾸는게 편해질것 같다. 조건문을 써서 css3를 지원하지 않는 브라우저에 대한 분기를 태워준다던지 (어차피 안먹는건 무시하긴 하겠지만..) 페이지별 스타일도 따로 관리가 가능하시겠다. 간단히 어떤 내용인지 알아보도록 하자. (각 제목을 클릭하면 w3c 관련 페이지로 이동합니다.) CSS Variables 배경 CSS의 특징 상 다양한 정보들이 흩어져서 선언됨 ex) 페이지의 일관된 색구성이 여러 위치에서 작성됨 기획이나 색상정보가 변경될때, 찾아 바꾸기로는 한계가 있음 LESS나 SASS 처럼 추가적인 작업 없이 구현할 순 없을까? 변수 (Variables) ..
정의 웹상에서 vector 그래픽을 생성할 수 있는 오픈소스 js 라이브러리 차트를 생성하거나 이미지 크롭 및 회전등 구현 canvas 요소를 사용하지 않고 W3C에서 정의한 SVG와 VML을 기반으로 그래픽 생성 ie에서 VML, 타브라우저 SVG로 구현 크로스브라우징을 지원하고 자바스크립트 이벤트 핸들러와 결합하여 변화를 주는것도 가능 github 코드 호스팅 사용 http://raphaeljs.com 구현 jQuery 등 js라이브러리와 마찬가지로 홈페이지에서 제공하는 js 파일을 다운로드 하거나, src를 명시해줌으로써 사용 가능 라파엘홈 > 레퍼런스 사이트를 통해 배울 수 있다. http://raphaeljs.com/reference.html 원그리기 우선 간단하게 그림부터 그려봅니다. 1. p..
개요 webp는 구글에서 발표한 새로운 웹전용 이미지 포맷이다. 기존의 다른 포맷들 보다 더 작게 압축이 가능한 장점이 있다. (동급 퀄리티 대비 png는 26%, jpeg는 34% 까지 감소!) 구글 공식 홈페이지 비디오 포맷인 VP8에서 파생되었으며 동영상 사이즈를 줄이는 webM 프로젝트가 webP까지 확장된 사례다. 비교 1. PNG (964kb) 2. JPG (459kb) 53% 감소 3. webP (49kb) 95% 감소! webP의 경우 원본을 75% 퀄리티로 압축 제작하였으나, 육안으로 구분 힘든 높은 퀄리티를 보여주었다. 용량은 무려 95% 감소!! 놀랍지 않은가? 제작방법 그렇다면 이 webP 파일은 어떻게 제작할 수 있을까? 아쉽게도 포토샵등 그래픽 소프트웨어에서 아직 지원되지 않는다..
- Total
- Today
- Yesterday