diff --git a/README.md b/README.md index 598dc30f..b16cbca3 100644 --- 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` ํŒŒ์ผ์„ ์ œ๊ณตํ•˜์„ธ์š”! -- [ ] ๊ณผ์ œ ๊ฒฐ๊ณผ์™€ ๋น„๊ตํ•  ์ˆ˜ ์žˆ๋Š” ์‹ค์ œ ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)์˜ ์ฃผ์†Œ๋ฅผ ๋ช…์‹œํ•˜์„ธ์š”! -- [ ] ๊ณผ์ •์—์„œ ์‚ฌ์šฉํ•œ ํ”„๋กœ์ ํŠธ ํด๋”/ํŒŒ์ผ์ด ๋ชจ๋‘ ํฌํ•จ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค, ์ผ๋ถ€ ํŒŒ์ผ๋งŒ ์ œ์ถœํ•˜์ง€ ๋งˆ์„ธ์š”! -- [ ] ์‹ค์ œ ์„œ๋น„์Šค๋กœ ๋ฐฐํฌํ•˜๊ณ  ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ๋งํฌ๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. - -## ์„ ํƒ ์š”๊ตฌ์‚ฌํ•ญ - -- [ ] `
`, `
` ๋“ฑ ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ฅผ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•ด๋ณด์„ธ์š”. -- [ ] ์‹ค์ œ ์‚ฌ์ดํŠธ์˜ ๋ ˆ๊ฑฐ์‹œ ์ฝ”๋“œ ํ™œ์šฉ๋ณด๋‹จ ์ตœ์‹ ์˜ 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. ๋‹ค์šด๋กœ๋“œ! +- ๊ฐœ์ธ์œผ๋กœ ํŽ˜์ด์ง€๋กœ ๋งŒ๋“œ๋Š”๊ฑด ์ข€ ์•„๋‹Œ๊ฑฐ๊ฐ™์•„์„œ ๊ธ‰ํ•˜๊ฒŒ ๊ตฌ๊ธ€๋ฉ”์ธํŽ˜์ด์ง€ ํด๋ก ์ฝ”๋”ฉ +- ๋‹คํฌ๋ชจ๋“œ ๊ตฌํ˜„ํ•˜๋‹ค๊ฐ€ ์‹คํŒจ.... ํด๋ฆญ์ด๋ฒคํŠธ ์ ์šฉํ• ๋ ค๋‹ค๊ฐ€ ์‹œ๊ฐ„์—†์–ด์„œ ์ œ์ถœ... +- ๊ฒ€์ƒ‰์ฐฝ์˜ ๋‹๋ณด๊ธฐ ๋ชจ์–‘ ์•„์ด์ฝ˜ ๋’ค๋ถ€ํ„ฐ ํƒ€์ดํ•‘ ๊ฐ€๋Šฅํ•จ +- ๊ฒ€์ƒ‰์ฐฝ์— ๋งˆ์šฐ์Šค ํฌ์ธํŒ…, ํฌ์ปค์Šค ํ–ˆ์„ ๋•Œ ๊ฒ€์ƒ‰์ฐฝ ์ฃผ๋ณ€์— ๊ทธ๋ฆผ์ž ํšจ๊ณผ ํ˜ธ๋ฒ„, ํฌ์ปค์Šค ์‚ฌ์šฉ \ No newline at end of file diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 00000000..2fa8d7c2 Binary files /dev/null and b/images/logo.png differ diff --git a/images/profile.jpeg b/images/profile.jpeg new file mode 100644 index 00000000..1ef1e54d Binary files /dev/null and b/images/profile.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..22ac7c82 --- /dev/null +++ b/index.html @@ -0,0 +1,59 @@ + + + + + + Google + + + + + + +
+ +
+ +
+ +
+ + + + +
+
+ Google ๊ฒ€์ƒ‰ + ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ์ฝ”ํ…Œ์—ฐ์Šต +
+
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..d3b3008f --- /dev/null +++ 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์„ค์ •์œผ๋กœ ์•Œ์•„์„œ ๊ฐ€์šด๋ฐ๋กœ ์ด๋™ */ + } +} \ No newline at end of file