푸터 영역

메가박스 사이트 만들기

동영상 보며 코딩하기 -메가박스 사이트 만들기 

web's 동영상 바로가기

열아홉번째 강의 : 푸터영역

평소화면

max-width 960일때

 

<footer id="footer">
        <div id="footer_sns">
            <div class="container">
                <div class="footer_sns">
                    <ul>
                        <li class="icon s1"><a href="#"><span class="ir_pm">트위터</span></a></li>
                        <li class="icon s2"><a href="#"><span class="ir_pm">페이스북</span></a></li>
                        <li class="icon s3"><a href="#"><span class="ir_pm">인스타그램</span></a></li>
                        <li class="icon s4"><a href="#"><span class="ir_pm">구글 플레이</span></a></li>
                        <li class="icon s5"><a href="#"><span class="ir_pm">아이폰 앱스토어</span></a></li>
                    </ul>
                    <div class="tel">
                        <a href="#">ARS <em>1544-0070</em></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer_info">
            <div class="container">
                <div class="row">
                    <div class="footer_info">
                        <h2><img src="assets/img/logo_footer.png" alt="megabox"></h2>
                        <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>
                            <li><a href="#">고객센터</a></li>
                            <li><a href="#">윤리경영</a></li>
                        </ul>
                        <address>
                            <p>서울특별시 강남구 도산대로 156, 2층 메가박스중앙(주) (논현동, 중앙엠앤비사옥)<br><span class="bar2">대표자명 김진선</span> 개인정보보호 책임자 경영지원실 실장 박영진<br><span class="bar2">사업자등록번호 211-86-59478</span> 통신판매업신고번호 제 833호</p>
                            <p>Copyright 2014 by MegaboxJoongAng Inc. All right reserved</p>
                        </address>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    

 

/*footer*/
.footer_sns {position: absolute; right: 17px;top: 33px; z-index: 1;}
.footer_sns ul {}
.footer_sns li {display: inline-block; margin: 0 2px; }
.footer_sns li a {display: block; width: 36px; height: 36px;}
.footer_sns li.s1 {background-position: 0 -375px;}
.footer_sns li.s2 {background-position: -36px -375px;}
.footer_sns li.s3 {background-position: -72px -375px;}
.footer_sns li.s4 {background-position: -108px -375px;}
.footer_sns li.s5 {background-position: -144px -375px;}
.footer_sns li.s1:hover {background-position: 0 -411px;}
.footer_sns li.s2:hover {background-position: -36px -411px;}
.footer_sns li.s3:hover {background-position: -72px -411px;}
.footer_sns li.s4:hover {background-position: -108px -411px;}
.footer_sns li.s5:hover {background-position: -144px -411px;}
.footer_sns .tel {text-align: right; padding-top: 5px;}
.footer_sns .tel a {color: #8f8f8f; font-size: 21px; }
.footer_sns .tel a em {color: #fff;}

.footer_info {padding: 50px 0; width: 80%;}
.footer_info h2 img {width: 150px;}
.footer_info ul {padding: 15px 0;}
.footer_info li {position: relative; display: inline; padding-right: 16px; white-space: nowrap;}
.footer_info li:after {content: ''; position: absolute; right: 5px; top: 6px; width: 1px; height: 11px; background: #8f8f8f;}
.footer_info li:last-child:after {width: 0; height: 0;}
.footer_info li a {color: #8f8f8f;}
.footer_info address p {color: #8f8f8f; padding-bottom: 15px;}

 

@media (max-width: 960px){
	.footer_sns {position: static; text-align: center; background: #352c2c; padding-bottom: 15px;}
    .footer_sns .tel {display: none;}
    .footer_info {width: 100%; text-align: center;}
}