목록소스 팁/HTML, Java Script, jQuery, CSS (17)
인디노트
new fullpage('#fullpage', { //이동 menu: '#menu', lockAnchors: false, anchors:['firstPage', 'secondPage'], navigation: false, navigationPosition: 'right', navigationTooltips: ['firstSlide', 'secondSlide'], showActiveTooltip: false, slidesNavigation: false, slidesNavPosition: 'bottom', //스크롤 css3: true, scrollingSpeed: 700, autoScrolling: true, fitToSection: true, fitToSectionDelay: 1000, scrollBar..
https://github.com/jankovicsandras/imagetracerjs jankovicsandras/imagetracerjs Simple raster image tracer and vectorizer written in JavaScript. - jankovicsandras/imagetracerjs github.com https://www.npmjs.com/package/imagetracerjs imagetracerjs raster image tracer and vectorizer, bitmap to SVG converter www.npmjs.com appres 에 적용해봐야겠습니다.
/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */ @media (min-width: 1281px) { } /* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */ @media (min-width: 1025px) and (max-width: 1280px) { } /* ##Device = Tablets, Ipads (portrait), ##Screen = B/w 768px to 1024px */ @media (min-width: 768px) and (max-width: 1024px) { } /* ##Device = Tablets, Ipads (landscape) #..
tr:nth-child(odd) 또는 tr:nth-child(2n+1) HTML 표의 홀수번째 행을 나타냅니다. tr:nth-child(even) 또는 tr:nth-child(2n) HTML 표의 짝수번째 행을 나타냅니다. :nth-child(7) 임의의 7번째 요소를 나타냅니다. :nth-child(5n) 5 [=5×1], 10 [=5×2], 15 [=5×3], ... 번째의 요소를 나타냅니다. 패턴 공식을 만족하는 첫 번째 값은 0 [=5x0]으로서 아무 요소도 선택하지 않는데, 요소의 인덱스는 1부터 시작하지만 n은 0부터 증가하기 때문입니다. 다소 의아할 수 있으나, 바로 아래 예제처럼 공식의 B 부분이 >0인 경우 보다 납득하기 쉬워집니다. :nth-child(n+7) 7번째와 그 이후의 모든 ..
웹을 디자인(개발?) 하다 보면 레이아웃을 잡기 위해서 외곽 (border) 를 임시로 설정하는 경우가 많습니다. 하지만 외곽을 주면 그 보더의 두께에 따라서 영역이 커집니다. 예를 들어 100% 짜리 폭의 div 에 border 를 1px 주면 (브라우저에 따라서 다르지만) 원하지 않던 스크롤바가 생기게 되죠. 그래서 전체 레이아웃에 오차가 발생될 수 있고 약간의 짜증이 나기도 합니다. 이럴때는 안쪽 테두리를 주는게 레이아웃에 더 합리적입니다. 예를 들어서 다음과 같이 모든 div 에 보더를 주는데 영역을 안쪽으로 주는 방법입니다. div { border: #f00 3px solid; box-sizing: border-box; } 다음은 영역 안쪽의 그림자를 주는 방식입니다. 예를 들어서 다음과 같이 ..
아래 사이트 참조 velog.io/@devoks/%EB%8B%A4%EA%B5%AD%EC%96%B4-%EB%A6%AC%EC%86%8C%EC%8A%A4-%EA%B4%80%EB%A6%AC%EC%86%94%EB%A3%A8%EC%85%98 소프트웨어 다국어 리소스 관리솔루션(Localization Management) 현 클라이언트(안드로이드/iOS) 다국어 스트링 리소스의 효율적 관리를 위함.앱 서비스가 글로벌 출시 서비스일 경우 각 언어에 대한 지원 작업(현지화된언어표현,UI영향도파악등) 중요하고, 지 velog.io
// base64 인코딩 var base64EncodedStr = btoa(unescape(encodeURIComponent(res.data))); // 인코딩된 것을 디코딩한 후 다시 인코딩 해보기 var b = atob(base64EncodedStr); var base64EncodedStr = btoa(res.data); console.log(base64EncodedStr); // base64 이미지 넣기 (Angular) this.image = this.sanitizer.bypassSecurityTrustResourceUrl("data:image/png;base64," + base64EncodedStr); // 이런 방식으로도... var reader = new FileReader; reader.o..
jsp 에서 JSTL 의 출력에 있어서 ${msg} 와 같은 출력이 값이 표시되지 않고 그냥 ${msg} 로 될때. 만 추가하면 된다. 휴~~~ DOCTYPE html> Insert title here Spring MVC web service Return Message : Return Message :
출처 : https://meetup.toast.com/posts/157 본 시리즈의 이전 아티클에서는 웹팩4에 대해 다루면서 바로 쓸 수 있는 환경을 만들어봤다. 이번편에는 그 환경 그대로 이용해 ES6 개발 환경을 추가한다. ES6는 이제 충분히 써도 될만한 시기라고 생각한다. "나는 프런트 개발자가 아니기도 하고 브라우저가 모두 지원하지도 않기에 ES6는 아직 못쓴다" 라고 생각하고 있다면 이 글을 통해 생각을 바꿀 수 있길 바란다. 어차피 쓰는 거 ES6뿐 아니라 ES8까지 사용하는 것을 권장한다. IE11 이하 버전들은 ES6나 이후에 대한 고려가 거의 없지만 엣지(MS Edge)를 포함한 모든 모던 브라우저들은 네이티브로 ES8(ECMAScript2017)의 대부분의 스펙을 지원한다.(실용적인 ..
퍼옴 : https://blog.aliencube.org/ko/2014/01/02/reasons-behind-using-strict-mode-while-coding-javascript/ 자바스크립트에서 strict mode를 사용해야 하는 이유이 포스트는 Stack Overflow의 What does “use strict” do in JavaScript, and what is the reasoning behind it?의 질문과 답변을 번역한 내용입니다.자바스크립트에서 use strict는 뭘 하는 것이고, 왜 그걸 써야 하나요?질문:최근에 내가 짰던 자바스크립트 코드를 크록포드의 JSLint를 통해 실행시켰더니 아래와 같은 에러가 나타났습니다:Problem at line 1 character 1: Mi..