티스토리

Blue Breeze
검색하기

블로그 홈

Blue Breeze

bluebreeze.co.kr/m

C.H가 끄적이는 개발자 로그

구독자
0
방명록 방문하기
공지 티스토리 반응형 디자인 적용 모두보기

주요 글 목록

  • 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.. 공감수 4 댓글수 0 2021. 11. 18.
  • SVG, HTML transform differnce https://bluebreeze.co.kr/1387?category=571402 - transforms on SVG Elements - SVG 요소 변환 공감수 1 댓글수 0 2019. 3. 29.
  • SVG transform Example Transforms on SVG Elements - SVG 요소 변환 공감수 1 댓글수 0 2019. 3. 28.
  • 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 요소의.. 공감수 3 댓글수 0 2019. 3. 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 .. 공감수 1 댓글수 0 2019. 3. 26.
  • scroll down fadein . element on jquery 공감수 1 댓글수 0 2019. 3. 21.
  • 이미지 최적화.... 뭐가 이래 복잡해.. 이미지 최적화 srcset 및 picture 이미지 최적화 이미지 제거 및 바꾸기 불필요한 이미지 리소스 제거 가능한 경우 CSS3 효과 활용 이미지에서 인코딩 텍스트 대신 웹 글꼴 사용 고해상도 화면의 영향 벡터이미지를 추천. 래스터 이미지를 사용해야한다면 srcset 및 picture를 사용하여 각 이미지에 대한 여러 버전을 제공하고 최적화. 압축이미지 압축 이미지 기법은 기기의 실제 성능에 상관없이 높은 압축율의 2x 이미지를 모든 기기에 제공. 이미지 유형과 압축 수준에 따라 파일 크기가 상당히 줄어들지만 화질은 별차이가 없어 보일 수 있다. Caution 압축 기법 사용 시 메모리가 늘어나고 디코딩 비용이 필요하므로 주의하세요. 작은 화면에 맞게 큰 이미지의 크기를 조정하는 것은 비용이 많이 들.. 공감수 1 댓글수 0 2018. 8. 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 .. 공감수 3 댓글수 0 2018. 7. 12.
  • Web application TEST 웹 애플리케이션 Acceptance Test : Selenium Selenium Core 공감수 0 댓글수 0 2012. 1. 17.
  • IE7 파비콘 설정후 적용되지 않을 경우는? 참고 http://leegh.com/2693518 IE7 파비콘 설정후 적용되지 않을 경우는? 16x16 크기의 파비콘을 표현하는데 문제가 생겼습니다. IE7에서는 bmp화일만을 인식. IE7의 코드에 맞는 그림파일을 ico파일로 변환!!. 만약 파비콘을 올리셨는데 파이어폭스에서는 파비콘이 나타나고 IE7에서는 나타나지 않는다면 그 이유는 이 코드가 맞지 않기 때문입니다. 한번에 해결하는 방법은 포샵 플러그인 중에 ico로 저장해주는 플러그인 사용. 포샵으로 만든 ico는 IE코드에 맞게 생성됩니다. bmp에서 변환된 ico는 bmp가 투명배경이 안되기 때문에 뒤에 흰색의 여백이 남습니다. 하지만 투명배경의 이미지를 만들어 놓고 포샵에서 ico로 저장하면 투명배경이 그대로 유지됩니다. 플러그인 다운 공감수 0 댓글수 0 2009. 1. 7.
  • css, javascript 최적화 Tool 1. JavaScript 최적화 도구 JS Minifier JSMin JSLint : JavaScript Verifier Javascript compressor : JavaScript 압축 도구 CSS & JavaScript Compressor : CSS & JavaScript 압축 도구 ShrinkSafe : JavaScript 압축 도구 Huffman JavaScript Compression SOC (Safe Obfuscator/Compressor) ANT 프로젝트 구축으로 로컬에서 자유자제로 JavaScript 압축 : 여기 2. CSS 최적화 도구 CSS OPTIMIZER : CSS파일의 사이즈를 압출해주는 툴 CSS compressor : CSS 압축기 ROBSON CSS COMPRESSOR :.. 공감수 0 댓글수 0 2008. 9. 11.
  • Prototype.js를 제대로 사용하는 방법 id로 특정 요소 가져오기[#1] 이전의 방법 document.getElementById('foo') 추천하는 방법 $('foo') 폼 컨트롤러의 값을 가져오기[#2] var woot = document.getElementById('bar').value var woot = $('bar').value 추천하는 방법 var woot = $F('bar') 스타일 변경하기[#3] 이전의 방법 $('footer').style.height = '100px'; $('footer').style.background = '#ffc'; 추천하는 방법 $('footer').setStyle({ height: '100px', background: '#ffc' }) html 내용 변경하기[#4] 이전의 방법 $('coolestWi.. 공감수 0 댓글수 0 2008. 8. 31.
  • IE용 웹 개발 도구 DebugBar 개발을 하면서 물론 이런 툴바를 잘 사용하진 않지만... 이런것 웬지 개인적인 궁금증과 작다(?)라는것 때문에 내 감성을 자극하는 것 같다. 올라온 스샷을 보니 IE Developer Toolbar보다 기능이 좋아 보이긴 하는데... 사용을 해보면 답이 나오겠지... 공감수 0 댓글수 0 2007. 11. 19.
  • Fiddler Request, Reponse 분석 Fiddler는 이 HTTP Request/Response 정보를 볼 수 있게 해주는 아주 유용한 툴이다. http://www.fiddlertool.com/fiddler/ 에서 다운로드받을 수 있다. NetMon 등을 통하면 물론 그 컴퓨터의 모든 네트워크 트래픽을 모니터링 할 수가 있지만, 이 Fiddler는 인터넷 프로토콜만을 모니터링해주기 때문에 웹 개발자들에게 아주 유용하다. 웹개발에 있어서 도움이 될만한 프로그램이다. 다운로드 : http://www.fiddlertool.com/dl/FiddlerSetup.exe 출처 : http://w3.kunsan.ac.kr/~leliel/blog/tb.php?tb_id=40 출처 : http://lazydeveloper.net/trackback/2494393 공감수 0 댓글수 0 2007. 2. 9.
  • IE Developer Toolbar IE 에서 사용하는 DOM 검사툴 출처 : http://qaos.com/article.php?sid=2048 홈페이지 : http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en 공감수 0 댓글수 1 2007. 2. 6.
    반응형
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.