1. SVG๋ โญ๏ธ
- SVG(Scalable Vector Graphics): ํ์ฅ ๊ฐ๋ฅํ ๋ฒกํฐ ๊ทธ๋ํ
- ํฝ์ ์ ์ด์ฉํด ๊ทธ๋ฆผ ๊ทธ๋ฆฌ๋ png, jpg ํ์ผ๋ค๊ณผ ๋ค๋ฅด๊ฒ ๋ฒกํฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ํํํจ
- ๊ทธ๋ฌ๋ค ๋ณด๋ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํจ์ ๋ฐ๋ผ ๊นจ์ง๋ ๊ฒ์ด ์๊ณ , ์ฉ๋์ด ์๊ธฐ ๋๋ฌธ์ ์น์์ ์์ฃผ ์ฌ์ฉํ๋ ์ด๋ฏธ์ง ํ์
- ์ฅ์
- SVG ์ด๋ฏธ์ง๋ ๋งํฌ์ ์ผ๋ก ์ฐ์ด๋ฏ๋ก ํ ์คํธ ์๋ํฐ๋ก ์์ฑํ๊ณ ๋ ์์ฑ๋ ์ด๋ฏธ์ง๋ฅผ ์์ ํ ์๋ ์์
- ๋ฒกํฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ทธ๋ ค์ง๋ฏ๋ก ์ฌ์ด์ฆ๋ฅผ ํฌ๊ฒ ํด๋ ๊นจ์ง์ง ์์(scalable → ๋ฐ๋ผ์ ์ด๋ค ํด์๋์์ ์ฌ์ฉํ๋ ๋์ผ)
- SVG ๋ฒ์ 1.1์ 2011๋ W3C ํ์ค์ด ๋จ
- XML ํฌ๋งท์ผ๋ก ํ์ผ์ด ์์ฑ๋๋ฏ๋ก JS๋ CSS๋ก ์กฐ์์ด ๊ฐ๋ฅ
- ๋จ์
- ์ด๋ฏธ์ง๊ฐ ๋ณต์กํ ์๋ก SVG๋ง์ ์ฅ์ ๊ฐ์
- Q) SVG ๋ด๋ถ ๋ํ ์์?
- A) <rect>, <circle>, <polyline>,<path>
- <path> - ์ ๊ณผ ๊ณก์ , ํธ ๋ฑ ๋ค์ํ ํํ๋ฅผ ๊ทธ๋ฆด ์ ์๋ ๊ฐ์ฅ ๊ฐ๋ ฅํ ์๋ฆฌ๋จผํธ (์ฐธ๊ณ )
// <rect> - ์ฌ๊ฐํ
<rect x="10" y="10" width="30" height="30" />
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" />
/*
x - ์ฌ๊ฐํ์ ์ข์ธก ์๋จ์ x ๊ฐ
y - ์ฌ๊ฐํ์ ์ข์ธก ์๋จ์ y ๊ฐ
width - ์ฌ๊ฐํ์ ํญ
height - ์ฌ๊ฐํ์ ๋์ด
rx - ์ฌ๊ฐํ์ ๋ฅ๊ทผ ๊ผญ์ง์ ์ x ๋ฐฉํฅ์ผ๋ก์ ๋ฐ์ง๋ฆ
ry - ์ฌ๊ฐํ์ ๋ฅ๊ทผ ๊ผญ์ง์ ์ y ๋ฐฉํฅ์ผ๋ก์ ๋ฐ์ง๋ฆ
*/
//<circle> - ์
<circle cx="25" cy="75" r="20" />
/*
r - ์์ ๋ฐ์ง๋ฆ
cx (circle x) - ์์ ์ค์ฌ ์ค x ๊ฐ์ ์๋ฏธ
cy (circle y)- ์์ ์ค์ฌ ์ค y ๊ฐ์ ์๋ฏธ
*/
// <polyline> - ์ฐ๊ฒฐ๋ ์ง์ ๋ค์ ๊ทธ๋ฃน
<polyline
points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"
/>
/*
points - ํฌ์ธํธ๋ค์ ๋ชฉ๋ก, ๊ฐ ์ซ์๋ ๊ณต๋ฐฑ, ์ผํ, EOL ๋๋ ์ค ๋ฐ๊ฟ ๋ฌธ์๋ก ๊ตฌ๋ถ๋จ
๊ฐ ํฌ์ธํธ๋ ๋ฐ๋์ x ์ขํ์ y ์ขํ๋ฅผ ๊ฐ์ง๊ณ ์์ด์ผ ํจ
๋ฐ๋ผ์ ํฌ์ธํธ ๋ชฉ๋ก (0,0), (1,1) ๋ฐ (2,2)๋ "0 0, 1 1, 2 2"๋ผ๊ณ ์ธ ์ ์์
*/
Tips.
- Q) ์ด๋ฏธ์ง ํฌ๊ธฐ๊ฐ ํด ๊ฒฝ์ฐ ๋ ๋๋ง ์๋๊ฐ ๋๋ ค์งํ ๋ฐ ์ด๋ฅผ ๊ฐ์ ํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์?
- A) ์ด๋ฏธ์ง๋ฅผ ์ต์ ํ ์ํด(์ด๋ฏธ์ง์ ์ฉ๋์ ์ค์ด๊ธฐ), ์ด๋ฏธ์ง ์คํ๋ผ์ดํธ ํ์ฉ, ๋ฒกํฐ ์ด๋ฏธ์ง(SVG) ์ด์ฉ
- Q) UI๋?
- A) ์ ์ ์ธํฐํ์ด์ค์ ์ฝ์๋ก, ๋ค์ํ ์ฌ์ฉ์๊ฐ ์ฌ์ฉํ ์ ์๋๋ก ๋ณดํธ์ฑ์ ์ง๋ ์ผํ๋ฉฐ ์ ์ฒด์ ์ผ๋ก ์ฌ์ฉ์ ์์ด ํฐ ๋ถํธํจ์ด ์์ด์ผ ํจ.
'Frontend ๐ > HTMLโงตCSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[HTML] ์น ํ์ค ๋ฐ ์ ๊ทผ์ฑ II - ํ ์คํธ ๊ด๋ จ ํ๊ทธ, ๊ธฐํ ํ๊ทธ, ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง etc. (0) | 2024.07.06 |
---|---|
[HTML] ์น ํ์ค ๋ฐ ์ ๊ทผ์ฑ I - ์น ํ์ค, ์น ์ ๊ทผ์ฑ, ์๋ฉํฑ ํ๊ทธ etc. (0) | 2024.07.06 |
[HTML] DOCTYPE (0) | 2024.07.06 |
[HTML] HTML ์ฃผ์ ํ๊ทธ (0) | 2023.03.29 |