3.17 - Wed / footer

HTML

 

어제 완성 못했던 footer부분을 끝냈다

 

                <footer id="footer">
                    <div class="footer_container">
                        <div class="gnb_footer">
                            <ul>
                                <li><a href="#">학교소개</a></li>
                                <li><a href="#">교육과정</a></li>
                                <li><a href="#">공지사항</a></li>
                                <li><a href="#">상담신청</a></li>
                                <li><a href="#">개인정보처리방침</a></li>
                            </ul>
                        </div>
                        <h1 class="logo_footer">
                            <img src="./images/logo2.png">
                        </h1>
                        <div class ="address">
                            <ul>
                                <li>서울특별시 강동구 천호대로 995 금복빌딩 3,4층 경일게임아카데미(지하철 5,8호선 1번출구 10m이내)</li>
                                <li>TEL : 02-479-4050 FAX : 02-479-4056 대표자 : 박병준 개인정보관리책임자 : 서혁준</li>
                                <li>사업자번호 : 212-81-89247 통신판매허가번호 : 제2020-서울강동-1360호</li>
                                <li class="copyright">Copyright © 2016. Kyungil Technical College. All rights reserved.</li>
                            </ul>
                        </div>
                    </div>
                </footer>

 

CSS

 

 /*footer*/

 #footer{
     width: 100%;
     height: 137px;
     padding: 20px 0;
     margin: 50px 0 0 0;
     background: #323232;
 }

.footer_container{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}

/*
.gnb_footer{
    float: left;
}
이것도 필요없음*/

.gnb_footer > ul{
    float: left;
    width: 1200px;
    height: 20px;
    margin: 0 auto;
}

.gnb_footer > ul > li{
    float: left;
    padding: 0 20px;
}

.gnb_footer > ul > li > a{
    font-size: 12px;
    color: #aeaeae;
}

.logo_footer{
    display: inline-block;
    float: left;
    margin: 20px 0 0 10px;
}

.address{
    display: inline-block;
    width: 600px;
    height: 80px;
    margin: 20px 0 0 50px;
}

.address > ul > li{
    font-size: 12px;
    color: #aeaeae;
    line-height: 20px;
}

.copyright{
    margin: 3px 0 0 0;
}

 

RESULT

 

footer완성

이번에는 옆에 주소부분을 ul li 사용해서 써봤다.

copyright에 background color를 주려고 li에 class를 부여해봤는데 이미 주소랑 li로 묶여있어서 위에서준 설정값 변동이 불가능 했다.