Footer basic

브라우저 크기를 줄였을 때 footer 크기를 그대로 유지할려면 #footer min-width 1920px 혹은 #wrap min-width 1920px 을 주면 됩니다.

                              
<div id="wrap">
  <div class="container">
      <div class="contents">
          <div class="contBox">
              <span>콘텐츠 박스</span>
          </div>
      </div>
  </div>
  <div id="footer">
      <div class="inner">
          <div class="logoArea">
              <a href="#">
                  <img src="" alt="">
              </a>
          </div>
          <div class="linkContainer">
              <div class="linkArea">
                  <ul>
                      <li>
                          <a href="#" title="link01">link01</a>
                      </li>
                      <li>
                          <a href="#" title="link02">link02</a>
                      </li>
                      <li>
                          <a href="#" title="link03">link03</a>
                      </li>
                      <li>
                          <a href="#" title="link04">link04</a>
                      </li>
                  </ul>
              </div>
              <div class="linkArea">
                  <ul>
                      <li>
                          <a href="#" title="link05">link05</a>
                      </li>
                      <li>
                          <a href="#" title="link06">link06</a>
                      </li>
                      <li>
                          <a href="#" title="link07">link07</a>
                      </li>
                      <li>
                          <a href="#" title="link08">link08</a>
                      </li>
                  </ul>
              </div>
          </div>
          <div class="bottomArea">
              <div class="inner">
                  <p class="copy">Copyright © 2021 Company. ALL RIGHTS RESERVED.</p>
              </div>
          </div>
      </div>
  </div>
</div>

                              
.contents{width: 100%;}
.contBox{position: relative; min-height: calc(100vh - 322px); text-align: center; font-size: 36px; color: #fff; font-family: 'Noto Sans';
background-color: #444;
  span{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
}
#footer{width: 100%; background-color: #292a2d;
  >.inner{padding: 40px; max-width: 1200px; margin: 0 auto;
    .logoArea{margin-bottom: 20px;
      a{display: inline-block;}
      img{width: 200px;}
    }
    .linkContainer{display: flex; padding-bottom: 40px; border-bottom: 1px solid #fff;}
    .linkArea{flex: 0.5; margin-left: auto;
      ul{display: flex; flex-direction: column;
        li{ 
          a{font-size: 16px; font-family: 'Noto Sans'; color: #fff;
            &:hover{text-decoration: underline;}
          }
          +li{margin-top: 10px;}
        }
      }
    }
    .bottomArea{
      >.inner{height: 58px; line-height: 58px;
        p.copy{font-size: 14px; color: #fff; font-family: '맑은 고딕'; text-align: center;}
      }
    }
  }
}

                              
#wrap .contents {
  width: 100%;
}

#wrap .contBox {
  position: relative;
  min-height: calc(100vh - 322px);
  text-align: center;
  font-size: 36px;
  color: #fff;
  font-family: 'Noto Sans';
  background-color: #444;
}

#wrap .contBox span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#wrap #footer {
  width: 100%;
  background-color: #292a2d;
}

#wrap #footer > .inner {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

#wrap #footer > .inner .logoArea {
  margin-bottom: 20px;
}

#wrap #footer > .inner .logoArea a {
  display: inline-block;
}

#wrap #footer > .inner .logoArea img {
  width: 200px;
}

#wrap #footer > .inner .linkContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 40px;
  border-bottom: 1px solid #fff;
}

#wrap #footer > .inner .linkArea {
  -webkit-box-flex: 0.5;
      -ms-flex: 0.5;
          flex: 0.5;
  margin-left: auto;
}

#wrap #footer > .inner .linkArea ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#wrap  #footer > .inner .linkArea ul li a {
  font-size: 16px;
  font-family: 'Noto Sans';
  color: #fff;
}

#wrap #footer > .inner .linkArea ul li a:hover {
  text-decoration: underline;
}

#wrap #footer > .inner .linkArea ul li + li {
  margin-top: 10px;
}

#wrap #footer > .inner .bottomArea > .inner {
  height: 58px;
  line-height: 58px;
}

#wrap #footer > .inner .bottomArea > .inner p.copy{
  font-size: 14px; 
  color: #fff;
  font-family: '맑은 고딕';
  text-align: center;
}

다운로드

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.

콘텐츠 박스