SVG ๋ง์คํฐ
์น ๋ฒกํฐ ๊ทธ๋ํฝ SVG๋ฅผ ๊ธฐ์ด๋ถํฐ ์ ๋๋ก ์ตํ๊ณ , ์ฌ๋ฏธ์๊ณ ๋ค์ํ ์์ ๋ค์ ํตํด ์ํ๋ ๋ฐฉํฅ์ผ๋ก ์์ฉํ ์ ์๋ ๊ธฐ์ ์ ์ต๋ํฉ๋๋ค.
์๊ฐ์ 1,677๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ

- ๋ฏธํด๊ฒฐ
svg ์ง์ ๊ทธ๋ฆฌ๊ธฐ
์ ์๋ svg ์ผ๋ฌ์คํธ๋ ์ดํฐ๋ง๊ณ ์ง์ ๊ทธ๋ฆด ์ ์๋ ๋ฌด๋ฃ ํด์ด๋ ์ฌ์ดํธ ์์๊น์? ์ผ๋ฌ์คํธ๋ ์ดํฐ๋ ๋๋ด์ผํด๊ฐ์ง๊ณ .. ์ ๊ฐ ๊ฐ๋ํด์์ ใ ใ </
HTML/CSSsvg๊น์ฑ๊ด
ใป
3๋ฌ ์
0
36
1
- ๋ฏธํด๊ฒฐ
SVG ํ์ผ CSS ์ ๋๋ฉ์ด์
svg ํ์ผ๋ก ํธ๋ผํ์นด๋ ๋ท๋ฉด๊ณผ์๋ฉด์ ๋ฐ์ดํฐํจํท์ ๋ฐ์์ ๊ฑฐ๊ธฐ์ ํด๋ฉํ๋ svg ํ์ผ์ ๋งค์น์ํค๋ ค๊ณ ํ๊ณ ์์ต๋๋ค์นด๋๊ฐ ๋ค์ง์ด์ง๋ ํ๋ฆฝํจ๊ณผ๋ฅผ ๊ตฌํํ๊ณ ์ถ์๋ฐ ๊ทธ์ค์์ ๋ง์ง๋ง ์นด๋๋ฅผ ๋ค์ง์๋ ๊ธด์ฅ๊ฐ์ ์ฃผ๊ธฐ์ํด ์ค์ ๋ก ์นด๋๊ฒ์์ ํ ๋์ฒ๋ผ ์นด๋ ๋์๋ฝ์ ์กฐ๊ธ์ฉ
HTML/CSSsvgmirage0720
ใป
0
198
1
- ๋ฏธํด๊ฒฐ
๊ณก์ ์ ๋ฐ๋ผ ๊ธ์์ฐ๊ธฐ์์ path ๋์ circle์ ์๋๋์?
.svg-circleText {font-size: 1.5rem; font-
HTML/CSSsvghweejin_cha
ใป
0
276
1
- ๋ฏธํด๊ฒฐ
์ ์๋ ์ง๋ฌธ ์์ต๋๋ค! svg ํ๊ทธ์ object-fit: cover; ๊ฐ์ ์์ฑ์ ์ ์ฉํ๊ธฐ๋ ์ด๋ ค์ธ๊น์?
- ์ง๋ฌธ์ ๋ํ ๋ต๋ณ์ ๊ฐ์์๊ฐ ํ๋ ๊ฒฝ์ฐ๋ ์๊ณ , ์๊ฐ์ ์ฌ๋ฌ๋ถ๋ค์ด ํด์ฃผ์๋ ๊ฒฝ์ฐ๋ ์์ต๋๋ค. ๊ฐ์ด ๋์๊ฐ๋ฉฐ ๊ณต๋ถํด์! :)- ์์ฑํ์ ์์ค์ฝ๋ ์์ฒด์ ์ค๋ฅ๋ณด๋ค๋, ๊ฐ๋ ์ด๋ ์๋ฆฌ๊ฐ ์ดํด๋์ง ์๋ ๋ถ๋ถ์ ์ง๋ฌธํด์ฃผ์๋๊ฒ ์ข์ต๋๋ค. ๊ทธ๋๋ก ๋ฐ๋ผํ๋๋ฐ ์์ค์ฝ๋์
HTML/CSSsvgJiHyeon Han
ใป
0
571
1
- ๋ฏธํด๊ฒฐ
atom ์๋น์ค ์ข ๋ฃ, emmet ์ค์น์๋จ
์๋ ํ์ธ์. SVG ๊ฐ์๋ฅผ ์ด๋ฒ์ ๊ตฌ๋งคํ๊ฒ ๋๋ฉด์ ์ด์ ๋ง ์ค๋น๋จ๊ณ๋ฅผ ํ๊ณ ์๋๋ฐ์.๊ฐ์์์ atom์ ์ค์นํ๊ณ emmet ํจํค์ง๋ฅผ ๋ค์ด๋ก๋ ํ๋ผ๊ณ ๋์ด์๋๋ผ๊ณ ์.๊ทผ๋ฐ emmet์ install์ ๊ฒ์ํด๋ ์๋จ๊ณ ๊ตฌ๊ธ์ด๋ ์ ํ๋ธ์ ์ณ๋ e
HTML/CSSsvg์์ญ์ด๊ผฌ๋ฆฌ๋ค๋ฆฐ๋ฌผ
ใป
0
1,408
1
- ๋ฏธํด๊ฒฐ
SVG ํ๊ทธ ์ค foreignObject ๊ด๋ จํ์ฌ ์ง๋ฌธ๋๋ฆฝ๋๋ค.
์๋ ํ์ธ์์ ๋ ๋ฐ์ดํฐ ์๊ฐํ ๊ฐ๋ฐ์ ํ๊ณ ์๋ ๊ฐ๋ฐ์์ ๋๋ค.๊ทธ๋์ SVG์ ๊ด์ฌ์ด ๋ง๊ณ SVG๋ฅผ ์ฌ์ฉํด์ ์ฐจํธ ๋ฐ ๊ทธ๋ํ๋ฅผ ๊ฐ๋ฐํ๊ณ ์๋๋ฐ์1~2๋ ์ ๋งํด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์กดํด์ ๊ฐ๋ฐํ๋ค๊ฐํ์ฌ๋ ๋ค์ํ ๊ธฐํ์๋๋ฅผ
HTML/CSSsvgํฉ์นํธ
ใป
0
1,540
1
- ๋ฏธํด๊ฒฐ
๋ง์คํฌ๊ฐ ์๋ผ์..
ใ ใ ์ง๊ธ ๋ง์คํฌ ์ด์ฉํ ์คํ ๋ก ์ ๋๋ฉ์ด์ ๊ฐ์ ๋ณด๊ณ ๊ณต๋ถํ๊ณ ์๋๋ฐ์,๋ง์คํฌ ์์ ์ ํ๋ฉด ์๋ฌด๊ฒ๋ ์๋ณด์ด๊ฒ ๋ผ์. ๋ง์คํฌ ์์๋ ํฐ์์ด๊ณ ์์น๋ ๊ฒน์ณ์๋๋ฐ ์ ์๋๋๊ฑธ๊น์?3์๊ฐ์งธ ์์ธ์ ๋ชป์ฐพ๊ณ ํค๋งค๊ณ ์์ด์ ์ฝ๋ ์ฌ๋ฆฝ๋๋ค.. ๋์์ฃผ
HTML/CSSsvg๊น์คํธ
ใป
0
415
2
- ๋ฏธํด๊ฒฐ
๊ฐ์ ๋ ธ์
์๋ ์ง๋ฌธ์ ๊ฐ์ ๋ ธ์ ๊ณต์ ์ ๊ดํ ์ง๋ฌธ ๋ฐ๋ณต์ ๋๋ค! ๋ ธ์ ์ ๋ค์ ์ด๋ฏธ์ง์ ๋ ธ์ ๋งํฌ ๋งํ๋ ๊ฒ ๊ฐ์ต๋๋ค. ํน์ ๊ณต์ ๊ฐ๋ฅํ์ ๊ฐ์?<img src="https://cdn.inflearn.com/public/files/posts/3aeb8bbc-ab8e-4225-8
svgHTML/CSSalvinlog
ใป
0
392
1
- ๋ฏธํด๊ฒฐ
๊ฐ์ ๋ ธ์
ํน์, ๊ฐ์ ๋ ธ์ ์ ๊ณต์ ๋ฐ์ ์ ์์๊น์?
๊ฐ์svgHTML/CSSmj7708
ใป
0
333
1
- ๋ฏธํด๊ฒฐ
๋ง์คํฌ 2์์ ๋ฐฐ๊ฒฝ์ผ๋ก ๊น๋ฆฐ ํจํด ์ ๋๋ฉ์ด์ ์ด ๋ฉ์ถฐ์๋ ํ์
์๋ ํ์ธ์. <div class="type-pl
svgHTML/CSSGusi Yo
ใป
1
232
1
- ๋ฏธํด๊ฒฐ
path ๋ฅผ x ,y๋ก ์ด๋
๊ฐ์ ์์์ฒ๋ผ rect๋ก๋ ํด๋ณด์๋๋ฐ path๋ก ๋ svg๋ฅผ x ,y์ถ์ผ๋ก ์ด๋์ํค๊ณ ์ถ๋ค๋ฉด animate ํ๊ทธ๋ก๋ ํ ์ ์๋๊ฑด๊ฐ์?
svgHTML/CSSturtle_ekk
ใป
0
281
1
- ๋ฏธํด๊ฒฐ
๊ฐ์ ํ์ด์ง์ ๊ฐ์ svg ์์ด์ฝ์ ์ฌ์ฉํ ๊ฒฝ์ฐ id ๊ฐ์ด ๋์ผํด๋ ๋๋์?
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์
HTML/CSSsvg๋ฐ์ ์ฐ
ใป
0
353
1
- ๋ฏธํด๊ฒฐ
๋ง์คํฌ2 ๋๋ณด๊ธฐ ์ง๋ฌธ
์๋ ํ์ธ์? ๋๋ณด๊ธฐ ์์ ๋ผ๊ณ ํด์ ๋ฐ๋ผํด ๋ณด์์ผ๋ ๋ง์คํฌ๋ก
HTML/CSSsvgguvera2010
ใป
0
386
1
- ๋ฏธํด๊ฒฐ
์์ถ์ ๊ดํ์ฌ
์๋ ํ์ธ์ <div class="type-pla
svg์์ถsvgHTML/CSSbroccoliindb
ใป
0
275
1
- ํด๊ฒฐ
svg ๊ฐ์ ์คํธ๋กํฌ ํธ ๊ตฌํ ์์ ์ ๊ฐ ์ ์ฉํ๋ฉด ์๋๋๊ฒ ์์ด์
์๋ ํ์ธ์ ์ผ๋ฌ์คํธ์์ ํํด์ผ๋ก ๋ค ๋ฐ์ svg๋ก ๊ตฌํํ๊ณ
HTML/CSSsvgolml-_-z
ใป
0
401
2
- ๋ฏธํด๊ฒฐ
ํจ์ค ๊ฐ์ ๊ด๋ จ ํ๊ทธ ์ง๋ฌธ ๋๋ฆฝ๋๋ค ใ .ใ
<img src="https://cdn.inflearn.c
HTML/CSSsvgolml-_-z
ใป
0
507
1
- ๋ฏธํด๊ฒฐ
๊ธ์จ ๊นจ์ง
๋งฅ๋ถ์ ์ฌ์ฉํ๊ณ ์๋๋ฐ ์ ์ปดํจํฐ ์์๋ ํ ์คํธ ์ ๋๋ฉ์ด์
svgHTML/CSSsvgchosule
ใป
0
427
1
- ๋ฏธํด๊ฒฐ
smil ๋ฌดํ๋ฐ๋ณต ์ง๋ฌธ
smil ์ ๋๋ฉ์ด์ ์ ๋ฌดํ ๋ฐ๋ณต ์ฌ์ ํ ์ ์๋์?
svgHTML/CSS๊น๊น
ใป
0
230
1
- ๋ฏธํด๊ฒฐ
SMIL ์ ๋๋ฉ์ด์ ์ค๋ณต ๊ด๋ จ ์ง๋ฌธ๋๋ฆฝ๋๋ค. ( + ์ต์ ๋ ๊ด๋ จ ์ง๋ฌธ ์ถ๊ฐ...)
์๋ ํ์ธ์! ๊ฐ์๋ฅผ ๋ค์์ง๋ ์๊ฐ์ด ์กฐ๊ธ ์ง๋ฌ์ง๋ง ๋ง์ ์ ์ฉํ๋ ค๋ค๋ณด๋ ์ ์๋์ ํ์ํ ๋ถ๋ถ๋ง ๋ค์ ๋ฃ๋ ์ค์ ์ง๋ฌธ๋๋ฆฝ๋๋ค. ์ง๋ฌธ : ํ๋์ ๋ํ์ด๋ ํจ์ค ์์ ๋๊ฐ๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์์๊น์? ์๋ฅผ ๋ค์ด ๋ํ
svgHTML/CSSjinw0909
ใป
0
325
1
- ๋ฏธํด๊ฒฐ
class name ์ ์ ํ์ค๋ bem ๋ฐฉ๋ฒ ์ฌ์ฉํ์๋์??
์ธํฐ๋ํฐ๋ธ ์ ๋๋ก ์์ ๊ฐ์ ํ์ค๋๋ - ์ฐ์๊ณ ์ด ๊ฐ์์์๋ __ ๋ฅผ ์ฌ์ฉํ์๊ธธ๋ ๊ถ๊ธํด์ ์ฌ์ญค๋ด ๋๋ค. ๊ทธ๋ฆฌ๊ณ 1๋ถ์ฝ๋ฉ ๊ฐ์ฌ๋๊ป์ ์ฐ์๋ ํด๋์ค ๋ค์ด๋ฐ ๋ฐฉ๋ฒ ์์ผ์๋ฉด ์ ํ๋ธ ๋ผ์ด๋ธ๋ ๊ฐ์์ ๋ก๋ ํด์ฃผ์๋ฉด ์ข์๊บผ ๊ฐ์์!
svgHTML/CSS์ค๋ณ๋ฏผ
ใป
0
323
1






