푸터 스타일링 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;
속성을 사용하여 푸터의 내용을 수직 가운데로 정렬
위 속성들을 사용하여 푸터의 내용을 세로로 쌓아나가면서, 수직, 수평 양쪽 모두 가운데로 정렬할 수 있게 되었습니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!