CSS에서 아이콘 폰트를 사용하는 방법은 무엇인가요?

FAQ: CSS에서 아이콘 폰트를 사용하는 방법

Q1. 아이콘 폰트란 무엇인가요?
아이콘 폰트는 문자 대신 아이콘 형태의 글리프(glyph)를 포함하는 특수한 폰트입니다. 일반 텍스트처럼 크기, 색상, 스타일 등을 조절할 수 있어 웹에서 아이콘을 쉽게 삽입하고 관리할 수 있습니다.

---

Q2. 아이콘 폰트를 사용하려면 어떻게 준비하나요?
1. 아이콘 폰트 라이브러리를 선택하고 다운로드하거나 CDN 링크를 준비합니다. (예: Font Awesome, Ionicons, Material Icons 등)
2. HTML 문서의 ``에 CSS를 포함합니다.
```html

```

---

Q3. CSS에서 아이콘 폰트를 적용하는 기본 방법은 무엇인가요?
- `` 또는 `` 태그에 미리 정의된 클래스명을 부여하여 아이콘 폰트를 표시합니다.
- 폰트를 지정하는 CSS가 이미 포함되어 있어야 합니다. 예) Font Awesome 사용 시:
```html

```

---

Q4. 직접 CSS에서 아이콘 폰트를 불러와 커스텀 아이콘을 만드는 법은?
1. `@font-face` 규칙으로 아이콘 폰트 파일을 불러옵니다.
```css
@font-face {
font-family: 'MyIconFont';
src: url('myiconfont.woff2') format('woff2'),
url('myiconfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
```
2. 아이콘이 할당된 유니코드 문자를 콘텐츠로 삽입합니다.
```css
.icon-home::before {
font-family: 'MyIconFont';
content: '\e900'; /* 아이콘 유니코드 */
font-style: normal;
speak: none;
font-weight: normal;
font-variant: normal;
text-decoration: inherit;

text-align: center;
/* 추가 스타일 */
}
```
3. HTML에서 사용:
```html

```

---

Q5. 아이콘 크기와 색상 조절은 어떻게 하나요?
- CSS `font-size`로 크기 조절
- `color` 속성으로 색상 조절
예:
```css
.icon-home::before {
font-size: 24px;
color: 007bff;
}
```

---

Q6. 텍스트와 아이콘을 함께 사용할 때 어떻게 표현하나요?
- `` 또는 `` 태그로 아이콘만 넣고, 옆에 텍스트 배치
```html
사용자 이름
```

---

Q7. 아이콘 폰트와 SVG 아이콘의 차이는 무엇인가요?
- 아이콘 폰트: 텍스트처럼 취급, CSS로 크기 및 색상 쉽게 변환 가능, 호환성 좋음
- SVG 아이콘: 고해상도, 복잡한 색상과 애니메이션 지원, 코드가 더 길 수 있음

---

Q8. 모바일이나 화면 리더에서 아이콘 폰트를 사용할 때 주의할 점은?
- 시멘틱을 유지하려면 `aria-hidden="true"` 속성을 아이콘에 추가해 화면 리더가 불필요한 아이콘을 무시하도록 합니다.
- 아이콘 텍스트 대체는 별도의 레이블(`aria-label`) 또는 숨겨진 텍스트로 처리합니다.

---

요약 :
CSS에서 아이콘 폰트는 외부 라이브러리 링크 또는 `@font-face`로 폰트를 불러오고, 클래스 또는 의사요소 `::before`에서 유니코드 문자를 `content`로 삽입하는 방식을 주로 사용합니다. 폰트 크기, 색상 등은 일반 텍스트처럼 조절할 수 있어 편리합니다.

CSS에서 테이블 스타일을 설정하는 방법은 무엇인가요?

CSS Grid란 무엇인가요?