숫자 천단위마다 콤마(,) 추가하기

숫자에 천단위 콤마(comma) 찍기 See the Pen 숫자 콤마 함수 타입 1 by jaeheekim (@jaehee) on CodePen. 인풋박스에 포커스 아웃될 경우 See the Pen 숫자 콤마 추가 함수 2 by jaeheekim (@jaehee) on CodePen. toLocaleString 은 Number 타입의 내장 함수이며, 인자로 들어온 지역 값에 따른 숫자 표기 방식을 적용하여, 문자열로 반환하는 역할을 합니다. 'en'은 영어권 국가의 숫가 표기 방식을 사용하겠다는 것을 지정한 것입니다. 미국이나 영어권 국가에서는 숫자를 표기할 때, 3자리마다 숫자를 끊어 콤마를 삽입하여 사용합니다. 만약 지역 값을 입력하지 않고 호출하는 경우, 해당 시스템의 지역 값에 따라서 숫자가 표기..
Code Lab 2015. 11. 9. 17:24

AngularJS Directive

AngularJS Directive(지시자) 알아보기 ng-class 및 ng-model directive ng-class 를 이용하여 간단한 validation 을 체크해 보겠습니다. 결과창의 텍스트박스에 숫자,문자열등을 입력해보세요. See the Pen AngularJS Directive by jaeheekim (@jaehee) on CodePen. ng-class-odd & ng-class-even See the Pen ng-class-odd, ng-class-even by jaeheekim (@jaehee) on CodePen. ng-option See the Pen ng-option by jaeheekim (@jaehee) on CodePen. Jaehee's e-room
Web Tech/AngularJS 2015. 11. 2. 09:18

[Chapter 06] Sass Function & 그 외의 지시어(Directive)

Sass 변수 범위(Scope)와 콘텐츠 블럭(@content) ㆍ 변수 범위는 JS 의 전역/지역 변수 개념과 유사합니다. ㆍ Sass 3.2 에 추가된 @content 지시어는 믹스인 정의시에 @content 지시문을 추가하여 믹스인을 호출하는 곳에서 사용된 콘텐츠 블럭을 믹스인으로 전달할 수 있습니다. // 전역 변수 $color: #3fb5c8; @mixin colors($color: darkred) { // 믹스인 내부에서 $color 값은 지역 변수인 '전달인자'를 가리킵니다. background-color: $color; // darkred border-color: $color; // darkred // @content 값은 믹스인을 호출하는 곳인 @include 믹스인명() {} 에서 {}..
StyleSheet/SASSㆍSCSS 2015. 10. 30. 10:10

[Chapter 04] Sass

Sass CSS 에서와 같은 결합 선택자 사용하기 div { color:black; // 선택 연산자 .foo { color: black; // 자손(descendant) 선택자 } > .foo { color: black; // 자식(child) combinator } + .foo { color: #000; // 인접형제(adjacent sibling) 선택자 } ~ .foo { color: yellow; // 일반형제(general sibling) 선택자 } & .foo { color: #fff; // Sass 부모(Parent) 참조 선택자 } .foo & { color: red; // Sass 부모(Parent) 참조 선택자 } &.bar { color: green; } } RWD, 부모 참조 선택..
StyleSheet/SASSㆍSCSS 2015. 10. 27. 12:51

[Chapter 02] Sass

Sass Variable Defaults와 global : !default, !global !default 플래그는 value값의 끝에 쓰고 변수가 이미 할당된 경우는 재할당하지 않지만 아직 값을 갖지 않는 null인 경우에는 !defalut 플래그의 value값으로 할당됩니다. $content: "First content"; $content: "Second content?" !default; $new_content: "First time reference" !default; #main { content: $content; new-content: $new_content; } $content: null; $content: "Non-null content" !default; #main { content: $..
StyleSheet/SASSㆍSCSS 2015. 10. 27. 12:21

[Chapter 01] Sass

Sass Started Sass를 사용하기 위한 환경 셋팅이 준비되었다면 Sass를 사용해 보기 Sass 파일의 확장자는 .scss 이며, 이 확장자 파일은 나중에 .css로 변환되어 실질적으로 서비스에 반영되는 .css 파일로 사용되어 지며 Sass는 마크업에서만 사용되는 언어입니다. 유관부서에 공유되거나 실서비스에 뿌려지는 것이 아니기 때문에 파일을 여러개로 나눠서 import해도 되고, 변수명 같은 것도 축약어를 사용하지 않아도 됩니다. ※ CODEPEN 에서 VIEW COMPILED 를 클릭하여 컴파일 결과를 확인해보세요! 변수(Variables) 기본값 설정 : $ , !default(디폴트 플래그) ㆍ $변수명 : 속성값; ㆍ $변수명 : 속성값 !default; Scss파일에서 위 코드를 작..
StyleSheet/SASSㆍSCSS 2015. 10. 27. 09:50

AngularJS 의 View, Controllers, Scope의 관계

View, Controller, $scope$scope 는 컨트롤러와 뷰 사이에서 중계자자(ViewModel) 역할을 합니다. MV* 프레임워크(MVC, MVVM, MVP) Controller 를 생성한 후 View 에 추가 // 사용할 컨트롤러 설정 초간단 컨트롤러 추가 //$scope 의 멤버에 접근 {{ cust.name }} - {{ cust.city }} // 함수로 컨트롤러 생성 function SimpleController($scope) { // 매개변수로 동적 $scope 주입 $scope.customers = [ { name: 'RedPlus', city: '인천'}, { name: 'Taeyo', city: '서울＇}, { name: 'Songgun', city: '경기'}, { nam..
Web Tech/AngularJS 2015. 10. 26. 22:57

AngularJS module

AngularJS module 정의 AngularJS 의 module 정의와 controller // 데이터 준비 : 서버측에서 Ajax 로 전송되는 데이터라고 가정 arrs = [{ num: 10, name: 'AngularJS', lib: '앵귤러' }, { num: 11, name: 'jQuery', lib: '제이쿼리' }, { num: 12, name: 'javaScript', lib: '자바스크립트' }]; // 모듈(ng-app) 선언 (모듈은 애플리케이션의 개념) var myModule = angular.module("myModule", []); // 컨트롤러(ng-controller) 선언 (특정위치에 데이터 출력) // 사용자 정의의 컨트롤러 이름 정의 myModule.controlle..
Web Tech/AngularJS 2015. 10. 26. 22:35