SVG ์ฐธ๊ณ 

2021. 8. 31. 14:40ยท๐ŸฃcodeLab

https://ossam5.tistory.com/116

 

[HTML๊ธฐ์ดˆ๋ฌธ๋ฒ•] 15๊ฐ• SVGํƒœ๊ทธ Stroke์†์„ฑ - ์˜ค์Œค์˜ ๋‹ˆ๊ฐ€์Šคํ„ฐ๋””

1. SVG ํƒœ๊ทธ๋ž€? - SVGํƒœ๊ทธ๋Š” Scalable Vector Graphics์˜ ์•ฝ์ž๋กœ ๋ฒกํ„ฐ ๊ธฐ๋ฐ˜ ๊ทธ๋ž˜ํ”ฝ์„ XML ํ˜•์‹์œผ๋กœ ์ •์˜ํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. - SVGํƒœ๊ทธ๋Š” SVG๊ทธ๋ž˜ํ”ฝ์„ ๋‹ด๊ธฐ ์œ„ํ•œ ์š”์†Œ์ž…๋‹ˆ๋‹ค. - SVGํƒœ๊ทธ ๋‚ด๋ถ€์— ๋‹ด์„ ์ˆ˜ ์žˆ๋Š”

ossam5.tistory.com

https://velog.io/@gicomong/css100-day-8

 

svg์— ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋„ฃ๊ธฐ

svg์— ๊ทธ๋ ค์ง€๋Š” ํšจ๊ณผ ์ฃผ๊ธฐ

velog.io

 

์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋™์ผ์กฐ๊ฑด
'๐ŸฃcodeLab' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • 3Depth(level) ๋งŒ๋“ค๊ธฐ
  • swiper slide ์–‘ ์˜† (margin) ์ฃผ๊ธฐ
  • ์Šคํฌ๋กค ์‹œ ์œˆ๋„์šฐ ํ•˜๋‹จ์— ๊ณ ์ •ํ•˜๊ธฐ
  • darkmode ๋งŒ๋“ค์–ด๋ณด๊ธฐ
jmjm
jmjm
  • jmjm
    /* jmjmjm */
    jmjm
  • ์ „์ฒด
    ์˜ค๋Š˜
    ์–ด์ œ
    • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (127)
      • ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ปSTUDY (83)
        • HTML (9)
        • CSS (24)
        • SASS (4)
        • JavaScript (15)
        • jQuery (9)
        • Publishing (8)
        • Git (11)
        • React (1)
        • Vue (0)
        • ์›น์ ‘๊ทผ์„ฑ (1)
        • Gulp (1)
      • ๐ŸฃcodeLab (17)
      • ๐ŸŒˆetc (9)
      • ๐Ÿ”ฅ TIL (16)
      • ๐Ÿฅฐ ์ผ์ƒ (2)
      • ๐ŸŒŸ์ฝ์–ด๋ณด๊ธฐ (0)
  • ๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

    • ํ™ˆ
    • ํƒœ๊ทธ
  • ๋งํฌ

  • ๊ณต์ง€์‚ฌํ•ญ

  • ์ธ๊ธฐ ๊ธ€

  • ํƒœ๊ทธ

    sticky codepen
    javascript ์ปฌ๋ ‰์…˜
    sass
    javascript nodelist
    ์ ‘๊ทผ์„ฑ ์ฃผ์˜์‚ฌํ•ญ
    javascript accordion
    css flex
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ slidedown
    javascript ์•„์ฝ”๋””์–ธ
    vscode ๋‹จ์ถ•ํ‚ค
    ์›น์ ‘๊ทผ์„ฑ
    sticky ํ™œ์šฉ
    the legacy js api is deprecated and will be removed in dart sass 2.0.0
    sticky jsfiddle
    CSS ์„ ํƒ์ž
    HTML Form
    js ์•„์ฝ”๋””์–ธ
    ์ ‘๊ทผ์„ฑ ์ฃผ์˜
    sass compiler
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ปฌ๋ ‰์…˜
    gulp ์‹œ์ž‘ํ•˜๊ธฐ
    javascript slidedown
    ์•„์ฝ”๋””์–ธ๋ฉ”๋‰ด
    javascript htmlcollection
    css ๊ฐ€์ƒ์„ ํƒ์ž
    javascript htmlcollection nodelist
    javascript slideup
    html collection
    gulp ๋ฒ„์ „
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ slideup
  • ์ตœ๊ทผ ๋Œ“๊ธ€

  • ์ตœ๊ทผ ๊ธ€

  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.3
jmjm
SVG ์ฐธ๊ณ 

๊ฐœ์ธ์ •๋ณด

  • ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ
  • ํฌ๋Ÿผ
  • ๋กœ๊ทธ์ธ
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.