Web/HTML,CSS,JS
[html] Canvas로 특정 영역 스샷하기 html파일이 render가 된 상태인 브라우저에서 보이는 화면을 캡쳐를 해야해는 경우가 있어 알아본 결과. html2canvas를 사용하여 특정 div나 canvas (html에서 그림을 그릴 수 있게 해주는) 태그에 id를 달아놓고 div나 canvas를 스크린샷하여 이미지로 저장을 할 수 있는 방법이 있었습니다. 일단 바로 예제코드 Screen! 스샷! 실행결과 스샷 버튼을 누르기 전 스샷 버튼을 한번 눌렀을때 위에서 볼 수 있듯이 스샷! 버튼을 한번 누르면 아래 'img'라는 id가 달린 div에 위의 Screen!이 쓰여 있는 div를 스샷해서 이미지로 띄워주는 것을 확인할 수 있습니다. 마무리하며 일단은 이렇게 html상의 특정영역을..
[JQuery] modal 만들기 브라우저의 옵션을 이용해 사용하지 않을 수 있는 팝업창과는 다르게 모달창은 기능상 반드시 노출을 시켜야하는 경우에 사용할 수 있다는 점에서 장점이 있다. jQuery를 사용하면 쉽게 modal을 만들어낼 수 있다. 사용법 위의 코드를 사이에 넣어주면 jQuery와 jQuery의 modal을 사용할 준비가 끝난다. 같은 html상에 있는 코드를 modal에 띄우기 떴다~ 떴다~ 모달창! 닫기 모달창 띄우기 외부의 html파일을 modal에 띄우기 다른 html을 모달로! 이건 ex.html입니다~ 닫기 참고자료 [https://jquerymodal.com/?](
[JQuery] 동적으로 버튼을 누르면 html에 태그 추가 및 삭제 저의 경우 기존의 input tag들이 있는데 상황에 따라 input tag가 더 필요한 경우 추가를 해야하는 경우를 만들어야 했다. 그래서 검색을 통해 JQuery를 이용하여 html에 tag를 동적으로 추가할 수 있는 방법을 찾았다. tag추가하기 위의 코드를 활용하면 원하는대로 원하는 div에 html상에 tag를 동적으로 만들 수 있다. ex)
[JQuery] 여러 input값을 배열로 view로 넘기기 {% for test in tests %} {% endfor %}위와 같은 상황에서는 test1이라는 input이 몇개가 될지 모른다. 그런데 이것들을 django의 view로 넘겨서 배열로 처리를 하고싶어 알아보니 jquery를 사용해 배열로 만들고 그 배열을 hidden으로 넘겨주는 방법을 생각해냈다. 따라서 아래와 같은 코드로 해결을 했다. {% csrf_token %} {% for test in tests %} {% endfor %} 위의 코드를 간략히 설명하면 onclick 옵션을 사용하여 form에서 submit이 눌렸을때 list라는 배열을 만들어 name이 'test1'인 input타입들의 value들을 list에 ..
Geolocation 프로젝트를 진행중 현재위치를 불러와야하는 기능이 필요해서 찾아 본 결과 Html5에서 geolocation이라는 api가 있었고 이 api를 사용하여 GPS, Wi-Fi, 휴대전화의 기지국, IP 등을 통해서 위치 정보를 알아낼 수 있었습니다. navigator.geolocation.getCurrentPosition() - 사용자의 현재위치를 요청할 수 있고 navigator.geolocation.watchPosition() - 사용자의 위치를 지속적으로 확인해서 위치가 변경될 때마다 지정된 콜백함수를 호출해줄 수 있고 navigator.geolocation.clearWatch() - 위치 정보를 수집하는 작업을 중단할 수 있습니다. 우선 아주 간단한 Geolocation 사용법을 ..
