git에서 포크를 안해서 새로 포크한 리포지토리 클론후 옮김

KDT1-FE · Apr 5, 2023 · 9f585dd · 9f585dd
1 parent 9af8c8d
commit 9f585dd
Show file tree

Hide file tree

Showing 24 changed files with 2,614 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -1,45 +1 @@
-# 👀 자신이 원하는 사이트 레이아웃 클론
-
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
-
-## 과제 수행 및 제출 방법
-
-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. 다운로드!
+# Kakao 웹페이지 클론코딩
diff --git a/index.html b/index.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <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" />
+    <title>카카오 Clone</title>
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://www.kakaocorp.com/page/favicon.ico"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="node_modules/bootstrap-icons/font/bootstrap-icons.css"
+    />
+    <link rel="stylesheet" href="src/css/style.css" />
+    <link rel="stylesheet" href="src/css/header.css" />
+    <link rel="stylesheet" href="src/css/content.css" />
+    <link rel="stylesheet" href="src/css/footer.css" />
+    <link rel="stylesheet" href="src/css/modal.css" />
+    <link rel="stylesheet" href="src/css/mobile-menu.css" />
+  </head>
+  <body>
+    <header>
+      <div class="header-content">
+        <h1 class="header-logo"><a href="."></a></h1>
+        <nav>
+          <ul id="gnb">
+            <li>
+              카카오
+              <div class="kakao-menu sub">
+                <span>카카오 문화</span>
+                <span>공동체</span>
+                <span>히스토리</span>
+              </div>
+            </li>
+            <li>뉴스</li>
+            <li>
+              기술과 서비스
+              <div class="tech sub">
+                <span>기술</span>
+                <span>서비스</span>
+              </div>
+            </li>
+            <li>
+              약속과 책임
+              <div class="promises sub">
+                <span>ESG</span>
+                <span>카카오의 다짐</span>
+                <span>소셜임팩트</span>
+                <span>디지털 권리</span>
+                <span>AI 윤리</span>
+              </div>
+            </li>
+          </ul>
+        </nav>
+        <div class="header-right-menu-pc">
+          <div class="header-icon"><i class="bi bi-search"></i></div>
+          <div class="header-icon"><i class="bi bi-globe"></i></div>
+          <div class="header-icon"><i class="bi bi-moon"></i></div>
+        </div>
+        <div class="header-right-menu-mobile">
+          <div class="header-icon"><i class="bi bi-search"></i></div>
+          <div class="header-icon mobile-menu-on">
+            <i class="bi bi-list"></i>
+          </div>
+        </div>
+      </div>
+    </header>
+    <!-- mobile menu -->
+    <div class="mobile-menu">
+      <div class="mobile-menu-container">
+        <div class="mobile-menu-header">
+          <h1 class="header-logo mobile-menu-logo">
+            <a href="."></a>
+          </h1>
+          <div class="mobile-menu-close">
+            <span></span>
+            <span></span>
+          </div>
+        </div>
+        <div class="mobile-menu-wrapper">
+          <div class="mobile-menu-content">
+            <img
+              src="https://t1.kakaocdn.net/kakaocorp/kakaocorp/admin/65779d87017800001.png"
+              alt=""
+            />
+            <div class="mobile-menu-item">
+              <span>카카오</span>
+              <ul class="mobile-menu-list">
+                <li>카카오 문화</li>
+                <li>공동체</li>
+                <li>히스토리</li>
+              </ul>
+            </div>
+          </div>
+          <div class="mobile-menu-content">
+            <img
+              src="https://t1.kakaocdn.net/kakaocorp/kakaocorp/admin/657726a1017800001.png"
+              alt=""
+            />
+            <div class="mobile-menu-item">
+              <span>뉴스</span>
+            </div>
+          </div>
+          <div class="mobile-menu-content">
+            <img
+              src="https://t1.kakaocdn.net/kakaocorp/kakaocorp/admin/6575c56d017800001.png"
+              alt=""
+            />
+            <div class="mobile-menu-item">
+              <span>기술과 서비스</span>
+              <ul class="mobile-menu-list">
+                <li>기술</li>
+                <li>서비스</li>
+              </ul>
+            </div>
+          </div>
+          <div class="mobile-menu-content">
+            <img
+              src="https://t1.kakaocdn.net/kakaocorp/kakaocorp/admin/657759fa017800001.png"
+              alt=""
+            />
+            <div class="mobile-menu-item">
+              <span>약속과 책임</span>
+              <ul class="mobile-menu-list">
+                <li>ESG</li>
+                <li>카카오의 다짐</li>
+                <li>소셜임팩트</li>
+                <li>디지털 권리</li>
+                <li>AI 윤리</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="mobile-menu-footer">
+          <ul class="mobile-menu-footer-list">
+            <li>투자정보</li>
+            <li>인재영입</li>
+            <li>고객센터</li>
+          </ul>
+          <ul class="mobile-menu-icon">
+            <li><i class="bi bi-globe"></i></li>
+            <li><i class="bi bi-moon"></i></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <section></section>
+    <footer></footer>
+    <!-- Modal -->
+    <div id="open">카카오 링크</div>
+    <div id="modal-wrapper">
+      <div id="modal">
+        <div id="close">
+          <span></span>
+          <span></span>
+        </div>
+        <div class="kakao-image"></div>
+        <h2>카카오</h2>
+        <a class="modal-under-box" href="https://www.kakaocorp.com/page/"
+          >바로가기</a
+        >
+      </div>
+    </div>
+    <script src="src/js/header.js"></script>
+    <script src="src/js/modal.js"></script>
+    <script src="src/js/mobileMenu.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "KDT5-M1",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "[email protected]:pildrums/KDT5-M1.git",
+  "author": "pildrums <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "bootstrap-icons": "^1.10.4"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "node-sass": "node-sass",
+    "sass": "node-sass -w -r src/scss -o src/css"
+  },
+  "devDependencies": {
+    "node-sass": "^8.0.0"
+  }
+}
diff --git a/src/css/content.css b/src/css/content.css
diff --git a/src/css/footer.css b/src/css/footer.css
diff --git a/src/css/header.css b/src/css/header.css
@@ -0,0 +1,134 @@
+@charset "UTF-8";
+header {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid #eee;
+  background: #fff;
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0; }
+
+.header-content {
+  margin: 0 97px;
+  max-width: 1024px;
+  width: 1024px;
+  height: inherit;
+  display: flex;
+  justify-content: space-between;
+  align-items: center; }
+  .header-content h1 {
+    width: 74px;
+    height: 24px; }
+    .header-content h1 a {
+      width: inherit;
+      height: inherit;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-image: url(https://i.namu.wiki/i/IqmOmj71Vd9La5zunuoLdkOXMuy8BHcg2Hk5KN-oGgJp1gvlCytffdNpbUwd3P4WfORoqi7cad4f71d6uOgEug.svg); }
+  .header-content nav {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: inherit; }
+    .header-content nav ul {
+      display: flex;
+      align-items: center;
+      cursor: pointer; }
+      .header-content nav ul:hover {
+        color: #888; }
+      .header-content nav ul li {
+        padding: 30px;
+        font-family: KakaoBig, Apple SD Gothic Neo, Malgun Gothic, 맑은 고딕, sans-serif;
+        font-weight: 600;
+        font-size: 16px;
+        transition: color 0.2s ease-in-out;
+        position: relative;
+        user-select: none; }
+        .header-content nav ul li:hover {
+          color: #000; }
+
+.sub {
+  height: 48px;
+  position: absolute;
+  background: #000;
+  color: #eee;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  top: 68px;
+  border-radius: 30px;
+  padding: 0 20px;
+  letter-spacing: -0.5px; }
+  .sub span {
+    display: block;
+    font-weight: 500; }
+    .sub span:hover {
+      font-weight: 700; }
+
+.kakao-menu {
+  width: 268px;
+  right: -90px;
+  visibility: hidden; }
+
+.tech {
+  width: 142px;
+  right: 4px;
+  visibility: hidden; }
+
+.promises {
+  width: 480px;
+  left: -170px;
+  visibility: hidden; }
+
+.active {
+  visibility: visible; }
+
+.header-right-menu-pc {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px; }
+  .header-right-menu-pc .header-icon {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    transition: background 0.2s ease-in-out;
+    cursor: pointer; }
+    .header-right-menu-pc .header-icon i {
+      font-size: 20px; }
+    .header-right-menu-pc .header-icon:hover {
+      background: #eee; }
+
+@media all and (min-width: 1025px) {
+  .header-right-menu-mobile {
+    display: none; }
+  .mobile-menu {
+    display: none; } }
+
+@media all and (max-width: 1024px) {
+  .header-content nav {
+    display: none; }
+  .header-right-menu-pc {
+    display: none; }
+  .header-right-menu-mobile {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 28px; }
+    .header-right-menu-mobile .header-icon {
+      cursor: pointer; }
+      .header-right-menu-mobile .header-icon i {
+        font-size: 24px; }
+      .header-right-menu-mobile .header-icon:last-child i {
+        font-size: 32px; } }