웹 프로그래밍96 [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. [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. [JS] ES6 내 수준 w3cschool에서 ES6 공부하기 JavaScript let JavaScript const JavaScript Arrow Functions JavaScript Classes Default parameter values Array.find() Array.findIndex() Exponentiation (**) (EcmaScript 2016) let, const는 이제 어떻게 쓰는지 알겠다. 블로그에 간단하게 정리도 해 놓았다. Arrow function도 몇번 사용하다 보니 알겠다. Classes는 function과 나누어 쓰는 이유를 잘 모르겠다. 그리고 react에서는 function을 많이 쓰는 추세라고 하여 function에 더 집중해도 될 것 같다. Default parameter values.. 2020. 5. 22. [JS] Draggable DIV 만들기, div 드래그 하기 https://www.w3schools.com/howto/howto_js_draggable.asp 2020. 5. 22. [JS] 자바스크립트로 스크롤이 제일 밑으로 내려갔을 때 감지하는 방법 반응형 웹사이트나 웹 애플리케이션을 개발하다 보면 사용자가 스크롤을 내려서 새로운 컨텐츠를 확인해야 하는 경우가 있습니다. 이때, 사용자가 스크롤을 제일 밑으로 내렸을 때 추가적인 액션을 수행하고 싶은 경우가 있을 수 있습니다. 이번 블로그 글에서는 자바스크립트를 사용하여 스크롤이 제일 밑으로 내려갔을 때 이를 감지하는 방법에 대해 알아보겠습니다. 1. 스크롤 이벤트 리스너 추가하기 스크롤 이벤트를 감지하기 위해 window 객체에 이벤트 리스너를 추가해야 합니다. 이벤트 리스너를 등록하면 스크롤이 발생할 때마다 특정 함수가 호출됩니다. window.addEventListener('scroll', function() { // 스크롤 이벤트 발생 시 실행할 코드 작성 }); 2. 스크롤 위치 확인하기 스크.. 2020. 5. 21. [JS] JSON 형식을 KEY 값으로 정렬하기 소개 JSON(JavaScript Object Notation)은 데이터를 효과적으로 교환하고 저장하기 위한 인기 있는 형식입니다. 때로는 JSON 데이터를 특정 키를 기준으로 정렬해야 할 필요가 있을 수 있습니다. 이 블로그 글에서는 JavaScript를 사용하여 JSON 형식을 KEY 값으로 정렬하는 간단하면서도 유용한 방법을 알아보겠습니다. 배경 대한민국의 주소를 동 이름으로 정렬해야 할 일이 있는데, JSON 파일이라 정렬이 불가능했습니다. 정렬은 배열일때만 가능한 점을 꼭 기억해야 합니다. 구현 순서 및 설명 1. 변수 생성 ordered라는 변수를 생성하여 정렬된 JSON을 넣을 수 있도록 합니다. 정렬되지 않은 변수는 unordered라고 하겠습니다. const unordered = { 'b.. 2020. 5. 19. 이전 1 2 3 4 5 6 7 8 ··· 11 다음
