❤ Todo
💡 면접 질문 4개
💡 폴더 및 파일 정리 ✔
💻 SVG 마스터 소스코드 파일 공부 ✔
📗 리액트를 다루는 기술 - 블로그 만들기
❤ Error & Solution
❤ What I learned
SVG viewBox
<!-- viewBox= x위치, y위치, 가로크기, 세로크기 -->
<!-- viewBox 크기에 상대적으로 변경 -->
<svg viewBox="0 0 500 500">
<rect x="0" y="0" width="100" height="100"></rect>
</svg>SVG 압축 프로그램
SVG fill, stroke, stroke-width
SVG 안에 style태그 넣기
svg태그 안에 style태그도 넣을 수 있지만 script태그도 넣을 수 있다.
<svg class="face" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 571 625.5">
<style>
<![CDATA[
....
]]>
</style>
</svg>SVG 기본 도형 그리기
데이터 시각화를 할 때는 기본 도형들을 사용하기 때문에 알아 둘 필요가 있다.
<svg class="shapes">
<rect x="10" y="20" width="200" height="100" fill="red"></rect>
<!-- radius x, radius y -->
<rect x="50" y="170" rx="10" ry="10" width="100" height="100"></rect>
<!-- center x, center y, radius -->
<circle cx="350" cy="250" r="30"></circle>
<ellipse cx="200" cy="200" rx="100" ry="50" fill="red" stroke="green" stroke-width="20"></ellipse>
<!-- x1 start, x2 end, y1 start, y2 end -->
<line x1="10" x2="400" y1="30" y2="300" stroke="blue"></line>
<!-- <polyline points="0 0, 200 100, 150 300" stroke="red" stroke-width="10"></polyline> -->
<polygon points="0 0, 200 100, 150 300" stroke="red" stroke-width="10"></polygon>
</svg>SVG path태그
<svg class="shapes" xmlns="http://www.w3.org/2000/svg">
<!--
어떠한 모양도 가능
1. 처음 위치 M x y
2. 선 긋기 L x y
3. 수평 직선 H
4. 수직 직선 V
5. 마무리 Z
6. 곡선 C
-->
<path d="M 300 200 L 500 100 H 50 V 300 Z"></path>
</svg>SVG group
<svg class="shapes">
<g class="group-1">
<rect x="10" y="20" width="200" height="100"></rect>
<rect x="50" y="170" rx="10" ry="10" width="100" height="100"></rect>
</g>
<circle cx="350" cy="350" r="30"></circle>
<ellipse cx="400" cy="200" rx="100" ry="50"></ellipse>
</svg>SVG text와 defs
<svg class="svg" xmlns="http://www.w3.org/2000/svg">
<!-- x위치 y위치 -->
<text x="20" y="50">Hello, SVG!</text>
</svg>
<svg class="svg" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="text-curve" d="M 50 400 C 50 400, 300 500, 400 400
C 400 400, 600 170, 700 300"></path>
</defs>
<text x="20" y="50">
<textPath href="#text-curve">
Lorem <tspan class="special">ipsum</tspan>
dolor sit amet, consectetur adipisicing elit.
</textPath>
</text>
</svg>SVG gradient
<svg>
<defs>
<linearGradient id="hair-color">
<stop offset="0%" stop-color="yellow"/>
<stop offset="50%" stop-color="hotpink"/>
<stop offset="100%" stop-color="deepskyblue"/>
</linearGradient>
<style>
.hair{ fill: url('#hair-color'); }
</style>
</defs>
<path class="hair">
</svg>SVG pattern
<style>
body {
margin: 0;
}
svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddd;
}
.pattern-circle {
fill: #fff000;
}
.bg-rect {
fill: url(#bg-pattern);
}
</style>
</head>
<body>
<svg viewBox="0 0 1000 1000">
<defs>
<pattern id="bg-pattern" x="0" y="0" width="0.1" height="0.1">
<circle cx="50" cy="50" r="50" class="pattern-circle"></circle>
</pattern>
</defs>
<rect class="bg-rect" x="0" y="0" width="100%" height="100%"></rect>
</svg>
</body>SVG mask
fill:white!!!!!!!
❤ Thinking
svg에 애니메이션을 줘서 배경을 만들어봤는데 재밌었다. 강의에서 제공된 캐릭터가 너무 귀여워서 일까..갑자기 일러스트레이터를 배우고 싶다는 생각이 들었다. 하지만 나의 선택은 피그마!
