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

푸터 스타일링 1

지금부터 푸터를 CSS로 스타일링해보겠습니다.


CSS 코드​

푸터 스타일링 CSS
#footer {
    background: #111111;
}

#footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
}

#footer a {
    font-size: 14px;
    color: #fff;
}

#footer a:hover {
    opacity: 0.6;
}

#footer .social {
    margin-top: 16px;
}

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

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

#footer p {
    font-size: 14px;
}

푸터의 스타일은 크게 복잡하지 않습니다.

왜냐하면 간결하게 정보를 제공하는 역할을 하기 때문에, 스타일을 간단하게 유지하는 것이 좋기 때문입니다.


컨테이너 스타일링​

컨테이너 스타일링 CSS
#footer {
    background: #111111;
}

#footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
}

먼저 푸터의 배경색을 검정색으로 설정했습니다.

보통 푸터는 웹페이지의 내용과 분리되어 정보를 전달하는 부분이기 때문에, 배경색을 지금까지 사용한 배경색과 반대로 설정하는 것이 좋습니다.

푸터의 컨테이너는 display: flex; 속성을 사용하여 푸터를 flex 컨테이너로 만들었습니다.

flex 컨테이너로 만든 것은 아래 속성들을 사용하기 위함입니다.

  • flex-direction: column; 속성을 사용하여 푸터 안의 내용을 세로로 배치

  • align-items: center; 속성을 사용하여 푸터의 내용을 수평 가운데로 정렬

  • justify-content: center; 속성을 사용하여 푸터의 내용을 수직 가운데로 정렬

위 속성들을 사용하여 푸터의 내용을 세로로 쌓아나가면서, 수직, 수평 양쪽 모두 가운데로 정렬할 수 있게 되었습니다.

다음 내용이 궁금하다면?

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