음악, 삶, 개발

앞서 일러스트레이서 만든 SVG 를 VSCode 로 Copy & Paste 하면 코드가 된다고 하였다. 하지만 꽤나 지저분해보이며, 쓸데없는 코드를 일일히 지워야하는 수고가 있다. 이를 해결해주는 사이트가 있다. jakearchibald.github.io/svgomg/ VSCode 에 복붙하기전에, 위 사이트에 붙여넣기를 하면 쑬데없는 코드를 지워주고, path 또한 간결하게 만들수있어서, 최종 용량이 줄어준다. 한가지 기억해야할것은, 이 사이트를 이용시 polygon 이 path 로 변환된다. style 링을 css 에서 할거라면, style 태그또한 삭제할수있다.

일러스트레이서의 Stroke 패널의 Align Stroke 메뉴는, Stroke 를 중심을 기준으로 커지게할지 (Center), 안쪽으로 커지게할지 (Inside), 바깥쪽으로 커지게할지 결정할수있다 (Outside). 이 기능을 사용할때 주의할점은 SVG 코드로 뽑아냈을때, polygon 인지 path 인지 달라진다는것이다. Align Stroke to Center : Align Stroke to Inside : Align Stroke to Outside : 위의 결과는 VSCode 에 각각을 붙여넣기해보면 확인할수있다. Align Stroke to Center 일때. Align Stroke to Inside 일때. Inside 나 Outside 는 결국 가운데가 뚤려있다. 따라서 보다시피 path 가..

MDN : preserveAspectRatio stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container 복잡한 모양을 순수 CSS 에서 만들어내는것은 꽤나 고통스러운일이다. 따라서 SVG 를 HTML 에서 사용하는 방법을 다루어보고자한다. 나는 Vue 를 사용하고있기때문에, Vue 에서 사용법을 다루겠다. 1. 일러스트레이터에서 Cmd + C (복사) ---> VSCode 에서 Cmd + V (붙여넣기) 위와 같이 일러스트레이터에서 VScode 로 복사 붙여넣기를 할수있다. 이때 중요한것은 독립된 .vue 파일을 만들고 안에 붙여넣기하는것이다. 2. svg 안에 style 태그안에 내..

stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter box-shadow 속성은 매우 비싼 속성이므로, box-shadow 자체에 바로 애니메이션을 걸어버리면 성능 저하가 발생할수있다. 따라서 ::before 와 ::after 에 미리 box-shadow 를 만들어놓고, 마우스가 hover 할때만 opacity 를 1로 주는것이 효과적이다. ::before 와 ::after 가 햇깔리는데 아래와 같은 문법이다. div {} div::before {} div:hover::before {} div::after {} div:hover::after {} 주의할것은, div::after:hove..

developer.mozilla.org/en-US/docs/Web/CSS/filter css-tricks.com/almanac/properties/f/filter/ CSS 에는 해당 요소에 먹일수있는 filter 속성이 있다. 이 filter 의 파라미터들은 라이트룸에서 사용하는것과 동일하다고 생각하며 된다. 하나씩 살펴보자. div { filter: blur(50px); } div { filter: brightness(0.5); } brightness 는 0 이 되면 검정색이 되고, 1이 되면 background-color 색이 된다. div { filter: contrast(50%); } contrast 는 사진 보정할때 contrast 를 생각하면 된다. constrast 값 10..

wit.nts-corp.com/2017/06/05/4571

바로 코드를 보자. 원리는 6개의 div 를 만들어서 각 면을 css 로 만들어준다. 이때 사용하는것이 transform 의 rotate 와 translateZ 다. 그 다음 이 6개의 div 를 묶어주는 .cube 란 div 를 transform 으로 다시 회전시킨다. 이때 중요한것은, .cube 안에 transform-style 이 preserve-3d 여야한다. 또한 pespective 속성은 .parent 로 가거나, .cube 에 갈수잇는데, .cube 를 회전시킬것이기때문에, .parent 에 가는게 맞다.

.parent-setting { perspective : 1000px; } .child-setting { animation : flip 1.5s infinite linear normal; } @keyframes flip { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); } }

CSS 에서 @keyframes 속성을 정의하면 위와 같이 애니메이션을 만들어낼수있다. 이 애니메이션은 css 속성들의 특정한 시간안에 전환 + 반복이다. @keyframes 속성을 활용하는것은 mouse 와 JS 를 통해 연동하기전에, 무언가를 프로토타이핑하기에도 유용하다. @keyframes 를 정의하는 방법은 2가지가 있다. 먼저 시작과 끝을 정하는 방법이다. @keyframes 내가정하는애니메이션명 { from { /* 시작점의 여러 속성 값들 */ } to { /* 끝점의 여러 속성 값들 */ } } 만약 여러 단계의 애니메이션을 가지고싶다면 아래와 같이 정의한다. @keyframes 내가정하는애니메이션명 { 0% { /* 시간의 0% 에서 일어날 일 */ } 50% { /* 시간의 50% 에서..

/* sketch.js */ let mousePositions = [] const MAX_POS = 100 function setup() { createCanvas(500, 500) } function draw() { background('tomato') ellipse(mouseX, mouseY, 50, 50) mousePositions.push({x: mouseX, y: mouseY}) if (mousePositions.length > MAX_POS) mousePositions.shift() for (let i = 0; i < mousePositions.length; ++i) { ellipse(mousePositions[i].x, mousePositions[i].y, i, i) } }