728x90 반응형 CSS127 [SVG]svg 시작해보기3 - TEXT svg 안에 를 이용해 글자를 넣습니다. x,y 텍스트가 위치할 위치를 지정합니다. dx, dy x,y를 기준으로 이동시키는 상대좌표를 지정합니다. rotate 각 글자수 마다 회전 각도를 지정할수 있습니다. (갯수가 일치하지않으면 별도 설정값을 갖지못할 글자는 모두 마지막 설정을 갖게 됩니다 ) textLength 텍스트 길이를 설정합니다. (이 길이 값에 따라 글자간의 간격이 조정됩니다.) letter-spacing 글자 간격 조정 word-spacing 단어 간격 조정 text-decoration 글자 꾸밈 (overline / underline / line-through ..) 을 이용해 글자를 나눠서 각 글자마다 설정을 다르게 줄 수 있습니다. dy 각 tspan요소의 높이 지정 See the .. 2019. 5. 27. [SVG]svg 시작해보기2 - path 도형그리기 path를 통해 기본도형보다 더 복잡한 모양의 그림을 그릴 수 있습니다. path에 클래스를 할당해서 CSS를 적용할 수도 있습니다. See the Pen joKOqO by gahyun (@gahyun) on CodePen. 그룹으로 묶기도하고 use를 이용해 그룹을 복사해서 쓸수도 있다. See the Pen svg ai by gahyun (@gahyun) on CodePen. 2019. 5. 27. [SVG]svg 시작해보기1 - 기본도형 그리기 가장 기본적으로 svg 를 감싸는 svg태그 width 와 height 로 svg 가 보여질 영역을 정한다. xmlns - svg는 xhtml 이기때문에 지정해준다. viewbox의 값은 svg가 어디에서 보일지 x y 좌표와 width height 값을 말한다. 기본적인 도형을 그려보자 1. 사각형 그리기 (rect) x / y 시작할 x,y 좌표 rx / ry 사각형 모서리의 radius 값 width / height 사각형의 크기 fill 도형을 채울 색 stroke border 색 stroke-width border 두께 2. 원그리기 cx / xy 원의 중심 좌표 r 원의 반지름 3. 타원 cx / xy 타원의 중심 좌표 rx 타원의 가로 반지름 ry 타원의 세로 반지름 4. 선 x1 / y1 .. 2019. 5. 24. [CSS]CSS만을 이용해서 차트 그리기 [CSS] - [CSS]그라디언트를 이용해 간단하게 원형차트/도넛차트 그리기(애니메이션으로 차트그리기 ) 이전에 그라디언트를 이용해 원형 차트를 그렸었다. 이건 원형으로 그릴 수 있지만, 애니메이션 효과를 내기위해서는 스크립트를 이용해야한다.. 그럼 완전 CSS만을 이용해서 차트를 그릴 수도 있다. 하지만 반원만 가능하다.. 그려진 반원을 영역밖에 두었다가 rotateZ를 이용해 돌려서 그려지는 것처럼 보이기 때문이다. .chart-skills 의 overflow : hidden을 지워보면 어떻게 움직이는지 알 수 있다. See the Pen css - chart by gahyun (@gahyun) on CodePen. [javascript] - [자바스크립트플러그인]도넛 차트 그려주는 플러그인 2019. 5. 24. 이전 1 ··· 15 16 17 18 19 20 21 ··· 32 다음 728x90 반응형
