본문으로 건너뛰기

푸터 스타일링 1

푸터 스타일링 1

예시 코드

푸터 스타일링 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; 속성을 사용하여 푸터의 내용을 수직 가운데로 정렬

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