css에는 마진 상쇄(margin collapsing) 혹은 마진 겹침(margin overlap)라는 현상이 있습니다. 탑과 바텀에 마진이 있는 경우 큰 쪽 한 개만 적용되는 현상을 말합니다. 아래위 마진이 겹쳐 있습니다. 1. 현상 확인 아래 코드를 실행해봅시다. See the Pen CSS3 Margin collapsing (margin overlap ) - Issue Check by DangGun (@danggun) on CodePen. 탑 마진(margin-top)을 20px주고 바텀마진을(margin-bottom) 20px를 줬습니다. 그런데 결과물은 20px 입니다, 이것을 마진 상쇄(margin collapsing), 마진 겹침(margin overlap) 현상이라고 합니다. 2. 현상의 ..

타입스크립트를 시작하기 위한 예제를 따라 해 보겠습니다. 참고 : typescript - Quick start 0. 준비하기 타입스크립트(typescript)가 설치돼 있지 않다면 설치해 줍니다. ( 참고 - typescript - Get TypeScript, [TypeScript] 타입스크립트(TypeScript)를 비주얼 스튜디오(Visual Studio) 2015에 설치하기 ) 타입스크립트를 설치하고 나면 프로젝트에 'TypeScript'라는 항목이 추가된 것을 볼 수 있습니다. 여기서 'TypeScript를 사용한 HTML 응용 프로그램'을 선택하고 프로젝트를 생성해 줍니다. 바로 실행해보면 실시간으로 시간이 갱신되는 타입스크립트 앱을 볼 수 있습니다. 1. 타입스크립트 파일 만들기 프로젝트에 '..

앵귤러JS(Agular, 이하 앵귤러)에서 앵귤러UI(AgularUI)에서 ng-grid라는 것을 지원해 줍니다. (참고 : AngularUI, Angular UI Grid ) 다양한 기능을 오픈소스로 만날 기회!! 지만 상용 그리드(grid)에 비해서 기능이 좀 모자라긴 합니다 ㅎㅎㅎㅎ ng-grid에서는 pdf나 cvs로 출력해주는 기능이 있습니다. 그런데 이 기능을 사용하면 이상한 점을 보게 됩니다..... 필터가 빠진 체로 출력됩니다. 1. 문제 발견 아래 예제는 그리드를 만들고 컬럼에 필터를 적용하였습니다. "눌러서 cvs 저장" 버튼을 눌러 다운로드 받아 봅시다. See the Pen AngularUI - Exporter cellFilter - Issue Check by DangGun (@da..

부트스트랩은 자체적으로 폰트를 사용합니다. 그런데 특정할 수 없는 상황에서 다음과 같은 에러가 발생합니다. 흠.... 파일경로로가보면 파일을 정상적으로 있는데 파일을 못 는 현상이 있습니다. 어디선가 많이 보던 에러인데..... stackoverflow - How to remove error about glyphicons-halflings-regular.woff2 not found 아..... 원인은 간단합니다. '.woff2'라는 확장자는 'MIME'기본 설정에 들어 있지 안씁니다 ㅋㅋㅋㅋㅋ 1. IIS의 경우IIS에서 MIME를 추가하면 됩니다. 사이트에 'MIME 형식'에 들어가서 '추가'를 눌러 아래와 같이 내용을 넣어주고 '확인'을 눌러 줍니다. 파일 이름 확장명 : .woff2 MIME 형식 ..

앵귤러js(AgularJS)에서 기본 제공되는 필터는 사용해 봤으니 직접 만들어서 사용해 봅시다. (참고 : 참고 : AngularJS Develop - 11 - Custom Filters ) 연관글 영역 1. 커스텀 필터(Custom Filter) 작성 앵귤러에서 필터를 추가하려면 '.filter'를 사용하면 됩니다. 아래 코드는 입력받은 값을 리턴해주는 필터입니다. app.filter('MyFilter', ['$filter', function ($filter) { return function (input1, scope, input2) { return "input1 : " + input1 + " input1" + input2; }; }]); 내용은 원하는 대로 작성하시면 됩니다. 2. 사용하기 이렇게 ..

이 필터도 앵귤러js(AgularJS)에서 기본 제공되는 필터입니다. 양이 많으니(= 기능이 많다. ) 차근차근 예제를 따라 해보도록 하겠습니다. (참고 : 참고 : AngularJS API Reference - orderBy ) 연관글 영역 1. 기본 사용법 'OrberBy'는 배열로 결과가 리턴됩니다. 그래서 'ng-repeat' 같은 것으로 사용 가능합니다. See the Pen AngularJS filter - orderBy 1 by DangGun (@danggun) on CodePen. 2. 정렬 변경하기 정렬옵션을 실시간으로 바꿔 봅시다. 이렇게 가지고 있는 데이터셋에서 필터의 옵션만 조정해 주면 앵귤러가 알아서 다시 정렬 해줍니다. See the Pen AngularJS filter - or..

앵귤러JS에서는 데이터를 출력할 때 필터를 적용해서 출력할 수 있습니다. AngularJS API Reference - filter 이 포스팅에서는 배열을 필터링하는 'filter' 통화 표시 필터인 'currency' 숫자 처리 필터인 'number' 날짜 처리 필터인 date 제이썬(Json)으로 표시해주는 'json' 소문자로 바꿔주는 'lowercase' 대문자로 바꿔주는 'uppercase' 글자 갯수를 잘라주는 'limitTo' 를 다룹니다. 연관글 영역 1. filter 참고 : AngularJS API Reference - filter 배열을 필터링해주는 필터입니다. 리턴이 배열로 오기 때문에 반복문(ng-repeat)으로 활용하거나 바인딩하는 것이 가능합니다. See the Pen QGK..

타입스크립트(TypeScript)는 마이크로 소프트에서 만든 자바스크립트 확장입니다. (참고 : Microsoft - TypeScript ) 앵귤러js2(AngulraJS) 때문에 해야 할 것이 많군요 ㅜㅡ 어찌 되었건 설치해봅시다! 1. 다운로드를 받자! 도구 > 확장 및 업데이트 로 누겟(Nuget)을 열고 타입스크립트(TypeScript)를 검색하면.... 아래와 같이 나옵니다. 하지만 다 훼이크고 클릭하면 다운로드 페이지로 넘어갑니다 ㅎㅎㅎ 가장 최신 버전을 클릭해봅시다.(2.0.3) 아래와 같이 다운로드 페이지가 나오는데 다운로드 받습니다. 다운받아서 설치하시면 됩니다. 참 쉽죠? npm이 설치되어 있다면? npm이 설치되어 있다면 아래 명령어로 타입스크립트의 최신 버전을 설치할 수 있습니다. ..

여러 가지 이유로 지정한 요소를 특정 태그로 감싸주어야 할 때가 필요합니다. 1. 제이쿼리(Jquery)를 이용한 방법 제이쿼리는 '.wrap()'함수가 있으므로 쉽습니다. //$([검색식]).wrap([추가할태그]); $('.interword').wrap(''); 2. 자바스크립트(javascript)를 이용하는 방법 자바스크립트는 살짝 힘듭니다. 요소를 찾아서 넣고 하는 작업이 필요하기 때문이죠 ㅎㅎㅎ //태그를 추가할 태그를 찾고 var div = document.getElementById('wrapMe'); //태그를 생성하고(여기선 'a') var link = document.createElement('a'); //기존 태그 내용을 추가해주고 link.innerHTML = div.outerHTM..

지정한 날짜에 날짜를 더하거나 빼는 계산을 하는 유틸리티입니다. 1. 설명 전역함수로 만들었습니다. 순수 자바스크립트만 사용하기 때문에 그냥 갔다가 쓰시면 됩니다. 자바스크립트의 날짜를 계산할때는 'setDate'와 'getDate'를 조합하지 않으면 원하는 결과값이 나오질 않습니다. 그런데 'setDate'를 하면 원본이 수정되기 때문에 여러작업을 할때는 값이 이상하게 나옵니다. 그래서 날짜를 계산하기 전에 원복을 복제(clone)하고 복제된 값을가지고 계산하는 방식으로 만들었습니다. 2. 코드 깃허브 링크 : DGUtil-JS(클릭) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3..