Blue Chicken - The Legend Of Zelda
본문 바로가기
개인공부

[css] i 태그 사용(font awesome), margin

host 2024. 5. 12. 22:59

css i 태그를 사용하기 위해 두가지 절차가 있다.

더보기

HTML에서 `<i>` 태그를 사용하여 아이콘을 표시하려면 일반적으로 아이콘 폰트 라이브러리를 프로젝트에 추가하는 사전 작업이 필요합니다. 가장 널리 사용되는 아이콘 폰트 라이브러리 중 하나는 Font Awesome입니다. 여기서는 Font Awesome을 예로 들어 설명하겠습니다.

### Font Awesome을 사용하여 `<i>` 태그로 아이콘 적용하기:

1. **Font Awesome 라이브러리 추가**:
   - 프로젝트에 Font Awesome을 추가하는 가장 쉬운 방법은 CDN 링크를 사용하는 것입니다. HTML 파일의 `<head>` 섹션에 다음 링크를 추가합니다:
     ```html
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     ```
   - 또는 NPM을 통해 Font Awesome을 설치할 수도 있습니다:
     ```bash
     npm install @fortawesome/fontawesome-free
     ```
     이 경우, 설치된 패키지에서 CSS 파일을 프로젝트에 포함시켜야 합니다.

2. **`<i>` 태그 사용**:
   - Font Awesome 아이콘을 웹 페이지에 포함시키려면, `<i>` 태그에 클래스를 추가하여 아이콘을 지정합니다. 예를 들어, "user" 아이콘을 추가하려면 다음과 같이 작성합니다:
     ```html
     <i class="fas fa-user"></i>
     ```
   - 여기서 `fas`는 Font Awesome Solid 스타일을 나타내고, `fa-user`는 "user" 아이콘을 나타냅니다.

### 주의사항:
- `<i>` 태그는 원래 이탤릭 텍스트를 표시하기 위한 목적으로 사용되었지만, 아이콘 폰트 라이브러리들이 이 태그를 아이콘을 표시하는 데 사용하기 시작하면서 현대 웹 개발에서는 주로 아이콘을 표시하는 데 널리 사용됩니다.
- HTML5에서는 의미론적 마크업을 강조하기 때문에 `<i>` 태그 대신 `<span>` 태그를 사용하여 아이콘을 표시하는 것을 고려할 수도 있습니다. 이는 `<span>` 태그가 보다 중립적인 성격을 가지고 있기 때문입니다.

이렇게 사전에 아이콘 라이브러리를 설정하고 `<i>` 태그를 통해 아이콘을 적용하는 것은 웹 페이지나 어플리케이션에 시각적 요소를 추가하는 데 매우 유용한 방법입니다.

나는 이 명령어 사용함

npm install @fortawesome/fontawesome-free

 

더보기

Vue 3 프로젝트에서 `@fortawesome/fontawesome-free` 패키지를 설치한 후, 아이콘을 사용하는 방법은 몇 가지 단계를 포함합니다. 아래는 Font Awesome 아이콘을 Vue 3 프로젝트에 적용하는 방법을 설명합니다:

### 1. 패키지 설치
먼저, Font Awesome 패키지를 설치합니다. 이미 설치했다면 이 단계는 건너뛰어도 됩니다.

```bash
npm install @fortawesome/fontawesome-free
```

### 2. 프로젝트에 Font Awesome CSS 포함
Vue 3 프로젝트에서 Font Awesome의 CSS를 포함하는 가장 간단한 방법은 `main.js` 또는 `main.ts` 파일에서 직접 가져오는 것입니다.

```javascript
// main.js 또는 main.ts
import { createApp } from 'vue'
import App from './App.vue'
import '@fortawesome/fontawesome-free/css/all.css'  // Font Awesome CSS import

createApp(App).mount('#app')
```

이렇게 하면, Font Awesome 스타일이 전역적으로 적용되어 프로젝트의 어느 곳에서나 아이콘을 사용할 수 있습니다.

### 3. 컴포넌트에서 아이콘 사용
아이콘을 포함하고 싶은 컴포넌트의 템플릿 부분에 `<i>` 태그와 함께 Font Awesome 클래스를 추가하여 아이콘을 사용할 수 있습니다.

```html
<template>
  <div>
    <i class="fas fa-user"></i> <!-- 사용자 아이콘 -->
    <i class="fas fa-envelope"></i> <!-- 메일 아이콘 -->
  </div>
</template>
```

### 4. 조건부 렌더링 또는 반복 렌더링
Vue에서는 조건부 렌더링이나 리스트 렌더링을 사용하여 다양한 아이콘을 동적으로 표시할 수 있습니다.

예를 들어, 사용자의 상태에 따라 다른 아이콘을 표시하려면 다음과 같이 할 수 있습니다:

```html
<template>
  <div>
    <i :class="isLoggedIn ? 'fas fa-sign-out-alt' : 'fas fa-sign-in-alt'"></i>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isLoggedIn = ref(false)
</script>
```

이 예제에서는 `isLoggedIn`이 `true`일 때 로그아웃 아이콘을, `false`일 때 로그인 아이콘을 표시합니다.

이렇게 Font Awesome을 Vue 3 프로젝트에 적용하여 다양하고 매력적인 아이콘을 웹 페이지에 추가할 수 있습니다. 이 방법은 전역적으로 스타일을 관리하기 쉽고, Vue의 리액티브 시스템과 잘 통합되어 효율적으로 아이콘을 사용할 수 있게 합니다.

아래 코드에서 label에 margin이 안먹히는 이유?

<template>
    <div class="card">
        <label>REPORTS</label>
        <ul>
            <li><i class="fa-solid fa-clock"></i>Real-Time</li>
            <li><i class="fas fa-user"></i>Audience</li>
            <li><i class="fa-solid fa-flag"></i>Conversions</li>
        </ul>
    </div>
</template>
<script setup>

</script>
<style>
.card{
    border-style: inherit;
    border-radius: 5px; /* 혹시 rem 으로..? */
    padding: 2rem;
    width:300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

label{
    margin-bottom: 15px;
    color:gray;
}

i{
    padding-right: 20px;
    color:gray;
}

ul {
    padding-left: 0; /* 왼쪽 패딩 제거 */
    list-style-type: none; /* 리스트 스타일 제거 */
}

li {
    margin-bottom: 0.5rem; /* 각 항목 사이의 간격 조정 */
}

</style>

CSS에서 `label` 태그의 `margin-bottom` 속성이 제대로 적용되지 않는 문제는 몇 가지 일반적인 이유로 발생할 수 있습니다. 여기서 몇 가지 가능한 원인과 해결 방법을 살펴보겠습니다.

### 1. 부모 컨테이너의 `display` 속성
`label` 태그가 있는 컨테이너의 CSS `display` 속성이 `flex`나 `grid`로 설정되어 있는 경우, `margin` 속성이 예상대로 작동하지 않을 수 있습니다. 이는 `flex`나 `grid` 레이아웃에서는 `margin`의 동작이 달라질 수 있기 때문입니다.

### 2. 상속받은 스타일
다른 CSS 규칙에 의해 `label` 태그의 `margin`이 상속받은 값으로 덮어쓰여질 수 있습니다. 이를 확인하기 위해 개발자 도구를 사용하여 해당 요소의 스타일 계산을 검사하고 어떤 스타일이 적용되었는지 확인할 수 있습니다.

### 3. 적용되는 다른 CSS 규칙
`label` 요소에 직접적으로 적용되거나 상위 요소에서 적용되는 CSS 규칙에 의해 `margin`이 무시될 수 있습니다. 예를 들어, 상위 요소에 `align-items: center;` 같은 속성이 있으면, 내부 요소의 `margin`이 예상과 다르게 적용될 수 있습니다.

### 4. 브라우저 기본 스타일
일부 브라우저는 `label` 태그에 기본 스타일을 적용할 수 있습니다. 이 기본 스타일에 의해 `margin`이 덮어쓰여질 수 있으므로, 명시적으로 스타일을 재설정하는 것이 좋습니다.

### 해결 방법:
위 문제를 해결하기 위해 몇 가지 조치를 취할 수 있습니다:

- **부모 요소의 `display` 속성 검토**: `label`을 포함하는 `div`나 다른 요소의 `display` 속성이 `margin`에 영향을 주고 있는지 확인하세요.
- **CSS 우선 순위 확인**: 개발자 도구를 사용하여 `label`에 적용된 최종 스타일을 확인하고, 필요한 경우 스타일 규칙의 우선 순위를 조정하세요.
- **CSS 초기화 또는 정규화 사용**: CSS 초기화 또는 정규화 스타일시트를 사용하여 브라우저 간 일관된 스타일을 적용할 수 있습니다.

```css : 이 방법대로 하니까 먹힘

label {
    display: block; /* label을 블록 레벨 요소로 만들어 margin 적용 가능하게 함 */
    margin-bottom: 15px;
    color: gray;
}


```

`display: block;`을 추가하여 `label` 요소를 블록 레벨 요소로 만드는 것이 일반적인 해결책 중 하나입니다. 이렇게 하면 `margin` 속성이 예상대로 적용될 가능성이 높아집니다.

 

'개인공부' 카테고리의 다른 글

[graphql] gpt 질의응답 및 graphql-db연동의 prisma  (1) 2024.05.17
[css,vuetify] align  (2) 2024.05.13
[vuetify]sizing  (1) 2024.05.07
[vuetify3] vuecli 버전 적용하기 (v-app, v-main)  (1) 2024.04.28
[vuetify3] <script> <script setup> bottom-drawer  (1) 2024.04.28

'개인공부' Related Articles

티스토리툴바