메가박스 사이트 따라 만들기 - 푸터영역

megabox20

푸터 영역

Emmit 기능

ul>li.icon.s$*5>a[#]>span

<결과>

<ul>
  <li class="icon s1"><a href="#"><span></span></a></li>
  <li class="icon s2"><a href="#"><span></span></a></li>
  <li class="icon s3"><a href="#"><span></span></a></li>
  <li class="icon s4"><a href="#"><span></span></a></li>
  <li class="icon s5"><a href="#"><span></span></a></li>
</ul>

white-space: nowrap; : 두 줄로 만들 때

 

결과

HTML

<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 id="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>

 

style.css

/* 푸터 */
.footer_sns {
  position: absolute;
  right: 17px;
  top: 33px;
  z-index: 1;
}

.footer_sns li {
  display: inline-block;
  margin-left: 4px;
}

.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: 5px;
  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;
}

 

출력