일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- SK바이오사이언스
- 확률
- series
- 수학
- stl
- 소수
- 백준
- skt membership
- Javascript
- 알고리즘
- grid
- 에라토스테네스의 체
- 통신사할인
- Photoshop
- Design Pattern
- spring
- Flexbox
- 강화학습
- 포토샵
- Codility
- pandas
- dataframe
- margin
- Gap
- c
- Prefix Sums
- 상태
- align-items
- c++
- CSS
Archives
- Today
- Total
목록SVG (1)
sliver__
HTML/CSS로 아이콘 사용하기: SVG 인라인 삽입부터 스타일링까지
요약이번 강의에서는 Heroicons 아이콘 팩을 활용해 웹페이지에 SVG 아이콘을 직접 삽입하고, CSS로 스타일링하는 전 과정을 실습합니다. 단순 이미지 대신 벡터 기반 SVG를 사용하는 이유부터, 인라인 SVG 복사/붙여넣기, 클래스·스타일 지정, 아이콘 크기와 색상 조절, 그리고 VS Code 멀티 커서 기능을 이용한 반복 작업 자동화까지 단계별로 살펴봅니다.1. 아이콘 팩 선택무료 벡터 아이콘 팩인 Heroicons 사용 (230개, Outline·Solid 스타일 제공)SVG는 무한 확장 가능해 고해상도 디스플레이 대응이 용이 2. 인라인 SVG 삽입Heroicons 사이트에서 원하는 아이콘 "Copy SVG" 클릭HTML 파일에 붙여넣기 과학 기술 첨단 연구 실험실 장..
Frontend/CSS
2025. 5. 4. 19:52