SVGใในใฟใผ
Web Vector Graphics SVGใๅบ็คใใใใฃใใ่บซใซใคใใๆฅฝใใๅคๆงใชไพใ้ใใฆใใๅฅฝใฟใฎๆนๅใซๅฟ็จใงใใๆ่กใ็ฟๅพใใพใใ
ๅ่ฌ็ 1,677ๅ
้ฃๆๅบฆ ๅ็ด
ๅ่ฌๆ้ ็กๅถ้

- ๆช่งฃๆฑบ
svg ์ง์ ๊ทธ๋ฆฌ๊ธฐ
์ ์๋ svg ์ผ๋ฌ์คํธ๋ ์ดํฐ๋ง๊ณ ์ง์ ๊ทธ๋ฆด ์ ์๋ ๋ฌด๋ฃ ํด์ด๋ ์ฌ์ดํธ ์์๊น์? ์ผ๋ฌ์คํธ๋ ์ดํฐ๋ ๋๋ด์ผํด๊ฐ์ง๊ณ .. ์ ๊ฐ ๊ฐ๋ํด์์ ใ ใ </
HTML/CSSsvg123123123123123
ใป
3ใถๆๅ
0
36
1
- ๆช่งฃๆฑบ
SVG ํ์ผ CSS ์ ๋๋ฉ์ด์
svg ํ์ผ๋ก ํธ๋ผํ์นด๋ ๋ท๋ฉด๊ณผ์๋ฉด์ ๋ฐ์ดํฐํจํท์ ๋ฐ์์ ๊ฑฐ๊ธฐ์ ํด๋ฉํ๋ svg ํ์ผ์ ๋งค์น์ํค๋ ค๊ณ ํ๊ณ ์์ต๋๋ค์นด๋๊ฐ ๋ค์ง์ด์ง๋ ํ๋ฆฝํจ๊ณผ๋ฅผ ๊ตฌํํ๊ณ ์ถ์๋ฐ ๊ทธ์ค์์ ๋ง์ง๋ง ์นด๋๋ฅผ ๋ค์ง์๋ ๊ธด์ฅ๊ฐ์ ์ฃผ๊ธฐ์ํด ์ค์ ๋ก ์นด๋๊ฒ์์ ํ ๋์ฒ๋ผ ์นด๋ ๋์๋ฝ์ ์กฐ๊ธ์ฉ
HTML/CSSsvgyoudw19946635
ใป
0
198
1
- ๆช่งฃๆฑบ
๊ณก์ ์ ๋ฐ๋ผ ๊ธ์์ฐ๊ธฐ์์ path ๋์ circle์ ์๋๋์?
.svg-circleText {font-size: 1.5rem; font-
HTML/CSSsvghweejincha
ใป
0
276
1
- ๆช่งฃๆฑบ
์ ์๋ ์ง๋ฌธ ์์ต๋๋ค! svg ํ๊ทธ์ object-fit: cover; ๊ฐ์ ์์ฑ์ ์ ์ฉํ๊ธฐ๋ ์ด๋ ค์ธ๊น์?
- ์ง๋ฌธ์ ๋ํ ๋ต๋ณ์ ๊ฐ์์๊ฐ ํ๋ ๊ฒฝ์ฐ๋ ์๊ณ , ์๊ฐ์ ์ฌ๋ฌ๋ถ๋ค์ด ํด์ฃผ์๋ ๊ฒฝ์ฐ๋ ์์ต๋๋ค. ๊ฐ์ด ๋์๊ฐ๋ฉฐ ๊ณต๋ถํด์! :)- ์์ฑํ์ ์์ค์ฝ๋ ์์ฒด์ ์ค๋ฅ๋ณด๋ค๋, ๊ฐ๋ ์ด๋ ์๋ฆฌ๊ฐ ์ดํด๋์ง ์๋ ๋ถ๋ถ์ ์ง๋ฌธํด์ฃผ์๋๊ฒ ์ข์ต๋๋ค. ๊ทธ๋๋ก ๋ฐ๋ผํ๋๋ฐ ์์ค์ฝ๋์
HTML/CSSsvghzhns24460
ใป
0
571
1
- ๆช่งฃๆฑบ
atom ์๋น์ค ์ข ๋ฃ, emmet ์ค์น์๋จ
์๋ ํ์ธ์. SVG ๊ฐ์๋ฅผ ์ด๋ฒ์ ๊ตฌ๋งคํ๊ฒ ๋๋ฉด์ ์ด์ ๋ง ์ค๋น๋จ๊ณ๋ฅผ ํ๊ณ ์๋๋ฐ์.๊ฐ์์์ atom์ ์ค์นํ๊ณ emmet ํจํค์ง๋ฅผ ๋ค์ด๋ก๋ ํ๋ผ๊ณ ๋์ด์๋๋ผ๊ณ ์.๊ทผ๋ฐ emmet์ install์ ๊ฒ์ํด๋ ์๋จ๊ณ ๊ตฌ๊ธ์ด๋ ์ ํ๋ธ์ ์ณ๋ e
HTML/CSSsvgnagyeom2830
ใป
0
1,408
1
- ๆช่งฃๆฑบ
SVG ํ๊ทธ ์ค foreignObject ๊ด๋ จํ์ฌ ์ง๋ฌธ๋๋ฆฝ๋๋ค.
์๋ ํ์ธ์์ ๋ ๋ฐ์ดํฐ ์๊ฐํ ๊ฐ๋ฐ์ ํ๊ณ ์๋ ๊ฐ๋ฐ์์ ๋๋ค.๊ทธ๋์ SVG์ ๊ด์ฌ์ด ๋ง๊ณ SVG๋ฅผ ์ฌ์ฉํด์ ์ฐจํธ ๋ฐ ๊ทธ๋ํ๋ฅผ ๊ฐ๋ฐํ๊ณ ์๋๋ฐ์1~2๋ ์ ๋งํด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์กดํด์ ๊ฐ๋ฐํ๋ค๊ฐํ์ฌ๋ ๋ค์ํ ๊ธฐํ์๋๋ฅผ
HTML/CSSsvghshziwo
ใป
0
1,540
1
- ๆช่งฃๆฑบ
๋ง์คํฌ๊ฐ ์๋ผ์..
ใ ใ ์ง๊ธ ๋ง์คํฌ ์ด์ฉํ ์คํ ๋ก ์ ๋๋ฉ์ด์ ๊ฐ์ ๋ณด๊ณ ๊ณต๋ถํ๊ณ ์๋๋ฐ์,๋ง์คํฌ ์์ ์ ํ๋ฉด ์๋ฌด๊ฒ๋ ์๋ณด์ด๊ฒ ๋ผ์. ๋ง์คํฌ ์์๋ ํฐ์์ด๊ณ ์์น๋ ๊ฒน์ณ์๋๋ฐ ์ ์๋๋๊ฑธ๊น์?3์๊ฐ์งธ ์์ธ์ ๋ชป์ฐพ๊ณ ํค๋งค๊ณ ์์ด์ ์ฝ๋ ์ฌ๋ฆฝ๋๋ค.. ๋์์ฃผ
HTML/CSSsvginoyuno
ใป
0
415
2
- ๆช่งฃๆฑบ
๊ฐ์ ๋ ธ์
์๋ ์ง๋ฌธ์ ๊ฐ์ ๋ ธ์ ๊ณต์ ์ ๊ดํ ์ง๋ฌธ ๋ฐ๋ณต์ ๋๋ค! ๋ ธ์ ์ ๋ค์ ์ด๋ฏธ์ง์ ๋ ธ์ ๋งํฌ ๋งํ๋ ๊ฒ ๊ฐ์ต๋๋ค. ํน์ ๊ณต์ ๊ฐ๋ฅํ์ ๊ฐ์?<img src="https://cdn.inflearn.com/public/files/posts/3aeb8bbc-ab8e-4225-8
svgHTML/CSSalvinlog1882
ใป
0
392
1
- ๆช่งฃๆฑบ
๊ฐ์ ๋ ธ์
ํน์, ๊ฐ์ ๋ ธ์ ์ ๊ณต์ ๋ฐ์ ์ ์์๊น์?
๊ฐ์svgHTML/CSSmj77085708
ใป
0
333
1
- ๆช่งฃๆฑบ
๋ง์คํฌ 2์์ ๋ฐฐ๊ฒฝ์ผ๋ก ๊น๋ฆฐ ํจํด ์ ๋๋ฉ์ด์ ์ด ๋ฉ์ถฐ์๋ ํ์
์๋ ํ์ธ์. <div class="type-pl
svgHTML/CSSyogusi911065
ใป
1
232
1
- ๆช่งฃๆฑบ
path ๋ฅผ x ,y๋ก ์ด๋
๊ฐ์ ์์์ฒ๋ผ rect๋ก๋ ํด๋ณด์๋๋ฐ path๋ก ๋ svg๋ฅผ x ,y์ถ์ผ๋ก ์ด๋์ํค๊ณ ์ถ๋ค๋ฉด animate ํ๊ทธ๋ก๋ ํ ์ ์๋๊ฑด๊ฐ์?
svgHTML/CSSalseoqkr3341
ใป
0
281
1
- ๆช่งฃๆฑบ
๊ฐ์ ํ์ด์ง์ ๊ฐ์ svg ์์ด์ฝ์ ์ฌ์ฉํ ๊ฒฝ์ฐ id ๊ฐ์ด ๋์ผํด๋ ๋๋์?
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์
HTML/CSSsvgseonup952182
ใป
0
353
1
- ๆช่งฃๆฑบ
๋ง์คํฌ2 ๋๋ณด๊ธฐ ์ง๋ฌธ
์๋ ํ์ธ์? ๋๋ณด๊ธฐ ์์ ๋ผ๊ณ ํด์ ๋ฐ๋ผํด ๋ณด์์ผ๋ ๋ง์คํฌ๋ก
HTML/CSSsvgrecgrnd
ใป
0
386
1
- ๆช่งฃๆฑบ
์์ถ์ ๊ดํ์ฌ
์๋ ํ์ธ์ <div class="type-pla
svg์์ถsvgHTML/CSSbroccoliindb
ใป
0
275
1
- ่งฃๆฑบ
svg ๊ฐ์ ์คํธ๋กํฌ ํธ ๊ตฌํ ์์ ์ ๊ฐ ์ ์ฉํ๋ฉด ์๋๋๊ฒ ์์ด์
์๋ ํ์ธ์ ์ผ๋ฌ์คํธ์์ ํํด์ผ๋ก ๋ค ๋ฐ์ svg๋ก ๊ตฌํํ๊ณ
HTML/CSSsvgsoyoungsheen
ใป
0
401
2
- ๆช่งฃๆฑบ
ํจ์ค ๊ฐ์ ๊ด๋ จ ํ๊ทธ ์ง๋ฌธ ๋๋ฆฝ๋๋ค ใ .ใ
<img src="https://cdn.inflearn.c
HTML/CSSsvgsoyoungsheen
ใป
0
507
1
- ๆช่งฃๆฑบ
๊ธ์จ ๊นจ์ง
๋งฅ๋ถ์ ์ฌ์ฉํ๊ณ ์๋๋ฐ ์ ์ปดํจํฐ ์์๋ ํ ์คํธ ์ ๋๋ฉ์ด์
svgHTML/CSSsvgchosule2408
ใป
0
427
1
- ๆช่งฃๆฑบ
smil ๋ฌดํ๋ฐ๋ณต ์ง๋ฌธ
smil ์ ๋๋ฉ์ด์ ์ ๋ฌดํ ๋ฐ๋ณต ์ฌ์ ํ ์ ์๋์?
svgHTML/CSSqwerew07016
ใป
0
230
1
- ๆช่งฃๆฑบ
SMIL ์ ๋๋ฉ์ด์ ์ค๋ณต ๊ด๋ จ ์ง๋ฌธ๋๋ฆฝ๋๋ค. ( + ์ต์ ๋ ๊ด๋ จ ์ง๋ฌธ ์ถ๊ฐ...)
์๋ ํ์ธ์! ๊ฐ์๋ฅผ ๋ค์์ง๋ ์๊ฐ์ด ์กฐ๊ธ ์ง๋ฌ์ง๋ง ๋ง์ ์ ์ฉํ๋ ค๋ค๋ณด๋ ์ ์๋์ ํ์ํ ๋ถ๋ถ๋ง ๋ค์ ๋ฃ๋ ์ค์ ์ง๋ฌธ๋๋ฆฝ๋๋ค. ์ง๋ฌธ : ํ๋์ ๋ํ์ด๋ ํจ์ค ์์ ๋๊ฐ๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์์๊น์? ์๋ฅผ ๋ค์ด ๋ํ
svgHTML/CSSjinw0909
ใป
0
325
1
- ๆช่งฃๆฑบ
class name ์ ์ ํ์ค๋ bem ๋ฐฉ๋ฒ ์ฌ์ฉํ์๋์??
์ธํฐ๋ํฐ๋ธ ์ ๋๋ก ์์ ๊ฐ์ ํ์ค๋๋ - ์ฐ์๊ณ ์ด ๊ฐ์์์๋ __ ๋ฅผ ์ฌ์ฉํ์๊ธธ๋ ๊ถ๊ธํด์ ์ฌ์ญค๋ด ๋๋ค. ๊ทธ๋ฆฌ๊ณ 1๋ถ์ฝ๋ฉ ๊ฐ์ฌ๋๊ป์ ์ฐ์๋ ํด๋์ค ๋ค์ด๋ฐ ๋ฐฉ๋ฒ ์์ผ์๋ฉด ์ ํ๋ธ ๋ผ์ด๋ธ๋ ๊ฐ์์ ๋ก๋ ํด์ฃผ์๋ฉด ์ข์๊บผ ๊ฐ์์!
svgHTML/CSSfbottlem9583
ใป
0
323
1

