Front-End (32) 썸네일형 리스트형 Moment.js를 사용하여 시간 차이 구하기 자바스크립트뿐만 아니라 모든 언어에서 시간 차이를 구하는 함수는 많이 사용됩니다. 오늘은 자바스크립트에서 Moment.js를 사용하여 시간차이를 구하는 방법에 대해서 알아보도록 하겠습니다. Moment.js란? 기존에 포스팅한 내용이기 때문에 생략합니다. ^^ Moment.js 간단 설명 Moment.js를 사용하여 시간차이 구하기 (시간1: 과거시간, 시간2: 현재시간 임을 가정합니다.) Sample 1) - 시간 1, 시간 2 사이의 일(day) 차이 구하기 console.log('일 차이: ', moment.duration(t2.diff(t1)).asDays()); Sample 2) - 시간 1, 시간 2 사이의 시간(hour) 차이 구하기 console.log('시간 차이: ', moment.du.. Vue ads pagination is a vue js pagination component vue-ads-pagination Vue ads pagination is a vue js pagination component. On the left side you find some information about the shown items. On the right side you can select a specific, the first, last, next or previous page. All the components can be overriden by your own components, or you can add your own styles to the default components. View Demo Download Source Installation You can install th.. Date 포맷 변경 플러그인 momentjs Moment.js란? 자바스크립트에서는 날짜를 표시할때 Date 객체를 사용합니다. 이때, 특정 형태의 날짜를 나타내기 위해선 직접 함수를 개발해야합니다. 또, 브라우저에 따라 시간대가 다를 경우 이를 고려하여 개발해야하는 번거러움이 있습니다. Moment.js를 사용하면 이 두가지 문제를 해결할 수 있습니다. Moment.js 공식 홈페이지 https://momentjs.com/ Moment.js 설치 홈페이지에서 직접 다운받을 수 있으며, npm과 같은 패키지매니저를 사용하여 설치 할 수 있습니다. Moment.js 사용법 다운받은 js파일은 프로젝트에 import합니다. moment 객체를 사용하여 아래와 같이 여러 형태의 날짜 형태로 표현이 가능합니다. Moment.js의 다양한기능 다양한 기능은.. babel-polyfill 과 babel-plugin-transform-runtime 그리고 IE8 Babel Babel 은 ES2015+ 문법을 ES5 지원 브라우저에서 해석할 수 있도록 변환해주는 트랜스파일러이다. 하지만 새롭게 추가된 전역 객체들(Promise, Map, Set..)과 String.padStart 등 전역 객체에 추가된 메서드들은 트랜스파일링만으론 해결하기 어렵기 때문에 core-js 나 regenerator-runtime 와 같은 별도의 polyfill 이 필요하다. Babel 기반에서 폴리필을 추가하는 방법은 두 가지가 존재한다. babel-polyfill 을 사용하는 방법과 babel-plugin-transform-runtime 을 사용하는 방법이다. 차례대로 살펴보자. babel-polyfill babel-polyfill 은 내부적으로 페북에서 만든 Generator Fun.. 창 크기 조절 샘플 코드 작성시 사용된 주요객체의 프로퍼티와 메서드 screen.availWidth, screen.availHeight 실제로 사용할 수 있는 디스플레이의 크기 이 크기에는 데스크톱의 작업 표시줄 등에 의해 사용되는 공간이 제외되어있다. window.open(url, name, features, replace) 새창을 생성하여 화면에 띄운다. url : 새창에서 보여줄 URL을 지정하는 문자열이며 생략 가능. 이 전달인자가 생략되거나 빈문자열이로 지정되면 새창의 화면에는 아무 문서도 출력되지 않는다. name : 새창의 이름, 만약 특정 이름의 창이 이미 열려있는 상태라면, open()은 새창을 생성하지 않고 해당 이름의 창에 대한 참조를 반환한다. 이때 features 전달인자는 무시된다. fea.. 브라우저 확인 // 익스플로러 체크 var agent = navigator.userAgent.toLowerCase(); if ( (navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || (agent.indexOf("msie") != -1) ) { alert("인터넷 익스플로러 브라우저 입니다."); } else { alert("인터넷 익스플로러 브라우저가 아닙니다."); } // 크롬 체크 var agent = navigator.userAgent.toLowerCase(); if (agent.indexOf("chrome") != -1) { alert("크롬 브라우저입니다."); } // 사파리나 체크 var agent = nav.. DIV 태그 속성 - id 객체를 구별하기위 위해서 사용하며, 자바스크립트로 객체에 접근할때 사용된다. - class 설정된 같은 태그들 중에서 같은 모양의 Style 속성을 적용할때 사용 한다. - style 레이아웃의 모양등에 관한 실제적인 설정을 한다. 속성과 속성에 대한 값은 콜론(:)으로 구분하고, 각 속성의 구분은 세미콜론(;)으로 한다. - position 위치를 정할때 어떤 방식으로 선택할지 지정 , absolute : 브라우저의 위치로 부터 위치가 시작이 된다. , relative : 특정 엘리먼트로 부터 위치가 시작된다. - left, top 문서내에서 레이어의 위치를 지정해준다. 레이어의 위치를 이동하거나 수정 할 수 있다. - width, height 레이어의 크기를 설정하여.. 색상표 html 태그 색상코드 다운로드 색상표 html 태그 색상코드 다운로드 글자색이나 표 등의 색상을 꾸밀 때 사용하는 색상 html 태그 코드 입니다. 필요하신 분은 아래 파일 다운로드 받아서 사용하세요!^^ 색상표 다운로드 받기 색상표 파일 Microsoft Word.doc 위의 첨부파일 색상표는 아래와 같습니다! 색상표 ※ 원하는 색상 코드를 드래그해 복사해서 사용하세요. #93DAFF #98DFFF #9DE4FF #A2E9FF #A7EEFF #ACF3FF #B0F7FF #B4FBFF #B9FFFF #C0FFFF #87CEFA #91D8FA #A5D8FA #AFDDFA #B9E2FA #C3E7FA #CDECFA #D7F1FA #E1F6FA #EBFBFF #00BFFF #0AC9FF #14D3FF #1EDDFF #28E7FF #32F1.. 이전 1 2 3 4 다음
