# Spotify 하단 footer 공략집


안녕하세요! 코딩알려주는 누나에요! 여러분들이 footer파트를 하다가 또는 시작도 하지 못하고 두려움에 떨고 있으실까봐 이 누나가 여러분들을 도와주러 왔어요!😆
사실 footer파트가 **절대 쉽지 않습니다.** 그래서 여러분들이 못끝내셨더라도 좌절하지 마시고 저와함께 해볼까요?👩👩

참고 웹사이트🎞 : https://noona-spotify.netlify.app/
최종 소스코드 📚: https://github.com/legobitna/noona-spotify


## Step 1 제일큰 컨테이너 만들기🛤
모든 내용을 포함하는 제일큰 컨테이너를 만들어 봅시다 (사진속 노란색 박스)

<footer>
        <div class="container">
        </div>
</footer>
        

.container {
  max-width: 1170px;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 50px;
}

## Step 2 컨테이너 가운데로 배치시키기 🏋️‍♂️
컨테이너를 가운데로 배치시키기 위해 flexbox를 footer에 추가한다

footer {
  height: 530px;
  background-color: black;
  display: flex;
  justify-content: center;
}

## Step 3 컨테이너안에 박스 3개 넣기 🧱

<footer>
        <div class="container">
            <div>
             메뉴파트 
            </div>
            
            <div>
             국가파트 
            </div>
            
            <div>
             하단메뉴 
            </div>
        </div>
</footer>

## Step 4 메뉴파트에 다시 박스 2개 넣기
박스 2개를 넣고 6:4 비율로 나누기

<footer>
        <div class="container">
            <div class="footer-menu">
                 <div class="first-box">
                 </div>
                 <div class="second-box">
                 </div>
            </div>
            
            <div>
             국가파트 
            </div>
            
            <div>
             하단메뉴 
            </div>
        </div>
</footer>

.first-box {
  width: 60%;
  display: flex;
  justify-content: space-between;
}
.second-box {
  width: 40%;
  display: flex;
  justify-content: flex-end;
}

두 박스를 옆으로 배열하기 위해 flexbox 추가

.footer-menu {
  display: flex;
  justify-content: space-between;
  height: 346px;
}

## Step 5 메뉴와 아이콘 부분 채워넣기 🎉
첫번째 박스에는 4개의 컬럼과 그 내용을, 두번쨰 박스에는 아이콘을 넣어준다

<footer>
        <div class="container">
            <div class="footer-menu">
                 <div class="first-box">
                    <div>
                        <img src="./image/logo.png" width=132>
                    </div>
                    <div class="column">

                        <div class="sub-title">COMPANY</div>
                        <a href="#" class="footer-menu-item">About</a>
                        <a href="#" class="footer-menu-item">Jobs</a>
                        <a href="#" class="footer-menu-item">For the Record</a>
                    </div>
                    <div class="column">
                        <div class="sub-title">COMMUNITIES</div>
                        <a href="#" class="footer-menu-item">For Artists</a>
                        <a href="#" class="footer-menu-item">Developers</a>
                        <a href="#" class="footer-menu-item">Advertising</a>
                        <a href="#" class="footer-menu-item">Investors</a>
                        <a href="#" class="footer-menu-item">Vendors</a>
                    </div>
                    <div class="column">
                        <div class="sub-title">USEFUL LINKS</div>
                        <a href="#" class="footer-menu-item">Support</a>
                        <a href="#" class="footer-menu-item">Web Player</a>
                        <a href="#" class="footer-menu-item">Free Mobile App</a>
                    </div>
                 </div>
                 <div class="second-box">
                    <div class="icon-box">
                        <i class="fab fa-instagram icon"></i>
                    </div>
                    <div class="icon-box">
                        <i class="fab fa-twitter icon"></i>
                    </div>
                    <div class="icon-box">
                        <i class="fab fa-facebook-f icon"></i>
                    </div>
                 </div>
            </div>
            
            <div>
             국가파트 
            </div>
            
            <div>
             하단메뉴 
            </div>
        </div>
</footer>

첫번쨰 메뉴박스에 들어간 스타일

.column {
  display: flex;
  flex-direction: column;
  padding: 0 15px;
}
.sub-title {
  color: #919496;
  font-weight: 900;
  margin: 20px 0px;
}.column {
  display: flex;
  flex-direction: column;
  padding: 0 15px;
}
.sub-title {
  color: #919496;
  font-weight: 900;
  margin: 20px 0px;
}
.footer-menu-item {
  padding-bottom: 15px;
  padding-top: 3px;
  font-size: 16px;
}

두번째 아이콘 박스에 들어간 스타일

.icon-box {
  width: 54px;
  height: 54px;
  background-color: #222322;
  border-radius: 50%;
  margin-right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon {
  font-size: 24px;
}
.icon:hover {
  color: #2de26d;
}

## Step 6. 국가파트 꾸며주기 🌍

<!-- 위에내용 생략  -->
<div class="first-line">
    <i class="fas fa-globe-africa"></i>
                USA
</div>

USA글씨를 오른쪽 끝으로 두기위한 flexbox 추가

.first-line {
  color: #919496;
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
}

## Step 7. 하단 메뉴파트 꾸미기 🚀
왼쪽 오른쪽으로 나눌 박스 2개 추가

<!-- 상단내용 생략  -->
<div class="first-line">
    <i class="fas fa-globe-africa"></i>
    USA
</div>
<div class="second-line">
    <div>
        메뉴들 
    </div>
    <div>
        copy right 
    </div>
</div>

.second-line {
  color: #919496;
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

메뉴들과 copy right 부분에 내용 입력 및 꾸미기

<!--상단 생략  -->
<div class="second-line">
    <div>
        <a href="#" class="second-line-item">Legal</a>
        <a href="#" class="second-line-item">Privacy Center</a>
        <a href="#" class="second-line-item">Privacy Policy</a>
        <a href="#" class="second-line-item">Cookies</a>
        <a href="#" class="second-line-item">About Ads</a>
        <a href="#" class="second-line-item">Additional CA Privacy Disclosures</a>
    </div>
    <div>
        &copy; 2021 Spotify AB
    </div>
</div>

.second-line-item {
  margin-right: 24px;
  color: #919496;
}

**이렇게해서 하단부분을 끝냈습니다!!**
여러분들 정말 정말 이 어려운 하단 끝내시느라
수고하셨습니다! 😆🎉🎉
우리는 또 다음시간에 봐요! 안녕~~👍