용테크

차트의 카테고리필드에 애니메이션을 넣어보았다. 카데고리별로 지정된 색상이 있으며, 색상 선이 애니메이션으로 그어지는 방식이다. 차트는 SVG TAG로 구성되어있으며 text필드에 접근하기위하여 JQuery를 사용하였다. Javascript 각각의 라인을 Class를 추가한 후 g tag로 묶어 차트의 html에 붙여넣는 방식을 사용하였다. 이때 카테고리 필드의 텍스트 문자의 크기가 미세하게 다름으로 분기처리하여 라인의 길이를 정해준다. 변수 siteColor 는 색상을 담고있는 배열이다. function drawLine() { var svg = document.querySelector('div.chartEmpty svg'); var gTag = svg.querySelector('g'); var textT..

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어난다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어난다. opacity: 1.0; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; -ms-transition: background 0.5s li..

Client(Javascript) div태그로 video player가 삽입될 공간을 만들어준다. 호출하는 url에 따라 호출할 비지니스 로직 및 파라미터 설정. 1. 에서 생성한 div의 attr값에 매핑. var a = $('div[ux-name="videoPlayer"]'); a.html(''); var oplSrc = ''; if (window.location.href.includes('#')) { oplSrc = window.location.href.slice(0, -1) + "do?r=StreamingResponse&file_id=" + fileID + "&file_name=" + fileName + "&userId=cc&token=dd&file_path=" + filePath; } else ..