HTML/CSS 💡[레이아웃 연습] 클론 페이지 ① - Microsoft 홈페이지(+반응형 추가, +리팩토링 완료)

(2023.03.25) 추가

기존에 작성한 코드는 반응형을 우겨넣은(?) 형태라 굉장히 지저분하고,

html 레이아웃도 상속을 고려하지 않아서 가독성이 매우 떨어지는 단점이 있었습니다.

수정하는 것보다 뜯어 고쳐서 새롭게 다시 해보자! 라는 생각이 들어서 처음부터 벽돌을 쌓는 기분으로 했는데,

이걸 계기로 리팩토링의 매력도 알게되었습니다. 😁

완성해놓고 나몰라라 끝이 아닌 계속해서 좋은 코드는 무엇일까 고민하는 자세를 가지고 임해야겠습니다.

무엇보다 css 코드가 반으로 줄어든게 제일 만족스럽습니다. (ㅋㅋ)

수정된 코드는 [바로가기]를 눌러주세요.

안녕하세요!!!

오늘은 그간 배운 것을 활용하여 클론 페이지를 만들어 보았습니다.

어떤 사이트를 해볼까 고민 많이 했는데 최근 AI로 급부상중인 Microsoft 사이트를 하기로 결정했습니다.

참, 오늘 Copilot 발표 영상 다들 보셨나요?

개인적으로 예전 애플 아이폰 발표 영상 봤을 때 느꼈던 충격을 또 한 번 느끼게 될 줄 몰랐습니다.

하루가 다르게 기술이 발전하고 시연되는 것을 보고 있자니 참 즐거우면서도

이걸 어떻게 활용해야 도태되지 않고 살아남을 수 있을까 하는 이런 저런 생각이 많았던 하루였습니다. 😁

다시 본론으로 돌아와서..

제가 참고한 사이트는 아래와 같습니다.

원본 사이트

https://www.microsoft.com/ko-kr/

Microsoft – 클라우드, 컴퓨터, 앱 및 게임

가정용 또는 비즈니스용 Microsoft 제품 및 서비스를 살펴보세요. Surface, Microsoft 365, Xbox, Windows, Azure 등을 쇼핑하세요. 다운로드 항목을 찾고 지원을 받으세요.

www.microsoft.com

원본 코드(수정 전)

클론 페이지

중간에 Xbox랑 비즈니스용 블록은 생략했습니다. 😅

html

👉 추가 사항 : 햄버거 메뉴(부트스트랩), 맨 위로 버튼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
  <!-- 부트스트랩 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <link rel="stylesheet" href="custom.css?a">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" media="screen and (max-width: 768px)" href="style_mobile.css">
  <title>Document</title>
</head>
<body>
  <header>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <img src="./images/menu.png" alt="">
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Microsoft 365</a></li>
        <li><a class="dropdown-item" href="#">Teams</a></li>
        <li><a class="dropdown-item" href="#">Windows</a></li>
        <li><a class="dropdown-item" href="#">Surface</a></li>
        <li><a class="dropdown-item" href="#">Xbox</a></li>
        <li><a class="dropdown-item" href="#">세일</a></li>
        <li><a class="dropdown-item" href="#">지원</a></li>
        <li><a class="dropdown-item" href="#">소프트웨어</a></li>
        <li><a class="dropdown-item" href="#">PC 및 장치</a></li>
        <li><a class="dropdown-item" href="#">엔터테인먼트</a></li>
        <li><a class="dropdown-item" href="#">기업 고객용</a></li>
        <li><a class="dropdown-item" href="#">개발자 및 IT</a></li>
        <li><a class="dropdown-item" href="#">기타</a></li>
        <li><a class="dropdown-item" href="#">사이트맵 보기</a></li>
      </ul>
    </div>
    <div>
      <img class="logo" src="./images/microsoft-logo.png" alt="">
    </div>
    <nav class="navibar">
      <a href="https://www.microsoft.com/ko-kr/microsoft-365?rtc=1" target="_blank" 
      class="quick-menu">Microsoft 365</a>
      <a href="#" class="quick-menu">Teams</a>
      <a href="#" class="quick-menu">Windows</a>
      <a href="#" class="quick-menu">Surface</a>
      <a href="#" class="quick-menu">Xbox</a>
      <a href="#" class="quick-menu">세일</a>
      <a href="#" class="quick-menu">지원</a>
    </nav>
    <nav class="navibar2">
      <div class="hamburger-menu">
        <p>Microsoft 전체</p>
      </div>
      <div class="search">
        <p>검색</p>
          <img src="./images/search.png" alt="search">
      </div>
      <div class="shopping-cart">
        <p>카트</p>
          <img src="./images/cart.png" alt="cart">
      </div>
      <div class="login">
        <p>로그인</p>
          <img src="./images/login.png" alt="login">
      </div>
    </nav>
  </header>
  <main>
    <div class="slide">
      <div class="product-desc">
        <h1>최대 25% 할인혜택</h1>
        <p>Surface, Xbox 및 Microsoft 365를 포함한 다양한 제품을 특가에 만나보세요.</p>
        <div class="click">
          <a href="https://www.microsoft.com/ko-kr/store/b/sale" target="_blank">
          지금 쇼핑하기</a>
        </div>
      </div>
      <div class="product-image">
        <img src="./images/slide1.png" alt="surface" class="laptop">
      </div>
    </div>
    <div class="sublink-container">
      <div class="sublink-item">
        <div class="icon">
          <img src="./images/windows.png" alt="windows">
        </div>
        <a href="#">내게 맞는 Microsoft 365 선택하기</a>
      </div>
      <div class="sublink-item">
        <div class="icon">
          <img src="./images/laptop.png" alt="laptop">
        </div>
        <a href="#">Surface 디바이스 쇼핑하기</a>
      </div>
      <div class="sublink-item">
        <div class="icon">
          <img src="./images/xbox2.png" alt="xbox2">
        </div>
        <a href="#">Xbox 게임 쇼핑</a>
      </div>
      <div class="sublink-item">
        <div class="icon">
          <img src="./images/windows.png" alt="windows">
        </div>
        <a href="#">Windows 11 받기</a>
      </div>
    </div>
    <div class="product">
      <div class="product-item">
        <img src="./images/surface.png" alt="surface">
        <h1>Surface Laptop 5</h1>
        <p>12세대 인텔 코어와 Windows 11를 기반으로 하는 정교한 스타일과 뛰어난 멀티태스킹 
        속도를 경험하세요.</p>
        <a href="https://www.microsoft.com/ko-kr/surface/devices/surface-laptop-5?
        icid=mscom_marcom_CPH1a_SurfaceLaptop5">자세한 내용 ></a>
      </div>
      <div class="product-item">
        <img src="./images/surface2.png" alt="surface2">
        <h1>Surface Laptop Studio</h1>
        <p>최고의 성능을 제공하는 Surface Laptop으로 창의력을 마음껏 발휘하세요. 
        이제 Windows 11과 함께 제공됩니다.</p>
        <a href="https://www.microsoft.com/ko-kr/surface/devices/surface-laptop-
        studio?icid=mscom_marcom_CPH2a_SurfaceLaptopStudio">지금 쇼핑하기 ></a>
      </div>
      <div class="product-item">
        <img src="./images/bing.png" alt="bing">
        <h1>새로운 Bing을 소개합니다</h1>
        <p>실제 질문을 던져보세요. 채팅하고 창작하세요. AI 기반의 웹용 Copilot을 통해 
        더 나은 답변을 얻으세요.</p>
        <a href="https://www.bing.com/new?icid=mscom_marcom_CPH3a_BingAI">새로운 
        Bing에 대해 알아보기 ></a>
      </div>
      <div class="product-item">
        <img src="./images/xbox.png" alt="xbox">
        <h1>Xbox Game Pass Ultimate</h1>
        <p>첫 한 달동안 1,000원의 이용료로 콘솔, PC, 휴대폰, 태블릿에서 100가지가 
        넘는 고품질 게임을 플레이하세요. (신규 구독만 사용가능)</p>
        <a href="https://www.xbox.com/ko-kr/games/store/xbox-game-pass-ultimate/
        cfq7ttc0khs0?icid=mscom_marcom_CPH4a_GamePassUltimate">지금 가입하기 ></a>
      </div>
    </div>
    <div class="etc">
      <p>Microsoft 팔로우</p>
      <img src="./images/facebook.png" alt="facebook">
      <img src="./images/twitter.png" alt="twitter">
    </div>
  </main>
  <footer>
    <nav>
      <div>
        <a href="#" class="main-menu">새로운 기능</a>
        <a href="#" class="sub-menu">Microsoft 365</a>
        <a href="#" class="sub-menu">게임</a>
        <a href="#" class="sub-menu">Surface Pro 9</a>
        <a href="#" class="sub-menu">Surface Laptop 5</a>
        <a href="#" class="sub-menu">Surface Laptop Studio</a>
        <a href="#" class="sub-menu">Surface Laptop Go 2</a>
        <a href="#" class="sub-menu">Windows 11 앱</a>
      </div>
      <div>
        <a href="#" class="main-menu">Microsoft Store</a>
        <a href="#" class="sub-menu">계정 프로필</a>
        <a href="#" class="sub-menu">다운로드 센터</a>
        <a href="#" class="sub-menu">Microsoft Store 지원</a>
        <a href="#" class="sub-menu">반품/환불</a>
        <a href="#" class="sub-menu">주문 조회</a>
      </div>
      <div>
        <a href="#" class="main-menu">교육</a>
        <a href="#" class="sub-menu">Microsoft Education</a>
        <a href="#" class="sub-menu">교육용 장치</a>
        <a href="#" class="sub-menu">교육용 Microsoft Teams</a>
        <a href="#" class="sub-menu">Microsoft 365 Education</a>
        <a href="#" class="sub-menu">Office Education</a>
        <a href="#" class="sub-menu">교육자 트레이닝 및 개발</a>
        <a href="#" class="sub-menu">학생 및 학부모용 특가 혜택</a>
        <a href="#" class="sub-menu">Azure for students</a>
      </div>
      <div>
        <a href="#" class="main-menu">기업 고객</a>
        <a href="#" class="sub-menu">Microsoft Security</a>
        <a href="#" class="sub-menu">Azure</a>
        <a href="#" class="sub-menu">Dynamics 365</a>
        <a href="#" class="sub-menu">Microsoft 365</a>
        <a href="#" class="sub-menu">Microsoft Advertising</a>
        <a href="#" class="sub-menu">Microsoft Industry</a>
        <a href="#" class="sub-menu">Microsoft Teams</a>
      </div> 
      <div>
        <a href="#" class="main-menu">개발자 및 IT</a>
        <a href="#" class="sub-menu">개발자 센터</a>
        <a href="#" class="sub-menu">설명서</a>
        <a href="#" class="sub-menu">Microsoft Learn</a>
        <a href="#" class="sub-menu">Microsoft Tech 커뮤니티</a>
        <a href="#" class="sub-menu">Azure Marketplace</a>
        <a href="#" class="sub-menu">Appsource</a>
        <a href="#" class="sub-menu">Microsoft Power Platform</a>
        <a href="#" class="sub-menu">Visual Studio</a>
      </div>
      <div>
        <a href="#" class="main-menu">회사</a>
        <a href="#" class="sub-menu">채용 정보</a>
        <a href="#" class="sub-menu">Microsoft 정보</a>
        <a href="#" class="sub-menu">회사 뉴스</a>
        <a href="#" class="sub-menu">Microsoft 개인 정보 보호</a>
        <a href="#" class="sub-menu">투자자</a>
        <a href="#" class="sub-menu">지속 가능성</a>
      </div>
      <button type="button" onclick="topFunction()" class="btn btn-primary">TOP</button>
    </nav>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  <script>
    function topFunction() {
      document.documentElement.scrollTop = 0;
    }
  </script>
</body>
</html>

링크도 생략한 것 많아요. ㅎㅎ

CSS

👉 추가 사항 : product-image hover 효과, 반응형 css 추가(768px부터)

PC용(style.css)

* {
  box-sizing: border-box;
}
header {
  background-color: #fff;
  height: 80px;
  display: flex;
  align-items: center;
  position: relative;
}
header div .logo {
  width: 140px;
  margin: 20px;
}
header .navibar .quick-menu {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  color: #000;
  margin-right: 10px;
  line-height: 60px;
  font-size: 0.8em;
}
header .navibar2 {
  position: absolute;
  right: 0;
  margin-right: 80px;
  display: flex;
  gap: 20px;
}
header .navibar2 div {
  display: flex;
  align-items: center;
  justify-content: center;
}
header .navibar2 p {
  text-align: center;
  color: #424242;
  font-size: 0.9em;
  margin: 0;
  margin-right: 3px;
}
header .navibar2 img {
  width: 15px;
  height: 15px;
  filter: opacity(0.5) drop-shadow(0 0 0 #424242);
}
main {
  min-height: 700px;
}
main .slide {
  display: flex;
}
main .slide .product-desc {
  width: 50%;
  background-color: #eee;
  display: flex;
  align-items:flex-start;
  justify-content: center;
  flex-flow: column;
}
main .slide .product-desc h1 {
  font-size: 2.5em;
  font-weight: bolder;
  margin-bottom: 20px;
  margin-left: 150px;
}
main .slide .product-desc p {
  font-size: 1em;
  margin-bottom: 20px;
  margin-left: 150px;
}
main .slide .product-desc .click {
  width: 130px;
  height: 50px;
  background-color: #0067b8;
  margin-left: 150px;
  text-align: center;
  border-radius: 3px;
}
main .slide .product-desc .click a {
  color: #fff;
  text-decoration: none;
  line-height: 50px;
  font-weight: bolder;
}
main .slide .product-image {
  width: 50%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: wrap;
}
main .slide .product-image img {
  width: 100%;
}
main .sublink-container {
  height: 150px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
main .sublink-container .sublink-item {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-right: 50px;
}
main .sublink-container .sublink-item .icon {
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  z-index: 10;
}
main .sublink-container .sublink-item .icon img {
  width: 40px;
  height: 40px;
}
main .sublink-container .sublink-item a {
  color: #0067b8;
  font-weight: bolder;
  margin-bottom: 8px;
  font-size: 1em;
}
main .product {
  height: 450px;
  background-color: #fff;
  display: flex;
  flex-flow: wrap;
  justify-content: space-around;
  margin: 0 20px;
}
main .product .product-item {
  margin: 15px;
  width: 380px;
  height: 210px;
}
main .product .product-item img {
  width: 100%;
  box-shadow: 2px 2px 5px #a1a1a1;
  transition-property: all;
  transition-duration: 1s;
  transition-delay: .3s;
}
main .product .product-item img:hover {
  background-color: rgba(0, 0, 0, .6);
  opacity: 0.5;
}
main .product .product-item h1 {
  text-align: left;
  font-size: 1.8em;
  margin-top: 22px;
  margin-bottom: 22px;
  font-weight: bolder;
}
main .product .product-item p {
  font-size: 0.9em;
  line-height: 1.4;
  margin-bottom: 22px;
}
main .product .product-item a {
  text-decoration: none;
  color: #0067b8;
  font-weight: bolder;
  font-size: 1.1em;
}
main .etc {
  margin-top: 30px;
  height: 150px;
  display: flex;
  align-items: flex-start;
}
main .etc p {
  line-height: 30px;
  margin-left: 120px;
  margin-right: 30px;
}
main .etc img {
  width: 30px;
  height: 30px;
  margin-right: 30px;
}
footer nav {
  background-color: #eee;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: flex-start;
}
footer nav div {
  display: flex;
  flex-direction: column;
  margin-right: 70px;
}
footer nav div .main-menu {
  margin-top: 40px;
  margin-bottom: 20px;
  text-decoration: none;
  text-align: left;
  color: #6b6b6b;
  font-size: 1.17em;
  font-weight: 600;
}
footer nav div .sub-menu {
  margin-bottom: 13px;
  text-decoration: none;
  color: #6b6b6b;
  font-size: 0.8em;
}
.dropdown {
  display: none;
}
.btn-primary {
  float: left;
  position: fixed;
  right: 100px;
  bottom: 50px;
}

모바일용(style_mobile.css)

* {
  box-sizing: border-box;
}
body {
  width: 100%;
  margin: 0;
  padding: 0;
}
header {
  margin: 0 20px;
  height: 5vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
.dropdown {
  display: inline;
}
.dropdown img {
  width: 23px;
  height: 23px;
}
header div .logo {
  width: 120px;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
header .navibar {
  display: none;
}
header .navibar2 p:nth-child(2) {
  display: none;
}
header .navibar2 p {
  display: none;
}
header .navibar2 .search img, header .navibar2 .shopping-cart img, header .navibar2 .login img {
  width: 15px;
  height: 15px;
  filter: opacity(0.5) drop-shadow(0 0 0 #424242);
}
header .navibar2 {
  margin-right: 2px;
}
main {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
main .slide {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: center;
}
main .slide .product-desc {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background-color: #fff;
  gap: 10px;
  margin-left: 10px;
  margin-bottom: 30px;
}
main .slide .product-desc h1 {
  margin: 20px 0;
  font-size: 2em;
  text-align: left;
}
main .slide .product-desc p {
  margin: 0;
  text-align: left;
  line-height: 20px;
}
main .slide .product-desc .click {
  display: inline-block;
  width: 10 0px;
  height: 40px;
  background-color: #0067b8;
  text-align: center;
  border-radius: 3px;
  margin-left: 0;
}
main .slide .product-desc .click:hover {
  background-color: #6f8fa8;
}
main .slide .product-desc .click a {
  color: #fff;
  text-decoration: none;
  line-height: 40px;
  font-weight: bolder;
  font-size: 0.8em;
}
main .slide .product-image {
  width: 100%;
  background-color: #eee;
  margin-bottom: 20px;
}
main .slide .product-image img {
  width: 100%;
}
main .sublink-container {
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 10px 10px 30px 10px;
  gap: 15px;
}
main .sublink-container .sublink-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
main .sublink-container .sublink-item .icon {
  width: 20px;
  height: 20px;
  margin-bottom: 20px;
  z-index: 10;
}
main .sublink-container .sublink-item .icon img {
  width: 100%;
  height: 100%;
}
main .sublink-container .sublink-item a {
  color: #0067b8;
  font-weight: bolder;
  font-size: 0.9em;
  text-align: center;
  line-height: 20px;
}
main .product {
  margin: unset;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 160px;
}
main .product .product-item {
  width: 90%;
}
main .product .product-item img {
  width: 100%;
  box-shadow: 2px 2px 5px #a1a1a1;
  transition-property: all;
  transition-duration: 1s;
  transition-delay: .3s;
  border-radius: 10px;
}
main .product .product-item img:hover {
  background-color: rgba(0, 0, 0, .6);
  opacity: 0.5;
}
main .product .product-item h1 {
  font-size: 1.5em;
  margin: 10px 0 5px 0;
}
main .product .product-item p {
  font-size: 0.9em;
  margin: 0 0 5px 0;
}
main .product .product-item a {
  color: #0067b8;
  font-size: 0.9em;
}
main .etc {
  height: auto;
  align-self: flex-start;
  margin-top: 150px;
  margin-left: 22px;
  margin-bottom: 20px;
}
main .etc p {
  margin: 0;
}
main .etc img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
footer nav {
  background-color: #eee;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
footer nav div {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  margin-right: 120px;
}
footer nav div .main-menu {
  margin-top: 20px;
  margin-bottom: 8px;
  text-decoration: none;
  text-align: left;
  color: #6b6b6b;
  font-size: 1.17em;
  font-weight: 600;
}
footer nav div .sub-menu {
  margin-bottom: 10px;
  text-decoration: none;
  color: #6b6b6b;
  font-size: 0.8em;
}
.btn-primary {
  right: 20px;
}

부트스트랩 수정용(custom.css)

.btn {
  background-color: #fff;
  border-color: #fff;
}
.btn:hover {
  background-color: #fff;
  border-color: #fff;
}
.btn > {
  background-color: #fff;
}

수정된 코드

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
  <script src="https://kit.fontawesome.com/847d54d8db.js"></script>
  <link rel="stylesheet" 
href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <title>Document</title>
</head>
<body>
  <header>
    <nav class="navbar">
      <img class="navbar__logo" src="./images/microsoft-logo.png" alt="">
      <ul class="navbar__menu">
        <li><a href="#">Microsoft 365</a></li>
        <li><a href="#">Teams</a></li>
        <li><a href="#">Windows</a></li>
        <li><a href="#">Surface</a></li>
        <li><a href="#">Xbox</a></li>
        <li><a href="#">세일</a></li>
        <li><a href="#">지원</a></li>
      </ul>
      <ul class="navbar__icons">
        <li>검색 <i class="fa-solid fa-magnifying-glass"></i></li>
        <li>카트 <i class="fa-solid fa-cart-shopping"></i></li>
        <li>로그인 <i class="fa-regular fa-user"></i></li>
      </ul>
      <a href="#" class="navbar__toggleBtn">
        <i class="fa-solid fa-bars"></i>
      </a>
    </nav>
  </header>
  <main>
    <div class="slide">
      <div class="slide slide-desc">
        <h1>최대 25% 할인혜택</h1>
        <p>Surface, Xbox 및 Microsoft 365를 포함한 다양한 제품을 특가에 만나보세요.</p>
        <p>지금 쇼핑하기</p>
      </div>
      <p class="slide slide-img"></p>
    </div>
    <div class="quick-menu">
      <div class="item item1">
        <i class="fa-brands fa-windows"></i>
        <a href="#">내게 맞는 Microsoft 365 선택</a>
      </div>
      <div class="item item2">
        <i class="fa-solid fa-laptop"></i>
        <a href="#">Surface 디바이스 쇼핑</a>
      </div>
      <div class="item item3">
        <i class="fa-brands fa-xbox"></i>
        <a href="#">Xbox 게임 쇼핑</a>
      </div>
      <div class="item item4">
        <i class="fa-brands fa-windows"></i>
        <a href="#">Windows 11 받기</a>
      </div>
    </div>
    <div class="product">
      <div class="product-ad product-ad1">
        <img src="./images/surface.png" alt="">
        <h1>Surface Laptop 5</h1>
        <p>12세대 인텔 코어와 Windows 11를 기반으로 하는 정교한 스타일과 뛰어난 멀티태스킹 속도를 경험하세요.</p>
        <a href="#">자세한 내용 ></a>
      </div>
      <div class="product-ad product-ad2">
        <img src="./images/surface2.png" alt="">
        <h1>Surface Laptop Studio</h1>
        <p>최고의 성능을 제공하는 Surface Laptop으로 창의력을 마음껏 발휘하세요. 이제 Windows 11과 함께 제공됩니다.</p>
        <a href="#">지금 쇼핑하기 ></a>
      </div>
      <div class="product-ad product-ad3">
        <img src="./images/bing.png" alt="">
        <h1>새로운 Bing을 소개합니다</h1>
        <p>실제 질문을 던져보세요. 채팅하고 창작하세요. AI 기반의 웹용 Copilot을 통해 더 나은 답변을 얻으세요.</p>
        <a href="#">새로운 Bing에 대해 알아보기 ></a>
      </div>
      <div class="product-ad product-ad4">
        <img src="./images/xbox.png" alt="">
        <h1>Xbox Game Pass Ultimate</h1>
        <p>첫 한 달동안 1,000원의 이용료로 콘솔, PC, 휴대폰, 태블릿에서 100가지가 넘는 고품질 게임을 플레이하세요. (신규 구독만 사용가능)</p>
        <a href="#">지금 가입하기 ></a>
      </div>
    </div>
  </main>
  <footer>
    <ul class="sitemap">
      <li class="sitemap-hd menu1">
        <h1>새로운 기능</h1>
        <a href="">Microsoft 365</a>
        <a href="">게임</a>
        <a href="">Surface Pro 9</a>
        <a href="">Surface Laptop 5</a>
        <a href="">Surface Laptop Studio</a>
        <a href="">Surface Laptop Go 2</a>
        <a href="">Windows 11 앱</a>
      </li>
      <li class="sitemap-hd menu2">
        <h1>Microsoft Store</h1>
        <a href="">Microsoft 365</a>
        <a href="">게임</a>
        <a href="">Surface Pro 9</a>
        <a href="">Surface Laptop 5</a>
        <a href="">Surface Laptop Studio</a>
        <a href="">Surface Laptop Go 2</a>
        <a href="">Windows 11 앱</a>
      </li>
      <li class="sitemap-hd menu3">
        <h1>교육</h1>
        <a href="">Microsoft 365</a>
        <a href="">게임</a>
        <a href="">Surface Pro 9</a>
        <a href="">Surface Laptop 5</a>
        <a href="">Surface Laptop Studio</a>
        <a href="">Surface Laptop Go 2</a>
        <a href="">Windows 11 앱</a>
      </li>
      <li class="sitemap-hd menu4">
        <h1>기업 고객</h1>
        <a href="">Microsoft 365</a>
        <a href="">게임</a>
        <a href="">Surface Pro 9</a>
        <a href="">Surface Laptop 5</a>
        <a href="">Surface Laptop Studio</a>
        <a href="">Surface Laptop Go 2</a>
        <a href="">Windows 11 앱</a>
      </li>
      <li class="sitemap-hd menu5">
        <h1>개발자 및 IT</h1>
        <a href="">Microsoft 365</a>
        <a href="">게임</a>
        <a href="">Surface Pro 9</a>
        <a href="">Surface Laptop 5</a>
        <a href="">Surface Laptop Studio</a>
        <a href="">Surface Laptop Go 2</a>
        <a href="">Windows 11 앱</a>
      </li>
      <li class="sitemap-hd menu6">
        <h1>회사</h1>
        <a href="">Microsoft 365</a>
        <a href="">게임</a>
        <a href="">Surface Pro 9</a>
        <a href="">Surface Laptop 5</a>
        <a href="">Surface Laptop Studio</a>
        <a href="">Surface Laptop Go 2</a>
        <a href="">Windows 11 앱</a>
      </li>
    </ul>
    <div class="footer-info">
      <div class="language">
        <i class="fa-solid fa-earth-americas"></i> 한국어(대한민국)
      </div>
      <ul class="etc">
        <li>Microsoft 문의</li>
        <li>개인정보처리방침 및 위치정보이용약관</li>
        <li>사용약관</li>
        <li>상표</li>
        <li>광고 정보</li>
        <li>ⓒ Microsoft 2023</li>
      </ul>
    </div>
  </footer>
<script src="./mains.js"></script>
</body>
</html>

CSS

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
a {
  text-decoration: none;
  color: #000;
}
.navbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  padding: 30px 100px;
}
.navbar__logo {
  width: 120px;
}
.navbar__logo i {
  color: #000;
}
.navbar__menu {
  display:flex;
  list-style: none;
  padding-left: 0;
}
.navbar__menu a {
  font-size: 0.8rem;
}
.navbar__menu li {
  padding: 8px 12px;
}
.navbar__menu li:hover {
  background-color: #eee;
  border-radius: 5px;
}
.navbar__icons {
  margin-left: auto;
  list-style: none;
  color: #000;
  font-size: 0.9rem;
  display: flex;
  padding-left: 0;
}
.navbar__icons li {
  padding: 8px 12px;
}
.navbar__toggleBtn {
  display: none;
  position: absolute;
  right: 32px;
  font-size: 24px;
  color: #000;
}
.slide {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 40rem;
  justify-content: center;
  align-items: center;
}
.slide-desc {
  background-color: #eee;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 2.5rem;
  padding: 0 0 0 8%;
}
.slide-desc h1 {
  font-size: 2.5rem;
  font-weight: bold;
}
.slide-desc p:nth-child(3) {
  width: 120px;
  height: 40px;
  background-color: #0067b8;
  color: #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 3px;
}
.slide-img {
  background-color: #eee;
  width: 50%;
  display: inline-block;
  content: "";
  background-image: url('../images/slide1.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.quick-menu {
  display: flex;
  justify-content: center;
  align-items: center;
}
.quick-menu .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 35px;
}
.item > i {
  font-size: 2.3rem;
  padding: 8px;
  color: #2f2f2f;
}
.item > a {
  font-size: 1rem;
  color: #0067b8;
  font-weight: bold;
  text-decoration: underline;
}
.product {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 60px;
  padding: 20px 0 60px 0;
}
.product-ad {
  width: 20%;
  display: flex;
  flex-direction: column;
  margin: 0 20px;
}
.product-ad img {
  box-shadow: 1px 1px 5px #646363;
  border-radius: 5px;
}
.product-ad h1 {
  font-size: 3vmin;
  font-weight: bold;
}
.product-ad p {
  line-height: 24px;
}
.product-ad a {
  color: #0067b8;
  font-weight: bold;
}
footer {
  background-color: #eee;
  color: #616161;
}
.sitemap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 30px 0;
}
.sitemap-hd {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.sitemap-hd h1 {
  font-weight: 600;
  font-size: 17px;
}
.sitemap-hd a {
  font-size: 0.7em;
}
.footer-info {
  display: flex;
  font-size: 12px;
  padding: 20px 100px;
}
.etc {
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  gap: 20px;
}
@media screen and (max-width:768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 24px;
    flex-flow: wrap;
  }
  .navbar__menu {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .navbar__menu li {
    width: 100%;
    text-align: center;
  }
  .navbar__icons {
    display: none;
    justify-content: center;
    width: 100%;
  }
  .navbar__toggleBtn {
    display: block;
  }
  .navbar__menu.active, .navbar__icons.active {
    display: flex;
  }
  .navbar__icons li:nth-child(1) {
    display: none;
  }
  .slide {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .slide-desc {
    width: 100%;
    height: 50%;
    order: 2;
    background-color: #fff;
    align-items: flex-start;
    gap: 10px;
    padding: 0 8%;
  }
  .slide-desc h1 {
    font-size: 1.8rem;
    font-weight: bold;
  }
  .slide-img {
    width: 100%;
    height: 50%;
    order: 1;
  }
  .slide-desc p:nth-child(2) {
    line-height: 1.5rem;
  }
  .quick-menu {
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .quick-menu .item {
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }
  .quick-menu .item i {
    font-size: 1.8rem;
  }
  .quick-menu .item a {
    font-size: 1rem;
  }
  .product {
    flex-direction: column;
  }
  .product-ad {
    width: 90%;
  }
  .product-ad h1 {
    font-size: 1.5rem;
    font-weight: bold;
  }
  .sitemap {
    flex-direction: column;
  }
  .sitemap-hd {
    margin: 0 0 40px 20px;
  }
  .footer-info {
    padding: 0;
    flex-direction: column;
    gap: 10px;
  }
  .language {
    padding: 0 20px;
  }
  .etc {
    justify-content: space-evenly;
    padding: 20px;
  }
}

모바일

~~오늘 작성한 코드는 반응형은 고려하지 않았습니다.!~~

~~반응형까지 구현해보았습니다! 반응형이라기 보단 적응형에 가까운..~~ (2023.03.23)

반응형 수정 완료 (2023.03.25)

조각조각 배울 때는 공부가 되는게 맞나 했었는데...

한 번 만들고 나니까 너무 재밌고, 얼른 JavaScript랑 React 배워서 더 다양한 기능들을 구현하고 싶습니다.

역시 100번 이론 공부하는 것보다 한 번 실습 하는게 더 효과가 좋은 것 같습니다.

많이 부족하지만 앞으로 더 열심히 노력하겠습니다.

화이팅!

저작자표시 비영리 변경금지

'📂 My Project' 카테고리의 다른 글

[미니 프로젝트 - 사전준비] 스토리보드 작성 1일차 회고록✏️ (0)	2023.04.04
HTML/CSS 💡[레이아웃 연습] 클론 페이지 ② - YouTube 홈페이지 (반응형) (2)	2023.03.26
(국비학원) 초미니 프로젝트 후기와 내 생각 (커뮤니티 게시판 구축) (1)	2023.03.06
자바(Java) - 개인 미니 프로젝트 3 (포켓몬 게임) v2 - 멀티 스레드를 이용한 실시간 전투 구현 (1)	2023.02.12
파이썬(Python) - pygame 라이브러리를 이용해 추억의 [피카츄 배구게임] 만들기 (3)	2023.02.04

(2023.03.25) 추가

원본 코드(수정 전)

수정된 코드

'📂 My Project' 카테고리의 다른 글

검색 태그

티스토리툴바