lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

webLightPracticeChapter6Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webLightPracticeChapter1Title

lesson12Title

webLightPracticeChapter2Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter4Title

webLightPracticeChapter5Title

# 푸터 스타일링 2

이어서 푸터의 링크, SNS 링크, 문구를 스타일링해보겠습니다.

<br />

## 푸터 링크 스타일링

```css title="푸터 링크 스타일링 CSS"
#footer a {
    font-size: 14px;
    color: #fff;
}

#footer a:hover {
    opacity: 0.6;
}
```

푸터의 링크들은 `font-size: 14px;` 속성을 사용하여 글자 크기를 14px로 설정했습니다.

그리고 `color: #fff;` 속성을 사용하여 글자 색을 흰색으로 설정했습니다.

마지막으로 `:hover` 선택자를 사용하여 마우스를 올렸을 때 투명도를 0.6으로 설정했습니다.

이렇게 하면 마우스를 올렸을 때 요소에 변화가 생겨 사용자가 마우스를 올렸을 때 클릭을 유도할 수 있습니다.

<br/>

## SNS 링크 스타일링

```css title="SNS 링크 스타일링 CSS"
#footer .social {
    margin-top: 16px;
}

#footer .social img {
    width: 20px;
    height: 20px;
}

#footer .social a {
    margin: 0 8px;
}
```

SNS 링크는 위에 있는 이메일 주소와 여백을 두기 위해 `margin-top: 16px;` 속성을 사용하여 위쪽 여백을 16px로 설정했습니다.

그리고 `width: 20px;` 속성과 `height: 20px;` 속성을 사용하여 아이콘의 너비와 높이를 20px로 설정했습니다.

아이콘끼리는 너무 붙어있어서 `margin: 0 8px;` 속성을 사용하여 아이콘 사이의 여백을 8px로 설정했습니다.

<br/>

## 푸터 문구 스타일링

```css title="푸터 문구 스타일링 CSS"
#footer p {
    font-size: 14px;
}
```

푸터의 문구는 `font-size: 14px;` 속성을 사용하여 글자 크기를 14px로 설정했습니다.

링크와 폰트 사이즈를 같게 설정하여 푸터의 내용이 깔끔하게 보이도록 했습니다.