📌svg 태그란?
XML 마크업 언어로, 확장 가능한 벡터 그래픽을 나타내는 파일 형식이에요. 이는 그림이나 도형을 표현하는 데에 사용됩니다.(ex_이모티콘)
픽셀 단위로 이미지를 구성하는 비트맵 데이터(png, jpg) 와는 다르게 그래픽의 크기를 조절해도 이미지의 질이 손상되지 않습니다.
1️⃣SVG는 다양한 그래픽 요소와 속성을 사용하여 이미지설명
⏩️ 주요 SVG 그래픽 요소 (개발자가 사용할수 있는 몇가지 요소가 미리 지정되어 있습니다.)
- 선 (Line)
- 원 (Circle)
- 사각형 (Rectangle)
- 경로 (Path)
- 텍스트 (Text)
⏩️일반적인 SVG 속성
- stroke: 테두리의 색상을 지정합니다.
- stroke-width: 테두리의 굵기를 지정합니다.
- fill: 요소의 내부 색상을 지정합니다.
- cx, cy: 원의 중심 좌표를 나타냅니다.
- r: 원의 반지름을 나타냅니다.
- x, y: 사각형의 시작점 좌표를 나타냅니다.
- width, height: 사각형의 너비와 높이를 나타냅니다.
- d: 경로 요소의 데이터를 나타냅니다.
2️⃣ CSS 스타일을 적용하여 색상, 투명도, 크기 등을 조절할수 있다
🔽 색상설정
🔽 투명도설정
🔽 크기조절
🔽 테스트 스타일링
3️⃣HTML 문서 내의 < style> 태그나 외부 CSS 파일에 작성하여 SVG에 스타일을 적용할수있다.
🔽 HTML 문서 내의 < style> 태그 사용
🔽 외부 CSS 파일 사용
- styles.css
- index.html
