홈페이에 사용된 이미지가 IE에서만 깨지는 현상이 발견되어 수정하였습니다.! svg 깨짐 현상의 이유는?원인은 IE 환경에서 SVG 이미지를 css의 backgroud 속성을 사용하여 size 및 position을 설정하는 경우 발생하게 됩니다. 즉 브라우저 환경에 다른 스타일이 적용되어 크로스 브라우징이 필요하게 되었습니다.! 해결방법해결한 방법은 먼저 svg 태그에 preserveAspectRatio="none slice"이라는 값을 주도록 합니다.<svg preserveAspectRatio="none slice" ....
웹페이지에 도형을 그리는 방법 중 <svg> 태그를 사용하는 방법에 대하여 알아봅니다. 어떻게하면 svg를 사용해서 원, 사각형 등의 도형을 그릴 수 있을까요?# 웹페이지에 svg태그 사용하는 방법도형을 그리기 위해서는 몇 가지 방법이 존재하며 svg를 사용하는 방법 외에도 캔버스 태그(canvas)에 자바스크립트로 그리는 방법이 있습니다. 또 다른 방법은 css를 사용하는 방법도 있습니다. 하지만 다각형이나 좀 더 높은 수준의 도형을 그리는 경우 svg가 많이 쓰이고 있습니다. 아래는 SVG를 사용하는 방법에 대하여 알아보고자 합니다.! svg ...
무료 이미지 사이트는 뭐가 있을까요? 어떤 사이트가 있는지 알아보겠습니다.# Pixabay (pixabay.com)제가 일순위로 검색하는 이미지 사이트입니다. 고퀄리티까지... 가장 좋아합니다....
svg 그리고 canvas의 장단점을 알아보려고 합니다. 제목의 범위가 너무 광범위한 것 같아 좀 더 범위를 좁혀 보자면... 웹개발이 필요한 경우 웹프론트 입장에서 svg, canvas 둘 중 하나를 사용해야 할 경우 어떤 방식을 사용하는게 좀 더 나은 선택일까요?웹퍼블리셔 및 프론트엔드 입장에서 생각해보겠습니다. 일반적인 경우 이미지 및 svg를 사용하는 것이 더 편한 방법일 것 입니다. 이유야 많겠지만 이미지나 svg 포맷은 여러 시각화 툴에서 쉽게 사용하고 다운로드 받을 수 있다는 점도 큰 이유입니다. 사실 생산성을 위해 대부분 Figma와 같은 툴의 사용이 ...
요즘은 대부분 플러그인, 컴포넌트 단위로 구현되기 때문에 웹페이지를 신규 런칭하는 경우도 예외는 아닐 것이다. 물론 모든 것을 처음부터 끝까지 개발자가 구현할 수도 있겠지만 시간과 비용을 고려했을 때 더 효과적인 방법이 구매하는 방법 또는 오픈 소스, api 활용이라면 그 방법도 고려하는 것이 좋지 않을까라고 개인적으로 생각한다.아래는 자바스크립트를 사용해 차트를 그릴 수 있는 AM CHARTS 사이트의 스크린샷이다. 이 웹사이트는 자바스크립트를 사용하여 SVG 포맷의 다양한 그래프를 손쉽게 구현할 수 있도록 도와준다. 물론 이 회사 말고도 다른 차트 라이브러리 제공...