본문으로 건너뛰기
실습하기

푸터 스타일링 2

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


푸터 링크 스타일링​

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

#footer a:hover {
    opacity: 0.6;
}

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

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

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

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


SNS 링크 스타일링​

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로 설정했습니다.


푸터 문구 스타일링​

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

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

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

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!