본문 바로가기
728x90
300x250
SMALL

Front-end313

svg 선그리기 SVG로 선을 그리기 위해서는 line요소를 사용한다. x1 : 선의 시작점 x축 y1 : 선의 시작점의 y축 x2 : 선의 끝점의 x축 y2 : 선의 끝점의 y축 출처 : https://www.w3schools.com/graphics/svg_line.asp 2022. 2. 4.
css 마우스 오버 효과 - 카드 뒤집기 마우스 오버 효과 - 카드 뒤집기 마우스를 hover 했을때 플립이펙트라고 하는 카드 뒤집어 지는 효과를 주기위해서 아래 사이트를 참고 했습니다. http://gudh.github.io/ihover/dist/index.html http://gudh.github.io/ihover/dist/index.html Note: This will not work in IE9, since IE9 doesn't support 3d rotate. gudh.github.io 링크 타고 들어가면 다양한 효과를 볼 수 있는데요 다양한 효과들 중에서 Hover effect11번을 참고해서 만들어 보겠습니다. 제일 마지막 메뉴의 How to use is?을 클릭하면 사용방법이 나옵니다. HTML 마크업을 하고 ihover.css만.. 2022. 2. 3.
chart.js 누적 막대 그래프 만들기 (+ 데이터 변수 적용) 위에 막대그래프를 누적막대그래프로 만들기 전에 const ctx = $('#test-chart'); const myChart = new Chart(ctx, { type:'bar', data:{ labels:['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets:[ { label:'2021', data:[10,8,6,5,12,7], backgroundColor:'rgba(203,206,145,.5)', borderColor:'#CBCE91', borderWidth:1 }, { label:'2020', data:[5,10,5,3,4,2], backgroundColor:'rgba(203,206,145,.5)', borderColor:'#CBCE91'.. 2022. 2. 2.
svg 직사각형 <rect> 직사각형을 만들기 위해서는 rect를 사용합니다. 위에 예시를 찬찬히 살펴 보면 width, height 속성 : 넓이와 높이 값 지정 style 속성 : css 속성 정의 fill속성 : 채우기 색상 stroke-wiidth : 테두리 너비 strock : 테두리 색상 출처 https://www.w3schools.com/graphics/svg_rect.asp 2022. 2. 1.
728x90
반응형
LIST

티스토리툴바