Suhenism

[HTML, CSS, JS] Google 클론 코딩 본문

Coding 코딩

[HTML, CSS, JS] Google 클론 코딩

ryusudol 2022. 9. 8. 00:51

 

프로그래밍을 가장 빠르고 효과적으로 배울 수 있는 방법은
이미 나와있는 서비스를 따라 만들어보는 것이다.

- Anonymous -

 

 

Google Clone Coding

Google 사이트를 클론 코딩 해봤다.

 

아래 사진은 Google.com 본 사이트와 Google Clone 사이트 비교 사진이다.

 

(좌) Google.com Original Version-----(우) Google.com Clone Version

 

브라우저 가운데에 있는 element 위치의 미세한 차이를 제외한 나머지는 100% 똑같다.

 

평소엔 아무 생각없이 지나가는 웹페이지 중 하나였지만

 

최대한 똑같이 만들기 위해 공을 들여 관찰하고 제작해보니까 신경쓸 부분이 상당히 많았다.

 

 

클론 코딩의 '의미'

웹페이지를 제작하면서

 

font, background-color, flexbox, box model, hover / focus effect, mediaquery 등

 

고려해야 할 부분이 정말 많았지만 특히 신경쓴 부분은

 

flexbox, box model을 이용한 element 배치와

 

hover / focus effect, mediaquery를 이용한 user와의 상호작용을 최대한 따라하는 것이었다.

 

 

겉으로 보이는 UI만을 따라하는 것도 좋지만

 

user가 웹페이지를 실제로 경험하는 UX 또한 최대한 똑같도록 하는 것이

 

진정한 '클론 코딩(clone coding)'이라 믿는다.

 

Google 사이트를 따라 만들면서 배운 자세한 것들은 별도의 게시물에 올릴 예정이다.

 

아래는 'Google Clone'을 제작하면서 작성한 코드다.

 

코드가 너무 길어 보기 어려운 경우 포스트 제일 아래에 있는 GitHub URL로 들어가서 봐도 좋다.

 

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" />
    <script
      src="https://kit.fontawesome.com/7daf78b674.js"
      crossorigin="anonymous"
    ></script>
    <script defer src="main.js"></script>
    <link rel="stylesheet" href="style.css" />
    <title>Google Clone</title>
  </head>
  <body>
    <!-- Header -->
    <header>
      <nav class="navbar">
        <ul>
          <li>
            <a class="items" href="">Gmail</a>
          </li>
          <li>
            <a class="items" href="">Images</a>
          </li>
          <li title="Google apps" class="menu-icon">
            <i class="fa-solid fa-bars"></i>
          </li>
          <li title="Google account" class="user-icon">
            <i class="user fa-solid fa-user"></i>
          </li>
        </ul>
      </nav>
    </header>

    <!-- Section -->
    <section>
      <div class="logo-img">
        <img src="Google_2015_logo.svg.png" alt="" />
      </div>
      <div class="search-bar">
        <i class="glass fa-solid fa-magnifying-glass"></i>
        <input id="search-input" class="search-input" type="text" />
        <a href=""
          ><img
            title="Search by voice"
            class="google-mic"
            src="google-mic.webp"
            alt=""
        /></a>
      </div>
      <div class="search-bar-btns">
        <button class="google-search">Google Search</button>
        <button class="lucky-btn">I'm Feeling Lucky</button>
      </div>
      <div class="language">
        <p>Google offered in: <a href="">한국어</a></p>
      </div>
    </section>

    <!-- Footer -->
    <footer>
      <div class="upper-footer">South Korea</div>
      <div class="lower-footer">
        <div class="lower-left">
          <ul>
            <li>
              <a href="">About</a>
            </li>
            <li>
              <a href="">Advertising</a>
            </li>
            <li>
              <a href="">Business</a>
            </li>
            <li>
              <a href="">How Search works</a>
            </li>
          </ul>
        </div>
        <div class="lower-right">
          <ul>
            <li>
              <a href="">Privacy</a>
            </li>
            <li>
              <a href="">Terms</a>
            </li>
            <li>
              <a href="">Settings</a>
            </li>
          </ul>
        </div>
      </div>
    </footer>
  </body>
</html>

 

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-white: #fff;
  --color-black: #000;

  /* Header */
  --header-text-color: #212122;

  /* Section */
  --section-search-bar-border-color: #dfe1e5;
  --section-search-bar-glass-color: #9aa0a6;
  --section-search-bar-btns-text-color: #3c4043;
  --section-search-bar-btns-button-background-color: #f8f9fa;
  --section-language-normaltext-color: #4d5157;
  --section-language-linktext-color: #1a0dab;

  /* Footer */
  --footer-text-color: #707579;
  --footer-background-color: #f2f2f2;
  --footer-line-color: #dadce0;
}

body {
  font-family: arial, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

li {
  list-style-type: none;
}

/* Header */
header {
  display: flex;
  justify-content: flex-end;
  padding: 8px;
}

header ul {
  display: flex;
  align-items: center;
}

header ul li .items {
  margin-right: 15px;
}

header a {
  text-decoration: none;
  color: var(--header-text-color);
  font-size: 13px;
}

header a:hover {
  text-decoration: underline;
}

.menu-icon,
.user-icon {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  margin: 0px 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-icon:hover,
.user-icon:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.user-icon i {
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-icon .user {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background-color: cornflowerblue;
  color: white;
}

/* Section */
section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo-img {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  flex-grow: 1;
}

.logo-img img {
  width: 272px;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--section-search-bar-border-color);
  border-radius: 20px;
  width: 582px;
  height: 44px;
  margin: 20px;
}

.search-bar:hover {
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.15);
}

.search-bar .glass {
  font-size: 14px;
  padding: 16px;
  color: var(--section-search-bar-glass-color);
}

.search-bar input {
  width: 100%;
  border: none;
  font-size: 16px;
}

.search-bar input:focus {
  outline: none;
}

.search-bar .google-mic {
  width: 30px;
  margin: 10px;
}

.search-bar-btns button {
  font-size: 14px;
  color: var(--section-search-bar-btns-text-color);
  border: none;
  border-radius: 3px;
  background-color: var(--section-search-bar-btns-button-background-color);
  height: 36px;
  margin: 11px 4px;
}

.search-bar-btns button:hover {
  border: 1px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.google-search {
  width: 128px;
}

.lucky-btn {
  width: 140px;
}

.language {
  text-align: center;
  font-size: small;
  margin: 15px 0px 24px;
  flex-grow: 1;
}

.language p {
  color: var(--section-language-normaltext-color);
}

.language p a {
  color: var(--section-language-linktext-color);
  text-decoration: none;
}

.language p a:hover {
  text-decoration: underline;
}

/* Footer */
footer {
  background-color: var(--footer-background-color);
  color: var(--footer-text-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

footer a {
  text-decoration: none;
  color: var(--footer-text-color);
}

footer a:hover {
  text-decoration: underline;
}

.upper-footer {
  height: 48px;
  font-size: 15px;
  border-bottom: 1px solid var(--footer-line-color);
  padding: 15px 30px;
}

.lower-footer {
  height: 45px;
  font-size: 14px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0px 20px;
}

.lower-footer ul {
  display: flex;
}

.lower-footer ul a {
  padding: 15px;
}

.lower-footer ul a:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 664px) {
  .search-bar {
    width: 90%;
  }

  .footer {
    height: 150px;
  }

  .upper-footer {
    height: 50px;
  }

  .lower-footer {
    height: 100px;
    flex-direction: column;
  }
}

 

JavaScript

const searchInput = document.querySelector("#search-input");

searchInput.addEventListener("keydown", function (event) {
  if (event.code === "Enter") {
    search();
  }
});

function search() {
  const input = searchInput.value;

  window.location.href = "https://www.google.co.kr/search?q=" + input;
}

 

GitHub URL

HTML

https://github.com/RSuhyeon/Google-Clone-Coding/blob/main/main.html

 

GitHub - RSuhyeon/Google-Clone-Coding

Contribute to RSuhyeon/Google-Clone-Coding development by creating an account on GitHub.

github.com

 

CSS

https://github.com/RSuhyeon/Google-Clone-Coding/blob/main/style.css

 

GitHub - RSuhyeon/Google-Clone-Coding

Contribute to RSuhyeon/Google-Clone-Coding development by creating an account on GitHub.

github.com

 

JavaScript

https://github.com/RSuhyeon/Google-Clone-Coding/blob/main/main.js

 

GitHub - RSuhyeon/Google-Clone-Coding

Contribute to RSuhyeon/Google-Clone-Coding development by creating an account on GitHub.

github.com