개발 일지

[개요] 반시계 방향으로 도넛차트가 줄어드는 함수 구현하기 [방법] conic-gradient라는 css 속성을 활용 setInterval( ) 함수로 일정시간 동안 타이머처럼 원의 영역이 줄어들도록 구현함 1. conic-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient conic-gradient() - CSS: Cascading Style Sheets | MDN The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather t..

:root, documentElement.style.setProperty 다음 메서드를 사용하여 CSS 변수의 값을 설정할 수 있다. document .documentElement .style .setProperty(--css-variable-name, value) document.documentElement.style.getPropertyValue("--main-color") -> red document.documentElement.style.setProperty("--main-color", "blue") document.documentElement.style.getPropertyValue("--main-color") -> blue 출처 : https://ichi.pro/ko/tema-react-gus..

1. 모바일 웹 구현시 이미지 파일의 이해 SVG : ✔ 확장 가능한 벡터 그래픽(Scalable Vector Graphics). ✔ 그래픽을 마크업 하기 위한 xml의 일종의 형식. ✔ 벡터 기반의 형식이므로 크기를 조절했을 때 해상도가 깨지지 않는 장점이 있음 ✔ HTML, CSS, JS와 함께 동작 가능하다는 점 📍 로고 또는 단순화 이미지에 활용 2. 모바일 웹 화면 크기 보통 이미지 시안을 잡게 되면 모바일은 다음의 모바일 크기에 최적화된 이미지를 제작한다. 화면크기 최소크기 320px 보편적 크기 360px wide하게 잡은 크기 400px 시안(× 2배) 640px 720px 800px 📍 웹 pc 화면에서 구현되는 이미지는 모바일에서는 굉장히 wide하게 보일 것이다. 따라서 모바일 siz..