diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..b8a9fae8 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index cc6a3b23..d6a7e4e9 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,64 @@ -[์ฐธ๊ณ  ๋‚ด์šฉ] -๐Ÿ‘€ ์ž์‹ ์ด ์›ํ•˜๋Š” ์‚ฌ์ดํŠธ ๋ ˆ์ด์•„์›ƒ ํด๋ก  -์›ํ•˜๋Š” ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)๋ฅผ ์ž์œ ๋กญ๊ฒŒ ์„ ํƒํ•˜๊ณ  ๋ ˆ์ด์•„์›ƒ์„ ํด๋ก  ์ฝ”๋”ฉํ•˜์„ธ์š”. -ํ‰์†Œ์— ๋„์ „ํ•ด ๋ณด๊ณ  ์‹ถ์—ˆ๊ฑฐ๋‚˜ ํ˜น์€ ์ž์‹ ์˜ ์ˆ˜์ค€์— ๋งž๋Š” ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)๋ฅผ ์„ ํƒํ•˜์„ธ์š”. -๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ๋ฆฌ๋ทฐ ๊ธฐ๊ฐ„์€ ๋ณ„๋„ ๊ณต์ง€๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”! +## ๐Ÿ’– naverVIBE ํ™ˆํŽ˜์ด์ง€ ํด๋ก  ์ฝ”๋”ฉ ๐Ÿ’— -๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ์ œ์ถœ ๋ฐฉ๋ฒ• +### ๐Ÿ”— ํ”„๋กœ์ ํŠธ URL -1. ํ˜„์žฌ ์ €์žฅ์†Œ๋ฅผ ๋กœ์ปฌ์— ํด๋ก (Clone)ํ•ฉ๋‹ˆ๋‹ค. -2. ์ž์‹ ์˜ ๋ณธ๋ช…์œผ๋กœ ๋ธŒ๋žœ์น˜๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.(๊ตฌ๋ถ„ ๊ฐ€๋Šฅํ•˜๋„๋ก ๋ณธ๋ช…์„ ๊ผญ ํŒŒ์Šค์นผ์ผ€์ด์Šค๋กœ ํ‘œ์‹œํ•˜์„ธ์š”, git branch KDT0_์ด๋ฆ„) -3. ์ž์‹ ์˜ ๋ณธ๋ช… ๋ธŒ๋žœ์น˜์—์„œ ๊ณผ์ œ๋ฅผ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. -4. ๊ณผ์ œ ์ˆ˜ํ–‰์ด ์™„๋ฃŒ๋˜๋ฉด, ์ž์‹ ์˜ ๋ณธ๋ช… ๋ธŒ๋žœ์น˜๋ฅผ ์›๊ฒฉ ์ €์žฅ์†Œ์— ํ‘ธ์‹œ(Push)ํ•ฉ๋‹ˆ๋‹ค.(main ๋ธŒ๋žœ์น˜์— ํ‘ธ์‹œํ•˜์ง€ ์•Š๋„๋ก ๊ผญ ์ฃผ์˜ํ•˜์„ธ์š”, git push origin KDT0_์ด๋ฆ„) -5. ์ €์žฅ์†Œ์—์„œ main ๋ธŒ๋žœ์น˜๋ฅผ ๋Œ€์ƒ์œผ๋กœ Pull Request ์ƒ์„ฑํ•˜๋ฉด, ๊ณผ์ œ ์ œ์ถœ์ด ์™„๋ฃŒ๋ฉ๋‹ˆ๋‹ค!(E.g, main <== KDT0_์ด๋ฆ„) +- **naverVIBE ํ™ˆํŽ˜์ด์ง€ URL** : https://vibe.naver.com/today +- **๊ณผ์ œ URL** : https://wonderful-tapioca-7c4f75.netlify.app/ -- main ํ˜น์€ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ๋ธŒ๋žœ์น˜๋กœ ์ ˆ๋Œ€ ๋ณ‘ํ•ฉํ•˜์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•˜์„ธ์š”! -- Pull Request์—์„œ ๋ณด์ด๋Š” ์„ค๋ช…์„ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋„๋ก ๊ผผ๊ผผํ•˜๊ฒŒ ์ž‘์„ฑํ•˜์„ธ์š”! -- Pull Request์—์„œ ๊ณผ์ œ ์ œ์ถœ ํ›„ ์ ˆ๋Œ€ ๋ณ‘ํ•ฉ(Merge)ํ•˜์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•˜์„ธ์š”! -- ๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ์ œ์ถœ ๊ณผ์ •์—์„œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ ๊ฒฝ์šฐ, ๋ฐ”๋กœ ๋‹ด๋‹น ๋ฉ˜ํ† ๋‚˜ ๊ฐ•์‚ฌ์—์„œ ์–˜๊ธฐํ•˜์„ธ์š”! +
-ํ•„์ˆ˜ ์š”๊ตฌ์‚ฌํ•ญ +### ๐Ÿ—“๏ธ ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„ -- ๊ณผ์ œ์— ๋Œ€ํ•œ ์„ค๋ช…์„ ํฌํ•จํ•œ README.md ํŒŒ์ผ์„ ์ œ๊ณตํ•˜์„ธ์š”! -- ๊ณผ์ œ ๊ฒฐ๊ณผ์™€ ๋น„๊ตํ•  ์ˆ˜ ์žˆ๋Š” ์‹ค์ œ ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)์˜ ์ฃผ์†Œ๋ฅผ ๋ช…์‹œํ•˜์„ธ์š”! -- ๊ณผ์ •์—์„œ ์‚ฌ์šฉํ•œ ํ”„๋กœ์ ํŠธ ํด๋”/ํŒŒ์ผ์ด ๋ชจ๋‘ ํฌํ•จ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค, ์ผ๋ถ€ ํŒŒ์ผ๋งŒ ์ œ์ถœํ•˜์ง€ ๋งˆ์„ธ์š”! -- ์‹ค์ œ ์„œ๋น„์Šค๋กœ ๋ฐฐํฌํ•˜๊ณ  ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ๋งํฌ๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. +**2023.07.24 ~ 2023.07.28** -์„ ํƒ ์š”๊ตฌ์‚ฌํ•ญ +*** -- < header >, < section > ๋“ฑ ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ฅผ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•ด๋ณด์„ธ์š”. -- ์‹ค์ œ ์‚ฌ์ดํŠธ์˜ ๋ ˆ๊ฑฐ์‹œ ์ฝ”๋“œ ํ™œ์šฉ๋ณด๋‹จ ์ตœ์‹ ์˜ CSS Flex ํ˜น์€ Grid ๋“ฑ์„ ํ™œ์šฉํ•ด๋ณด์„ธ์š”. -- ๋ถ€๋ถ„์ ์œผ๋กœ BEM ๋ฐฉ๋ฒ•๋ก ์„ ๋„์ž…ํ•ด๋ณด์„ธ์š”. -- JS๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„์€ ๋˜๋„๋ก ์ƒ๋žตํ•˜๋˜ ์ด์œ ๋ฅผ ๋ช…์‹œํ•ด๋ณด์„ธ์š”.(CSS๋กœ ๋Œ€์ฒด ๊ฐ€๋Šฅํ•œ์ง€ ํ”ผ๋“œ๋ฐฑ์ด ์žˆ์„ ์ˆ˜ ์žˆ๊ฒ ์ฃ ?!) -- JS๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„ ์ค‘ ๊ตฌํ˜„ํ•  ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด ์ž์œ ๋กญ๊ฒŒ ๊ตฌํ˜„ํ•ด๋ณด์„ธ์š”.(JS ๊ณผ์ œ๊ฐ€ ์•„๋‹ˆ๋‹ˆ๊นŒ ๊ฐ€๋ณ๊ฒŒ ๊ตฌํ˜„ํ•˜์‹œ๊ธธ ์ถ”์ฒœํ•ด์š”) +### ๐Ÿ”จ ์‚ฌ์šฉ ๊ธฐ์ˆ  ์Šคํƒ +
+ + + + + +
-์†์‰ฌ์šด ์ด๋ฏธ์ง€ ์ถ”์ถœ ๋ฐฉ๋ฒ• +*** -์‚ฌ์ดํŠธ ํด๋ก ์— ํ•„์š”ํ•œ ์ด๋ฏธ์ง€๋ฅผ ์ข€ ๋” ์‰ฝ๊ฒŒ ์ถ”์ถœํ•˜๊ธฐ ์œ„ํ•ด์„œ Chrome ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์ธ Image Downloader๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”. +### ๐Ÿง‘๐Ÿปโ€๐Ÿ’ป ์ฃผ์š” ๊ตฌํ˜„ ์‚ฌํ•ญ + +#### HTML +> * <`header`> , <`main`>, <`footer`> ๋“ฑ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ ํ™œ์šฉ +> +> * ์‹ค์ œ ์‚ฌ์ดํŠธ์™€ ๋น„์Šทํ•˜๊ฒŒ ๋ ˆ์ด์•„์›ƒ ๊ตฌํ˜„ + + +#### CSS +> - flex ์™€ grid ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ปจํ…์ธ  ์š”์†Œ๋“ค ๋ฐฐ์น˜ ๋ฐ ๋””์ž์ธ ๊ตฌํ˜„ + + +#### JavaScript +> - ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‚ด์žฅํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜์—ฌ ํด๋ฆญ, hover, ์ „ํ™˜ ๋“ฑ ๊ธฐ๋Šฅ ๊ตฌํ˜„ +> +> - ์Šฌ๋ผ์ด๋“œ ๊ตฌํ˜„ + + +*** + +### ๐Ÿ“ ์•„์‰ฌ์šด์  & ๋Š๋‚€์  + +> - ์‹œ๊ฐ„ ๋ถ€์กฑ ๋ฐ css ๊ฒฝํ—˜ ๋ถ€์กฑ์œผ๋กœ ์ธํ•ด ๋ฐ˜์‘ํ˜•์œผ๋กœ ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. +> - ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ์˜ ์ •ํ™•ํ•œ ์‚ฌ์šฉ ์šฉ๋„ ํŒŒ์•…, css ๊ธฐ๋Šฅ ํŒŒ์•…(flex, grid), ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜์˜€์„๋•Œ์—๋„ ๋น„์Šทํ•˜๊ฒŒ ์ž‘์„ฑ๋œ ์ฝ”๋“œ๋“ค์ด ๋งŽ์•„ ์ฝ”๋“œ๋ฅผ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์ˆ˜์ •ํ• ์ˆ˜ ์žˆ๋„๋ก ๋” ๊พธ์ค€ํžˆ ๊ณต๋ถ€๋ฅผ ํ•ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค. +> - ์„ฑ๋Šฅ ๊ฒ€์‚ฌ ํ–ˆ์„ ์‹œ ์ ‘๊ทผ์„ฑ์ด ๋–จ์–ด์ง„๋‹ค๊ณ  ํ‰๊ฐ€๋˜์–ด ๋„ˆ๋ฌด ์•„์‰ฌ์› ์Šต๋‹ˆ๋‹ค. + + + + +### โŒจ๏ธ ์ถ”ํ›„ ๊ตฌํ˜„์‚ฌํ•ญ + +> - ๋ฐ˜์‘ํ˜•๊ตฌํ˜„ +> +> - ์„ฑ๋Šฅ ์ตœ์ ํ™” +> -1. ์›ํ•˜๋Š” ์‚ฌ์ดํŠธ ์ ‘์† -2. Image Downloader ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰ -3. ๋‹ค์šด๋กœ๋“œ ์›ํ•˜๋Š” ์ด๋ฏธ์ง€ ์„ ํƒ -4. ์„œ๋ธŒ ํด๋” ์ด๋ฆ„(Save to subfolder) ๋ช…์‹œ -5. ๋‹ค์šด๋กœ๋“œ! diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 00000000..1912c39a Binary files /dev/null and b/assets/.DS_Store differ diff --git a/assets/add-to-playlist.png b/assets/add-to-playlist.png new file mode 100644 index 00000000..1a515df3 Binary files /dev/null and b/assets/add-to-playlist.png differ diff --git a/assets/cover.jpeg b/assets/cover.jpeg new file mode 100644 index 00000000..bfe7c24e Binary files /dev/null and b/assets/cover.jpeg differ diff --git a/assets/event/.DS_Store b/assets/event/.DS_Store new file mode 100644 index 00000000..b6c93fe6 Binary files /dev/null and b/assets/event/.DS_Store differ diff --git a/assets/event/Download_on_the_App_Store-400px.png b/assets/event/Download_on_the_App_Store-400px.png new file mode 100644 index 00000000..b5441433 Binary files /dev/null and b/assets/event/Download_on_the_App_Store-400px.png differ diff --git a/assets/event/Get-it-on-Google-Play-400px.png b/assets/event/Get-it-on-Google-Play-400px.png new file mode 100644 index 00000000..f46ba057 Binary files /dev/null and b/assets/event/Get-it-on-Google-Play-400px.png differ diff --git a/assets/event/video-tape.png b/assets/event/video-tape.png new file mode 100644 index 00000000..de8994e7 Binary files /dev/null and b/assets/event/video-tape.png differ diff --git a/assets/heart.png b/assets/heart.png new file mode 100644 index 00000000..58334166 Binary files /dev/null and b/assets/heart.png differ diff --git a/assets/icon/.DS_Store b/assets/icon/.DS_Store new file mode 100644 index 00000000..b1ff50f4 Binary files /dev/null and b/assets/icon/.DS_Store differ diff --git a/assets/icon/left.png b/assets/icon/left.png new file mode 100644 index 00000000..dc913530 Binary files /dev/null and b/assets/icon/left.png differ diff --git a/assets/icon/more.png b/assets/icon/more.png new file mode 100644 index 00000000..c8e96148 Binary files /dev/null and b/assets/icon/more.png differ diff --git a/assets/icon/right.png b/assets/icon/right.png new file mode 100644 index 00000000..697caa3e Binary files /dev/null and b/assets/icon/right.png differ diff --git a/assets/icon/search_white.png b/assets/icon/search_white.png new file mode 100644 index 00000000..c5a61cd0 Binary files /dev/null and b/assets/icon/search_white.png differ diff --git a/assets/loupe.png b/assets/loupe.png new file mode 100644 index 00000000..b9ce0efd Binary files /dev/null and b/assets/loupe.png differ diff --git a/assets/love.png b/assets/love.png new file mode 100644 index 00000000..56054d0f Binary files /dev/null and b/assets/love.png differ diff --git a/assets/magazine.png b/assets/magazine.png new file mode 100644 index 00000000..fffc7603 Binary files /dev/null and b/assets/magazine.png differ diff --git a/assets/magazine/magazine1.png b/assets/magazine/magazine1.png new file mode 100644 index 00000000..cd4c956b Binary files /dev/null and b/assets/magazine/magazine1.png differ diff --git a/assets/magazine/magazine2.png b/assets/magazine/magazine2.png new file mode 100644 index 00000000..64204eb4 Binary files /dev/null and b/assets/magazine/magazine2.png differ diff --git a/assets/magazine/magazine3.png b/assets/magazine/magazine3.png new file mode 100644 index 00000000..4378c64c Binary files /dev/null and b/assets/magazine/magazine3.png differ diff --git a/assets/magazine/magazine4.png b/assets/magazine/magazine4.png new file mode 100644 index 00000000..714a3e61 Binary files /dev/null and b/assets/magazine/magazine4.png differ diff --git a/assets/magazine/magazine5.png b/assets/magazine/magazine5.png new file mode 100644 index 00000000..5a5b46cf Binary files /dev/null and b/assets/magazine/magazine5.png differ diff --git a/assets/magazine/magazine6.png b/assets/magazine/magazine6.png new file mode 100644 index 00000000..7c3f467d Binary files /dev/null and b/assets/magazine/magazine6.png differ diff --git a/assets/magazine/magazine7.png b/assets/magazine/magazine7.png new file mode 100644 index 00000000..d842fd4c Binary files /dev/null and b/assets/magazine/magazine7.png differ diff --git a/assets/magazine/new.png b/assets/magazine/new.png new file mode 100644 index 00000000..30dcadfc Binary files /dev/null and b/assets/magazine/new.png differ diff --git a/assets/magazine/new2.png b/assets/magazine/new2.png new file mode 100644 index 00000000..c1e896fe Binary files /dev/null and b/assets/magazine/new2.png differ diff --git a/assets/magazine/omygirl.png b/assets/magazine/omygirl.png new file mode 100644 index 00000000..fd4fb939 Binary files /dev/null and b/assets/magazine/omygirl.png differ diff --git a/assets/magazine/zerobase.png b/assets/magazine/zerobase.png new file mode 100644 index 00000000..fb93028e Binary files /dev/null and b/assets/magazine/zerobase.png differ diff --git a/assets/mic.png b/assets/mic.png new file mode 100644 index 00000000..2ed5f968 Binary files /dev/null and b/assets/mic.png differ diff --git a/assets/money.png b/assets/money.png new file mode 100644 index 00000000..211a571e Binary files /dev/null and b/assets/money.png differ diff --git a/assets/music-player-back.png b/assets/music-player-back.png new file mode 100644 index 00000000..de57fb01 Binary files /dev/null and b/assets/music-player-back.png differ diff --git a/assets/music-player-next.png b/assets/music-player-next.png new file mode 100644 index 00000000..4644909f Binary files /dev/null and b/assets/music-player-next.png differ diff --git a/assets/music.png b/assets/music.png new file mode 100644 index 00000000..a46174cc Binary files /dev/null and b/assets/music.png differ diff --git a/assets/news/123.png b/assets/news/123.png new file mode 100644 index 00000000..7d30535b Binary files /dev/null and b/assets/news/123.png differ diff --git a/assets/news/127.png b/assets/news/127.png new file mode 100644 index 00000000..40e08796 Binary files /dev/null and b/assets/news/127.png differ diff --git a/assets/news/tmxmfpdlzlwm.png b/assets/news/tmxmfpdlzlwm.png new file mode 100644 index 00000000..90a108b6 Binary files /dev/null and b/assets/news/tmxmfpdlzlwm.png differ diff --git "a/assets/news/\353\212\211.png" "b/assets/news/\353\212\211.png" new file mode 100644 index 00000000..7ddc70eb Binary files /dev/null and "b/assets/news/\353\212\211.png" differ diff --git "a/assets/news/\353\260\225\355\232\250\354\213\240.png" "b/assets/news/\353\260\225\355\232\250\354\213\240.png" new file mode 100644 index 00000000..137dc086 Binary files /dev/null and "b/assets/news/\353\260\225\355\232\250\354\213\240.png" differ diff --git "a/assets/news/\354\203\244\354\235\264\353\213\210.png" "b/assets/news/\354\203\244\354\235\264\353\213\210.png" new file mode 100644 index 00000000..ed924ca3 Binary files /dev/null and "b/assets/news/\354\203\244\354\235\264\353\213\210.png" differ diff --git "a/assets/news/\354\204\270\353\270\220\355\213\264.png" "b/assets/news/\354\204\270\353\270\220\355\213\264.png" new file mode 100644 index 00000000..2866ff23 Binary files /dev/null and "b/assets/news/\354\204\270\353\270\220\355\213\264.png" differ diff --git "a/assets/news/\354\240\225\352\265\255.png" "b/assets/news/\354\240\225\352\265\255.png" new file mode 100644 index 00000000..3f4fd740 Binary files /dev/null and "b/assets/news/\354\240\225\352\265\255.png" differ diff --git a/assets/pick/pick0.png b/assets/pick/pick0.png new file mode 100644 index 00000000..385fc701 Binary files /dev/null and b/assets/pick/pick0.png differ diff --git a/assets/pick/pick1.png b/assets/pick/pick1.png new file mode 100644 index 00000000..37a639a0 Binary files /dev/null and b/assets/pick/pick1.png differ diff --git a/assets/pick/pick2.png b/assets/pick/pick2.png new file mode 100644 index 00000000..2b3d1381 Binary files /dev/null and b/assets/pick/pick2.png differ diff --git a/assets/pick/pick3.png b/assets/pick/pick3.png new file mode 100644 index 00000000..23497a56 Binary files /dev/null and b/assets/pick/pick3.png differ diff --git a/assets/pick/pick4.png b/assets/pick/pick4.png new file mode 100644 index 00000000..095911d3 Binary files /dev/null and b/assets/pick/pick4.png differ diff --git a/assets/pick/pick5.png b/assets/pick/pick5.png new file mode 100644 index 00000000..0c5953b4 Binary files /dev/null and b/assets/pick/pick5.png differ diff --git a/assets/pick/pick6.png b/assets/pick/pick6.png new file mode 100644 index 00000000..fc07ed5e Binary files /dev/null and b/assets/pick/pick6.png differ diff --git a/assets/pick/pick7.png b/assets/pick/pick7.png new file mode 100644 index 00000000..810e2f2b Binary files /dev/null and b/assets/pick/pick7.png differ diff --git a/assets/play-button.png b/assets/play-button.png new file mode 100644 index 00000000..4ce4dac1 Binary files /dev/null and b/assets/play-button.png differ diff --git a/assets/play_music.png b/assets/play_music.png new file mode 100644 index 00000000..1312021c Binary files /dev/null and b/assets/play_music.png differ diff --git a/assets/playlist.png b/assets/playlist.png new file mode 100644 index 00000000..27c19f50 Binary files /dev/null and b/assets/playlist.png differ diff --git a/assets/promotion/today_thumbs.1d76741b.png b/assets/promotion/today_thumbs.1d76741b.png new file mode 100644 index 00000000..877e04ab Binary files /dev/null and b/assets/promotion/today_thumbs.1d76741b.png differ diff --git a/assets/random.png b/assets/random.png new file mode 100644 index 00000000..04e8a6d2 Binary files /dev/null and b/assets/random.png differ diff --git a/assets/refresh.png b/assets/refresh.png new file mode 100644 index 00000000..105e8780 Binary files /dev/null and b/assets/refresh.png differ diff --git a/assets/search.png b/assets/search.png new file mode 100644 index 00000000..25461f5a Binary files /dev/null and b/assets/search.png differ diff --git a/assets/social/facebook.png b/assets/social/facebook.png new file mode 100644 index 00000000..aec5a4f5 Binary files /dev/null and b/assets/social/facebook.png differ diff --git a/assets/social/instagram.png b/assets/social/instagram.png new file mode 100644 index 00000000..a3d916dd Binary files /dev/null and b/assets/social/instagram.png differ diff --git a/assets/social/letter-n.png b/assets/social/letter-n.png new file mode 100644 index 00000000..675628eb Binary files /dev/null and b/assets/social/letter-n.png differ diff --git a/assets/sp_topbar.f4891747.svg b/assets/sp_topbar.f4891747.svg new file mode 100644 index 00000000..38e6ad33 --- /dev/null +++ b/assets/sp_topbar.f4891747.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/sparkles.png b/assets/sparkles.png new file mode 100644 index 00000000..7522f385 Binary files /dev/null and b/assets/sparkles.png differ diff --git a/assets/speaker-filled-audio-tool.png b/assets/speaker-filled-audio-tool.png new file mode 100644 index 00000000..68678d56 Binary files /dev/null and b/assets/speaker-filled-audio-tool.png differ diff --git a/assets/stage.png b/assets/stage.png new file mode 100644 index 00000000..ca0477f0 Binary files /dev/null and b/assets/stage.png differ diff --git a/assets/trophy.png b/assets/trophy.png new file mode 100644 index 00000000..6c39c54a Binary files /dev/null and b/assets/trophy.png differ diff --git a/assets/user.png b/assets/user.png new file mode 100644 index 00000000..bd07199e Binary files /dev/null and b/assets/user.png differ diff --git a/assets/vibe/vibe0.png b/assets/vibe/vibe0.png new file mode 100644 index 00000000..fe468012 Binary files /dev/null and b/assets/vibe/vibe0.png differ diff --git a/assets/vibe/vibe1.png b/assets/vibe/vibe1.png new file mode 100644 index 00000000..652b0bbe Binary files /dev/null and b/assets/vibe/vibe1.png differ diff --git a/assets/vibe/vibe2.jpg b/assets/vibe/vibe2.jpg new file mode 100644 index 00000000..92808cbb Binary files /dev/null and b/assets/vibe/vibe2.jpg differ diff --git a/assets/vibe/vibe3.png b/assets/vibe/vibe3.png new file mode 100644 index 00000000..2c3919e7 Binary files /dev/null and b/assets/vibe/vibe3.png differ diff --git a/assets/vibe/vibe4.png b/assets/vibe/vibe4.png new file mode 100644 index 00000000..58490d5d Binary files /dev/null and b/assets/vibe/vibe4.png differ diff --git a/assets/vibe/vibe5.png b/assets/vibe/vibe5.png new file mode 100644 index 00000000..687a263e Binary files /dev/null and b/assets/vibe/vibe5.png differ diff --git a/assets/vibe/vibe6.png b/assets/vibe/vibe6.png new file mode 100644 index 00000000..525db19b Binary files /dev/null and b/assets/vibe/vibe6.png differ diff --git a/assets/vibe/vibe7.png b/assets/vibe/vibe7.png new file mode 100644 index 00000000..a63d3ca9 Binary files /dev/null and b/assets/vibe/vibe7.png differ diff --git a/assets/vinyl.png b/assets/vinyl.png new file mode 100644 index 00000000..1589d80a Binary files /dev/null and b/assets/vinyl.png differ diff --git a/dasktop.html b/dasktop.html new file mode 100644 index 00000000..bf4d0b27 --- /dev/null +++ b/dasktop.html @@ -0,0 +1,83 @@ + + + + + + Document + + + + + +
+ + +
+
+ +
+
+

๋กœ๊ทธ์ธํ•˜๊ณ  ํ• ์ธ ๋ฉค๋ฒ„์‹ญ ํ™•์ธํ•˜๊ธฐ

+ + + ๋ฉค๋ฒ„์‹ญ ๊ตฌ๋… + +
+
+ +
+
+ +
+
+ ๋ฐ์Šคํฌํ†ฑ์•ฑ ์„ค์น˜ +
+
+
+ +
+
+
+
+ +
+
+
์˜ค๋Š˜ ๋ญ ๋“ฃ์ง€?
+
์žฌ์ƒ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ด๋ณด์„ธ์š”.
+
+
+
+ + + + + +
+
+ +
+ +
+ +
+
+ + diff --git a/index.html b/index.html new file mode 100644 index 00000000..f196d3b6 --- /dev/null +++ b/index.html @@ -0,0 +1,594 @@ + + + + + + + NAVER VIBE + + + + + + + + + + + +
+ + +
+
+ +
+
+

๋กœ๊ทธ์ธํ•˜๊ณ  ํ• ์ธ ๋ฉค๋ฒ„์‹ญ ํ™•์ธํ•˜๊ธฐ

+ + member_icon + ๋ฉค๋ฒ„์‹ญ ๊ตฌ๋… + +
+
+ +
+
+ +
+
+ ๋ฐ์Šคํฌํ†ฑ์•ฑ ์„ค์น˜ +
+
+
+
+ + ์•ฑ์„ค์น˜ +
+
+ ๋ฉค๋ฒ„์‹ญ ๊ตฌ๋… + + +
+
+
+
+ + +
+ +
+
+

๋งค๊ฑฐ์ง„

+ ๋” ๋ณด๊ธฐ +
+
+ +
+ + +
+
+
+

news

+
+
+ +
+ + +
+
+
+

VIBE ์ถ”์ฒœ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ

+ ๋” ๋ณด๊ธฐ +
+
+ +
+ + +
+
+
+

VIBE ์ถ”์ฒœ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ๐Ÿ‹๏ธโ€โ™€๏ธ

+ ๋” ๋ณด๊ธฐ +
+
+ +
+ + +
+
+ video_tape_icon +
+
+

์•„ํ‹ฐ์ŠคํŠธ ๊ณ ๋ฅด๊ณ  ๋งค์ผ ๋ฏน์Šคํ…Œ์žŽ ๋ฐ›๊ธฐ

+

์ง€๊ธˆ VIBE ์•ฑ์—์„œ ์ทจํ–ฅ ๊ธธ๋“ค์ด๊ธฐ๋ฅผ ํ•ด๋ณด์„ธ์š”!

+
+
+ + app_store_icon + + + google_play_icon + +
+
+
+
+
+
+ ์ง€๊ธˆ ๋ฐ”๋กœ ๋กœ๊ทธ์ธํ•˜๊ณ 
+ ํ•œ๋•€ ํ•œ๋•€ ๋งŒ๋“  ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ ๋“ฃ๊ธฐ! +

K-Pop๋ถ€ํ„ฐ ํด๋ž˜์‹๊นŒ์ง€ ๋ชจ๋“  ์žฅ๋ฅด๋ฅผ ์•„์šฐ๋ฅด๋Š” ๊ฑด ๊ธฐ๋ณธ.
+ ์ˆ˜์ฒœ ๊ฐœ์˜ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ๊ฐ€ ํŠธ๋ Œ๋“œ์— ๋งž๊ฒŒ ์—…๋ฐ์ดํŠธ.

+
+
+ promotion_icon +
+
+ + +
+
+
+
+ play_music_icon +
+
+
์˜ค๋Š˜ ๋ญ ๋“ฃ์ง€?
+
์žฌ์ƒ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ด๋ณด์„ธ์š”.
+
+
+
+ + + + + +
+
+

00:00

/

00:00

 + audio_tool_icon +
+ +
+ +
+
+ + diff --git a/index.js b/index.js new file mode 100644 index 00000000..0961f52e --- /dev/null +++ b/index.js @@ -0,0 +1,147 @@ +const magazine_next_btn = document.querySelector(".magazine_next"); +const news_next_btn = document.querySelector(".news_next"); +const vibe_next_btn = document.querySelector(".vibe_next"); +const pick_next_btn = document.querySelector(".pick_next"); + +const magazine_prev_btn = document.querySelector(".magazine_prev"); +const news_prev_btn = document.querySelector(".news_prev"); +const vibe_prev_btn = document.querySelector(".vibe_prev"); +const pick_prev_btn = document.querySelector(".pick_prev"); + +const magazine_slider = document.querySelector(".magazine_slider"); +const news_slider = document.querySelector(".news_slider"); +const vibe_slider = document.querySelector(".vibe_slider"); +const pick_slider = document.querySelector(".pick_slider"); + +const magazine_images = document.querySelectorAll( + ".img_container_magazine img" +); +const news_images = document.querySelectorAll(".img_container_news img"); +const vibe_images = document.querySelectorAll(".img_container_vibe img"); +const pick_images = document.querySelectorAll(".img_container_pick img"); + +let magazine_index = 0; +let news_index = 0; +let vibe_index = 0; +let pick_index = 0; + +function showSlideMagazine(direction) { + let prevbtn = document.querySelector(".magazine_prev"); + if (direction === "next") { + console.log("next"); + magazine_slider.classList.remove("left"); + magazine_slider.classList.add("right"); + magazine_index++; + if (magazine_index === magazine_images.length) { + magazine_index = 0; + } + prevbtn.style.visibility = "visible"; + } else if (direction === "prev") { + prevbtn.style.visibility = "hidden"; + magazine_slider.classList.remove("right"); + magazine_slider.classList.add("left"); + index--; + if (index < 0) { + index = images.length - 1; + } + } +} +function showSlideNews(direction) { + let prevbtn = document.querySelector(".news_prev"); + if (direction === "next") { + console.log("next"); + news_slider.classList.remove("left"); + news_slider.classList.add("right"); + news_index++; + if (news_index === news_images.length) { + news_index = 0; + } + prevbtn.style.visibility = "visible"; + } else if (direction === "prev") { + prevbtn.style.visibility = "hidden"; + news_slider.classList.remove("right"); + news_slider.classList.add("left"); + index--; + if (index < 0) { + index = images.length - 1; + } + } +} +function showSlideVibe(direction) { + let prevbtn = document.querySelector(".vibe_prev"); + if (direction === "next") { + console.log("next"); + vibe_slider.classList.remove("left"); + vibe_slider.classList.add("right"); + vibe_index++; + if (vibe_index === vibe_images.length) { + vibe_index = 0; + } + prevbtn.style.visibility = "visible"; + } else if (direction === "prev") { + prevbtn.style.visibility = "hidden"; + vibe_slider.classList.remove("right"); + vibe_slider.classList.add("left"); + index--; + if (index < 0) { + index = images.length - 1; + } + } +} +function showSlidePick(direction) { + let prevbtn = document.querySelector(".pick_prev"); + if (direction === "next") { + console.log("next"); + pick_slider.classList.remove("left"); + pick_slider.classList.add("right"); + pick_index++; + if (pick_index === pick_images.length) { + pick_index = 0; + } + prevbtn.style.visibility = "visible"; + } else if (direction === "prev") { + prevbtn.style.visibility = "hidden"; + pick_slider.classList.remove("right"); + pick_slider.classList.add("left"); + index--; + if (index < 0) { + index = images.length - 1; + } + } +} + +magazine_next_btn.addEventListener("click", () => { + showSlideMagazine("next"); +}); +news_next_btn.addEventListener("click", () => { + showSlideNews("next"); +}); +vibe_next_btn.addEventListener("click", () => { + showSlideVibe("next"); +}); +pick_next_btn.addEventListener("click", () => { + showSlidePick("next"); +}); + +magazine_prev_btn.addEventListener("click", () => { + showSlideMagazine("prev"); +}); +news_prev_btn.addEventListener("click", () => { + showSlideNews("prev"); +}); +vibe_prev_btn.addEventListener("click", () => { + showSlideVibe("prev"); +}); +pick_prev_btn.addEventListener("click", () => { + showSlidePick("prev"); +}); + +document.querySelector(".range").addEventListener("input", (event) => { + let gradient_value = 100 / event.target.attributes.max.value; + event.target.style.background = + "linear-gradient(to right, gray 0%, gray " + + gradient_value * event.target.value + + "%, #4b4b4b " + + gradient_value * event.target.value + + "%, #4b4b4b"; +}); diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 00000000..a59418a5 --- /dev/null +++ b/styles/header.css @@ -0,0 +1,170 @@ +.header { + width: 250px; + height: 100vh; + background-color: black; + position: fixed; + overflow: none; + flex-shrink: 0; +} +hr { + background: #1a1a1a; + width: 80%; + height: 1px; + border: 0; + margin: 0 auto; +} +.header_logo { + display: block; + color: white; + text-transform: uppercase; + font-family: "Cabin", sans-serif; + padding: 2rem 2rem; + cursor: pointer; +} +.header_logo * { + vertical-align: middle; +} + +.logo_naver { + font-weight: 800; +} +.logo_vibe { + font-weight: 800; + font-size: 30px; +} +.header_submenu { + overflow: scroll; + height: 65%; +} +.header_signin_area { + display: block; + color: white; + font-size: larger; + display: flex; + flex-direction: row; + align-items: center; + padding: 1rem 2.5rem; + cursor: pointer; +} + +.user_icon { + width: 20px; + height: 20px; +} +.login_txt { + margin: 0 10px 0 10px; +} +.header_member { + margin: 0 auto; +} +.member_p { + margin: 1.2rem 2.5rem; + font-size: 13px; +} +.member_button_area { + display: block; + cursor: pointer; + width: 80%; + height: 3rem; + border-radius: 0.5rem; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin: 0 auto; + background: rgb(236, 0, 0); + background: linear-gradient( + 90deg, + rgba(236, 0, 0, 1) 0%, + rgba(244, 47, 201, 0.6321122198879552) 48%, + rgba(96, 0, 135, 1) 100% + ); +} +.member_icon { + width: 1.5rem; +} +.member_text { + font-weight: 800; + margin: 0 5px; +} +.header_search { + cursor: pointer; + border-radius: 5px; + margin: 0 auto; + padding: 1.5rem 2rem 1rem; + display: flex; + flex-direction: initial; + justify-content: center; + align-items: center; +} +.search_input { + width: 100%; + height: 3rem; + box-sizing: border-box; + background: #1d1d1d; + background-image: url("../assets/loupe.png"); + background-size: 1.2rem 1.2rem; + background-position: 10px center; + background-repeat: no-repeat; + padding-left: 40px; + border-radius: 5px; + border: none; +} +.search_icon { + width: 1.5rem; + height: 1.5rem; +} +.header_menu { + margin: 0 auto; + width: 80%; + font-size: 1.2rem; +} +.header_menu li > a { + padding: 0.6rem 0; + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; +} +.header_menu li > a > span { + margin-left: 0.5rem; + color: gray; +} +.header_menu li > a > span:hover { + color: white; +} +.header_menu ul > hr { + width: 100%; + margin: 1rem auto; +} +.header_menu li:last-child { + margin-bottom: 100px; +} +.header_menu img { + width: 25px; + height: 25px; +} +.header_install { + border: 1px solid gray; + display: block; + width: 80%; + margin: 1rem auto; + padding: 1.1rem; + text-align: center; + font-size: large; + border-radius: 0.5rem; + cursor: pointer; + background-color: transparent; +} +.header_install:hover { + width: 80%; + border: 2px solid white; +} +.main__header { + visibility: hidden; +} +@media (max-width: 999px) { + .header { + display: none; + } +} diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 00000000..2d4d1f27 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,16 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font: inherit; + color: white; + list-style: none; + text-decoration: none; +} +.body { + background-color: black; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: row; +} diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 00000000..414597a9 --- /dev/null +++ b/styles/main.css @@ -0,0 +1,407 @@ +.main { + flex-shrink: 1; + margin-left: 250px; + width: 100%; + height: 100%; + border-left: 1px solid #1a1a1a; + min-width: 83%; +} + +.plus { + color: #808080; +} +.section_music_container { + width: 85%; + margin: 3rem auto; +} +.section_banner { + height: 20rem; + background-color: #3e4c54; + display: flex; +} +.banner_img { + width: 35rem; + height: 20rem; +} +.banner_img > img { + width: 100%; + height: 100%; + object-fit: fill; +} +.banner_text_area { + margin: 3rem; +} +.banner_text_area * { + display: block; +} +.banner_text_area img { + width: 5rem; +} +.banner_text { + display: flex; + flex-direction: column; + justify-content: space-evenly; + height: 100%; +} +.banner_text_area h1 { + font-size: 2.2rem; + font-weight: bold; +} +.banner_text_area h1:hover { + text-decoration: underline; +} +.banner_text_area h4, +.banner_text_area h6 { + font-size: 1rem; + color: #cbccce; +} +.magazine_container, +.news_container, +.vibe_container, +.pick_container { + position: relative; +} +.text_container_magazine, +.text_container_news, +.text_container_vibe, +.text_container_pick { + display: flex; + justify-content: space-between; + margin: 3rem 0 1rem; +} +.text_container_magazine h2, +.text_container_news h2, +.text_container_vibe h2, +.text_container_pick h2 { + font-weight: 800; + text-transform: uppercase; + font-size: 1.5rem; +} + +.sub_text_magazine > span:hover, +.sub_text_news > span:hover, +.sub_text_vibe > span:hover, +.sub_text_pick > span:hover { + text-decoration: underline; +} +.sub_text_magazine > p, +.sub_text_news > p, +.sub_text_vibe > p, +.sub_text_pick > p { + font-size: 0.9rem; + color: gray; +} + +.img_container_magazine, +.img_container_news, +.img_container_vibe, +.img_container_pick { + overflow: hidden; +} +.magazine_slider, +.news_slider, +.vibe_slider, +.pick_slider { + display: flex; + gap: 1rem; + transition: transform 0.5s; +} + +/* ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์Šฌ๋ผ์ด๋“œ ์ด๋™ */ +.magazine_slider.right, +.news_slider.right, +.vibe_slider.right, +.pick_slider.right { + transform: translateX(-101%); +} + +/* ์™ผ์ชฝ์œผ๋กœ ์Šฌ๋ผ์ด๋“œ ์ด๋™ */ +.magazine_slider.left, +.pick_slider.left, +.vibe_slider.left, +.news_slider.left { + transform: translateX(0); +} + +.magazine_contents img, +.vibe_contents img, +.pick_contents img { + width: 16rem; + height: 16rem; +} +.magazine_next, +.news_next, +.vibe_next, +.pick_next { + position: absolute; + width: 3rem; + height: 3rem; + background-color: transparent; + background-position: center; + background-size: cover; + object-fit: fill; + border: none; + background-image: url("../assets/icon/right.png"); + top: 40%; + right: -2%; +} +.magazine_prev, +.news_prev, +.vibe_prev, +.pick_prev { + visibility: hidden; + position: absolute; + width: 3rem; + height: 3rem; + background-color: transparent; + background-position: center; + background-size: cover; + object-fit: fill; + border: none; + background-image: url("../assets/icon/left.png"); + top: 40%; + left: -2%; + visibility: hidden; +} + +.magazine_next, +.news_next, +.vibe_next, +.pick_next { +} +.news_contents img { + width: 16rem; + height: 10rem; +} + +.event_container { + width: 100%; + height: 18rem; + background: rgb(249, 59, 85); + background: linear-gradient( + 90deg, + rgba(249, 59, 85, 1) 0%, + rgba(191, 68, 168, 1) 50%, + rgba(130, 75, 249, 1) 100% + ); + margin: 3rem auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.event_container img { + width: 7.5rem; + height: 6rem; +} +.event_text_container { + display: flex; + flex-direction: column; + gap: 1rem; +} +.text_container { + text-align: center; +} +.event_container h3 { + font-size: 1.5rem; + font-weight: bold; +} +.event_container p { + font-size: 1rem; + color: #e2b0e0; +} +.event_btn_container { + display: flex; + gap: 0.5rem; +} +.event_appStore img, +.event_googlePlay img { + width: 10rem; + height: 2.8rem; +} +.promotion_container { + text-align: center; + margin: 6rem auto; +} +.promotion_text_container { + display: flex; + flex-direction: column; + gap: 1rem; + height: 12rem; +} +.promotion_text_container span { + font-size: 1.8rem; + font-weight: bold; +} +.promotion_text_container p { + font-size: 1; + color: #999999; +} +.promotion_image_container { + overflow: hidden; + margin: 0 auto; +} +.promotion_image_container img { + width: 100%; + height: 20rem; + object-fit: cover; +} +.footer { + width: 100%; + height: 33vh; + background-color: #111111; +} +.footer_container { + width: 85%; + margin: 3rem auto 0; + display: grid; + grid-template-columns: 1fr 7fr 2fr; + padding: 0.5rem 0; + align-items: center; +} +.footer a:hover, +.footer li:hover { + text-decoration: underline; + cursor: pointer; +} +.notice_title, +.naver_info span, +.naver_address span, +.naver_address a, +.terms_container a { + color: #666666; +} +.footer_container a, +.footer_notice_container { + font-size: 0.8rem; +} +.social_container { + display: flex; + justify-content: space-evenly; + flex-direction: row; +} +.facebook, +.instagram, +.naver { + width: 2rem; + height: 2rem; + border: none; + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + cursor: pointer; +} +.facebook { + background-image: url("../assets/social/facebook.png"); +} +.instagram { + background-image: url("../assets/social/instagram.png"); +} +.naver { + background-image: url("../assets/social/letter-n.png"); +} +.footer hr { + width: 100%; +} +.naver_info_container { + width: 85%; + margin: 1rem auto; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +.naver_info, +.naver_address, +.terms_container a { + display: flex; + gap: 1rem; + font-size: 0.8rem; +} +.terms_container { + display: flex; + padding: 1rem 0; + gap: 1rem; +} + +@media (max-width: 999px) { + .main { + margin: 0 auto; + } + .main__header { + visibility: visible; + } + .banner_img { + width: 100%; + height: 20rem; + } + .banner_text_area { + margin: 3rem; + display: none; + } + .musicInfo_icon_box { + display: none; + } + .magazine_container, + .news_container, + .vibe_container, + .pick_container { + position: relative; + width: 95%; + margin: 0 auto; + } +} +.main__header { + display: flex; + align-items: center; + justify-content: space-between; +} +.main__header_logo { + display: flex; + align-items: center; + gap: 5px; + color: white; + text-transform: uppercase; + font-family: "Cabin", sans-serif; + padding: 1rem; + cursor: pointer; +} +.main__header_naver { + font-size: 15px; + font-weight: 400; +} +.main__header_vibe { + font-size: 25px; + font-weight: 400; +} +.header__btn_membership { + color: #dd345d; + font-weight: bold; +} +.section_music_container { + width: 100%; + margin: 0 auto; +} +.header__btn_container { + display: flex; + align-items: center; + gap: 1rem; + margin-right: 20px; +} +.main__header_logo_container { + display: flex; + align-items: center; +} +.header__btn_search, +.header__btn_menu { + width: 1.3rem; + height: 1.3rem; + background-color: transparent; + border: none; + outline: none; +} +.header__btn_search img, +.header__btn_menu img { + width: 1.3rem; + height: 1.3rem; +} diff --git a/styles/player.css b/styles/player.css new file mode 100644 index 00000000..f8859857 --- /dev/null +++ b/styles/player.css @@ -0,0 +1,130 @@ +.player { + width: 100%; + height: 90px; + background-color: #191919; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + flex-direction: row; + bottom: 0; +} +.player img { + width: 1.5rem; + height: 1.5rem; +} +.player_musicInfo_area { + display: flex; + align-items: center; +} +.musicInfo_icon_box { + padding: 1rem; + background-color: #2a2a2a; + display: flex; + justify-content: center; + align-items: center; + margin: 0 1rem 0 1.5rem; +} +.player_musicInfo_text { + height: 3rem; + display: flex; + flex-direction: column; + justify-content: space-around; +} +.musicInfo_text_first { + font-weight: bold; +} +.musicInfo_text_last { + color: gray; + font-size: small; +} +.player_btn_area { + width: 25%; + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + overflow: hidden; +} +.player_btn_area button { + background-color: transparent; + border: none; +} +.player_btn_area .play_icon { + width: 2rem; + height: 2rem; +} +.play_btn { + width: 4rem; + height: 4rem; +} +.player_btn_area .play_btn:hover { + background-color: #2a2a2a; + border-radius: 100%; + width: 4rem; + height: 4rem; +} +.player_btn_area .music_btn { + transition: transform 0.3s ease; +} +.player_btn_area .music_btn:hover { + transform: scale(1.3); +} + +.player_sound_area { + width: 370px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + cursor: pointer; +} +.player_sound_area > span { + color: gray; + display: flex; +} +.playlist_btn { + background-color: transparent; + border: none; +} +.playlist_btn img { + width: 35px; + height: 35px; +} +.range { + width: 90%; + background: linear-gradient( + to right, + gray 0%, + gray 50%, + #4b4b4b 50%, + #4b4b4b 100% + ); + border-radius: 8px; + outline: none; + transition: background 450ms ease-in; + -webkit-appearance: none; + accent-color: #ffffff; +} +@media (max-width: 999px) { + .musicInfo_icon_box { + display: none; + } + .music_btn.change { + display: none; + } + .music_btn.rotate { + display: none; + } + .player_musicInfo_area { + margin-left: 10px; + } + .player_sound_area { + width: 10%; + } + .player_sound_area span, + .player_input_container, + .player_audio_img { + display: none; + } +}