From 1f450e272978454c7b78f1be1dfd11af4600d4bf Mon Sep 17 00:00:00 2001 From: kim Date: Tue, 11 Apr 2023 15:10:35 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EC=B2=AB=EB=B2=88=EC=A7=B8=20=ED=81=B4?= =?UTF-8?q?=EB=A1=A0=EC=BD=94=EB=94=A9=20=EA=B3=BC=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 199 ++++++++++++++++++++++++++++++++++++++++ main.css | 261 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 460 insertions(+) create mode 100644 index.html create mode 100644 main.css 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인천미배정
+
+
+
+
+ ※ 중계일정은 방송사 사정에 따라 변경 될 수 있습니다. (현장 제작방송사*표시) +
+
+
+
+
+
+ 남자배구단 +
+
+ 대한항공 +
+
+ KB손해보험 +
+
+ 우리카드 +
+
+ 한국전력 +
+
+ ok저축은행 +
+
+ 삼성화재 +
+
+ 현대캐피탈 +
+
+ 여자배구단 +
+
+ 현대건걸 +
+
+ 도로공사 +
+
+ GS칼텍스 +
+
+ 인삼공사 +
+
+ 기업은행 +
+
+ 흥국화재 +
+
+ 페퍼저축은행 +
+
+
+ KOVO 및 KOVO 소속 14개 팀로고, 마스코트, 엠블럼과 KOVO 소속 선수의 사진, 초상, 영상, 캐릭터 및 기타 KOVO의 지적재산권등을 무단으로 사용하는 것은 상표법 및 저작권법에 의해 금지됩니다. +
+
+
+
+ +
+
+ +
+ [03925] 서울특별시 마포구 월드컵북로 402 KGIT센터 11층 한국배구연맹 | TEL : 02-422-0110 | FAX : 02-418-0131 +

(C) KOREAN VOLLEYBALL FEDERATION. ALL RIGHT RESERVED.

+
+
+
+ +
+
+ +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 From 9f3554623b5dc6f259c58c607cc8e881ae7bb834 Mon Sep 17 00:00:00 2001 From: dosick0 <128225886+dosick0@users.noreply.github.com> Date: Tue, 11 Apr 2023 16:01:39 +0900 Subject: [PATCH 2/2] Update README.md --- README.md | 47 +++++------------------------------------------ 1 file changed, 5 insertions(+), 42 deletions(-) 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) +### → 현재 챔피언결정전 종료로 해당 사이트 확인 불가입니다.