diff --git a/README.md b/README.md index 598dc30f..2a87f5be 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,8 @@ -# ๐Ÿ‘€ ์ž์‹ ์ด ์›ํ•˜๋Š” ์‚ฌ์ดํŠธ ๋ ˆ์ด์•„์›ƒ ํด๋ก  +# ์ฒซ๋ฒˆ์งธ ๊ณผ์ œ - ์ž์‹ ์ด ์›ํ•˜๋Š” ์‚ฌ์ดํŠธ ๋ ˆ์ด์•„์›ƒ ํด๋ก  -์›ํ•˜๋Š” ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)๋ฅผ ์ž์œ ๋กญ๊ฒŒ ์„ ํƒํ•˜๊ณ  ๋ ˆ์ด์•„์›ƒ์„ ํด๋ก  ์ฝ”๋”ฉํ•˜์„ธ์š”. -ํ‰์†Œ์— ๋„์ „ํ•ด ๋ณด๊ณ  ์‹ถ์—ˆ๊ฑฐ๋‚˜ ํ˜น์€ ์ž์‹ ์˜ ์ˆ˜์ค€์— ๋งž๋Š” ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)๋ฅผ ์„ ํƒํ•˜์„ธ์š”. -๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ๋ฆฌ๋ทฐ ๊ธฐ๊ฐ„์€ ๋ณ„๋„ ๊ณต์ง€๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”! +## โ†’ํ”„๋กœ๋ฐฐ๊ตฌ ์ฑ”ํ”ผ์–ธ๊ฒฐ์ •์ „ ์•ˆ๋‚ด ์‚ฌ์ดํŠธ ๋ ˆ์ด์•„์›ƒ ํด๋ก  -## ๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ์ œ์ถœ ๋ฐฉ๋ฒ• +## โ†’๋ธŒ๋Ÿฐ์น˜๋ช… "KDT5_KimDoYeon" -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://www.kovo.co.kr/main.asp) +### โ†’ ํ˜„์žฌ ์ฑ”ํ”ผ์–ธ๊ฒฐ์ •์ „ ์ข…๋ฃŒ๋กœ ํ•ด๋‹น ์‚ฌ์ดํŠธ ํ™•์ธ ๋ถˆ๊ฐ€์ž…๋‹ˆ๋‹ค. diff --git a/index.html b/index.html new file mode 100644 index 00000000..46dc7f19 --- /dev/null +++ b/index.html @@ -0,0 +1,199 @@ + + + + + + + KOVO ํ•œ๊ตญ๋ฐฐ๊ตฌ์—ฐ๋งน + + + + +
+
+

+ Dodram V-league Finals +

+
+ KOVOํ™ˆํŽ˜์ด์ง€ + ํ‹ฐ์ผ“์˜ˆ๋งค ๋ฐ”๋กœ๊ฐ€๊ธฐ +
+
+
+
+

+ ์ฑ”ํ”ผ์–ธ๊ฒฐ์ •์ „ +

+ +
+
+

+ ๋‚จ์ž๋ถ€ +

+ +
+
+ ๋Œ€ํ•œํ•ญ๊ณต +

๋Œ€ํ•œํ•ญ๊ณต

+
+ +
vs
+ +
+ ํ˜„๋Œ€์บํ”ผํƒˆ +

ํ˜„๋Œ€์บํ”ผํƒˆ

+
+
+ + + + + + + + + + + + + + + + + + +
3์›”30์ผ(๋ชฉ)19:00์ธ์ฒœ๋ฏธ๋ฐฐ์ •
4์›”1์ผ(ํ† )19:00์ธ์ฒœ๋ฏธ๋ฐฐ์ •
4์›”3์ผ(์›”)19:00์ฒœ์•ˆ๋ฏธ๋ฐฐ์ •
4์›”5์ผ(์ˆ˜)19:00์ฒœ์•ˆ๋ฏธ๋ฐฐ์ •
4์›”7์ผ(๊ธˆ)19:00์ธ์ฒœ๋ฏธ๋ฐฐ์ •
+
+ +
+

+ ์—ฌ์ž๋ถ€ +

+
+
+ ํฅ๊ตญ์ƒ๋ช… +

ํฅ๊ตญ์ƒ๋ช…

+
+
+ vs +
+
+ ๋„๋กœ๊ณต์‚ฌ +

๋„๋กœ๊ณต์‚ฌ

+
+
+ + + + + + + + + + + + + + + + + + +
3์›”29์ผ(์ˆ˜)19:00์ธ์ฒœ๋ฏธ๋ฐฐ์ •
3์›”31์ผ(๊ธˆ)19:00์ธ์ฒœ๋ฏธ๋ฐฐ์ •
4์›”2์ผ(์ผ)19:00๊น€์ฒœ๋ฏธ๋ฐฐ์ •
4์›”4์ผ(ํ™”)19:00๊น€์ฒœ๋ฏธ๋ฐฐ์ •
4์›”6์ผ(๋ชฉ)19:00์ธ์ฒœ๋ฏธ๋ฐฐ์ •
+
+
+
+
+ โ€ป ์ค‘๊ณ„์ผ์ •์€ ๋ฐฉ์†ก์‚ฌ ์‚ฌ์ •์— ๋”ฐ๋ผ ๋ณ€๊ฒฝ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (ํ˜„์žฅ ์ œ์ž‘๋ฐฉ์†ก์‚ฌ*ํ‘œ์‹œ) +
+
+ +
+ +s \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 00000000..613e29c1 --- /dev/null +++ b/main.css @@ -0,0 +1,261 @@ + +#number_1 { + /* gitpadding-bottom: 100px; */ + background: url(https://www.kovo.co.kr/images/intro/bg_pointro_2223_2.jpg) center top no-repeat; + } + .frist { + box-sizing: border-box; + height: 599px; + padding-top: 175px; + } + .frist .dodram { + height: 300px; + text-align: center; + } + .frist .rink { + z-index: 10; + margin-top: 20px; + text-align: center; + font-size: 0px; + } + .frist .rink a{ + position: relative; + display: inline-block; + vertical-align: top; + width: 220px; + height: 56px; + } + .frist .rink a.lefticon { + border: 1px solid #fff; + border-radius: 50px; + font-size: large; + position: relative; + background-color: rgba(255, 255, 255, 0.3); + margin: 0px 10px; + /* background: url(https://www.kovo.co.kr/images/intro/btn_home.png) */ + } + .frist .rink a.lefticon span { + color: #fff; + position: absolute; + height: 20px; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + } + .frist .rink a.righticon { + border: 1px solid #fff; + border-radius: 50px; + font-size: large; + position: relative; + background-color: rgba(255, 255, 255, 0.3); + margin: 0px 10px; + } + .frist .rink a.righticon span { + color: #fff; + position: absolute; + height: 20px; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + } + .Matchupday { + position: relative; + background: #fff; + } + .Matchupday .title { + padding: 102px 0 66px 0; + text-align: center; + } + .Matchupday .title .start { + font-size: 50px; + font-weight: 2000px; + } + .Matchupday .title .mid { + font-size: 50px; + color: rgb(196, 196, 196); + line-height: 10px; + } + .Matchupday .matchup { + margin: 0 auto; + width: 836px; + padding-bottom: 104px; + overflow: hidden; + + display: flex; + justify-content:space-around + } + .Matchupday .matchup .gameboy { + width: 357px; + position: relative; + } + .Matchupday .matchup .gameboy h3 { + border: 1px solid blue; + background-color: blue; + color: #fff; + font-size: 24px; + width: fit-content; + padding: 10px 28px; + border-radius: 50px; + text-align: center; + + position: relative; + left: 0; + right: 0; + margin: auto; + + } + .matchup .gameboy .match { + display: flex; + margin-top: 25px; + width: 100%; + justify-content: space-around; + } + .matchup .gameboy .team1 p { + text-align: center; + } + .matchup .gameboy .match .vs{ + align-self: center; + font-size: 20px; + color: blue; + } + .matchup .gameboy .team2 p { + text-align: center; + } + .Matchupday .matchup .gameboy table{ + border: 1px solid #000; + width: 100%; + margin-top: 25px; + + } + .Matchupday .matchup .gameboy table tr{ + } + .Matchupday .matchup .gameboy table th{ + border: 1px solid gray; + padding: 10px; + } + .Matchupday .matchup .gameboy table td{ + border: 1px solid gray; + text-align: center; + } + .Matchupday .matchup .gamegirl{ + width: 357px; + position: relative; + } + .Matchupday .matchup .gamegirl h3 { + border: 1px solid rgb(141, 7, 7); + background-color: rgb(141, 7, 7); + color: #fff; + font-size: 24px; + width: fit-content; + padding: 10px 28px; + border-radius: 50px; + text-align: center; + + position: relative; + left: 0; + right: 0; + margin: auto; + } + .matchup .gamegirl .match { + display: flex; + margin-top: 25px; + width: 100%; + justify-content: space-around; + } + .matchup .gamegirl .match .team1 p { + text-align: center; + } + .matchup .gamegirl .match .vs { + align-self: center; + } + .matchup .gamegirl .match .team2 p { + text-align: center; + } + .Matchupday .matchup .gamegirl table { + border: 1px solid gray; + width: 100%; + margin-top: 25px; + } + .Matchupday .matchup .gamegirl table th { + border: 1px solid gray; + padding: 10px; + } + .Matchupday .matchup .gamegirl table td { + border: 1px solid gray; + text-align: center ; + } + .second .tvinfor { + background: gray; + text-align: center; + line-height: 144px; + font-size: 17px; + font-weight: 400px; + color: #fff; + } + .second { + margin: 0 auto; + width: 1200px; + } + footer { + position: relative; + } + footer .top1 { + display: flex; + justify-content: center; + margin: 20px 90px; + } + footer .top1 .teamname { + text-align: center; + line-height: 50px; + color: gray; + } + footer .top2 { + font-size: 75%; + text-align: center; + color: gray; + } + .bottom { + width: 100%; + background-color: rgb(17, 17, 17); + margin: 50px 0 20px 0; + } + .bottom .bottom1 { + border: 30px solid rgb(17, 17, 17); + display: flex; + justify-content: center; + } + .bottom .bottom1 a.Blink span { + color: white; + font-size: small; + } + .bottom .bottom1 a.Alink span { + color: gray; + font-size: small; + } + .bottom .bottom1 a { + color: gray; + } + .bottom .bottom2 { + background-color: white; + display: flex; + justify-content: center; + margin: 0 0 50px 0; + padding-top: 30px; + background-color: rgb(17, 17, 17); + } + .bottom .bottom2 { + text-align: center; + } + .bottom .bottom2 .address { + text-align: center; + color: gray; + font-size: small; + padding: 25px; + } + .bottom .bottom2 .logo { + line-height: 150px; + } \ No newline at end of file