본문 바로가기

분류 전체보기253

[JS] INPUT TYPE="NUMBER" +,- 입력 방지 $(".numberOnly").on("keydown", function(e) { if(!((e.keyCode > 95 && e.keyCode 47 && e.keyCode < 58) || e.keyCode == 8 || e.keyCode == 9)) { return false; } }); e.keyCode 가 96 ~ 105은 키패드의 숫자 96 97 98 99 100 101 102 103 104 105 0 1 2 3 4 5 6 7 8 9 48 ~ 57도 숫자다. 48 49 50 51 52 53 54 55 56 57 0 1 2 3 4 5 6 7 8 9 8은 backspace 지우는 키다. 9는 tap 키다. 다음 칸으로 넘어가기 위해서 넣었다. 이외의 모든 키 입력.. 2020. 6. 23.
[CSS] Transition으로 부드럽게 움직이는 방법 CSS 요소를 변경할 때, 부드럽게 변경이 되도록 하는 CSS 속성. Property/Description transition 4가지 속성을 한줄에 단축해서 사용할 수 있다. transition-delay 딜레이 할 만큼의 시간을 정한다. transition-duration 얼마나 transition을 지속할지 정한다. transition-property 특정 css 요소를 정한다. (width, height.... ) transition-timing-function 효과를 정한다. (ease, linear...) Shorthand 단축문 div { transition-property: width; transition-duration: 2s; transition-timing-function: linear.. 2020. 6. 12.
[CSS] Animation(애니메이션), @keyframes(키프레임) 웹에서 간단한 애니메이션을 사용하려면 jquery의 slideUp, slideDown, SlideToggle 등과 같은, 혹은 show, hide 같은 함수를 사용할 수 있습니다. 하지만 사용해보면 느끼게 되는 것이, 내가 생각한 것 처럼 움직여 주지는 않는다는 것입니다. 조금 더 부드럽게, 조금 더 빠르게, 조금 더 미세한 부분을 조정하고 싶은데 jquery로는 만족이 안됩니다. 그래서 그 이전에 배워서 사용해야 했던 것이 바로 CSS의 animation. 그에 따르는 @keyframes입니다. 제가 이전에는 잘 사용하지 않았는데, 요즘엔 눈에 보이는 것도 신경 쓸 여유가 생겼는지 욕심이 생깁니다. 그래서 여러 유튜브를 보다가 추천에 뜬 것이 바로 https://www.youtube.com/watch?.. 2020. 6. 7.
[CSS] Arrowbox http://www.cssarrowplease.com/ cssarrowplease Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like. Fork me on Github www.cssarrowplease.com 위의 사진처럼 화살표가 붙은 박스를 만드려면 위 사이트를 참고하면 된다. 들어가기 귀찮다면 아래의 소스를, 수정을 원한다면 적절히 수정해서 사용하면 된다. .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:a.. 2020. 6. 6.
[JS] Navigator.share | 휴대폰 공유 https://developer.mozilla.org/ko/docs/Web/API/Navigator/share Navigator.share Navigator.share() 메소드는 Web Share API 의 부분으로서 디바이스의 네이티브 공유하기 메커니즘을 작동시킨다. Web Share API 가 지원되지 않는다면, 이 메소드는 undefined 일 것이다. developer.mozilla.org navigator.share({ title: document.title, text: 'Hello World', url: 'https://developer.mozilla.org', }); // share the URL of MDN 해당 방법으로 휴대폰의 밑에서 올라오는 공유 옵션을 사용할 수 있다. 2020. 6. 4.
[JS] URL COPY TO CLIPBOARD, URL 주소 클립보드에 복사하기 https://stackoverflow.com/questions/49618618/copy-current-url-to-clipboard Copy current URL to clipboard Not sure why this has been so difficult for me today, but for some reason I cannot seem to get it to copy the current URL to the clipboard. Overall, I'm looking for a way to do it without needing to stackoverflow.com function CopyUrlToClipboard(){ var dummy = document.createElement("input"); .. 2020. 6. 3.
[jquery] getJSON json 파일 가져오기 https://api.jquery.com/jQuery.getJSON/ jQuery.getJSON() | jQuery API Documentation Description: Load JSON-encoded data from the server using a GET HTTP request. This is a shorthand Ajax function, which is equivalent to: 1 2 3 4 5 6 Data that is sent to the server is appended to the URL as a query string. If the value of the data paramete api.jquery.com 카테고리 목록을 JSON 파일로 만들어서 프로젝트 상에서 불러서 사용하고 싶다.. 2020. 6. 2.
[RN] React native, 로딩 화면, 스위치 로딩화면, 아이콘 import React from "react"; import { ActivityIndicator, StyleSheet, Text, View } from "react-native"; export default function App() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center" }, horizontal: { flexDirection: "row", justifyContent: "space-around", padding: 10 } }); 핵심: size와 color import { ActivityIndicator } from "react-native"; 스위치 .. 2020. 5. 24.
[AWS] 인스턴스 시작, 종료 접근 권한 주기.(보완필요) https://protechgurus.com/allow-iam-user-start-stop-reboot-ec2-instances/ Allow IAM User To Start, Stop, And Reboot EC2 Instances There are various scenarios when you need to allow a specific IAM user to perform specific actions for specific EC2 resources. For example, one developer has asked you to allow him to start, stop, … protechgurus.com IAM으로 직원에게 인스턴스의 시작, 종료 권한을 주려한다. 1. 정책 탭 들어가기 IAM 접속.. 2020. 5. 23.

티스토리툴바