웹프로그래밍
-
자바스크립트 시간계산, 날짜계산웹프로그래밍/자바스크립트 2019. 9. 3. 14:51
시간계산 계산할 두 시각을 정한다. var 시간1 = new Date("2019-09-03 12:00:00"); var 시간2 = new Date("2019-09-03 14:23:32"); 두 시각의 간격을 변수 "간격"에 입력한다. var 간격 = 시간2 - 시간1; // 간격 의 값은 8612000(밀리초) 가 된다. 간격 값의 시, 분, 초 값을 얻는다. var 시 = Math.floor((간격 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var 분 = Math.floor((간격 % (1000 * 60 * 60)) / (1000 * 60)); var 초 = Math.floor((간격 % (1000 * 60)) / 1000); console.log( 시 +"시간 ..
-
exif.js - 자바스크립트로 사진이미지의 메타데이터(EXIF) 확인하기웹프로그래밍/자바스크립트 2019. 5. 13. 14:46
exif.js 플러그인 링크 https://github.com/exif-js/exif-js exif-js/exif-js JavaScript library for reading EXIF image metadata - exif-js/exif-js github.com 사용법 [html] [js] var imgElem = document.getElementById("myImg"); imgElem.exifdata = null; // 같은 페이지 안에서 이미지가 바뀌는 경우 이전의 메타데이터 정보를 지워주어야 함. EXIF.getData(imgElem, function() { var make = EXIF.getTag(this, "Make"); //"Make" 항목만 확인 console.log( make ); var..
-
CSS transition / transform / animation웹프로그래밍/CSS 2019. 1. 11. 02:03
트랜지션 transition transition-property: width, background-color; // 트랜지션의 대상이 되는 프로퍼티를 지정 (기본값 all) transition-duration: 1.2s, 3s // 변화가 일어나는 기간. 초단위. 프로퍼티와 각각 대응 (기본값 0s) transition-timing-function: ease; // 트랜지션 변화율 함수 지정 (기본값 ease) transition-delay: 1s; // 트리거 이벤트 발생 후 몇 초 후에 트랜지션이 시작될 것인지 지정 (기본값 0s) transition : (shorthand) 2D 트랜스폼 transform translate(x,y)요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.px, %..
-
아톰에디터(Atom.io) 공식저장소 등록웹프로그래밍 2018. 10. 8. 15:22
리눅스의 업데이트 매니저에 아톰에디터 공식 저장소를 등록 해 놓으면 아톰에디터의 새로운 업데이트가 올라오면 쉽게 자동으로 업그레이드 받을수 있다. 아톰에디터 공식 저장소 등록curl -sL https://packagecloud.io/AtomEditor/atom/gpgkey | sudo apt-key add -sudo sh -c 'echo "deb [arch=amd64] https://packagecloud.io/AtomEditor/atom/any/ any main" > /etc/apt/sources.list.d/atom.list'sudo apt-get update
-
자바스크립트 난수 만들기웹프로그래밍/자바스크립트 2018. 9. 14. 01:19
[기본] 0 ~ 1 까지의 무작위수(난수) 만들기 Math.random()*1 //부동소수점 실수 반환 1에서 10까지 정수 무작위수(난수) 만들기 Math.floor(Math.random() * 10) + 1; 특정 범위내에서 정수 무작위수(난수) 만들기 예) 10 에서 20 사이의 난수 만들기Math.floor( (Math.random() * (20 - 10 + 1)) + 10 ); 외워야 하는게 맞지만, 그냥 사용하기 편하게 함수로 만들어놓고 써보자. function nansu(small, big){ if (!big){ return Math.random() * small; } else { return Math.random() * (big - small) + small; } } 사용법0~10 사이의 ..
-
HTML 가로줄<hr> 꾸미기 예제웹프로그래밍/CSS 2018. 4. 19. 18:54
18 Simple Styles for Horizontal Rules (hr CSS Design)See the Pen 18 Simple Styles for Horizontal Rules (hr CSS Design) by Ibrahim Jabbari (@ibrahimjabbari) on CodePen. 그라디언트 스타일 { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }