Footer 부분 코드 작성

Footer 부분의 결과물은 이렇다.

단순히 Header 부분의 코드를 복사/붙여넣기 한 것과 같다.

다만 그러기 전에 Container CSS 속성에 margin-bottom: 30px를 추가해 줘야 한다.

추가하지 않으면 Footer부분과 Container의 아랫 부분이 붙어버릴 것이다.

~/Web-Practice/style.css

...

.container {
    width: 1080px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
}

...

Container 부분에 margin-bottom 값을 설정해준 후, Footer부분의 스타일을 설정해 보자.

일단 index.html 파일에서 Footer부분에 'Footer' 텍스트를 넣어준다.

~/Web-Practice/style.css

...

.footer {
    width: 100%;
    height: 60px;
    background-color: lightblue;
}

그런 후 header 속성을 복사한 후 CSS 파일의 맨 아랫 부분에 붙여넣기를 해주고 class명을 footer로 바꿔주자

이로써 footer 부분까지 레이아웃 구성을 끝냈다.