KDT5_BaekDongEun

.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

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
+  순차적으로 요소 지정 효과 나타내기