diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..1320b9a3 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env"] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..71b9b020 --- /dev/null +++ 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 new file mode 100644 index 00000000..bdee8af8 --- /dev/null +++ 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 index 598dc30f..6936aff9 100644 --- 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` ํŒŒ์ผ์„ ์ œ๊ณตํ•˜์„ธ์š”! -- [ ] ๊ณผ์ œ ๊ฒฐ๊ณผ์™€ ๋น„๊ตํ•  ์ˆ˜ ์žˆ๋Š” ์‹ค์ œ ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)์˜ ์ฃผ์†Œ๋ฅผ ๋ช…์‹œํ•˜์„ธ์š”! -- [ ] ๊ณผ์ •์—์„œ ์‚ฌ์šฉํ•œ ํ”„๋กœ์ ํŠธ ํด๋”/ํŒŒ์ผ์ด ๋ชจ๋‘ ํฌํ•จ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค, ์ผ๋ถ€ ํŒŒ์ผ๋งŒ ์ œ์ถœํ•˜์ง€ ๋งˆ์„ธ์š”! -- [ ] ์‹ค์ œ ์„œ๋น„์Šค๋กœ ๋ฐฐํฌํ•˜๊ณ  ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ๋งํฌ๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. - -## ์„ ํƒ ์š”๊ตฌ์‚ฌํ•ญ - -- [ ] `
`, `
` ๋“ฑ ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ฅผ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•ด๋ณด์„ธ์š”. -- [ ] ์‹ค์ œ ์‚ฌ์ดํŠธ์˜ ๋ ˆ๊ฑฐ์‹œ ์ฝ”๋“œ ํ™œ์šฉ๋ณด๋‹จ ์ตœ์‹ ์˜ 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. ํ…์ŠคํŠธ hover : ํ™”์‚ดํ‘œ transform, border_bottom ๋ผ์ธ ์ƒ์„ฑ, ๊ธ€์ž ํฌ๊ธฐ ๋ณ€ํ™” + 3. Img hover : filter ๊ธฐ๋Šฅ์œผ๋กœ ์ƒ‰ ๋ณ€ํ™”. ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ ๋ณ€ํ™”, + 4. cursor: pointerํ™œ์šฉ ๋งํฌ ๊ธฐ๋Šฅ์—†๋Š” ๊ฒฝ์šฐ ๋งํฌ ์žˆ๋Š”๊ฒƒ ์ฒ˜๋Ÿผ + 5. ๋นˆ ๋งํฌ์— javascript:void(0) + + JS ํšจ๊ณผ + 1. gsap,lodash ํ™œ์šฉ +
top:0์ผ๋•Œ Opacity:0 / ์ง€์ • ๋ถ€๋ถ„ ์•„๋ž˜์—์„œ ์š”์†Œ ๋…ธ์ถœ + 2.