diff --git a/README.md b/README.md index cc6a3b23..b1c1a4d2 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,85 @@ -[์ฐธ๊ณ  ๋‚ด์šฉ] +
-๐Ÿ‘€ ์ž์‹ ์ด ์›ํ•˜๋Š” ์‚ฌ์ดํŠธ ๋ ˆ์ด์•„์›ƒ ํด๋ก  -์›ํ•˜๋Š” ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)๋ฅผ ์ž์œ ๋กญ๊ฒŒ ์„ ํƒํ•˜๊ณ  ๋ ˆ์ด์•„์›ƒ์„ ํด๋ก  ์ฝ”๋”ฉํ•˜์„ธ์š”. -ํ‰์†Œ์— ๋„์ „ํ•ด ๋ณด๊ณ  ์‹ถ์—ˆ๊ฑฐ๋‚˜ ํ˜น์€ ์ž์‹ ์˜ ์ˆ˜์ค€์— ๋งž๋Š” ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)๋ฅผ ์„ ํƒํ•˜์„ธ์š”. -๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ๋ฆฌ๋ทฐ ๊ธฐ๊ฐ„์€ ๋ณ„๋„ ๊ณต์ง€๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”! +![Melon](https://i.namu.wiki/i/gYv3IQQKE7WxU7CMkSQLRpfgBrTukY6a-_nMyJ70m4ZzZpQta7QN5cmhFwvcer3uE3i7yiX52yy48y3pWZZXhg.svg) +
+
+## ๐ŸŽง ๋ฉœ๋ก  ํ™ˆํŽ˜์ด์ง€ ํด๋ก  ์ฝ”๋”ฉ ๐ŸŽง -๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ์ œ์ถœ ๋ฐฉ๋ฒ• +### ๐Ÿ”— ํ”„๋กœ์ ํŠธ URL -1. ํ˜„์žฌ ์ €์žฅ์†Œ๋ฅผ ๋กœ์ปฌ์— ํด๋ก (Clone)ํ•ฉ๋‹ˆ๋‹ค. -2. ์ž์‹ ์˜ ๋ณธ๋ช…์œผ๋กœ ๋ธŒ๋žœ์น˜๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.(๊ตฌ๋ถ„ ๊ฐ€๋Šฅํ•˜๋„๋ก ๋ณธ๋ช…์„ ๊ผญ ํŒŒ์Šค์นผ์ผ€์ด์Šค๋กœ ํ‘œ์‹œํ•˜์„ธ์š”, git branch KDT0_์ด๋ฆ„) -3. ์ž์‹ ์˜ ๋ณธ๋ช… ๋ธŒ๋žœ์น˜์—์„œ ๊ณผ์ œ๋ฅผ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. -4. ๊ณผ์ œ ์ˆ˜ํ–‰์ด ์™„๋ฃŒ๋˜๋ฉด, ์ž์‹ ์˜ ๋ณธ๋ช… ๋ธŒ๋žœ์น˜๋ฅผ ์›๊ฒฉ ์ €์žฅ์†Œ์— ํ‘ธ์‹œ(Push)ํ•ฉ๋‹ˆ๋‹ค.(main ๋ธŒ๋žœ์น˜์— ํ‘ธ์‹œํ•˜์ง€ ์•Š๋„๋ก ๊ผญ ์ฃผ์˜ํ•˜์„ธ์š”, git push origin KDT0_์ด๋ฆ„) -5. ์ €์žฅ์†Œ์—์„œ main ๋ธŒ๋žœ์น˜๋ฅผ ๋Œ€์ƒ์œผ๋กœ Pull Request ์ƒ์„ฑํ•˜๋ฉด, ๊ณผ์ œ ์ œ์ถœ์ด ์™„๋ฃŒ๋ฉ๋‹ˆ๋‹ค!(E.g, main <== KDT0_์ด๋ฆ„) +- **๋ฉœ๋ก  ํ™ˆํŽ˜์ด์ง€ URL** : https://www.melon.com/index.htm +- **๊ณผ์ œ URL** : [yeongmin-melonclone.netlify.app](https://yeongmin-melonclone.netlify.app/) -- main ํ˜น์€ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ๋ธŒ๋žœ์น˜๋กœ ์ ˆ๋Œ€ ๋ณ‘ํ•ฉํ•˜์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•˜์„ธ์š”! -- Pull Request์—์„œ ๋ณด์ด๋Š” ์„ค๋ช…์„ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋„๋ก ๊ผผ๊ผผํ•˜๊ฒŒ ์ž‘์„ฑํ•˜์„ธ์š”! -- Pull Request์—์„œ ๊ณผ์ œ ์ œ์ถœ ํ›„ ์ ˆ๋Œ€ ๋ณ‘ํ•ฉ(Merge)ํ•˜์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•˜์„ธ์š”! -- ๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ์ œ์ถœ ๊ณผ์ •์—์„œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ ๊ฒฝ์šฐ, ๋ฐ”๋กœ ๋‹ด๋‹น ๋ฉ˜ํ† ๋‚˜ ๊ฐ•์‚ฌ์—์„œ ์–˜๊ธฐํ•˜์„ธ์š”! +*** -ํ•„์ˆ˜ ์š”๊ตฌ์‚ฌํ•ญ +### ๐Ÿ“Œ ํ•„์ˆ˜ ์š”๊ตฌ์‚ฌํ•ญ ์ฒดํฌ๋ฆฌ์ŠคํŠธ -- ๊ณผ์ œ์— ๋Œ€ํ•œ ์„ค๋ช…์„ ํฌํ•จํ•œ README.md ํŒŒ์ผ์„ ์ œ๊ณตํ•˜์„ธ์š”! -- ๊ณผ์ œ ๊ฒฐ๊ณผ์™€ ๋น„๊ตํ•  ์ˆ˜ ์žˆ๋Š” ์‹ค์ œ ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)์˜ ์ฃผ์†Œ๋ฅผ ๋ช…์‹œํ•˜์„ธ์š”! -- ๊ณผ์ •์—์„œ ์‚ฌ์šฉํ•œ ํ”„๋กœ์ ํŠธ ํด๋”/ํŒŒ์ผ์ด ๋ชจ๋‘ ํฌํ•จ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค, ์ผ๋ถ€ ํŒŒ์ผ๋งŒ ์ œ์ถœํ•˜์ง€ ๋งˆ์„ธ์š”! -- ์‹ค์ œ ์„œ๋น„์Šค๋กœ ๋ฐฐํฌํ•˜๊ณ  ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ๋งํฌ๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. +- [ ] ๊ณผ์ œ์— ๋Œ€ํ•œ ์„ค๋ช…์„ ํฌํ•จํ•œ README.md ํŒŒ์ผ ์ž‘์„ฑ +- [ ] ์‹ค์ œ ์‚ฌ์ดํŠธ ์ฃผ์†Œ ๋ช…์‹œ +- [ ] ๊ณผ์ •์—์„œ ์‚ฌ์šฉํ•œ ํ”„๋กœ์ ํŠธ ํด๋”,ํŒŒ์ผ KDT0_JangYeongMin ๋ธŒ๋žœ์น˜์— ์—…๋กœ๋“œ +- [ ] netlify๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐฐํฌ ํ›„ ํด๋ก  ์‚ฌ์ดํŠธ ์ฃผ์†Œ ๋ช…์‹œ -์„ ํƒ ์š”๊ตฌ์‚ฌํ•ญ +### ๐Ÿ“Œ ์„ ํƒ ์š”๊ตฌ์‚ฌํ•ญ ์ฒดํฌ๋ฆฌ์ŠคํŠธ -- < header >, < section > ๋“ฑ ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ฅผ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•ด๋ณด์„ธ์š”. -- ์‹ค์ œ ์‚ฌ์ดํŠธ์˜ ๋ ˆ๊ฑฐ์‹œ ์ฝ”๋“œ ํ™œ์šฉ๋ณด๋‹จ ์ตœ์‹ ์˜ CSS Flex ํ˜น์€ Grid ๋“ฑ์„ ํ™œ์šฉํ•ด๋ณด์„ธ์š”. -- ๋ถ€๋ถ„์ ์œผ๋กœ BEM ๋ฐฉ๋ฒ•๋ก ์„ ๋„์ž…ํ•ด๋ณด์„ธ์š”. -- JS๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„์€ ๋˜๋„๋ก ์ƒ๋žตํ•˜๋˜ ์ด์œ ๋ฅผ ๋ช…์‹œํ•ด๋ณด์„ธ์š”.(CSS๋กœ ๋Œ€์ฒด ๊ฐ€๋Šฅํ•œ์ง€ ํ”ผ๋“œ๋ฐฑ์ด ์žˆ์„ ์ˆ˜ ์žˆ๊ฒ ์ฃ ?!) -- JS๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„ ์ค‘ ๊ตฌํ˜„ํ•  ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด ์ž์œ ๋กญ๊ฒŒ ๊ตฌํ˜„ํ•ด๋ณด์„ธ์š”.(JS ๊ณผ์ œ๊ฐ€ ์•„๋‹ˆ๋‹ˆ๊นŒ ๊ฐ€๋ณ๊ฒŒ ๊ตฌํ˜„ํ•˜์‹œ๊ธธ ์ถ”์ฒœํ•ด์š”) +- [ ] ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ฅผ ์ตœ๋Œ€ํ•œ ์‚ฌ์šฉํ•ด๋ณด๊ธฐ +- [ ] ๋ถ€๋ถ„์ ์œผ๋กœ CSS Grid ์™€ CSS Flex ์‚ฌ์šฉํ•˜์—ฌ ๋ ˆ์ด์•„์›ƒ +- [ ] JS๊ฐ€ ๊ผญ ํ•„์š”ํ•œ ๋ถ€๋ถ„์—๋Š” ๊ฐ„๋‹จํ•˜๊ธฐ ๊ตฌํ˜„ -์†์‰ฌ์šด ์ด๋ฏธ์ง€ ์ถ”์ถœ ๋ฐฉ๋ฒ• +*** -์‚ฌ์ดํŠธ ํด๋ก ์— ํ•„์š”ํ•œ ์ด๋ฏธ์ง€๋ฅผ ์ข€ ๋” ์‰ฝ๊ฒŒ ์ถ”์ถœํ•˜๊ธฐ ์œ„ํ•ด์„œ Chrome ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์ธ Image Downloader๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”. +### ๐Ÿ—“๏ธ ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„ -1. ์›ํ•˜๋Š” ์‚ฌ์ดํŠธ ์ ‘์† -2. Image Downloader ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰ -3. ๋‹ค์šด๋กœ๋“œ ์›ํ•˜๋Š” ์ด๋ฏธ์ง€ ์„ ํƒ -4. ์„œ๋ธŒ ํด๋” ์ด๋ฆ„(Save to subfolder) ๋ช…์‹œ -5. ๋‹ค์šด๋กœ๋“œ! +**2023.07.24 ~ 2023.07.28** + +*** + +### ๐Ÿ”จ ์‚ฌ์šฉ ๊ธฐ์ˆ  ์Šคํƒ + + + + + + + + + +*** + +### ๐Ÿง‘๐Ÿปโ€๐Ÿ’ป ์ฃผ์š” ๊ตฌํ˜„ ์‚ฌํ•ญ + +#### HTML +> - <`header`> , <`main`>, <`footer`> ๋“ฑ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ ํ™œ์šฉ +> +> - ์‹ค์ œ ์‚ฌ์ดํŠธ์™€ ๊ฑฐ์˜ ๋น„์Šทํ•œ ๋ ˆ์ด์•„์›ƒ ๊ตฌํ˜„ + + +#### CSS +> - flex๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ปจํ…์ธ  ์š”์†Œ๋“ค ๋ฐฐ์น˜ ๋ฐ ๋””์ž์ธ ๊ตฌํ˜„ +> +> - :hover๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ header ํƒœ๊ทธ ๋ฐ ๋งํฌ ์š”์†Œ ๋””์ž์ธ ๊ตฌํ˜„ + + +#### JavaScript +> - ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‚ด์žฅํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜์—ฌ ํด๋ฆญ, hover, ์ „ํ™˜ ๋“ฑ ๊ธฐ๋Šฅ ๊ตฌํ˜„ +> +> - fontawesome ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์•„์ด์ฝ˜ ์‚ฌ์šฉ + + +*** + +### ๐Ÿ“ ์•„์‰ฌ์šด์  & ๋Š๋‚€์  + +> - ์‹œ๊ฐ„ ๋ถ€์กฑ ๋ฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฒฝํ—˜ ๋ถ€์กฑ์œผ๋กœ ์ธํ•ด ์›ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. +> +> - ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด๋ฏธ์ง€ ์Šฌ๋ผ์ด๋“œ, hover ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜์—ฌ ์ž์—ฐ์Šค๋Ÿฌ์šด ์ „ํ™˜์ด ๋˜์–ด์•ผ ํ•˜์ง€๋งŒ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. +> +> - ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ์˜ ์ •ํ™•ํ•œ ์‚ฌ์šฉ ์šฉ๋„ ํŒŒ์•…, css ๊ธฐ๋Šฅ ํŒŒ์•…, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‚ด์žฅ ํ•จ์ˆ˜ ๋“ฑ ์•„์ง ๊ณต๋ถ€ํ•  ๊ฒƒ์ด ๋„ˆ๋ฌด ๋งŽ๋‹ค๊ณ  ๋Š๊ผˆ๊ณ  ์ข€ ๋” ๊นŠ์ด ๊ณต๋ถ€๋ฅผ ํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ๋‹ค์งํ•˜๋Š” ๊ณ„๊ธฐ๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. + +### โŒจ๏ธ ์ถ”ํ›„ ๊ตฌํ˜„์‚ฌํ•ญ + +> - ์ด๋ฏธ์ง€ ์Šฌ๋ผ์ด๋“œ ์ ์šฉ +> +> - ์ž‘์—…ํ•˜์ง€ ๋ชปํ•œ ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์ด๋ฏธ์ง€ ์ „ํ™˜ +> +> - ๋ฉœ๋ก  ์ฐจํŠธ ํฌ๋กค๋ง ์ ์šฉ diff --git a/assets/icons/left.png b/assets/icons/left.png new file mode 100644 index 00000000..5a07e946 Binary files /dev/null and b/assets/icons/left.png differ diff --git a/assets/icons/melon_logo.svg b/assets/icons/melon_logo.svg new file mode 100644 index 00000000..78ff2083 --- /dev/null +++ b/assets/icons/melon_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/play-button.png b/assets/icons/play-button.png new file mode 100644 index 00000000..0fa9577a Binary files /dev/null and b/assets/icons/play-button.png differ diff --git a/assets/icons/right-chevron.png b/assets/icons/right-chevron.png new file mode 100644 index 00000000..5447757d Binary files /dev/null and b/assets/icons/right-chevron.png differ diff --git a/assets/icons/right.png b/assets/icons/right.png new file mode 100644 index 00000000..57510734 Binary files /dev/null and b/assets/icons/right.png differ diff --git a/assets/icons/searchbutton.png b/assets/icons/searchbutton.png new file mode 100644 index 00000000..a7395fb2 Binary files /dev/null and b/assets/icons/searchbutton.png differ diff --git a/assets/icons/searchbutton_hover.png b/assets/icons/searchbutton_hover.png new file mode 100644 index 00000000..5fd643aa Binary files /dev/null and b/assets/icons/searchbutton_hover.png differ diff --git a/assets/icons/ticket.png b/assets/icons/ticket.png new file mode 100644 index 00000000..72ed2e87 Binary files /dev/null and b/assets/icons/ticket.png differ diff --git a/assets/images/banner/banner1.png b/assets/images/banner/banner1.png new file mode 100644 index 00000000..0f1090a6 Binary files /dev/null and b/assets/images/banner/banner1.png differ diff --git a/assets/images/banner/musicwave.png b/assets/images/banner/musicwave.png new file mode 100644 index 00000000..e3ccedf5 Binary files /dev/null and b/assets/images/banner/musicwave.png differ diff --git a/assets/images/banner/musicwave2.jpeg b/assets/images/banner/musicwave2.jpeg new file mode 100644 index 00000000..0c9dd3de Binary files /dev/null and b/assets/images/banner/musicwave2.jpeg differ diff --git a/assets/images/chart/chart1.jpeg b/assets/images/chart/chart1.jpeg new file mode 100644 index 00000000..2dcf1520 Binary files /dev/null and b/assets/images/chart/chart1.jpeg differ diff --git a/assets/images/chart/chart2.jpeg b/assets/images/chart/chart2.jpeg new file mode 100644 index 00000000..6076f75e Binary files /dev/null and b/assets/images/chart/chart2.jpeg differ diff --git a/assets/images/chart/chart3.jpeg b/assets/images/chart/chart3.jpeg new file mode 100644 index 00000000..16838412 Binary files /dev/null and b/assets/images/chart/chart3.jpeg differ diff --git a/assets/images/chart/chart4.jpeg b/assets/images/chart/chart4.jpeg new file mode 100644 index 00000000..519ed99a Binary files /dev/null and b/assets/images/chart/chart4.jpeg differ diff --git a/assets/images/chart/chart5.jpeg b/assets/images/chart/chart5.jpeg new file mode 100644 index 00000000..05f4909c Binary files /dev/null and b/assets/images/chart/chart5.jpeg differ diff --git a/assets/images/hot_issue/hot_issue1.webp b/assets/images/hot_issue/hot_issue1.webp new file mode 100644 index 00000000..da85ea35 Binary files /dev/null and b/assets/images/hot_issue/hot_issue1.webp differ diff --git a/assets/images/hot_issue/hot_issue2.jpeg b/assets/images/hot_issue/hot_issue2.jpeg new file mode 100644 index 00000000..ac436242 Binary files /dev/null and b/assets/images/hot_issue/hot_issue2.jpeg differ diff --git a/assets/images/hot_issue/hot_issue3.jpeg b/assets/images/hot_issue/hot_issue3.jpeg new file mode 100644 index 00000000..fd3af35b Binary files /dev/null and b/assets/images/hot_issue/hot_issue3.jpeg differ diff --git a/assets/images/hot_issue/hot_issue4.jpeg b/assets/images/hot_issue/hot_issue4.jpeg new file mode 100644 index 00000000..cc26fe35 Binary files /dev/null and b/assets/images/hot_issue/hot_issue4.jpeg differ diff --git a/assets/images/hot_issue/hot_issue5.jpeg b/assets/images/hot_issue/hot_issue5.jpeg new file mode 100644 index 00000000..ad5eb08d Binary files /dev/null and b/assets/images/hot_issue/hot_issue5.jpeg differ diff --git a/assets/images/hot_issue/hot_issue6.jpeg b/assets/images/hot_issue/hot_issue6.jpeg new file mode 100644 index 00000000..772df886 Binary files /dev/null and b/assets/images/hot_issue/hot_issue6.jpeg differ diff --git a/assets/images/new_album/img1.jpeg b/assets/images/new_album/img1.jpeg new file mode 100644 index 00000000..06dd6066 Binary files /dev/null and b/assets/images/new_album/img1.jpeg differ diff --git a/assets/images/new_album/img2.jpeg b/assets/images/new_album/img2.jpeg new file mode 100644 index 00000000..28b011a7 Binary files /dev/null and b/assets/images/new_album/img2.jpeg differ diff --git a/assets/images/new_album/img3.jpeg b/assets/images/new_album/img3.jpeg new file mode 100644 index 00000000..b4e1da63 Binary files /dev/null and b/assets/images/new_album/img3.jpeg differ diff --git a/assets/images/new_album/img4.jpeg b/assets/images/new_album/img4.jpeg new file mode 100644 index 00000000..5f102a75 Binary files /dev/null and b/assets/images/new_album/img4.jpeg differ diff --git a/assets/images/new_album/img5.jpeg b/assets/images/new_album/img5.jpeg new file mode 100644 index 00000000..6a2ad366 Binary files /dev/null and b/assets/images/new_album/img5.jpeg differ diff --git a/assets/images/new_album/img6.jpeg b/assets/images/new_album/img6.jpeg new file mode 100644 index 00000000..da1ad4d8 Binary files /dev/null and b/assets/images/new_album/img6.jpeg differ diff --git a/assets/javascripts/albumHover.js b/assets/javascripts/albumHover.js new file mode 100644 index 00000000..ad27a129 --- /dev/null +++ b/assets/javascripts/albumHover.js @@ -0,0 +1,52 @@ +// ์ด๋ฏธ์ง€์™€ ํ˜ธ๋ฒ„ ์š”์†Œ์— ๋Œ€ํ•œ ํ˜ธ๋ฒ„ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ํ•จ์ˆ˜ ์ •์˜ +function addHoverHandlers(imageId, hoverId, singerId) { + + const img = document.getElementById(imageId); // ์ด๋ฏธ์ง€ ์š”์†Œ + const imgHover = document.getElementById(hoverId); // ํ˜ธ๋ฒ„(๋งˆ์šฐ์Šค ์˜ค๋ฒ„) ์‹œ ๋‚˜ํƒ€๋‚  ์š”์†Œ + const singer = document.getElementById(singerId); // ํ˜ธ๋ฒ„ ์‹œ ์‚ฌ๋ผ์งˆ ๊ฐ€์ˆ˜ ์ •๋ณด ๋“ฑ ๋‹ค๋ฅธ ์š”์†Œ + + let isHovered = false; // ์ด๋ฏธ์ง€๋‚˜ ํ˜ธ๋ฒ„ ์š”์†Œ์— ๋งˆ์šฐ์Šค๊ฐ€ ์˜ฌ๋ ค์ ธ ์žˆ๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ์ €์žฅํ•˜๋Š” ๋ณ€์ˆ˜ + let leaveTimeout; // ์š”์†Œ๋ฅผ ๋ฒ—์–ด๋‚  ๋•Œ ํƒ€์ด๋จธ๋ฅผ ์„ค์ •ํ•˜๊ธฐ ์œ„ํ•œ ๋ณ€์ˆ˜ + + // ๋งˆ์šฐ์Šค๊ฐ€ ์š”์†Œ ์•ˆ์œผ๋กœ ๋“ค์–ด์˜ฌ ๋•Œ + img.addEventListener("mouseenter", () => { + imgHover.style.display = "block"; // ํ˜ธ๋ฒ„ ์š”์†Œ๋ฅผ ๋ณด์ด๋„๋ก ์„ค์ • + singer.style.display = "none"; // ๊ฐ€์ˆ˜ ์ •๋ณด ๋“ฑ ๋‹ค๋ฅธ ์š”์†Œ๋ฅผ ์ˆจ๊น€ + isHovered = true; // ํ˜ธ๋ฒ„ ์ƒํƒœ๋ฅผ true๋กœ ์„ค์ • + }); + + // ๋งˆ์šฐ์Šค๊ฐ€ ํ˜ธ๋ฒ„ ์š”์†Œ ์•ˆ์œผ๋กœ ๋“ค์–ด์˜ฌ ๋•Œ + imgHover.addEventListener("mouseenter", () => { + imgHover.style.display = "block"; // ํ˜ธ๋ฒ„ ์š”์†Œ๋ฅผ ๋ณด์ด๋„๋ก ์„ค์ • + isHovered = true; // ํ˜ธ๋ฒ„ ์ƒํƒœ๋ฅผ true๋กœ ์„ค์ • + }); + + // ์ด๋ฏธ์ง€์—์„œ ๋งˆ์šฐ์Šค๊ฐ€ ๋– ๋‚  ๋•Œ + img.addEventListener("mouseleave", () => { + isHovered = false; // ํ˜ธ๋ฒ„ ์ƒํƒœ๋ฅผ false๋กœ ์„ค์ • + + // ์š”์†Œ๋ฅผ ๋ฒ—์–ด๋‚˜๋ฉด leaveTimeout์„ ์„ค์ •ํ•˜์—ฌ ์ผ์ • ์‹œ๊ฐ„ ํ›„์— hover ๊ฐ’์„ ํ•ด์ œ + leaveTimeout = setTimeout(() => { + // ๋งŒ์•ฝ isHovered๊ฐ€ false์ธ ๊ฒฝ์šฐ + if (!isHovered) { + imgHover.style.display = "none"; // ํ˜ธ๋ฒ„ ์š”์†Œ๋ฅผ ์ˆจ๊น€ + singer.style.display = "block"; // ๊ฐ€์ˆ˜ ์ •๋ณด ๋“ฑ ๋‹ค๋ฅธ ์š”์†Œ๋ฅผ ๋ณด์ด๋„๋ก ์„ค์ • + } + }, 100); // 100ms(0.1์ดˆ) ํ›„์— ์‹คํ–‰๋˜๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜ + }); + + // ํ˜ธ๋ฒ„์—์„œ ๋งˆ์šฐ์Šค๊ฐ€ ๋ฒ—์–ด๋‚  ๋•Œ + imgHover.addEventListener("mouseleave", () => { + imgHover.style.display = "none"; // ํ˜ธ๋ฒ„ ์š”์†Œ๋ฅผ ์ˆจ๊น€ + singer.style.display = "block"; // ๊ฐ€์ˆ˜ ์ •๋ณด ๋“ฑ ๋‹ค๋ฅธ ์š”์†Œ๋ฅผ ๋ณด์ด๋„๋ก ์„ค์ • + isHovered = false; // ํ˜ธ๋ฒ„ ์ƒํƒœ๋ฅผ false๋กœ ์„ค์ • + }); +} + +// ์˜ˆ์‹œ ์š”์†Œ์— ๋Œ€ํ•œ hover ํ•ธ๋“ค๋Ÿฌ ์ถ”๊ฐ€ +addHoverHandlers("img", "img_hover", "singer_section"); +addHoverHandlers("img2", "img_hover2", "singer_section2"); +addHoverHandlers("img3", "img_hover3", "singer_section3"); +addHoverHandlers("img4", "img_hover4", "singer_section4"); +addHoverHandlers("img5", "img_hover5", "singer_section5"); +addHoverHandlers("img6", "img_hover6", "singer_section6"); diff --git a/assets/javascripts/buttonHover.js b/assets/javascripts/buttonHover.js new file mode 100644 index 00000000..21c41bb9 --- /dev/null +++ b/assets/javascripts/buttonHover.js @@ -0,0 +1,51 @@ +// ํด๋ฆญํ•œ ์š”์†Œ๋ฅผ ์ €์žฅํ•  ๋ณ€์ˆ˜ +let clickedElement = null; + +// .circle ์š”์†Œ๋“ค ๊ฐ€์ ธ์˜ค๊ธฐ +const circles = document.querySelectorAll('.circle'); + +// hover ํšจ๊ณผ๋ฅผ ์ ์šฉํ•˜๋Š” ํ•จ์ˆ˜ +function addHoverEffect(circle) { + // ๋งˆ์šฐ์Šค๊ฐ€ ์š”์†Œ ์œ„์— ์˜ฌ๋ผ๊ฐ”์„ ๋•Œ + circle.addEventListener('mouseenter', () => { + // ํด๋ฆญ๋œ ์š”์†Œ๊ฐ€ ์•„๋‹Œ ๊ฒฝ์šฐ์—๋งŒ ํšจ๊ณผ๋ฅผ ์ ์šฉ + if (circle !== clickedElement) { + circle.style.border = '1px solid #1b1b1b'; // ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ ๋ณ€๊ฒฝ + } + }); + + // ๋งˆ์šฐ์Šค๊ฐ€ ์š”์†Œ์—์„œ ๋ฒ—์–ด๋‚ฌ์„ ๋•Œ + circle.addEventListener('mouseleave', () => { + // ํด๋ฆญ๋œ ์š”์†Œ๊ฐ€ ์•„๋‹Œ ๊ฒฝ์šฐ์—๋งŒ ํšจ๊ณผ๋ฅผ ์ดˆ๊ธฐํ™” + if (circle !== clickedElement) { + circle.style.border = '1px solid #999999'; // ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ์„ ์›๋ž˜๋Œ€๋กœ ๋˜๋Œ๋ฆฌ๊ธฐ + } + }); +} + +// ํด๋ฆญ ํšจ๊ณผ๋ฅผ ์ ์šฉํ•˜๋Š” ํ•จ์ˆ˜ +function addClickEffect(circle) { + // ์š”์†Œ๋ฅผ ํด๋ฆญํ–ˆ์„ ๋•Œ + circle.addEventListener('click', () => { + clickedElement = circle; // ํด๋ฆญํ•œ ์š”์†Œ๋ฅผ ์ €์žฅ + circles.forEach(circle => circle.classList.remove('clicked')); // ๋ชจ๋“  ์š”์†Œ์˜ 'clicked' ํด๋ž˜์Šค๋ฅผ ์ œ๊ฑฐ + clickedElement.classList.add('clicked'); // ํด๋ฆญํ•œ ์š”์†Œ์—๋งŒ 'clicked' ํด๋ž˜์Šค๋ฅผ ์ถ”๊ฐ€ + }); +} + +// ๋ชจ๋“  .circle ์š”์†Œ์— hover ํšจ๊ณผ์™€ ํด๋ฆญ ํšจ๊ณผ๋ฅผ ์ถ”๊ฐ€ +circles.forEach(circle => { + addHoverEffect(circle); + addClickEffect(circle); +}); + +// .circle1 ์š”์†Œ์— hover ํšจ๊ณผ๋ฅผ ์ถ”๊ฐ€ +const circle1 = document.getElementById('circle1'); +addHoverEffect(circle1); + +// .circle1 ์š”์†Œ๋ฅผ ํด๋ฆญํ–ˆ์„ ๋•Œ +circle1.addEventListener('click', () => { + clickedElement = circle1; // ํด๋ฆญํ•œ ์š”์†Œ๋ฅผ ์ €์žฅ + circles.forEach(circle => circle.classList.remove('clicked')); // ๋ชจ๋“  ์š”์†Œ์˜ 'clicked' ํด๋ž˜์Šค๋ฅผ ์ œ๊ฑฐ + clickedElement.classList.add('clicked'); // ํด๋ฆญํ•œ ์š”์†Œ์—๋งŒ 'clicked' ํด๋ž˜์Šค๋ฅผ ์ถ”๊ฐ€ +}); \ No newline at end of file diff --git a/assets/javascripts/eventButton.js b/assets/javascripts/eventButton.js new file mode 100644 index 00000000..cef5bc52 --- /dev/null +++ b/assets/javascripts/eventButton.js @@ -0,0 +1,85 @@ +// ๊ฐ ์ด๋ฏธ์ง€์— ๋Œ€ํ•œ href์™€ src ์ •๋ณด๊ฐ€ ๊ฐ์ฒด๋กœ ๋‹ด๊ฒจ ์žˆ๋‹ค. +// href๋Š” ์ด๋ฏธ์ง€๋ฅผ ํด๋ฆญํ–ˆ์„ ๋•Œ ์ด๋™ํ•  ๋งํฌ ์ฃผ์†Œ๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. +// src๋Š” ์ด๋ฏธ์ง€ ํŒŒ์ผ์˜ URL์„ ๋‚˜ํƒ€๋‚ธ๋‹ค. +// ๊ฐ ๊ฐ์ฒด๋งˆ๋‹ค ๊ณ ์œ ํ•œ ๋งํฌ์™€ ์ด๋ฏธ์ง€ URL์ด ์„ค์ •๋˜์–ด ์žˆ๋‹ค. +const circleInfo = [ + { + href: "https://www.melon.com/album/detail.htm?albumId=11294520", + src: "https://cdnimg.melon.co.kr/svc/images/main/imgUrl20230727030134.jpg/melon/quality/80", + }, + { + href: "https://www.melon.com/album/detail.htm?albumId=11292865", + src: "https://cdnimg.melon.co.kr/svc/images/main/imgUrl20230726010900.png/melon/quality/80", + }, + { + href: "https://www.melon.com/album/detail.htm?albumId=11294303", + src: "https://cdnimg.melon.co.kr/svc/images/main/imgUrl20230727030153.jpg/melon/quality/80", + }, + { + href: "https://www.melon.com/album/detail.htm?albumId=11294409", + src: "https://cdnimg.melon.co.kr/svc/images/main/imgUrl20230727030212.jpg/melon/quality/80", + }, + { + href: "https://www.melon.com/album/detail.htm?albumId=11292440", + src: "https://cdnimg.melon.co.kr/svc/images/main/imgUrl20230726112148.png/melon/quality/80", + }, + { + href: "https://www.melon.com/album/detail.htm?albumId=11292423", + src: "https://cdnimg.melon.co.kr/svc/images/main/imgUrl20230726012238.png/melon/quality/80", + }, + { + href: "https://www.melon.com/event/view/index.htm?eventId=35425", + src: "https://cdnimg.melon.co.kr/svc/images/main/imgUrl20230727030231.jpg/melon/quality/80", + }, +] + +// ๋ชจ๋“  circle ์š”์†Œ๋“ค์— ๋Œ€ํ•ด ์ด๋ฒคํŠธ ์ถ”๊ฐ€ +for (let i = 0; i < circleInfo.length; i++) { + const circle = document.getElementById(`circle${i + 1}`); + circle.addEventListener("click", handleCircleClick); + // ๊ฐ circle ์š”์†Œ์— ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ , ํด๋ฆญ ์‹œ handleCircleClick ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ + // circle ์š”์†Œ๋“ค์€ HTML์—์„œ id๊ฐ€ 'circle1', 'circle2', ...์™€ ๊ฐ™์ด ์ˆซ์ž๋ฅผ ํฌํ•จํ•œ ํ˜•ํƒœ๋กœ ๋˜์–ด ์žˆ๋‹ค. + // ์ˆซ์ž๋ฅผ ์ด์šฉํ•˜์—ฌ circleInfo ๋ฐฐ์—ด์—์„œ ํ•ด๋‹น ์ด๋ฏธ์ง€ ์ •๋ณด๋ฅผ ์ฐพ๋Š”๋‹ค. +} + +// ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ ํ•จ์ˆ˜ ์ •์˜ +function handleCircleClick(event) { + // ๋ชจ๋“  circle์˜ ํ…Œ๋‘๋ฆฌ๋ฅผ ์›๋ž˜ ์ƒ‰์ƒ์œผ๋กœ ์ดˆ๊ธฐํ™” + for (let i = 0; i < circleInfo.length; i++) { + const circle = document.getElementById(`circle${i + 1}`); + circle.style.border = "1px solid #999999"; + } + // ํด๋ฆญํ•œ circle์„ ์ œ์™ธํ•œ ๋ชจ๋“  circle๋“ค์˜ ํ…Œ๋‘๋ฆฌ ์Šคํƒ€์ผ์„ ์ดˆ๊ธฐํ™” + // ์Šคํƒ€์ผ์€ ํšŒ์ƒ‰ ํ…Œ๋‘๋ฆฌ๋ฅผ ๊ฐ€์ง€๋„๋ก ์„ค์ •๋˜์–ด ์žˆ๋‹ค. + + // ํด๋ฆญํ•œ circle์— ํ…Œ๋‘๋ฆฌ๋ฅผ ๋ณ€๊ฒฝํ•œ ์ƒ‰์ƒ์œผ๋กœ ์„ค์ • + const clickedCircle = event.target; + clickedCircle.style.border = "1px solid #1f1f1f"; + // ํด๋ฆญํ•œ circle์— ํ…Œ๋‘๋ฆฌ ์Šคํƒ€์ผ์„ ๊ฒ€์€์ƒ‰ ํ…Œ๋‘๋ฆฌ๋กœ ๋ณ€๊ฒฝ + + // ํด๋ฆญํ•œ circle์˜ id ๊ฐ’์„ ๊ฐ€์ ธ์™€์„œ ์ˆซ์ž ๋ถ€๋ถ„๋งŒ ์ถ”์ถœ + const circleNumber = clickedCircle.id.match(/\d+/)[0]; + // ํด๋ฆญํ•œ circle์˜ id์—์„œ ์ˆซ์ž๋งŒ ์ถ”์ถœํ•˜์—ฌ circleNumber ๋ณ€์ˆ˜์— ์ €์žฅ + // id๋Š” 'circle1', 'circle2', ...์™€ ๊ฐ™์ด ์ˆซ์ž๋ฅผ ํฌํ•จํ•œ ํ˜•ํƒœ, ์ˆซ์ž๋งŒ ์ถ”์ถœํ•˜์—ฌ ํ•ด๋‹น ์ด๋ฏธ์ง€ ์ •๋ณด๋ฅผ ์ฐพ์„ ๋•Œ ์‚ฌ์šฉ + + // ์ƒˆ๋กœ์šด href์™€ src ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ + const newHref = circleInfo[circleNumber - 1].href; + const newSrc = circleInfo[circleNumber - 1].src; + // circleNumber๋ฅผ ์ด์šฉํ•˜์—ฌ circleInfo ๋ฐฐ์—ด์—์„œ ํ•ด๋‹น ์ด๋ฏธ์ง€ ์ •๋ณด๋ฅผ ์ฐพ์•„์˜จ๋‹ค. + // circleNumber๋Š” 1๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๊ณ  ๋ฐฐ์—ด์€ 0๋ถ€ํ„ฐ ์‹œ์ž‘, circleNumber - 1๋กœ ๋ฐฐ์—ด ์ธ๋ฑ์Šค์— ์ ‘๊ทผ + + // href์™€ src ์†์„ฑ์„ ์ƒˆ๋กœ์šด ๊ฐ’์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜๊ณ  ์• ๋‹ˆ๋ฉ”์ด์…˜ ํด๋ž˜์Šค ์ถ”๊ฐ€ + const eventImgA = document.getElementById("eventImgA"); + const eventImg = document.getElementById("eventImg"); + const eventImgContainer = document.getElementById("imgContainer"); + // HTML์—์„œ ์ด๋ฏธ์ง€์™€ ์ด๋ฏธ์ง€ ์ปจํ…Œ์ด๋„ˆ์— ๋Œ€ํ•œ ์š”์†Œ๋“ค์„ ๊ฐ€์ ธ์˜จ๋‹ค. + + eventImgA.href = newHref; + eventImg.src = newSrc; + // ํด๋ฆญํ•œ ์ด๋ฏธ์ง€์— ํ•ด๋‹นํ•˜๋Š” ๋งํฌ์™€ ์ด๋ฏธ์ง€ URL์„ ์„ค์ • + // ํด๋ฆญํ•œ ์ด๋ฏธ์ง€๋ฅผ ํด๋ฆญํ–ˆ์„ ๋•Œ ํ•ด๋‹น ์ด๋ฏธ์ง€์™€ ์—ฐ๊ฒฐ๋œ ๋งํฌ๋กœ ์ด๋™ + + eventImgContainer.classList.add("new-value"); + // ์ด๋ฏธ์ง€ ์ปจํ…Œ์ด๋„ˆ์— 'new-value'๋ผ๋Š” ํด๋ž˜์Šค๋ฅผ ์ถ”๊ฐ€ + // CSS๋กœ ์ •์˜๋˜์–ด +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..65c3f277 --- /dev/null +++ b/index.html @@ -0,0 +1,835 @@ + + + + + + + + + + Melon + + +
+ +
+ + +
+ + +
+ +
+
+ ํ†ตํ•ฉ์˜์—ญ๊ฒ€์ƒ‰ + + +
+
+
+ ๊ธ‰์ƒ์Šน +
+
+ 1. + ์•„์ด์œ  + - +
+ +
+
+
+ + ๋ฎค์ง์›จ์ด๋ธŒ ์ด๋™ + +
+
+ +
+ +
+ +
+
+
+
+ +

์ตœ์‹  ์•จ๋ฒ”

+ > + +
+ +
+ 1 + / + 9 + + + ์ด์ „ + + + ๋‹ค์Œ + + +
+
+
+
+ +
+
+ + +
+ + + +
+
+
+

+ ์ธ๊ธฐ ์žˆ์–ด์š” + ์ง€๊ธˆ ์ด์Šˆ๊ฐ€ ๋˜๋Š” ์•„ํ‹ฐ์ŠคํŠธ์˜ ์ธ๊ธฐ ์ปจํ…์ธ ์ž…๋‹ˆ๋‹ค. +

+
+ 1 + / + 2 + + + ์ด์ „ + + + ๋‹ค์Œ + + +
+
+
+ +
+
+
+

+
+ ๋ฉœ๋ก  ์ฐจํŠธ + ๋‹ค์Œ +
+ 2023.07.26 03:00 ๊ธฐ์ค€ +

+ + +
+
+ +
+
+
+ ๊ณต์ง€์‚ฌํ•ญ +
+
+ [๋ฎค์ง์›จ์ด๋ธŒ Beta] ์˜คํ”ˆ ์•ˆ๋‚ด +
+
+ 2023.07.10 +
+
+
+
+ + + + +
+ + + + + + + + + + + + diff --git a/styles/footer.css b/styles/footer.css new file mode 100644 index 00000000..37322695 --- /dev/null +++ b/styles/footer.css @@ -0,0 +1,118 @@ +.footer { + width: 100%; +} + +.footer_content { + width: 1000px; + min-height: 200px; + margin: 0 auto; + padding: 0 20px; +} + +/* footer_menu */ + +.footer_menu { + height: 50px; + display: flex; + align-items: center; + justify-content: flex-end; +} + +.footer_menu_ul { + display: flex; +} + +.footer_menu_ul li a{ + font-size: 14px; + font-weight: bold; + color: #999999; + margin-right: 19px; +} + +.footer_menu_ul li a:hover { + color: #777777; +} + +/* end footer_menu */ + +/* footer_policy */ + +.footer_policy { + width: 1000px; + height: 15px; +} + +.footer_policy_ul { + display: flex; + margin-top: 20px; +} + +.footer_policy_ul li a { + font-size: 12px; + color: #1f1f1f; + margin-right: 13px; +} + +.footer_policy_ul li:nth-child(2) a { + font-weight: bold; +} + +.footer_policy_ul li:nth-child(3) a { + font-weight: bold; +} + +.footer_policy_ul li a:hover { + text-decoration: underline; +} + +/* end footer_policy */ + +/* company */ + +.company1{ + display: flex; + align-items: center; + margin-top: 25px; +} + +.company1 span { + font-size: 10.5px; + margin-right: 8px; + color: #999999; +} + +.company_span { + font-weight: bold; +} + +.company_a { + display: flex; + align-items: center; + color: #909090; +} + +.company_a img { + width: 15px; + height: 15px; +} + +.company_a span { + margin: 0; +} + + +.company2 { + +} + +.company2 span { + font-size: 10.5px; + margin-right: 2px; + color: #999999; +} + +.company2 a { + font-size: 10.5px; + margin-right: 2px; + color: #999999; +} \ No newline at end of file diff --git a/styles/general.css b/styles/general.css new file mode 100644 index 00000000..b4499d35 --- /dev/null +++ b/styles/general.css @@ -0,0 +1,48 @@ +body { + font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin: 0; + padding: 0; +} + +a { + text-decoration: none; +} + +div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, +pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, +dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, +tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, +hgroup, nav, section { + margin: 0; + padding: 0; +} + +ul { + list-style: none; +} + +.util_menu_line { + display: block; + width: 100%; + border-top: 1px solid #f2f2f2; + position: relative; + z-index: 1; + top: 36px; +} + +.footer_line { + display: block; + width: 100%; + border-top: 1px solid #c9c9c9; +} + +.footer_menu_line { + display: block; + width: 100%; + border-top: 1px solid #f2f2f2; + position: relative; + z-index: 1; + top: 52px; +} + + diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 00000000..a9004cdb --- /dev/null +++ b/styles/header.css @@ -0,0 +1,250 @@ +.header { + width: 100%; + min-width: 1048px; + height: 188px; + border-top: 3px solid #00cd3c; + border-bottom: 1px solid #c9c9c9; +} + +.header_line { + width: 100%; + display: block; + border: 1px solid #c9c9c9; +} + +/* header_menu */ + +.header_content { + width: 1000px; + margin: 0 auto; + padding: 0 20px; +} + +.header_content span { + color: #999999; + font-size: 12.5px; + font-weight: bold; +} + +.header_content span:hover { + color: #1a1a1a; +} + + +.util_menu { + width: 1000px; + height: 35px; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-content: center; + border-bottom: 1px solid #f2f2f2; +} + + +.top_right { + display: flex; +} + +.top_right a { + margin-right: 22px; +} + +.top_right a:first-child { + display: flex; + margin-top: 0.5px; +} + +.top_right a:first-child img { + width: 25px; + height: 25px; + margin-right: 4px; +} + +.top_right a:first-child span { + height: 17px; + margin-top: 3.5px; +} + +/* end header_menu */ + +/* searchbar */ + +.util_menu2 { + height: 100px; + display: flex; + margin-top: 6px; +} + +.main_logo { + display: flex; + flex-wrap: wrap; + align-content: center; +} + +.main_logo img { + width: 130px; +} + + + +.searchbar { + width: 340px; + height: 100px; + margin-left: 15px; + display: flex; + flex-wrap: wrap; + align-content: center; +} + +.searchbar_field { + width: 340px; + height: 37px; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-content: center; + border: 2.5px solid #00cd3c; + border-radius: 20px; +} + +.searchbar legend{ + display: none; +} + +.searchbar input { + width: 260px; + height: 25px; + padding-top: 4px; + margin-left: 15px; + border: none; + outline: none; + font-size: 12px; +} + +.searchbar_button { + border: none; + background: none; + margin-right: 10px; +} + +.searchbar_button img { + width: 25px; + height: 25px; + padding-top: 4px; +} + +/* end searchbar */ + +/* realtime_keyword */ + +.realtime_keyword { + display: flex; + margin-left: 15px; + align-items: center; +} + +.soar { + width: 40px; + height: 16px; + text-align: center; + border: 1px solid #00cd3c; + border-radius: 10px; + color: #fff !important; + background-color: #00cd3c; + font-size: 12px !important; +} + +.soar:hover { + color: #fff; +} + + +.keyword_overlay { + width: 150px; + height: 22px; + border: none; + margin-left: 15px; +} + +.keyword_overlay_main { + display: flex; + align-items: center; + height: 20px; +} + +.keyword_overlay_main span:nth-child(1) { + font-size: 12px; + font-weight: normal; + color: #5e5e5e; +} + +.keyword_overlay_main a { + width: 95px; + font-size: 12px; + color: #1f1f1f; + margin-left: 5px; +} + +.dash { + color: #1f1f1f !important; + font-size: 12px !important; + margin-bottom: 3px; +} + + + +.header_banner { + display: flex; + flex-wrap: wrap; + align-content: center; + margin-left: 8px; +} + +/* end banner */ + +/* util_menu3 */ + +.util_menu3 { + height: 45px; + display: flex; + justify-content: space-between; + padding-top: 8px; +} + +.util_menu3_ul { + display: flex; +} + +.util_menu3_ul li { + margin-right: 27px; +} + +.util_menu3_ul span { + font-size: 17px; + color: #5e5e5e; +} + +.util_menu3_ul span:hover { + color: #00cd3c; +} + + +.util_menu3_ul2 { + margin-right: 20px; +} + +.util_menu3_ul2 span { + font-size: 17px; + color: #777777; +} + +.util_menu3_ul2 span:hover { + color: #00cd3c; +} + +.beta { + font-style: italic; + font-size: 15px !important; + color: #00cd3c !important; +} \ No newline at end of file diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 00000000..8b7c2ca5 --- /dev/null +++ b/styles/main.css @@ -0,0 +1,748 @@ +.main { + width: 1000px; + margin: 0 auto; + padding: 0 20px; +} + +.contents { + width: 1000px; + height: 1000px; + padding-top: 28px; + display: flex; + flex-wrap: wrap; + align-content: flex-start; + border-bottom: 1px solid #f2f2f2; +} + +/* new_album */ + +.new_album { + width: 480px; + height: 350px; +} + +.new_album_top { + display: flex; + justify-content: space-between; +} + +.new_album_a { + display: flex; + align-items: center; +} + +.new_album_a h2 { + height: 24px; + font-size: 16px; + color: #5e5e5e; +} + +.new_album_a img { + width: 15px; + height: 13px; +} + +.new_album_ul { + display: flex; +} + +.new_album_ul li { + margin-right: 18px; +} + +.new_album_ul a { + font-size: 13px; +} + +.new_album_ul li:nth-child(1) a { + color: #5e5e5e; + font-weight: bold; +} + +.new_album_ul li:nth-child(2) a { + color: #999999; + font-weight: bold; +} + +.new_album_ul li:nth-child(3) a { + color: #999999; + font-weight: bold; +} + +.new_album_top2 { + display: flex; + align-items: baseline; +} + + + +.page { + display: flex; + align-items: flex-end; +} + +.page span { + font-size: 12px; +} + +.page span:nth-child(1) { + color: #1b1b1b; +} + +.page span:nth-child(2) { + color: #1b1b1b; +} + +.page span:nth-child(3) { + color: #999999; +} + +.page_btn { + display: flex; + margin-left: 5px; +} + +.page_btn a { + display: flex; +} + +.page_btn img{ + width: 13px; +} + +.right { + border: 1px solid #999999; + border-radius: 10px 0 0 10px +} + +.left { + border: 1px solid #999999; + border-left: none; + border-radius: 0 10px 10px 0; +} + + +.new_album_contents_ul { + height: 320px; + display: flex; + flex-wrap: wrap; +} + +.new_album_contents_ul li { + height: 160px; + margin: 3px 2px 0 0; +} + +.none { + display: none; +} + +.img { + width: 156px; + height: 156px; + border: 1px solid #f2f2f2; +} + +.img_hover { + width: 157px; + height: 157px; + display: none; + position: absolute; + top: 246px; +} + +.img_hover2 { + width: 157px; + height: 156px; + display: none; + position: relative; + bottom: 157px; +} + + +.img_hover_section { + height: 157px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #22222299; +} + +.album { + width: 132px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + display: block; + color: #fff; + font-size: 13px; + text-align: center; +} + +.album:hover { + text-decoration: underline; +} + + +.thum { + width: 156px; + height: 156px; + display: block; + overflow: hidden; +} + +.thum img { + width: 156px; + height: 156px; +} + +.singer_section { + display: block; +} + +.singer { + width: 156px; + height: 30px; + bottom: 30px; + display: flex; + position: relative; + z-index: 1; + background-color: #45454599; + justify-content: center; + align-items: center; +} + +.singer_a:hover { + text-decoration: underline; + color: #fff; +} + +.singer_a span { + display: block; + height: 20px; + font-size: 12px; + color: #fff; + margin-top: 4px; +} + +/* end new_album */ + +/* event */ + +.event { + width: 240px; + height: 350px; + margin-left: 5px; +} + +.event_top { + height: 24px; + display: flex; + justify-content: flex-end; + align-items: center; +} + +.move { + display: flex; + align-items: center; +} + +.move a { + margin-right: 3.5px; +} + + +.circle { + display: block; + width: 8px; + height: 8px; + border: 1px solid #999999; + border-radius: 50%; + transition: border 0.3s ease; +} + +.circle:hover, +.circle.clicked { + border: 1px solid #1b1b1b; +} + +#circle1 { + border: 1px solid #1b1b1b; +} + + +.playbutton { + margin: 0 5px 0 5px; +} + +.playbutton img{ + width: 12px; +} + +.event_img { + margin-top: 4px; +} + +.event_img img:nth-child(1) { + width: 235px; + height: 320px; +} + + +/* login_banner */ + +.login_banner { + width: 270px; + height: 320px; + margin: 27px 0 0 5px; +} + +.login { + width: 270px; + height: 120px; + border: 1px solid #ebebeb; + background-color: #fbfbfb; +} + +.create { + display: flex; + justify-content: space-around; + margin-top: 25px; +} + +.create p { + font-size: 11px; + color: #999999; +} + +.create a { + font-size: 11px; + color: #777777; +} + +.login_button { + width: 230px; + height: 40px; + margin: 10px 0 0 20px; + color: #fff; + background-color: #00cd3c; + border: none; + font-size: 15px; +} + +.login_button:hover { + background-color: #00ad34; +} + +.banner { + width: 272px; +} + +.banner img { + width: 272px; + height: 188px; + margin-top: 11px; +} + +/* end login_banner */ + +/* main_banner */ + +.main_banner { + margin-top: 10px; +} + +.main_banner img { + width: 1002px; + height: 82px; +} + +/* end main_banner */ + +/* hot_issue */ + +.hot_issue { + width: 705px; + height: 500px; + margin-top: 15px; +} + +.hot_issue_top { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #f2f2f2; +} + +.hot_issue_title { + font-size: 16px; + color: #1b1b1b; +} + +.hot_issue_intro { + font-size: 13px; + font-weight: normal; + color: #999999; + margin-left: 5px; +} + +.hot_issue_list { + margin-top: 15px; +} + +.hot_issue_list_ul { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.hot_issue_list_li { + width: 223px; + height: 220px; +} + +.hot_issue_list_li a:nth-child(1):hover, +.hot_issue_list_li a:nth-child(2):hover { + text-decoration: underline; + color: #999999; +} + +.hot_issue_list_li img { + width: 223px; + height: 148px; +} + +.song_name { + display: flex; + flex-direction: column; +} + +.song_name span:nth-child(1) { + font-size: 12px; + font-weight: bold; + color: #1b1b1b; +} + +.song_name span:nth-child(2) { + font-size: 12px; + color: #777777; +} + +.hot_issue_melontv { + font-size: 11px; + color: #add269; +} + +.hot_issue_melontv:hover { + text-decoration: underline; +} + +/* end hot_issue */ + +/* chart */ + +.chart { + width: 275px; + height: 472px; + margin: 21px 0 0 20px; +} + +.chart_top { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 5px; +} + +.chart_section { + display: flex; +} + +.chart_section a { + font-size: 16px; + color: #1b1b1b; +} + +.chart_section img { + width: 20px; +} + +.chart_top_time { + font-size: 12px; + font-weight: normal; + color: #999999; +} + +.chart_top2_li { + display: flex; + margin-top: 4px; +} + +.chart_top2_li a { + width: 90px; + height: 22px; + font-size: 13px; + font-weight: bold; + border: 1px solid #d2d2d2; + text-align: center; + padding-top: 5px; + color: #999999; +} + +.chart_top2_li a:nth-child(1) { + height: 21px; + color: #add269; + border-top: 2px solid #add269; + border-right: none; +} + +.chart_top2_li a:nth-child(2) { + border-right: none; +} + + + +.chart_rank_section_active { + width: 272px; + height: 70px; + display: flex; + align-items: center; + border: 1px solid #d2d2d2; + border-top: none; +} + +.chart_rank_active_number { + font-size: 27px; + font-style: italic; + margin-left: 12px; + color: #add269; +} + +.chart_rank_updown { + margin-left: 10px; + display: flex; + align-items: center; +} + +.chart_rank_updown span { + color: #999999; +} + +.chart_rank_updown span:nth-child(2) { + font-size: 11px; + margin: 2px 0 0 2px; +} + +.chart_rank_section_active img { + width: 50px; + height: 50px; + margin-left: 15px; +} + +.chart_rank_singer { + display: flex; + flex-direction: column; + margin-left: 10px; +} + +.chart_rank_singer a:nth-child(1) { + font-size: 12px; + color: #1b1b1b; + font-weight: bold; +} + +.chart_rank_singer a:nth-child(2) { + font-size: 12px; + font-weight: lighter; + color: #777777; + margin-top: 1px; +} + + + +.chart_rank_section_color { + width: 272px; + height: 33px; + display: flex; + align-items: center; + border: 1px solid #d2d2d2; + border-top: none; + background-color: #f8f8f8; +} + +.chart_rank_small_number { + font-size: 16px; + font-style: italic; + margin-left: 15px; + color: #add269; + font-weight: bold; +} + +.chart_rank_updown_small { + margin-left: 14px; + display: flex; + align-items: center; +} + +.chart_rank_updown_small span { + color: #999999; +} + +.chart_rank_updown_small span:nth-child(2) { + font-size: 11px; + margin: 2px 0 0 2px; +} + +.chart_rank_updown_small2 { + margin-left: 10px; + display: flex; + align-items: center; +} + +.chart_rank_updown_small2 span { + color: #999999; +} + +.chart_rank_updown_small2 span:nth-child(2) { + font-size: 11px; + margin: 2px 0 0 2px; +} + +.chart_rank_section_color_a { + width: 100px; + height: 15px; + font-size: 12px; + color: #1b1b1b; + margin-left: 15px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.chart_rank_section_color_singer { + width: 80px; + height: 15px; + margin-left: 30px; + font-size: 12px; + color: #777777; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + + + +.chart_rank_section_none_color { + width: 272px; + height: 33px; + display: flex; + align-items: center; + border: 1px solid #d2d2d2; + border-top: none; +} + +.chart_rank_small_number2 { + font-size: 16px; + font-style: italic; + margin-left: 15px; + color: #abb3b7; + font-weight: bold; +} + +.chart_rank_small_number3 { + font-size: 16px; + font-style: italic; + margin-left: 10px; + color: #abb3b7; + font-weight: bold; +} + + + +.chart_rank_section_more { + width: 272px; + height: 38px; + border: 1px solid #d2d2d2; + border-top: none; + display: flex; + align-items: center; + justify-content: space-between; +} + +.shuffle { + width: 68px; + height: 25px; + margin-left: 10px; + font-size: 11px; + display: flex; + justify-content: space-between; + align-items: center; + color: #1b1b1b; + background-color: #f9f9f9; + border: 1.5px solid #cfcfcf; +} + +.shuffle:hover { + border: 1.5px solid #999999; +} + +.more { + display: flex; + align-items: center; +} + +.more:hover { + text-decoration: underline; +} + +.more span { + font-size: 12px; + color: #777777; +} + +.more img { + width: 15px; + height: 15px; + margin-right: 10px; +} + + + +/* notice */ + +.notice { + width: 1000px; + height: 40px; + display: flex; + align-items: center; +} + +.notice_dl { + display: flex; + align-items: center; +} + +.notice_a1 { + font-size: 13px; + font-weight: bold; + color: #1b1b1b; +} + +.notice_a2 { + margin-left: 30px; + font-size: 12px; + color: #777777; +} + +.notice_a2:hover { + text-decoration: underline; +} + +.date { + margin-left: 15px; + font-size: 12px; + color: #777777; +} + +