Fall in IT.

안녕하세요. 오늘은 반응형 웹페이지 디자인의 핵심 기술인 media query에 대해서 알아보겠습니다. media query란?최근 트렌드인 반응형 웹앱을 만들기 위한 CSS 기능입니다.화면의 종류와 크기에 따라서 디자인을 달리 보여줍니다. 예제소스넓이가 500px 이하일 경우는 body 태그의 배경색을 green으로 설정하는 코드. @media(max-width:500px) { body { background-color: green; } } 넓이가 500px 이상일 경우 body 태그의 배경색을 green으로 설정하는 코드 @media(min-width:500px) { body { background-color: green; } } 예제소스 2 결론엘리먼트들의 크기나 위치를 쉽게 설정할 수 있어, 레이..

안녕하세요.오늘은 Ionic Framework에 대해서 소개하도록 하겠습니다.(다음글에서는 간단하게 Ionic Framework를 사용하여 Hybrid App을 개발해보도록 하겠습니다.) 하이브리드 앱이란?하이브리드 어플리케이션(이하 하이브리드 앱)은 HTML5, CSS, JavaScript와 같은 웹 기술로 웹 어플리케이션을 만들고, 이를 네이티브 컨테이너로 감싼 네이티브 어플리케이션을 말합니다. (Corodva/PhoneGap처럼 네이티브와 연결해주는 도구를 이용하면 카메라, 가속도계, 위치정보, 연락처 같은 네이티브 기능에 접근할 수 있습니다.) 네이티브앱을 만들지 않고, 하이브리드앱을 만드는 이유는?개발비용과 개발시간을 줄여줍니다.네이티브 언어보다 학습 곡선이 낮습니다.(하이브리드 앱의 가장 큰 ..

안녕하세요. 오늘은 AnuglarJS에서 img 태그 안에 ng-src 디렉티브에 설정된, url (이미지 경로)에 대해서 reload하는 방법을 알아보겠습니다. 필요한 상황이미지 서버에서 이미지가 변경 되었는데, 경로는 그대로인 경우 reload가 필요합니다. ng-src reload 방법기존의 url에 현재 시간과 같은 변경이 있는 값을 더해줍니다. 예제소스 angular.module('ngSrcDemo', []) .controller('AppCtrl', ['$scope', function ($scope) { var imageUrl = "http://example.com/img.png"; $scope.imageSource = imageUrl + "?cb=" + new Date().getTime(); ..

안녕하세요. 오늘은 AngularJS 1의 기초개념에 대해서 알아보겠습니다. AngularJS란?AngularJS는 구글에서 만든 자바스크립트 프레임워크로, 2009년에 발표되었습니다.AngularJS는 자바스크립트로 만든 client 측 MVC/MVVM 프레임워크로 모던 단일 페이지 웹 애플리케이션 개발의 정수이다. AngularJS 특징자바스크립트로 작성할 코드량을 줄여준다. - Dom을 선택하고 조작하는 자바스크립트 코드를 작성하지 않아도 됩니다.양방향 데이터 바인딩이 가능합니다. - 모델의 데이터와 뷰 데이터가 양방향 데이터 바인딩이 되어, 모델이 바뀌면 뷰 데이터도 같이 변경 됩니다.HTML, CSS, 로직 등의 개발 영역을 명확하게 분리해줍니다. - 기존 자바스크립트에서는 Dom 조작과 이벤트..

안녕하세요. 오늘은 자바스크립트에서 Callback을 사용하는 방법에 대해서 알아보겠습니다. 간단하게, Callback이 무엇인지 알아보고, 언제 사용이 되는지 예제를 통해 알아보도록 하겠습니다. Callback이란?모든 명령의 실행을 마친 후에 넘겨받은 함수(객체)를 실행 하는 것을 Callback이라고 합니다. (자바스크립트에서는 함수도 객체이기 때문에 파라미터로 넘길 수 있습니다. 또한, 넘겨 받은 함수(객체)를 언제 실행할지 결정할 수 있습니다.) 자바스크립트는 자바와 다르게 비동기적으로 처리되기 때문에, Callback을 구현하여 사용 합니다. Callback 사용 전예제 코드 for(var i = 0; i < 5; i++) { console.log(i); } console.log("완료"); ..