KDT1-FE · kse-seong-eun · Apr 5, 2023 · iamidlek · Apr 9, 2023 · iamidlek
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,133 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# .DS_Store
+.DS_Store
diff --git a/JS/main.js b/JS/main.js
@@ -0,0 +1,41 @@
+const navEl = document.querySelector("header");
+// const topButton = document.getElementById("material-symbols-outlined");
+const navWhiteEl = document.querySelector(".nav_white");
+
+window.addEventListener(
+  "scroll",
+  _.throttle(function () {
+    if (window.scrollY < 200) {
+      gsap.to(navEl, 0.6, {
+        opacity: 0,
+      });
+    } else {
+      gsap.to(navEl, 0.6, {
+        opacity: 1,
+      });
+    }
+  }, 300)
+);
+
+window.addEventListener(
+  "scroll",
+  _.throttle(function () {
+    if (window.scrollY < 200) {
+      gsap.to(navWhiteEl, 0.6, {
+        opacity: 1,
+      });
+    } else {
+      gsap.to(navWhiteEl, 0.6, {
+        opacity: 0,
+      });
+    }
+  }, 300)
+);
+
+// const moveHandler = function () {
+//   topButton
+//     html.body.animate({ scrollTop: 0 }, 400);
+//     return false;
+
+// };
+// window.addEventListener("click", moveHandler);
diff --git a/README.md b/README.md
@@ -1,45 +1,59 @@
-# 👀 자신이 원하는 사이트 레이아웃 클론
-
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
-
-## 과제 수행 및 제출 방법
-
-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. 다운로드!
+# 👀 사이트 레이아웃 클론
+
+래퍼런스 사이트 : https://hkd-microbiome.com/ko/
+
+## 작업 사항
+
+사용 기술 HTML, CSS, SCSS, JS
+
+이번 클론코딩 과제에서는 시멘틱 태그와 명시적인 태그 네이밍을 주의하며 구조를 만들었습니다.
+사이트의 디자인 요소 중 기술이 부족하여 구현하지 못한 부분은 CSS 및 다른 방법으로 대체 구현해 보았습니다.
+( 화살표, 버튼, 이미지 등 활성화 할 수 있는 요소들에는 css로 작업할 수 있는 간단한 모션을 추가했습니다.)
+복잡한 작업환경을 개선하기위해 scss를 활용하여 스타일링 파일의 코드를 줄일 수 있도록 하였습니다.
+추후에 반응형, JS 기술 부분도 지속적으로 업데이트 할 예정입니다!
+
+# CSS, JS 요소
+
+    CSS 효과
+    0. 부드럽게 효과 변환시키기.
+    1. 버튼 Hover :
+    2. <a> 텍스트 hover : 화살표 transform, border_bottom 라인 생성, 글자 크기 변화
+    3. Img hover : filter 기능으로 색 변화. 이미지 사이즈 변화,
+    4. cursor: pointer활용 링크 기능없는 경우 링크 있는것 처럼
+    5. 빈 링크에 javascript:void(0)
+
+    JS 효과
+    1. gsap,lodash 활용
+        <header> top:0일때 Opacity:0 / 지정 부분 아래에서 요소 노출
+    2. <footer> 웹페이지 최상단으로 가기 버튼
+        (사이트 명들도 최상단 이동으로 지정)
+
+# ❗️구현하지 못한 부분
+
+    현재 본인 수준이 부족해 구현하지 못하고 CSS로 대체한 부분들. 추후 더 공부해 디벨롭할 부분들 리스트!
+
+## 효과
+
+- <a> 태그 border_bottom의 애니메이션 효과 (좌에서 우로 라인 그어짐)
+- butoon의 애니메이션 효과 (원형으로 퍼지며 배경,글자 색상 변경)
+
+## 구성
+
+- header
+  [1] 아래로 스크롤 하는 동안은 네비 노출 x, 위로 스크롤 할때에만 나타내야 함.
+  [2] 햄버거 애니메이션 🔥
+  [3] 드롭다운 페이지
+- big_banner 🔥🔥
+  테스트 모션 [1]페이드 인 [2]아래에서 위로 팝업
+  이미지 모션 [1]자동 롤링 [2] 사용자 액션 없이 이미지 사이즈 변화 애니메이션[3].dot을 누르면 해당 배너로 수동 전환 [4]자동 롤링 일시정지 기능 [5] .dot hover 시 애니메이션
+- center_guide
+  [1] 타이틀 hover시 화살표 움직임 반복
+  [2] 뷰포트 외부의 이미지 롤링 및 롤링 버튼 활성화 🔥🔥
+  [3] 이미지 hover 시 관련 아이콘 팝업
+- VR_guide
+  배경 일러스트 형식 SVG 이미지 사용했으나, 화면 구성이 깨짐 (사이즈 조절해도 같은 문제가 발생해 JEPG로 대체)
+  마우스 hover 시 일러스트 애니메이션 필요 (창문에 불 들어옴)
+- REASERCH
+  연구 리스트 클릭 시 관련 이미지, 텍스트로 전환 🔥
+- INGREDIENTS
+  순차적으로 요소 지정 효과 나타내기
diff --git a/dest/css/styles.css b/dest/css/styles.css
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -0,0 +1,43 @@
+import gulp from "gulp";
+import { deleteSync } from "del";
+import minify from "gulp-csso";
+import gulpSass from "gulp-sass";
+import sass2 from "sass";
+import autoprefixer from "gulp-autoprefixer";
+
+const sass = gulpSass(sass2);
+
+const routes = {
+  css: {
+    watch: "src/scss/*",
+    src: "src/scss/styles.scss",
+    dest: "dest/css",
+  },
+};
+
+const styles = () =>
+  gulp
+    .src(routes.css.src)
+    .pipe(sass().on("error", sass.logError))
+    .pipe(
+      autoprefixer({
+        flexbox: true,
+        grid: "autoplace",
+      })
+    )
+    .pipe(minify())
+    .pipe(gulp.dest(routes.css.dest));
+
+const watch = () => {
+  gulp.watch(routes.css.watch, styles);
+};
+
+const clean = async () => await deleteSync(["dest/"]);
+
+const prepare = gulp.series([clean]);
+
+const assets = gulp.series([styles]);
+
+const live = gulp.parallel([watch]);
+
+export const dev = gulp.series([prepare, assets, live]);
diff --git a/img/cente_front.jpg b/img/cente_front.jpg
diff --git a/img/center_convention.jpg b/img/center_convention.jpg
diff --git a/img/center_convention_logo.png b/img/center_convention_logo.png
diff --git a/img/center_fermenting.jpg b/img/center_fermenting.jpg
diff --git a/img/center_fermenting_logo.png b/img/center_fermenting_logo.png
diff --git a/img/center_front_logo.png b/img/center_front_logo.png
diff --git a/img/center_lab.jpg b/img/center_lab.jpg
diff --git a/img/center_lab_log.png b/img/center_lab_log.png
diff --git a/img/center_pub.jpg b/img/center_pub.jpg
diff --git a/img/center_pub_logo.png b/img/center_pub_logo.png
diff --git a/img/img0101.jpg b/img/img0101.jpg
diff --git a/img/img0103.jpg b/img/img0103.jpg
diff --git a/img/img0105.jpg b/img/img0105.jpg
diff --git a/img/img0107.jpg b/img/img0107.jpg
diff --git a/img/img0109.jpg b/img/img0109.jpg
diff --git a/img/img0121.svg b/img/img0121.svg
diff --git a/img/img0122.svg b/img/img0122.svg
diff --git a/img/img0123.svg b/img/img0123.svg
diff --git a/img/img0124.svg b/img/img0124.svg
diff --git a/img/img0125.svg b/img/img0125.svg
diff --git a/img/img0126.svg b/img/img0126.svg
diff --git a/img/ingredientsimg0134.jpg b/img/ingredientsimg0134.jpg
diff --git a/img/ingredientsimg0135.jpg b/img/ingredientsimg0135.jpg
diff --git a/img/ingredientsimg0136.jpg b/img/ingredientsimg0136.jpg
diff --git a/img/ingredientsimg0137.jpg b/img/ingredientsimg0137.jpg
diff --git a/img/ingredientsimg0138.jpg b/img/ingredientsimg0138.jpg
diff --git a/img/ingredientsimg0139.jpg b/img/ingredientsimg0139.jpg
diff --git a/img/ingredientsimg0140.jpg b/img/ingredientsimg0140.jpg
diff --git a/img/ingredientsimg0141.jpg b/img/ingredientsimg0141.jpg
diff --git a/img/ingredientsimg0142.jpg b/img/ingredientsimg0142.jpg
diff --git a/img/ingredientsimg0143.jpg b/img/ingredientsimg0143.jpg
diff --git a/img/main-product-mission-y.jpg b/img/main-product-mission-y.jpg
diff --git a/img/main-product-sum.jpg b/img/main-product-sum.jpg
diff --git a/img/mainbannerimg0102.jpg b/img/mainbannerimg0102.jpg
diff --git a/img/mainbannerimg0104.jpg b/img/mainbannerimg0104.jpg
diff --git a/img/mainbannerimg0106.jpg b/img/mainbannerimg0106.jpg
diff --git a/img/mainbannerimg0108.jpg b/img/mainbannerimg0108.jpg
diff --git a/img/researchimg0128.jpg b/img/researchimg0128.jpg
diff --git a/img/researchimg0129.svg b/img/researchimg0129.svg
diff --git a/img/researchimg0130.jpg b/img/researchimg0130.jpg
diff --git a/img/researchimg0131.svg b/img/researchimg0131.svg
diff --git a/img/researchimg0132.jpg b/img/researchimg0132.jpg
diff --git a/img/researchimg0133.svg b/img/researchimg0133.svg
diff --git a/img/researchingMap.png b/img/researchingMap.png
diff --git a/index.html b/index.html
@@ -0,0 +1,349 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="dest/css/styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.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=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,700,0,0"
+    />
+
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
+      integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"
+      integrity="sha512-cOH8ndwGgPo+K7pTvMrqYbmI8u8k6Sho3js0gOqVWTmQMlLIi6TbqGWRTpf1ga8ci9H3iPsvDLr4X7xwhC/+DQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+
+    <script defer src="./js/main.js"></script>
+    <title>HKDmicrobiome CloneCoding</title>
+  </head>
+  <body>
+    <!-- HEADER -->
+    <header>
+      <div class="inner">
+        <div class="nav">
+          <a
+            class="logo"
+            href="javascript:void(0)"
+            onclick="window.scrollTo(0,0);"
+            >Microbiome Center</a
+          >
+          <div class="menu">
+            <ul class="lang" href="javascript:void(0)">
+              <li>
+                <a href="javascript:void(0)">JP</a>
+              </li>
+              <li>
+                <a href="javascript:void(0)">EN</a>
+              </li>
+              <li>
+                <a href="javascript:void(0)">KR</a>
+              </li>
+            </ul>
+            <a class="hamburger" href="javascript:void(0)">=</a>
+          </div>
+        </div>
+      </div>
+    </header>
+    <div class="header_white">
+      <div class="nav_white">
+        <a
+          class="logo"
+          href="javascript:void(0)"
+          onclick="window.scrollTo(0,0);"
+        >
+          Microbiome Center
+        </a>
+        <div class="menu">
+          <ul class="lang" href="javascript:void(0)">
+            <li>
+              <a href="javascript:void(0)">JP</a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">EN</a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">KR</a>
+            </li>
+          </ul>
+          <a class="hamburger" href="javascript:void(0)">=</a>
+        </div>
+      </div>
+    </div>
+
+    <!-- BIG BANNER -->
+    <section class="bigbanner">
+      <div class="inner">
+        <h2 class="mainTitle">발효 에너지가<br />숨 쉬는 공간</h2>
+        <h4 class="subTitle">
+          전국 각지의 땅에서 잉태된 식물들이 <br />천천히,그리고 정성스럽게,
+          최적의 조건에서 숙성 중입니다.
+        </h4>
+        <a class="dots" href="javascript:void(0)">
+          <span class="material-icons">fiber_manual_record</span>
+          <span class="material-icons">fiber_manual_record</span>
+          <span class="material-icons">fiber_manual_record</span>
+          <span class="material-icons">fiber_manual_record</span>
+          <span class="material-icons"> pause </span>
+        </a>
+      </div>
+    </section>
+
+    <!-- CENTER GUIDE -->
+    <section class="center_intro">
+      <!-- <div class="inner"> -->
+      <div class="center_title">
+        <a class="center_main" href="javascript:void(0)">Microbiome</a>
+        <a class="center_main" href="javascript:void(0)"
+          >Center<span class="arrow">→</span></a
+        >
+        <span class="center_sub">센터소개</span>
+      </div>
+      <article class="center_image">
+        <div class="box">
+          <div class="image_odd" style="cursor: pointer">
+            <img src="./img/cente_front.jpg" alt="센터입구" />
+            <div class="image_name">센터입구</div>
+          </div>
+          <div class="image_even" style="cursor: pointer">
+            <img src="./img/center_convention.jpg" alt="전시실" />
+            <span class="image_name">전시실</span>
+          </div>
+          <div class="image_odd" style="cursor: pointer">
+            <img src="./img/center_lab.jpg" alt="연구실" />
+            <span class="image_name">연구실</span>
+          </div>
+          <div class="image_even" style="cursor: pointer">
+            <img src="./img/center_pub.jpg" alt="출아실" />
+            <span class="image_name">출아실</span>
+          </div>
+        </div>
+      </article>
+      <!-- </div> -->
+    </section>
+
+    <!-- VR GUIDE -->
+    <section class="vrTour">
+      <div class="vrTour_title">
+        <a class="vrTour_main" href="javascript:void(0)">VR Showroom Tour</a>
+        <span class="vrTour_sub"
+          >마이크로바이옴 센터의 내부 공간을<br />360° VR로 관람하실 수
+          있습니다.</span
+        >
+        <button class="vr_button">360VRº 둘러보기</button>
+      </div>
+      <div class="illust-pic"></div>
+    </section>
+
+    <!-- HERITAGE -->
+    <main class="Heritage">
+      <div class="Heritage_inner">
+        <div class="Heritage_main">
+          <div>
+            청정지역이 만들어준 자연발효 헤리티지<br />훗카이도 마이크로바이옴
+            센터
+          </div>
+          <div>
+            자연과 공존으로 태어나는<br />아름다움과 건강의 결정체를 찾아
+          </div>
+          <div>깨끗한 자연을 토대로,<br />이 땅에서 다시 시작합니다.</div>
+        </div>
+        <img
+          class="map_icon"
+          src="./img/researchingMap.png"
+          alt="훗카이도지도"
+        />
+        <div class="Heritage_icons">
+          <img class="Heritage_icon" src="./img/img0121.svg" alt="원료1" />
+          <img class="Heritage_icon" src="./img/img0122.svg" alt="원료2" />
+          <img class="Heritage_icon" src="./img/img0123.svg" alt="원료3" />
+          <img class="Heritage_icon" src="./img/img0124.svg" alt="원료4" />
+          <img class="Heritage_icon" src="./img/img0125.svg" alt="원료5" />
+          <img class="Heritage_icon" src="./img/img0126.svg" alt="원료1" />
+        </div>
+      </div>
+    </main>
+
+    <!-- RESEARCH -->
+    <div class="research">
+      <div class="left">
+        <ul class="left_list">
+          <li class="research_list">Research</li>
+          <li class="research_list" style="cursor: pointer">
+            마이크로바이옴 연구
+          </li>
+          <li class="research_list" style="cursor: pointer">식물발효액 연구</li>
+          <li class="research_list" style="cursor: pointer">
+            전통발효기술 연구
+          </li>
+        </ul>
+        <div class="research_img"></div>
+      </div>
+      <span class="right">
+        <img src="./img/researchimg0129.svg" alt="분자" />
+        <div class="research_info">마이크로바이옴 연구</div>
+        <div class="reserach_text">
+          다양한 제품개발을 위하여 피부타입과<br />피부미생물을 분석해 피부
+          특성을 대표하는<br />skin microbiome을 발굴합니다.
+        </div>
+        <button class="reserach_button">자세히 보기</button>
+      </span>
+    </div>
+
+    <!-- INGREDIENTS -->
+    <article class="ingredients">
+      <div class="inner_narrow">
+        <div class="in_title">
+          청정지역 홋카이도의 식물들과 각 나라 전통발효 원물을 모아 발효 소재를
+          개발합니다.
+        </div>
+        <div class="ingredient">
+          <div class="box">
+            <span>세이지</span>
+            <img class="img1" src="./img/ingredientsimg0134.jpg" alt="세이지" />
+          </div>
+          <div class="box">
+            <span>클로브 꽃</span>
+            <img
+              class="img1"
+              src="./img/ingredientsimg0135.jpg"
+              alt="클로브 꽃"
+            />
+          </div>
+          <div class="box">
+            <span>석류나무</span>
+            <img
+              class="img1"
+              src="./img/ingredientsimg0136.jpg"
+              alt="석류나무"
+            />
+          </div>
+          <div class="box">
+            <span>님나무</span>
+            <img class="img1" src="./img/ingredientsimg0137.jpg" alt="님나무" />
+          </div>
+          <div class="box">
+            <span>생강</span>
+            <img class="img1" src="./img/ingredientsimg0138.jpg" alt="생강" />
+          </div>
+          <div class="box">
+            <span>보스웰리아</span>
+            <img
+              class="img1"
+              src="./img/ingredientsimg0139.jpg"
+              alt="보스웰리아"
+            />
+          </div>
+          <div class="box">
+            <span>고수씨</span>
+            <img class="img1" src="./img/ingredientsimg0140.jpg" alt="고수씨" />
+          </div>
+          <div class="box">
+            <span>타임</span>
+            <img class="img1" src="./img/ingredientsimg0141.jpg" alt="타임" />
+          </div>
+          <div class="box">
+            <span>팔각</span>
+            <img class="img1" src="./img/ingredientsimg0142.jpg" alt="팔각" />
+          </div>
+          <div class="box">
+            <span>고추냉이</span>
+            <img
+              class="img1"
+              src="./img/ingredientsimg0143.jpg"
+              alt="고추냉이"
+            />
+          </div>
+        </div>
+        <button class="in_button">자세히 보기</button>
+      </div>
+    </article>
+
+    <!-- RPODUCT -->
+    <section class="products">
+      <div class="inner">
+        <div class="product_title">
+          <a class="product_main" href="javascript:void(0)"
+            >Product<span class="arrow"> →</span></a
+          >
+          <span class="product_sub"
+            >자연발효기술로 완성된<br />LG생활건강의 화장품을<br />소개합니다</span
+          >
+        </div>
+        <div class="product">
+          <article class="product__mission">
+            <div class="product_img">
+              <img src="./img/main-product-mission-y.jpg" alt="mission" />
+            </div>
+            <a class="product_name">미션Y</a>
+            <div class="product_text">
+              30년 이상의 효모 연구 노하우와 청정 지역 식물 발효액 성분을 적용한
+              발효 화장품
+            </div>
+            <button class="product_button">자세히 보기</button>
+          </article>
+          <article class="product__sum">
+            <div class="product_img">
+              <img src="./img/main-product-sum.jpg" alt="mission" />
+            </div>
+            <a class="product_name">숨 37º</a>
+            <div class="product_text">
+              오랜 연구와 진보된 발효과학을 통해 건강한 피부를 약속하는 자연발효
+              화장품
+            </div>
+            <button class="product_button">자세히 보기</button>
+          </article>
+        </div>
+      </div>
+    </section>
+    <!-- FOOTER -->
+    <footer class="footer">
+      <div class="inner">
+        <h2 style="cursor: pointer" onclick="window.scrollTo(0,0);">
+          Hokkaido<br />Microbiome<br />Center
+        </h2>
+        <span
+          class="material-symbols-outlined"
+          Style="cursor: pointer;"
+          onclick="window.scrollTo(0,0);"
+          >arrow_upward</span
+        >
+        <div class="footer__menu">
+          <a href="javascript:void(0)">마이크로바이옴센터</a>
+          <a href="javascript:void(0)">VR쇼룸투어</a>
+          <a href="javascript:void(0)"> 자연발효연구</a>
+        </div>
+        <div class="footer_info">
+          <span>〒047-0001 일본 홋카이도 오타루시 와카타케초 19-25 </span>
+          <span>© LG H & H Tokyo R&D Center Ltd. All Rights Reserved.</span>
+          <span>
+            <a href="javascript:void(0)">CONTACT</a>
+            <a href="javascript:void(0)">PRIVACY POLIC</a>
+            <a href="javascript:void(0)">COOKIE POLICYY</a>
+          </span>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "scss-boilerplate",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "gulp dev"
+  },
+  "type": "module",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.18.9",
+    "@babel/preset-env": "^7.18.9",
+    "@babel/register": "^7.18.9",
+    "del": "^7.0.0",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-csso": "^4.0.1",
+    "gulp-sass": "^5.1.0",
+    "node-sass": "^7.0.1"
+  },
+  "dependencies": {
+    "sass": "^1.54.0"
+  }
+}
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
@@ -0,0 +1,71 @@
+// CENTER TITLE
+@mixin title ($color){
+  color: $color;
+  text-align: left;
+  text-decoration: none;
+  font-family: 'Montserrat', sans-serif;
+  display: inline-block;
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -1;
+  margin-top: 2px;
+}
+@mixin subTitle ($color){
+  color: $color;
+  text-align: left;
+  margin-top: 13px;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-size: .9rem;
+  font-weight: 500;
+  line-height: 1.5;
+}
+@mixin titleCenter ($color){
+  color: $color;
+  text-align: center;
+  text-decoration: none;
+  font-family: 'Montserrat', sans-serif;
+  display: inline-block;
+  font-size: 2.1rem;
+  font-weight: 700;
+  letter-spacing: -1;
+  margin-top: 2px;
+}
+@mixin subTitleCenter ($color){
+  color: $color;
+  opacity: 0.6;
+  text-align: center;
+  margin-top: 13px;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: -1;  
+}
+@mixin subTitleLeft ($color){
+  color: $color;
+  text-align: center;
+  margin-top: 13px;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 2.5;
+}
+
+@mixin titleMideum ($color){
+  color: $color;
+  text-align: center;
+  text-decoration: none;
+  font-family: 'Montserrat', sans-serif;
+  display: inline-block;
+  font-size: 1.2rem;
+  font-weight: 700; 
+}
+@mixin button ($color){
+  color: $color;
+  text-align: center;
+  text-decoration: none;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 700;
+  margin-top: 2px;
+}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -0,0 +1,12 @@
+$white: #fefefe;
+$lightGrey: #F8F8F8;
+$black: #131313;
+$blackOpacity: rgba(19, 19, 19, 0.639);
+$beige:#EDE8E2;
+$navheight: 75px;
+$centerheight: 110vh;
+//탑배너 Img url
+// https://hkd-microbiome.com/ko/wp-content/uploads/sites/3/2021/12/main-visual-01.jpg
+// https://hkd-microbiome.com/ko/wp-content/uploads/sites/3/2021/12/main-visual-02.jpg
+// https://hkd-microbiome.com/ko/wp-content/uploads/sites/3/2021/12/main-visual-03.jpg
+// https://hkd-microbiome.com/ko/wp-content/uploads/sites/3/2021/12/main-visual-04.jpg
diff --git a/src/scss/styles.scss b/src/scss/styles.scss