HTML/CSS로 아이콘 사용하기: SVG 인라인 삽입부터 스타일링까지

 

요약

이번 강의에서는 Heroicons 아이콘 팩을 활용해 웹페이지에 SVG 아이콘을 직접 삽입하고, CSS로 스타일링하는 전 과정을 실습합니다. 단순 이미지 대신 벡터 기반 SVG를 사용하는 이유부터, 인라인 SVG 복사/붙여넣기, 클래스·스타일 지정, 아이콘 크기와 색상 조절, 그리고 VS Code 멀티 커서 기능을 이용한 반복 작업 자동화까지 단계별로 살펴봅니다.

---

1. 아이콘 팩 선택

• 무료 벡터 아이콘 팩인 Heroicons 사용 (230개, Outline·Solid 스타일 제공)
• SVG는 무한 확장 가능해 고해상도 디스플레이 대응이 용이

<!-- Outline 스타일 예시 -->
<svg xmlns="http://www.w3.org/2000/svg" class="heroicon-outline" viewBox="0 0 24 24" fill="none" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3" />
</svg>

---

2. 인라인 SVG 삽입

1. Heroicons 사이트에서 원하는 아이콘 "Copy SVG" 클릭
2. HTML 파일에 붙여넣기

<!-- feature-block.html -->
<div class="feature">
  <!-- SVG 아이콘 인라인 삽입 -->
  <svg xmlns="http://www.w3.org/2000/svg" class="features-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3" />
  </svg>
  <h3>과학 기술</h3>
  <p>첨단 연구 실험실 장비 제공</p>
</div>

 

---

3. 클래스 지정 및 CSS 스타일링

• stroke: Outline 아이콘 색상 (SVG 태그 내 stroke 속성 또는 외부 CSS)
• fill: Solid 아이콘 색상
• 크기 지정: width, height 속성 사용 (디폴트 24×24px 권장)

/* styles.css */
.features-icon {
  stroke: #38a169;    /* 초록색 */
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
}

.chair-icon {
  stroke: #4a5568;    /* 진회색 */
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

---

4. 실전 적용 예시

4.1 피처 블록 (Feature Blocks)

<div class="features">
  <div class="feature">
    <svg class="features-icon" ...>...</svg>
    <h3>과학 기술</h3>
    <p>첨단 연구 실험실 장비 제공</p>
  </div>
  <!-- 추가 feature 블록 반복 -->
</div>

4.2 상품 카드 리스트

<ul class="chair-features">
  <li>
    <svg class="chair-icon" ...>...</svg>
    <span>최대 8시간 편안함</span>
  </li>
  <!-- 추가 리스트 아이템 반복 -->
</ul>

---

5. VS Code 멀티 커서 팁

• Alt(Windows) / Option(Mac) + 클릭 → 여러 위치에 커서 생성
• 복사·붙여넣기·치환을 동시에 수행하여 반복 작업 단축

# 예시: 4개 SVG 블록 한 번에 선택 → 붙여넣기
Alt + 클릭 위치1, Alt + 클릭 위치2, ... → Ctrl+V