lang/front 15

Web Component 를 만드는 모든 방법 - 2021-11-18

All the Ways to Make a Web Component - Nov 2021 Update web components base libraries - @open-wc 컨텐츠용 디자인 웹컴포넌트 라이브러리 Content Component Libraries - @open-wc const template = document.createElement('template'); template.innerHTML = ` - +`; class MyCounter extends HTMLElement { constructor() { super(); this.count = 0; this.attachShadow({ mode: 'open' }); } connectedCallback() { this.shadowRoot.appe..

lang/front 2021.11.18

Transforms on SVG Elements - SVG 요소 변환

Transforms on SVG Elements - SVG 요소 변환 SVG transform 공부를 위한 구글 번역내용. 개요 IE에서 SVG 요소에 대한 CSS 변환이 작동하지 않습니다. 물론 요소에 2D 변환을 적용하기 만하면 IE 용 SVG 변환 특성 을 사용할 수있는 옵션이 있습니다. 또한 문제는 JavaScript 기능 감지가 실패한다는 것입니다 (JS를 통해 CSS 변환 값을 읽는 것은 우리가 스타일 시트에서 설정 한 변환의 행렬을 반환 할 것입니다). 그래서 우리는 IE를 검사 할 다른 방법이 필요합니다. HTML 요소와 SVG 요소에서 다르게 작동하는 주요 요소는 요소의 로컬 좌표계입니다. HTML 요소 또는 SVG 요소에 관계없이 모든 요소에는 하나의 요소 만 있습니다. HTML 요소의..

lang/front 2019.03.27

SVG animation SMIL

SMIL SVG 애니메이션 가이드(SMIL) - css-tricks.com SMIL은 죽었다! 긴 SMIL 라이브! SMIL 기능에 대한 대안 가이드 - css-tricks.com SVG - css-tricks.com W3.org Animation w3.org SMIL Animation SVG 좌표계 및 변환 이해하기 (1 부) - 뷰포트, 뷰박스 및 preserveAspectRatio SVG 좌표계와 변환의 이해 (2 부) - 변환 속성 SVG 좌표계 및 변환 이해 (3 부) - 새 뷰포트 설정 Morphing 실행 서비스 Draggable SVG elements HTML 드래그 앤 드롭 API HOW TO USE HTML5’S DRAG AND DROP - not support SVN drga API ..

lang/front 2019.03.26

이미지 최적화.... 뭐가 이래 복잡해..

이미지 최적화 srcset 및 picture 이미지 최적화 이미지 제거 및 바꾸기 불필요한 이미지 리소스 제거 가능한 경우 CSS3 효과 활용 이미지에서 인코딩 텍스트 대신 웹 글꼴 사용 고해상도 화면의 영향 벡터이미지를 추천. 래스터 이미지를 사용해야한다면 srcset 및 picture를 사용하여 각 이미지에 대한 여러 버전을 제공하고 최적화. 압축이미지 압축 이미지 기법은 기기의 실제 성능에 상관없이 높은 압축율의 2x 이미지를 모든 기기에 제공. 이미지 유형과 압축 수준에 따라 파일 크기가 상당히 줄어들지만 화질은 별차이가 없어 보일 수 있다. Caution 압축 기법 사용 시 메모리가 늘어나고 디코딩 비용이 필요하므로 주의하세요. 작은 화면에 맞게 큰 이미지의 크기를 조정하는 것은 비용이 많이 들..

lang/front 2018.08.16

Summernote WISWIG Editor

Summernote - Super Simple WYSIWYG editor Initialization options 초기화 옵션 Installation Get Summernote에서 다운로드 하거나 github.com/summernote/summernoet Project master.zip을 다운로드 한다. Require HTML5 doctype 이어야 한다. ... Include CSS, JS CDN을 이용해서 설치 가능하다. Enable Hello Summernote Hello Summernote $(document).ready(function() { $('#summernote').summernote(); $('.summernote').summernote(); }); Bootstrap4 Without ..

lang/front 2018.07.12

IE7 파비콘 설정후 적용되지 않을 경우는?

참고 http://leegh.com/2693518 IE7 파비콘 설정후 적용되지 않을 경우는? 16x16 크기의 파비콘을 표현하는데 문제가 생겼습니다. IE7에서는 bmp화일만을 인식. IE7의 코드에 맞는 그림파일을 ico파일로 변환!!. 만약 파비콘을 올리셨는데 파이어폭스에서는 파비콘이 나타나고 IE7에서는 나타나지 않는다면 그 이유는 이 코드가 맞지 않기 때문입니다. 한번에 해결하는 방법은 포샵 플러그인 중에 ico로 저장해주는 플러그인 사용. 포샵으로 만든 ico는 IE코드에 맞게 생성됩니다. bmp에서 변환된 ico는 bmp가 투명배경이 안되기 때문에 뒤에 흰색의 여백이 남습니다. 하지만 투명배경의 이미지를 만들어 놓고 포샵에서 ico로 저장하면 투명배경이 그대로 유지됩니다. 플러그인 다운

lang/front 2009.01.07
반응형