lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter1Title

webLightPracticeChapter2Title

webLightPracticeChapter4Title

webLightPracticeChapter5Title

webLightPracticeChapter6Title

# 메뉴 내 버튼 스타일

메뉴 내 버튼을 스타일링하고, 아이콘을 작성하는 방법에 대해 알아보겠습니다.

```css title="메뉴 내 버튼 스타일"
.navbar .btn {
  margin-right: 24px;
}
```

- `margin-right: 24px;`: 오른쪽 여백을 24px로 설정합니다.

```css title="메뉴 내 버튼 스타일"
.fas.fa-arrow-right {
  margin-left: 8px;
  font-size: 14px;
}
```

- `margin-left: 8px;`: 왼쪽 여백을 8px로 설정합니다.
  이를 통해 버튼 안에 있는 화살표 아이콘에 자연스러운 여백을 제공합니다.

- `font-size: 14px;`: 아이콘의 글자 크기를 14px로 설정합니다.

<br />

## 아이콘 작성방법

아이콘을 작성하는 방법은 다양합니다.

직접 그리거나 이미지를 사용하는 방법 외에도, `fontawesome`과 같은 아이콘 라이브러리를 활용할 수 있습니다.

```html title="fontawesome 라이브러리 불러오기"
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
  integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
  crossorigin="anonymous"
/>
```

아이콘 사용을 위해 `<link>` 태그를 이용하여 fontawesome 라이브러리의 CSS 파일을 불러옵니다.

```html title="fontawesome 라이브러리 사용하기"
<i class="fas fa-arrow-right"></i>
```

fontawesome 라이브러리를 사용하면, 단순히 클래스에 `fas fa-arrow-right`와 같이 아이콘의 이름을 지정함으로써 쉽게 아이콘을 추가할 수 있습니다.

추가적으로, [fontawesome의 공식 웹사이트](https://fontawesome.com/search)에서 다양한 아이콘을 검색하여 사용할 수 있습니다.