반응형 Development49 javascirpt 기초(1/2) 아주 기초적인 JS, 자주 쓰이는 것들, 생각이 번뜩 안날 때 검색해서 찾아보자 function changeImage() { var image = document.getElementById('');if(image.src.match('filled')){ image.src = "~empty.png"; image.style.opacity = 1.0;}else{ image.src = "~filled.png";}}document.getElementById("").innerHTML = text; window.alert() document.write() 로 html로 출력하는 방법innerHTMLconsole.log() 로 콘솔에 출력 상수 Literals 변수 Variables 연산자=== 값도 같고 자료형도 같다.. 2017. 10. 30. CSS 기초 아주 기초적인 CSS, 자주 쓰이는 것들, 생각이 번뜩 안날 때 검색해서 찾아보자 Selectorid: #class: . div.class#idtag 여러 태그에 적용h2,h5{font-size:10px;} Backgoroundblue #0000ff rgb(0,0,255)background-image 속성 background-repeat: repeat-x; no-repeat; background-position: right bottom; Borderborder-style: dotted; dashed; solid; double; 이중선 inset; 들어간3차원 outset; 돌출된 3차원 none; hidden;border-color: green;border: 1px dashed blue; 한줄로 표현 M.. 2017. 9. 13. HTML5 기초 아주 기초적인 HTML5, 자주 쓰이는 것들, 생각이 번뜩 안날 때 검색해서 찾아보자 Elements 새창 띄우기 보이는 대로 줄바꿈 style="font-family:'맑은 고딕','Malgun Gothic',verdana;"style="text-align:center" => 강조된 글자 => 형광색 취소선 아래첨자 위첨자 인용문 블록형태로 문단 들여쓰기 표시 인용문 이미지 제목등 표시 약간 기울어짐 오른쪽에서 왼쪽으로 글짜 방향 바꿈 키보드 고정된 글자크기와 간격으로 표현 - 프로그래밍 코드 표시 등 프로그래밍 결과 표시 프로그래밍 코드 표시 이렇게 사용 권장 수식및 변수 표현 기울어짐 Comments CSS Cascading Style Sheets- inline 태그내에 속성- internal 특수.. 2017. 9. 7. Interactive General Update Pattern Interactive General Update Pattern d3.js를 사용하면서 data에 의해 interactive하게 움직이는 모습을 보려면Enter, Exit, Update 패턴이 중요하다. 코드 중 계속해서 호출되며 반복적으로 그리는 함수 내에.data()로 묶여 있는 enter와 update가 있을 경우 enter는 처음 나타난 데이터 셋에 대해서update는 기존의 데이터와 동일한 데이터 셋에 대해서exit는 기존의 데이터에서 사라진 데이터 셋에 대해서각각 transition을 넣을 수 있도록 패턴화 했다. 아래와 같은 패턴을 이용하면 적재적소에 transition을 넣을 수 있는 가독성이 확실히 좋아진다. function plot(data){var update = svg.selectAl.. 2017. 9. 4. D3.js에서 svg 사용하기 SVG(Scalable Vector Graphics): 2차원 벡터 그래픽을 표현하기 위한 XML-based image format왜 SVG인가?SVG를 사용하는 것은SVG기반의 전문 그래픽 프로그램에서 나온 산출물을 그대로 활용할 수 있다검색화, 목록화, 스크립트화가 가능하고, 필요하면 압축도 가능하다확대/축소시 퍼짐 현상이 없고 품질의 손상이 없다D3에서 SVG를 사용하는 것은브라우저에 상관없이 일관적이다 (div 등의 html 엘리먼트로 차트 또는 그래프를 그릴 경우 투박하고 브라우저에 따라 불일치할 수 있음)믿을만 하다빠르다 Canvas와 SVG의 비교.CanvasSVG비트맵 그래픽을 표현해상도에 의존이벤트 핸들러에 대한 지원 없음텍스트 렌더링 기능 미약canvas 확대 보기 한 경우 XML 형식.. 2017. 4. 24. D3.js 개요 및 핵심 정리 왜 D3인가?Data-Driven Documents 삼디, 디삼, 디쓰리! D3.js BSD License : 소스 공개 의무 없음 BSD License 일반적이지 않은 다양한 Chart, Data Visualization 라이브러리 D3 Gallery Smooth한 Transition과 Interactive 구현 D3 Gallery - Interaction Sites.https://d3js.org/ D3 다운로드 d3.ziphttps://github.com/d3 How to use.index.html또는https://code.jquery.com/jquery-3.2.1.min.js">https://d3js.org/d3.v4.min.js"> D3 핵심#Selections : HTML DOM element를.. 2017. 4. 24. p5.particle.js 2d 오브젝트의 파티클 라이브러리 p5.particle.js 2d 오브젝트의 파티클 라이브러리 [다운로드] http://p5js.org/download/ (p5.js, p5.min.js)https://github.com/bobcgausa/cook-js/blob/master/p5.particle.js (p5.particle.js) [particle.ejs]hello [particle.js]var defs;var of;var t;var s="ABCDEFGHIJKLMNOPQRSTUVWXYZ";var s1 = "안녕 파티클 나는 너를 사용해 볼생각이야"; function ftext(fountain, particle) { stroke(fountain.colors[Math.floor(particle.life*fountain.colors.length.. 2017. 4. 20. Scatter (svg) 그래프 그리기, Transition Scatter (svg) 그래프 그리기, Transition [다운로드]http://d3js.org/download/ (d3.js)http://jquery.com/ (jquery.js) [index.html]add dataremove data 2017. 4. 20. D3.js 바 그래프 그리기(svg), 데이터 수정 D3.js 바 그래프 그리기(svg), 데이터 수정 svg : Scalable Vector Graphics [다운로드]http://d3js.org/download/ (d3.js)http://jquery.com/ (jquery.js) [index.html]add dataremove datachange data [d3sample.js]// Your beautiful D3 code will go herevar dataset = [ 1, 2, 3, 4, 5 ]; var targetSVG;var w = 300;var h = 300;var barPadding = 2; $(document).ready(function () { targetSVG = d3.select("#svgdemo") .append("svg") .a.. 2017. 4. 12. 이전 1 2 3 4 5 6 다음 반응형
