이전
목록
다음
선

SVG를 마치 CSS처럼 활용하기

선택과집중
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2025-07-17 (목) 16:43:32 · 1301

SVG를 왜 써야 하나요?
- 해상도에 영향을 받지 않음 (Retina 대응)
- 아이콘, 로고, 애니메이션에서 가볍고 선명함
- CSS, JavaScript로 동적으로 제어 가능

 

SVG 삽입 3가지 방식
- <img src="icon.svg"> : 단순 이미지 대체 (제어 불가)
- background-image: url('icon.svg') : CSS에서 사용 (제어 불가)
- inline SVG 사용(추천): SVG 태그를 직접 HTML에 삽입하면 CSS 제어 가능!

 

inline SVG 예시
<svg class="icon" width="24" height="24" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" stroke="gray" stroke-width="2" fill="white" />
</svg>
 

|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 25-12-27 조회 782
CSS 25-12-17 조회 564
CSS 25-12-07 조회 690
CSS 25-11-20 조회 613
CSS 25-11-15 조회 692
기타 25-09-21 조회 819
CSS 25-09-09 조회 1,080
CSS 25-09-05 조회 1,076
CSS 25-08-16 조회 1,125
기타 25-07-23 조회 979
CSS 25-07-17 조회 1,302
CSS 25-06-27 조회 1,224
CSS 25-06-12 조회 1,161
CSS 25-06-09 조회 1,197
CSS 25-06-07 조회 1,006
25-01-30 조회 1,176
HTML 25-01-23 조회 1,434
CSS 24-10-21 조회 1,338
23-12-10 조회 1,831
HTML 24-02-12 조회 1,269
CSS 24-02-11 조회 1,580
CSS 24-01-28 조회 1,520
HTML 23-11-05 조회 2,261
기타 23-10-21 조회 1,507
CSS 23-09-04 조회 2,099
HTML 23-07-13 조회 1,923
CSS 23-06-14 조회 1,820
23-05-04 조회 4,223
23-05-03 조회 5,979
23-06-01 조회 2,241
글쓰기