오늘의집

header

<header>
      <div class="header-container">
        <div class="header-content">
          <a class="logo" href="/"
            ><img src="./assets/image/svg-image.png" alt="로고"
          /></a>

          <div class="header-area1">
            <a href="">커뮤니티</a>
            <a href="">쇼핑</a>
            <a href="">이사/시공/수리</a>
          </div>
          <div class="header-area2">
            <div class="input-area">
              <button><i class="fa-solid fa-magnifying-glass"></i></button>
              <input type="text" placeholder="통합검색" />
            </div>

            <button class="cart-area">
              <i class="fa-solid fa-cart-shopping"></i>
            </button>
            <div class="login-area">
              <a href="">로그인</a>
              <a href="">회원가입</a>
              <a href="">고객센터</a>
            </div>
            <button class="writing-button">
              <p>글쓰기</p>
              <i class="fa-solid fa-chevron-down"></i>
            </button>
          </div>
        </div>
      </div>
      <nav></nav>
    </header>

/* header */
.header-container .header-content {
  display: flex;
  align-items: center;
  max-width: 1256px;
  margin: 0 auto;
  padding: 2rem 6rem;
  box-sizing: border-box;
}
.header-content .logo {
  margin-right: 3.5rem;
  width: 7.4rem;
  height: 3rem;
}
.header-content .header-area1 {
  display: flex;
}
.header-content .header-area1 a {
  display: block;
  padding: 0 1.5rem;
  font-size: 1.8rem;
  font-weight: 600;
}
.header-content .header-area1 a:hover {
  color: #35C5F0;
}
.header-content .header-area2 {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  margin-left: auto;
  
}
.header-content .header-area2 .input-area {
  display: flex;
  align-items: center;
  width: 30rem;
  height: 4rem;
  font-size: 1.4rem;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 0 1rem;
  padding-right: 2rem;
}
.header-content .header-area2 .input-area i {
  font-size: 1.7rem;
  color: gray;
}
.header-content .header-area2 .input-area input {
  padding-left: 1rem;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  color: gray;
  border: none;
  
}
.header-content .header-area2 .cart-area i {
  padding-left: 1.5rem;
  font-size: 1.8rem;
}

.header-content .header-area2 .login-area {
  display: flex;
  padding: 0 2rem;
}
.header-content .header-area2 .login-area a {
  display: flex;
  align-items: center;
  
}
.header-content .header-area2 .login-area a::after {
  content: "";
  display: inline-block;
  background-color: #2F3438;
  height: 1rem;
  width: 0.1rem;
  margin: 1rem;
}
.header-content .header-area2 .login-area a:nth-of-type(3)::after {
  display: none;
}

.header-content .header-area2 .writing-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 9.5rem;
  height: 4rem;
  background-color: #35C5F0;
  border-radius: 5px;
  font-size: 1.4rem;
}
.header-content .header-area2 .writing-button p {
  padding: 0;
  margin-right: 1rem;
  color: white;
}
.header-content .header-area2 .writing-button i {
  color: white;
}

@media screen and (max-width:1255px) {
  .header-content .header-area2 .login-area a:nth-of-type(3) {
    display: none;
  }
  .header-content .header-area2 .login-area a:nth-of-type(2)::after {
    display: none;
  }
  .header-content .header-area2 .input-area {
    width: 20rem;
  }
  .header-content .header-area1 a {
    padding: 0 1rem;
  }
}

@media screen and (max-width:1255px)

footer

<footer>
      <div class="footer-content">
        <div class="center-area">
          <div class="center-title">
            <a href=""><h2>고객센터</h2></a>
            <i class="fa-solid fa-chevron-right"></i>
          </div>
          <a class="callnumber" href="">1670-0876</a>
          <span>09:00~18:00</span>
          <p>
            평일: 전체 문의 상담 가능<br />주말,공휴일: 오늘의집 직접배송,
            이사/시공/수리 문의 상담 가능
          </p>
          <button>카톡 상담(평일 09:00~18:00)</button>
          <button>이메일 문의</button>
        </div>
        <div class="information-area1">
          <div class="area1-1">
            <a href="">회사소개</a>
            <a href="">채용정보</a>
            <a href="">이용약관</a>
            <a href="">개인정보 처리방침</a>
            <a href="">공지사항</a>
            <a href="">안전거래센터</a>
          </div>
          <div class="area1-2">
            <a href="">입점신청</a>
            <a href="">제휴/광고 문의</a>
            <a href="">사업자 구매 회원</a>
            <a href="">시공파트너 안내</a>
            <a href="">상품광고 소개</a>
            <a href="">고객의 소리</a>
          </div>
        </div>
        <div class="information-area2">
          <ul>
            <li>(주)버킷플레이스</li>
            <li>대표이사 이승재</li>
            <li>서울 서초구 서초대로74길 4 삼성생명서초타워 25층, 27층</li>
            <li>contact@bucketplace.net</li>
            <li>사업자등록번호 119-86-91245</li>
            <li>사업자정보확인</li>
            <li>통신판매업신고번호 제2018-서울서초-0580호</li>
          </ul>
          <div class="service-area">
            <div class="service-1">
              <img src="./assets/image/footer.img1.png" alt="" />
              <p>오늘의집 서비스 운영<br />2021. 09. 08 ~ 2024. 09. 07</p>
            </div>
            <div class="service-2">
              <img src="./assets/image/footer.img2.png" alt="" />
              <p>
                고객님이 현금결제한 금액에 대해 우리은행과 채무지급보증 계약을
                체결하여 안전거래를 보장하고 있습니다.
                <span>서비스가입사실확인</span>
              </p>
            </div>
          </div>
          <p class="service-3">
            (주)버킷플레이스는 통신판매중개자로 거래 당사자가 아니므로, 판매자가
            등록한 상품정보 및 거래 등에 대해 책임을 지지 않습니다. 단,
            (주)버킷플레이스가 판매자로 등록 판매한 상품은 판매자로서 책임을
            부담합니다.
          </p>
          <div class="information-area2-icons">
            <a href=""
              ><img src="./assets/image/_footer-icon1.svg" alt="유튜브"
            /></a>
            <a href=""
              ><img src="./assets/image/footer-icon2.svg" alt="인스타"
            /></a>
            <a href=""
              ><img src="./assets/image/footer-icon3.svg" alt="페이스북"
            /></a>
            <a href=""
              ><img src="./assets/image/footer-icon4.svg" alt="카카오스토리"
            /></a>
            <a href=""
              ><img src="./assets/image/footer-icon5.svg" alt="네이버"
            /></a>
          </div>
          <p>Copyright 2014. bucketplace, Co., Ltd. All rights reserved.</p>
        </div>
      </div>
    </footer>

/* footer */
footer {
  
  background-color: rgb(247, 249, 250);
  
}
.footer-content {
  max-width: 1256px;
  margin: auto;
  display: flex;
  padding: 4rem 6rem;
  font-family: 'noto-sans-kr';
}
.footer-content .center-area {
  padding-right: 3rem;
  border-right: 1px solid rgb(234, 237, 239);
  flex: 1;
}
.footer-content .center-area .callnumber:hover {
  text-decoration: underline;
  text-underline-position : under;
}
.footer-content .center-area .center-title {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}
.footer-content .center-area .center-title a {
  font-size: 1.8rem;
  
}
.footer-content .center-area .center-title a:hover {
  text-decoration: underline;
  text-underline-position : under;
}
.footer-content .center-area a {
  font-size: 1.6rem;
  font-weight: 600;
  margin-right: 0.6rem;
}
.footer-content .center-area span {
  font-size: 1.4rem;
}
.footer-content .center-area p {
  font-size: 1.2rem;
  margin-top: 0.8rem;
  margin-bottom: 1.2rem;
}
.footer-content .center-area button {
  display: block;
  font-size: 1.4rem;
  border: 1px solid rgb(218, 221, 224);
  padding: 0.8rem;
  border-radius: 0.4rem;
}
.footer-content .center-area button:nth-of-type(1) {
  margin-bottom: 1.2rem;
}
.footer-content .center-area button:nth-of-type(2):hover {
  text-decoration: underline;
}
.footer-content .information-area1 {
  display: flex;
  flex: 1;
  font-size: 1.2rem;
  color: rgb(47, 52, 56);
} 

.footer-content .information-area1 .area1-1 {
  display: flex;
  flex-direction: column;
  padding-left: 3rem;
}
.footer-content .information-area1 .area1-1 a {
  padding: 0 2.6rem 2rem 0;
}
.footer-content .information-area1 .area1-1 a:hover {
  text-decoration: underline;
}
.footer-content .information-area1 .area1-1 a:nth-of-type(4) {
  font-weight: 600;
}
.footer-content .information-area1 .area1-2 {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgb(234, 237, 239);
  padding-right: 3rem;
}

.footer-content .information-area1 .area1-2 a {
  padding-bottom: 2rem;
}
.footer-content .information-area1 .area1-2 a:hover {
  text-decoration: underline;
}
.footer-content .information-area2 {
  padding-left: 3rem;
  display: flex;
  flex-direction: column;
  flex: 2;
  color: rgb(130, 140, 148);
}
.footer-content .information-area2 ul {
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
  line-height: 1.8;
  
}
.footer-content .information-area2 ul li {
  float: left;
  text-align: center;
}
.footer-content .information-area2 ul li::after {
  content: "";
  display: inline-block;
  background-color: rgb(130, 140, 148);
  height: 0.8rem;
  width: 0.1rem;
  margin: 0 0.4rem;
  
}
.footer-content .information-area2 ul li:nth-of-type(3)::after,
.footer-content .information-area2 ul li:nth-of-type(6)::after,
.footer-content .information-area2 ul li:nth-of-type(7)::after {
  display: none;
}
.footer-content .information-area2 ul li:nth-of-type(6) {
  font-weight: 600;
}
.footer-content .information-area2 ul li:nth-of-type(4):hover,
.footer-content .information-area2 ul li:nth-of-type(6):hover {
  text-decoration: underline;
}
.footer-content .information-area2 .service-area {
  display: flex;
  
  
}
.footer-content .information-area2 .service-area .service-1 {
  display: flex;
  justify-content: center;
  
  
  
}

.footer-content .information-area2 .service-area .service-1 img {
  width: 3.2rem;
  height: 3.2rem;
  margin-right: 0.6rem;
}
.footer-content .information-area2 .service-area .service-2 {
  display: flex;
  justify-content: center;
  padding-left: 1.6rem;
  flex: 2;
}

.footer-content .information-area2 .service-area .service-2 span {
  font-weight: 600;
}
.footer-content .information-area2 .service-area .service-2 img {
  width: 3.2rem;
  height: 3.2rem;
  margin-right: 0.6rem;
  
}
.footer-content .information-area2 .service-3 {
  font-size: 1rem;
  margin: 1.2rem 0;
}
.footer-content .information-area2 .information-area2-icons {
  display: flex;
  font-size: 1rem;
  margin-bottom: 1.2rem;
  
}
.footer-content .information-area2 .information-area2-icons a {
  margin-right: 2rem;
  color: rgb(130, 140, 148);
}
.footer-content .information-area2 .information-area2-icons a:hover {
  color: gray;
}
@media screen and (max-width:1023px) {
  .header-container .header-content {
    padding: 2rem 4rem;
  }
  .footer-content {
   flex-wrap: wrap;
   padding: 4rem;
  }
  .footer-content .center-area {
    flex-basis: 50%;
  }
  .footer-content .information-area1 {
    flex-basis: 50%;
    align-items: center;
  }
  .footer-content .information-area1 .area1-1 {
    width: 50%;
  }
  .footer-content .information-area1 .area1-1 a:nth-of-type(6) {
    padding-bottom: 0;
  }
  .footer-content .information-area1 .area1-2 {
    width: 50%;
    padding-right: 0;
    border-right: none;
  }
  .footer-content .information-area1 .area1-2 a:nth-of-type(6) {
    padding-bottom: 0;
  }
  .footer-content .information-area2 {
    padding: 3rem 0 0 0;
    border-top: 1px solid rgb(234, 237, 239);
    margin-top: 3rem;

  }
  .footer-content .information-area2 .service-area .service-2 {
    justify-content: flex-start;
    align-items: center;
  }
}

@media screen and (max-width:1023px)

처음에 information-area2를 밑으로 내려야하는데 wrap이 생각남 !
그리고 생각이 안나서 좀 찾다가 드림코딩에서 봤던 basis로 위 두 div를 50%씩 주면 information-area2 밑으로 내려가겠다는 생각을하고 했더니 완료했음! 기존의 오늘의 집 홈페이지는 grid-template 이런거 썼는데 내가 한 방법이 좋은방법인지는 모르겠지만 쉽게했음.