Merge pull request #72 from beakjiuk/KDT5_beakjiuk

# google-page-clone Website 🌊
KDT1-FE · Apr 8, 2023 · 3ef922e · 3ef922e
2 parents 9af8c8d + 1e165ce
commit 3ef922e
Show file tree

Hide file tree

Showing 5 changed files with 308 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -1,45 +1,6 @@
-# 👀 자신이 원하는 사이트 레이아웃 클론
+# google-page-clone Website 🌊
 
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
-
-## 과제 수행 및 제출 방법
-
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-1. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, `git branch KDT0_ParkYoungWoong`)
-1. 자신의 본명 브랜치에서 과제를 수행합니다.
-1. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(`main` 브랜치에 푸시하지 않도록 꼭 주의하세요, `git push origin KDT0_ParkYoungWoong`)
-1. 저장소에서 `main` 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, `main` <== `KDT0_ParkYoungWoong`)
-
-- `main` 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
-
-## 필수 요구사항
-
-- [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
-- [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
-
-## 선택 요구사항
-
-- [ ] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
-- [ ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- [ ] 부분적으로 BEM 방법론을 도입해보세요.
-- [ ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- [ ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
-- [ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
-- [ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
-
-## 손쉬운 이미지 추출 방법
-
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ko)를 사용하세요.
-
-1. 원하는 사이트 접속
-1. Image Downloader 확장 프로그램 실행
-1. 다운로드 원하는 이미지 선택
-1. 서브 폴더 이름(Save to subfolder) 명시
-1. 다운로드!
+- 개인으로 페이지로 만드는건 좀 아닌거같아서 급하게 구글메인페이지 클론코딩
+- 다크모드 구현하다가 실패.... 클릭이벤트 적용할려다가 시간없어서 제출...
+- 검색창의 돋보기 모양 아이콘 뒤부터 타이핑 가능함
+- 검색창에 마우스 포인팅, 포커스 했을 때 검색창 주변에 그림자 효과 호버, 포커스 사용
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/profile.jpeg b/images/profile.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Google</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.0/css/all.min.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <!-- 오른쪽 상단부위 -->
+  <header>
+    <ul>
+      <li><a href="https://mail.google.com/">Gmail</a></li>
+      <li><a href="https://www.google.co.kr/imghp?hl=ko&ogbl">이미지</a></li>
+      <li><button class="google-app"><i class="fas fa-th"></i></button></li>
+      <li><button><img class="profile-image" src="images/profile.jpeg"></button></li>
+    </ul>
+  </header>
+  <!-- 로고, 검색바, Google 검색, 프로그래머스 코테연습 -->
+  <section class="middle">
+    <div class="google-logo">
+      <img class="logo-image" src="images/logo.png">
+    </div>
+    <div class="search-box">
+      <span class="search-icon"><i class="fas fa-search"></i></span>
+      <span class="keyboard-icon"><i class="far fa-keyboard"></i></span>
+      <span class="microphone-icon"><i class="fas fa-microphone"></i></span>
+      <input class="search-bar" type="text">
+    </div>
+    <div class="additional-box">
+      <a href="#" class="additional-search">Google 검색</a>
+      <a href="https://school.programmers.co.kr/learn/challenges?order=acceptance_desc&levels=0&languages=javascript&partIds=33882"
+        class="additional-lucky">프로그래머스 코테연습</a>
+    </div>
+  </section>
+  <!-- 하단 국가, 약관, 설정 등 -->
+  <footer>
+    <div class="country-info">대한민국</div>
+    <div class="instruction">
+      <ul>
+        <li class="left-side">
+          <a href="#">Google 정보</a>
+          <a href="#">광고</a>
+          <a href="#">비즈니스</a>
+          <a href="#">검색의 원리</a>
+        </li>
+        <li class="right-side">
+          <a href="#">개인정보처리방침</a>
+          <a href="#">약관</a>
+          <a href="#">설정</a>
+        </li>
+      </ul>
+    </div>
+  </footer>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,244 @@
+body {
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 58px;
+}
+
+header ul {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  list-style: none;
+}
+
+header a {
+  text-decoration: none;
+  color: black;
+  font-size: 13px;
+  margin: 10px;
+}
+
+header a:hover {
+  text-decoration: underline;
+}
+
+header button {
+  border: 0;
+  background-color: transparent;
+  margin-top: 10px;
+}
+
+header .google-app {
+  font-size: 17px;
+  color: rgb(95, 99, 104);
+  /* 아이콘의 색 */
+  padding: 10px 11px;
+  /* hover에서 뒷배경 사이즈, 가로 세로 비율 맞추려고 10, 11 */
+  border-radius: 50%;
+  /* hover에서 뒷배경 원 설정 */
+}
+
+header .profile-image {
+  border-radius: 50%;
+  width: 35px;
+  padding: 4px;
+  /* hover에서 뒷배경 사이즈 */
+  margin-right: 10px;
+}
+
+header .google-app:hover {
+  background-color: rgb(240, 240, 240);
+}
+
+header .profile-image:hover {
+  background-color: rgb(240, 240, 240);
+}
+
+.middle .logo-image {
+  width: 273px;
+  height: auto;
+  margin: 200px 65px 24px;
+  /* logo-image, search-bar 사이 간격 24px */
+}
+
+.middle .google-logo {
+  max-width: 400px;
+  /* 화면 크기 400px되면 끌려나온다. */
+  margin: auto;
+}
+
+.middle .search-box {
+  max-width: 580px;
+  /* 화면 크기 작아지면 같이 작아지는 기능 구현 필요  */
+  margin: auto;
+}
+
+.middle .search-bar {
+  width: 390px;
+  height: 44px;
+  border-radius: 30px;
+  border: 1px solid rgb(225, 225, 226);
+  outline: none;
+  padding: 0 140px 0 48px;
+  font-size: 16px;
+}
+
+.middle .search-bar:hover {
+  box-shadow: 0 0 5px 1px rgb(225, 225, 226);
+}
+
+.middle .search-bar:focus {
+  box-shadow: 0 0 5px 1px rgb(225, 225, 226);
+}
+
+.middle .search-icon {
+  position: absolute;
+  margin: 13px 17px;
+  color: rgb(154, 160, 166);
+  font-size: 14px;
+}
+
+.middle .keyboard-icon {
+  position: absolute;
+  margin: 13px 505px;
+  font-size: 16px;
+  color: rgb(137, 136, 136);
+}
+
+.middle .microphone-icon {
+  position: absolute;
+  margin: 10px 545px;
+  font-size: 18px;
+  color: rgb(62, 128, 234);
+}
+
+.middle .clear-btn {
+  visibility: hidden;
+  border: 0;
+  border-right: 1px solid rgb(137, 136, 136);
+  padding-right: 17px;
+  background-color: transparent;
+  position: absolute;
+  margin: 12px 450px;
+  font-size: 20px;
+  color: rgb(123, 123, 123);
+}
+
+.additional-box {
+  max-width: 400px;
+  margin: 33px auto;
+  /* search-bar, additional-box 사이 간격 33px */
+}
+
+.additional-box a {
+  background-color: rgb(254, 254, 254);
+  text-decoration: none;
+  color: black;
+  border-radius: 5%;
+  padding: 9px 17px;
+  /* additional-search, additional-lucky 크기 조정 */
+  font-size: 14px;
+}
+
+.additional-box .additional-search {
+  margin: auto 5px auto 65px;
+  /* additional-search, additional-lucky 사이 간격 조정, 위치 조정 */
+}
+
+.additional-box a:hover {
+  border: 1px solid rgb(254, 254, 254);
+}
+
+footer {
+  position: absolute;
+  /* footer 하단 고정을 위해 */
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: rgb(254, 254, 254);
+  height: 100px;
+  display: grid;
+  /* country-info, instruction 똑같은 비율로 나누기 위해 grid 사용 함 */
+  grid-template-rows: 1fr 1fr;
+}
+
+footer .country-info {
+  margin: 15px 30px;
+  color: rgb(138, 138, 138);
+  font-size: 15px;
+}
+
+footer .instruction {
+  border-top: 1px solid rgb(254, 254, 254);
+}
+
+footer .instruction li {
+  list-style: none;
+}
+
+footer .instruction ul {
+  display: flex;
+  flex-wrap: wrap;
+  /* 화면 크기 작아지면 겹치게 하기 위해서 */
+  margin: 14px 0px;
+}
+
+footer .left-side {
+  position: absolute;
+  left: 33px;
+}
+
+footer .right-side {
+  position: absolute;
+  right: 10px;
+}
+
+footer .instruction a {
+  margin-right: 25px;
+  text-decoration: none;
+  color: rgb(123, 123, 123);
+  font-size: 14px;
+}
+
+footer .instruction a:hover {
+  text-decoration: underline;
+}
+
+@media(max-width:1200px) {
+  footer .left-side {
+    left: 190px;
+  }
+
+  footer .right-side {
+    right: 135px;
+  }
+}
+
+@media(max-width:640px) {
+  footer {
+    height: 130px;
+    /* 아래 footer 높이 증가 */
+    grid-template-rows: 1fr 2fr;
+    /* 1:2로 설정, instruction의 li가 겹칠수잇음 */
+  }
+
+  footer .left-side {
+    position: static;
+    /* absolute면 right-side랑 안 겹쳐짐.... flex-wrap을 적용하려고 */
+    margin: auto;
+    /* 640px보다 작아지면 알아서 가운데에 이동 */
+  }
+
+  footer .right-side {
+    position: static;
+    /* absolute면 아래로 안 겹쳐짐... flex-wrap을 적용 */
+    margin: 10px auto auto;
+    /* left-side 아래 간격주고 나머지 margin은 auto설정으로 알아서 가운데로 이동 */
+  }
+}