웹개발23 [JS, Explorer] Internet Explorer에서 html2canvas 사용하기 으아아아아아아아악 익스플로러 ㅡㅡ 익스플로러에서 html2canvas 적용이 잘 안된다. 진짜 익스플로러가 문제다....... 되는게 없다. 정말루. html2canvas를 활용해서 화면캡쳐하는 기능을 추가하였는데, 익스플로러에서만 작동을 안해서 이걸 다 고쳐야하나 했는데 다행히 방법이 있었다. 1 위 코드를 해당 페이지에 추가하면 된다. es6-promise.auto.js는 html2canvas에서 사용하는 promise 기능을 IE에서도 쓸 수 있도록 해주는 스크립트이다. 다행이다. ㅠ.ㅠ 흐헣 2019. 10. 3. [JS] 두 날짜 비교하기 자바스크립트로 두 날짜를 비교하는 방법입니다. Date 라고 부르는 날짜객체를 만들어서 비교합니다. var today = new Date(); // date의 기본값은 지금 시간! var after2Day = new Date(); after2Day.setDate(after2Day.getDate()+2); //after 2 Day = 현재날짜에서 2일 후 var prev2Day = new Date; prev2Day.setDate(prev2Day.getDate()-2); // prev 2 Day = 현재날짜에서 2일 전 //날짜비교. 날짜가 나중일수록 더 큼. 오늘보다 내일이 더 크다. 오늘 after2Day : "+(today>after2Day)); //tod.. 2019. 10. 3. [CSS] 리스트 HOVER시 효과주기 예제 : 밑줄 라인 넣기 기능 마우스를 갖다댔을 때 :after를 활용하여 선택한 아이템 밑에 라인이 그려지는 효과를 줄 수 있습니다. 아래 코드를 참고하세요! 코드 테스트 2019. 10. 3. [CSS] 말줄임 기능, text-overflow: ellipsis 이전 처음 입사했을 때 "홈페이지에 게시물제목이 길어서 화면이 깨진다, 제목이 너무 길면 말줄임표시가 뜨도록 바꿔라"라고 하신 적이 있었다. 아무것도 모르던 나는 이를 스크립트로 해결했다... 예를들어 제목 길이가 20글자 이상일 때 substring으로 잘라서 그 뒤에 "..."을 붙이는 식으로. 그런데.. CSS를 보다보니 -_- 뻘짓이었다. 말줄임표시는 CSS에서 간단하게 5줄만 써주면 구현할 수 있다. .text-ellipsis-example { width : 200px; /*원하는 길이*/ display : block; overflow : hidden; text-overflow : ellipsis; white-space : nowrap; } 코드테스트 p.s. 2~3줄짜리 말줄임표시도 CSS만으.. 2019. 10. 3. [CSS] 이미지 hover시 자연스럽게 변하도록 하는 기능 코드테스트 (만약 그림파일이 바뀌는걸 원할시 위 예제에서 img와 img-hover CSS의 background를 background-img:url("이미지주소") 로 바꾸어 쓰시면 됩니다) 작동 원리는 image-block으로 그림 크기를 잡아주고 그 안에 있는 img, img-hover를 position:absolute로 설정하여 겹쳐서 놓는다 (이 때 img-hover는 투명도(opacity)가 0이므로 안보임). 그 뒤에 hover시에 img-hover의 opacity를 1로 설정하면 끝. 예를 들어 빨간색 이미지(img) 위에 마우스를 댈 시 파란색 이미지(img-hover)가 뜨길 원할 경우 아래 그림처럼 동작한다. [ 마우스 갖다대기 전 ] [ 마우스 갖다댄 후 ] 2019. 10. 3. 소스코드에 색 입히는 사이트 https://colorscripter.com/ 여기도 좋은거 같다! 위에꺼 안열려서 급 찾아보다가 만난 사이트 오프라인용으로 받을수도 있다 2019. 10. 3. 이전 1 2 3 4 다음
