diff --git a/Jaehun/.vscode/settings.json b/Jaehun/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/Jaehun/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/Jaehun/README.md b/Jaehun/README.md new file mode 100644 index 00000000..a6491005 --- /dev/null +++ b/Jaehun/README.md @@ -0,0 +1,60 @@ +### 유튜브 뮤직 웹페이지 클론 코딩 + +--- + +> 링크 + +원본 페이지: 원본 사이트 + +- 로그인이 되어있어야 될려나요..? + +클론 홈페이지 : 클론 사이트 + +##### 제작기간: 07-25 日 ~ 07-28 日 + +### 사용 기술 + +1. HTML +2. CSS +3. Swiper JS (CDN으로 사용) + +--- + +### 개발 사항 + +1. PC 레이아웃 적용 + +2. 약간의 디자인 추가 + +3. 메뉴바 미구현 및 기기에 연결 아이콘 미구현 + +4. 프로필 hover 시, 보이는 부분 깨짐 + +5. 왼쪽 nav 화면 약간 깨짐 + +6. 검색창 태그 디자인 + +7. 슬라이더 컴포넌트 구현 밑에 더 있지만 중복 컴포넌트라 제외함. + +**이 부분이 약간 뭔가 불편했음** _하나의 컴포넌트로 만들려면?_ + +--- + +### 개선 사항 + +1. 반응형 및 미구현 항목 개선 + +2. 요소 컴포넌트화 후 전체 페이지 제작 + +3. 검색창 기능 및 페이지 링크 이동 후 페이지 제작 + +4. SCSS 좋긴 좋은데, 뭔가 하다보니 너무 난잡해짐. 정리 안됨. + +5. Swiper 부분 커스터마이징 부족. 찾아볼 것 + +### 참고 사이트 + +1. 첫번째 블로그 - Swiper 버튼 관련 +2. Swiper 공식 사이트 +3. SCSS 적용기 + ... diff --git a/Jaehun/assets/img/background.jpg b/Jaehun/assets/img/background.jpg new file mode 100644 index 00000000..b368d9e0 Binary files /dev/null and b/Jaehun/assets/img/background.jpg differ diff --git a/Jaehun/assets/img/compass.png b/Jaehun/assets/img/compass.png new file mode 100644 index 00000000..77aefc3d Binary files /dev/null and b/Jaehun/assets/img/compass.png differ diff --git a/Jaehun/assets/img/home.png b/Jaehun/assets/img/home.png new file mode 100644 index 00000000..32757020 Binary files /dev/null and b/Jaehun/assets/img/home.png differ diff --git a/Jaehun/assets/img/librarymusic.png b/Jaehun/assets/img/librarymusic.png new file mode 100644 index 00000000..85663b5e Binary files /dev/null and b/Jaehun/assets/img/librarymusic.png differ diff --git a/Jaehun/assets/img/menu.png b/Jaehun/assets/img/menu.png new file mode 100644 index 00000000..ffc57e88 Binary files /dev/null and b/Jaehun/assets/img/menu.png differ diff --git a/Jaehun/assets/img/next.png b/Jaehun/assets/img/next.png new file mode 100644 index 00000000..1b295c6d Binary files /dev/null and b/Jaehun/assets/img/next.png differ diff --git a/Jaehun/assets/img/on_platform_logo_dark.svg b/Jaehun/assets/img/on_platform_logo_dark.svg new file mode 100644 index 00000000..ad129bf5 --- /dev/null +++ b/Jaehun/assets/img/on_platform_logo_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Jaehun/assets/img/previous.png b/Jaehun/assets/img/previous.png new file mode 100644 index 00000000..dd5a2440 Binary files /dev/null and b/Jaehun/assets/img/previous.png differ diff --git a/Jaehun/assets/img/search-interface-symbol.png b/Jaehun/assets/img/search-interface-symbol.png new file mode 100644 index 00000000..7f99a42a Binary files /dev/null and b/Jaehun/assets/img/search-interface-symbol.png differ diff --git a/Jaehun/assets/img/slideImg/ayaho.jpg b/Jaehun/assets/img/slideImg/ayaho.jpg new file mode 100644 index 00000000..ab67260b Binary files /dev/null and b/Jaehun/assets/img/slideImg/ayaho.jpg differ diff --git a/Jaehun/assets/img/slideImg/himawari.jpg b/Jaehun/assets/img/slideImg/himawari.jpg new file mode 100644 index 00000000..af638ef5 Binary files /dev/null and b/Jaehun/assets/img/slideImg/himawari.jpg differ diff --git a/Jaehun/assets/img/slideImg/kenshi.jpg b/Jaehun/assets/img/slideImg/kenshi.jpg new file mode 100644 index 00000000..23afa9a0 Binary files /dev/null and b/Jaehun/assets/img/slideImg/kenshi.jpg differ diff --git a/Jaehun/assets/img/slideImg/lady.jpg b/Jaehun/assets/img/slideImg/lady.jpg new file mode 100644 index 00000000..a66f47ad Binary files /dev/null and b/Jaehun/assets/img/slideImg/lady.jpg differ diff --git a/Jaehun/assets/img/slideImg/misaki.jpg b/Jaehun/assets/img/slideImg/misaki.jpg new file mode 100644 index 00000000..59e6a253 Binary files /dev/null and b/Jaehun/assets/img/slideImg/misaki.jpg differ diff --git a/Jaehun/assets/img/slideImg/mosawo.jpg b/Jaehun/assets/img/slideImg/mosawo.jpg new file mode 100644 index 00000000..502f921e Binary files /dev/null and b/Jaehun/assets/img/slideImg/mosawo.jpg differ diff --git a/Jaehun/assets/img/slideImg/onevoice.jpg b/Jaehun/assets/img/slideImg/onevoice.jpg new file mode 100644 index 00000000..48d15d5e Binary files /dev/null and b/Jaehun/assets/img/slideImg/onevoice.jpg differ diff --git a/Jaehun/assets/img/slideImg/pazi.jpg b/Jaehun/assets/img/slideImg/pazi.jpg new file mode 100644 index 00000000..1a64e804 Binary files /dev/null and b/Jaehun/assets/img/slideImg/pazi.jpg differ diff --git a/Jaehun/assets/img/slideImg/riria.jpg b/Jaehun/assets/img/slideImg/riria.jpg new file mode 100644 index 00000000..43dcbc79 Binary files /dev/null and b/Jaehun/assets/img/slideImg/riria.jpg differ diff --git a/Jaehun/assets/img/slideImg/stay.jpg b/Jaehun/assets/img/slideImg/stay.jpg new file mode 100644 index 00000000..3ed291b2 Binary files /dev/null and b/Jaehun/assets/img/slideImg/stay.jpg differ diff --git a/Jaehun/assets/img/slideImg/uru.jpg b/Jaehun/assets/img/slideImg/uru.jpg new file mode 100644 index 00000000..4f7188d1 Binary files /dev/null and b/Jaehun/assets/img/slideImg/uru.jpg differ diff --git a/Jaehun/assets/img/slideImg/yuik.jpg b/Jaehun/assets/img/slideImg/yuik.jpg new file mode 100644 index 00000000..45f2cc2d Binary files /dev/null and b/Jaehun/assets/img/slideImg/yuik.jpg differ diff --git a/Jaehun/assets/img/smart-devices.png b/Jaehun/assets/img/smart-devices.png new file mode 100644 index 00000000..6a132d3a Binary files /dev/null and b/Jaehun/assets/img/smart-devices.png differ diff --git a/Jaehun/assets/img/user.jpg b/Jaehun/assets/img/user.jpg new file mode 100644 index 00000000..4b6f3632 Binary files /dev/null and b/Jaehun/assets/img/user.jpg differ diff --git a/Jaehun/assets/img/youtube.png b/Jaehun/assets/img/youtube.png new file mode 100644 index 00000000..68cd5388 Binary files /dev/null and b/Jaehun/assets/img/youtube.png differ diff --git a/Jaehun/assets/img/yuika.jpg b/Jaehun/assets/img/yuika.jpg new file mode 100644 index 00000000..68710f81 Binary files /dev/null and b/Jaehun/assets/img/yuika.jpg differ diff --git a/Jaehun/assets/img/yuika/Sobanite.jpg b/Jaehun/assets/img/yuika/Sobanite.jpg new file mode 100644 index 00000000..4f678296 Binary files /dev/null and b/Jaehun/assets/img/yuika/Sobanite.jpg differ diff --git a/Jaehun/assets/img/yuika/anone.jpg b/Jaehun/assets/img/yuika/anone.jpg new file mode 100644 index 00000000..0da3089f Binary files /dev/null and b/Jaehun/assets/img/yuika/anone.jpg differ diff --git a/Jaehun/assets/img/yuika/koi.jpg b/Jaehun/assets/img/yuika/koi.jpg new file mode 100644 index 00000000..61a9ac67 Binary files /dev/null and b/Jaehun/assets/img/yuika/koi.jpg differ diff --git a/Jaehun/assets/img/yuika/mv.jpg b/Jaehun/assets/img/yuika/mv.jpg new file mode 100644 index 00000000..4cbcf2b4 Binary files /dev/null and b/Jaehun/assets/img/yuika/mv.jpg differ diff --git a/Jaehun/assets/img/yuika/prologue.jpg b/Jaehun/assets/img/yuika/prologue.jpg new file mode 100644 index 00000000..ec5c9385 Binary files /dev/null and b/Jaehun/assets/img/yuika/prologue.jpg differ diff --git a/Jaehun/assets/img/yuika/seventeen.jpg b/Jaehun/assets/img/yuika/seventeen.jpg new file mode 100644 index 00000000..798186e5 Binary files /dev/null and b/Jaehun/assets/img/yuika/seventeen.jpg differ diff --git a/Jaehun/assets/img/yuika/suki.jpg b/Jaehun/assets/img/yuika/suki.jpg new file mode 100644 index 00000000..021cf0c9 Binary files /dev/null and b/Jaehun/assets/img/yuika/suki.jpg differ diff --git a/Jaehun/css/style.css b/Jaehun/css/style.css new file mode 100644 index 00000000..519478e0 --- /dev/null +++ b/Jaehun/css/style.css @@ -0,0 +1,614 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.container { + width: 100%; + color: white; + background-image: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0.1)), + url("../assets//img/background.jpg"); + background-repeat: no-repeat; + background-size: cover; + position: absolute; + z-index: -30; +} +.container header.nav_list { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +.container header.nav_list div.nl_left { + display: flex; + align-items: center; + height: 100%; + padding-left: 30px; + padding-top: 20px; + gap: 13px; +} +.container header.nav_list div.nl_left .menu_bar_wrap { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + border-radius: 50%; + transition: background-color 0.3s; +} +.container header.nav_list div.nl_left .menu_bar_wrap .menu_bar { + width: 20px; + height: 20px; + object-fit: contain; +} +.container header.nav_list div.nl_left .menu_bar_wrap:hover { + background-color: rgb(48, 48, 48); + cursor: pointer; +} +.container header.nav_list .search_input { + width: 400px; + height: 50px; + border-radius: 10px; + margin-left: 100px; + padding: 10px 10px 10px 50px; + border: 1px solid rgb(77, 77, 77); + background: none; + background: url("../assets/img/search-interface-symbol.png") no-repeat; + background-position: 15px center; + opacity: 0.8; + color: white; + font-size: 16px; + font-weight: 400; + letter-spacing: 0.05em; +} +.container header.nav_list .search_input:focus { + width: 600px; + outline: none !important; + border-image: conic-gradient( + 90deg, + #ff1b69 0deg 90deg, + #ff0 90deg 180deg, + #2196f3 180deg 270deg, + #9c27b0 270deg 360deg + ); + animation: mymove 7s infinite; + box-shadow: 0 0 4px rgb(145, 189, 144); + transition: 0.5s; +} +@keyframes mymove { + 0% { + border-color: rgb(223, 160, 160); + } + 33% { + border-color: rgb(230, 230, 169); + } + 66% { + border-color: rgb(165, 226, 165); + } + 100% { + border-color: rgb(161, 161, 236); + } +} +.container header.nav_list div.nl_right { + display: flex; + justify-content: center; + align-items: center; + padding-right: 100px; +} +.container header.nav_list div.nl_right .connect_image { + display: flex; +} +.container header.nav_list div.nl_right .connect_image:hover { + cursor: pointer; +} +.container header.nav_list div.nl_right .user_image { + display: flex; + justify-content: center; + align-items: center; + width: 30px; + height: 30px; + border-radius: 50%; + margin-left: 30px; +} +.container header.nav_list div.nl_right .user_image:hover { + cursor: pointer; +} +.container header.nav_list div.nl_right input#menu_toggle { + display: none; +} +.container header.nav_list div.nl_right label.menu_toggle { + padding: 4px; +} +.container header.nav_list div.nl_right nav#menu_nav { + display: none; + background-color: #282828; + position: fixed; +} +.container header.nav_list div.nl_right nav#menu_nav :hover { + background-color: #3e3e3e; +} +.container header.nav_list div.nl_right nav#menu_nav li { + position: relative; + list-style: none; + background-color: #282828; + width: 248px; + height: 40px; + padding: 10px 36px 0 16px; +} +.container header.nav_list div.nl_right nav#menu_nav li a { + text-decoration: none; + color: white; + font-size: 14px; + line-height: 24px; +} +.container + header.nav_list + div.nl_right + input#menu_toggle:checked + + nav#menu_nav { + display: block; +} +.container .body_container { + width: 100%; + height: 100%; +} +.container .body_container .column_nav { + width: 14%; + height: 100%; + color: white; + margin-top: 30px; + float: left; +} +.container .body_container .column_nav :hover { + cursor: pointer; +} +.container .body_container .column_nav .selected_option { + background-color: #2c2e27; + border-radius: 20%; +} +.container .body_container .column_nav .column_nav_img { + width: 80px; + display: flex; + flex-direction: column; + text-align: center; + padding: 18px; +} +.container .body_container .section_contents { + display: flex; + flex-direction: column; + width: 80%; + margin-top: 50px; +} +.container .body_container .section_contents .select_tag { + display: flex; + flex-direction: row; + color: white; + gap: 15px; +} +.container .body_container .section_contents .select_tag .tag_name { + display: flex; + justify-content: center; + align-items: center; + width: 10%; + height: 40px; + padding: 5px; + font-size: 12px; + border: 1px solid black; + border-radius: 10px; + background-color: rgba(58, 52, 52, 0.3); +} +.container .body_container .section_contents .select_tag :hover { + cursor: pointer; + background: #2e2e2a; + transition: all 0.3s; +} +.container .body_container .section_contents .section_music_contents { + margin-top: 60px; + height: 5.0938rem; + display: flex; +} +.container + .body_container + .section_contents + .section_music_contents + div.profile_wrap { + width: 56px; + height: 56px; + border-radius: 50%; + background-image: url("../assets/img/user.jpg"); + background-repeat: no-repeat; + background-size: cover; +} +.container + .body_container + .section_contents + .section_music_contents + div.profile_singer { + width: 56px; + height: 56px; + border-radius: 50%; + background-image: url("../assets/img/yuika.jpg"); + background-repeat: no-repeat; + background-size: cover; +} +.container + .body_container + .section_contents + .section_music_contents + .profile_inform { + height: auto; + margin-left: 24px; +} +.container + .body_container + .section_contents + .section_music_contents + .profile_inform + .profile_name { + font-size: 16px; + color: #aaaaaa; + padding-bottom: 8px; +} +.container + .body_container + .section_contents + .section_music_contents + .profile_inform + .profile_inform_two { + display: flex; + width: 1200px; + flex-direction: row; + align-items: flex-end; + justify-content: space-between; + gap: 8px; +} +.container + .body_container + .section_contents + .section_music_contents + .profile_inform + .profile_inform_two + .again_listen + :hover { + border-bottom: 3px solid white; + cursor: pointer; +} +.container + .body_container + .section_contents + .section_music_contents + .profile_inform + .profile_inform_two + .again_listen + span.profile_inform_text1 { + font-size: 45px; + font-weight: 700; +} +.container + .body_container + .section_contents + .section_music_contents + .profile_inform + .profile_inform_two + .more_option { + background: none; + border: 2px solid #272525; + border-radius: 25px; + padding: 16px; + color: white; +} +.container + .body_container + .section_contents + .section_music_contents + .profile_inform + .profile_inform_two + .more_option:hover { + cursor: pointer; + background-color: #262524; + transition: 0.3s; +} +.container + .body_container + .section_contents + .section_music_contents + .button_wrap { + display: flex; + flex-direction: row; + gap: 10px; + margin: 50px 0 0 10px; +} +.container + .body_container + .section_contents + .section_music_contents + .button_wrap + .swiper-button-prev, +.container + .body_container + .section_contents + .section_music_contents + .button_wrap + .swiper-button-prev2 { + position: relative; + width: 36px; + height: 36px; + background-image: url("../assets/img/previous.png"); + background-repeat: no-repeat; + background-position: center; + border: 1px solid white; + border-radius: 50%; + margin-right: 20px; +} +.container + .body_container + .section_contents + .section_music_contents + .button_wrap + .swiper-button-next, +.container + .body_container + .section_contents + .section_music_contents + .button_wrap + .swiper-button-next2 { + position: relative; + width: 36px; + height: 36px; + background-image: url("../assets/img/next.png"); + background-repeat: no-repeat; + background-position: center; + border: 1px solid white; + border-radius: 50%; +} +.container + .body_container + .section_contents + .section_music_contents + .button_wrap + .swiper-button-prev::after, +.container + .body_container + .section_contents + .section_music_contents + .button_wrap + .swiper-button-next::after, +.container + .body_container + .section_contents + .section_music_contents + .button_wrap + .swiper-button-prev2::after, +.container + .body_container + .section_contents + .section_music_contents + .button_wrap + .swiper-button-next2::after { + display: none; +} +.container .body_container .swiper, +.container .body_container .swiper2 { + float: left; + width: 100%; + height: 100%; + margin-top: 50px; + overflow: hidden; +} +.container + .body_container + .swiper + .swiper-wrapper + .swiper-slide + .slider_contents, +.container + .body_container + .swiper2 + .swiper-wrapper + .swiper-slide + .slider_contents { + display: flex; + gap: 40px; +} +.container + .body_container + .swiper + .swiper-wrapper + .swiper-slide + .slider_contents + .album_desc, +.container + .body_container + .swiper2 + .swiper-wrapper + .swiper-slide + .slider_contents + .album_desc { + display: flex; + flex-direction: column; + color: white; + padding: 10px; +} +.container + .body_container + .swiper + .swiper-wrapper + .swiper-slide + .slider_contents + .album_desc + .album_image, +.container + .body_container + .swiper2 + .swiper-wrapper + .swiper-slide + .slider_contents + .album_desc + .album_image { + border-radius: 10px; + object-fit: contain; +} +.container + .body_container + .swiper + .swiper-wrapper + .swiper-slide + .slider_contents + .album_desc + .album_image:hover, +.container + .body_container + .swiper2 + .swiper-wrapper + .swiper-slide + .slider_contents + .album_desc + .album_image:hover { + cursor: pointer; + opacity: 0.5; + transition: all 0.5s; +} +.container + .body_container + .swiper + .swiper-wrapper + .swiper-slide + .slider_contents + .album_desc + .album_text_one, +.container + .body_container + .swiper2 + .swiper-wrapper + .swiper-slide + .slider_contents + .album_desc + .album_text_one { + margin-top: 16px; + font-size: 18px; + font-weight: 600; + letter-spacing: -1px; +} +.container + .body_container + .swiper + .swiper-wrapper + .swiper-slide + .slider_contents + .album_desc + .album_text_two, +.container + .body_container + .swiper2 + .swiper-wrapper + .swiper-slide + .slider_contents + .album_desc + .album_text_two { + margin-top: 4px; + color: #9b9b9b; + font-size: 16px; + letter-spacing: -1px; +} +.container + .body_container + .swiper + .swiper-wrapper + .swiper-slide + .slider_contents + .singer_desc, +.container + .body_container + .swiper2 + .swiper-wrapper + .swiper-slide + .slider_contents + .singer_desc { + display: flex; + flex-direction: column; + align-items: center; + padding: 10px; +} +.container + .body_container + .swiper + .swiper-wrapper + .swiper-slide + .slider_contents + .singer_desc + .singer_text_one, +.container + .body_container + .swiper2 + .swiper-wrapper + .swiper-slide + .slider_contents + .singer_desc + .singer_text_one { + margin-top: 16px; + font-size: 18px; + font-weight: 600; + letter-spacing: -1px; +} +.container + .body_container + .swiper + .swiper-wrapper + .swiper-slide + .slider_contents + .singer_desc + .singer_text_two, +.container + .body_container + .swiper2 + .swiper-wrapper + .swiper-slide + .slider_contents + .singer_desc + .singer_text_two { + margin-top: 4px; + color: #9b9b9b; + font-size: 16px; + margin-top: 4px; +} +.container + .body_container + .swiper + .swiper-wrapper + .swiper-slide + .slider_contents + .singer_desc + .album_image, +.container + .body_container + .swiper2 + .swiper-wrapper + .swiper-slide + .slider_contents + .singer_desc + .album_image { + border-radius: 50%; +} +.container + .body_container + .swiper + .swiper-wrapper + .swiper-slide + .slider_contents + .singer_desc + .album_image:hover, +.container + .body_container + .swiper2 + .swiper-wrapper + .swiper-slide + .slider_contents + .singer_desc + .album_image:hover { + cursor: pointer; + opacity: 0.5; + transition: all 0.5s; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/Jaehun/css/style.css.map b/Jaehun/css/style.css.map new file mode 100644 index 00000000..3dc75032 --- /dev/null +++ b/Jaehun/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;;AAiBA;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGJ;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAGF;EACE;EACA;EACA;EAOA;EACA;EACA;;AAEF;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAKN;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EAEA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEE;EACE;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;;AACA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EAIE;;AAMR;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAGI;AAAA;EACE;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;;AACA;AAAA;EACE;EACA;;AAEF;AAAA;EACE;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;;AAGJ;AAAA;EACE;EACA;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;;AAEF;AAAA;EACE;;AAIF;AAAA;EACE;EACA;EACA","file":"style.css"} \ No newline at end of file diff --git a/Jaehun/css/style.scss b/Jaehun/css/style.scss new file mode 100644 index 00000000..c1986dff --- /dev/null +++ b/Jaehun/css/style.scss @@ -0,0 +1,400 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.container { + width: 100%; + color: white; + background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.1)), + url(assets/img/background.jpg); + background-repeat: no-repeat; + background-size: cover; + position: absolute; + z-index: -30; + + // !! 이거 떄문에 후반에 다 망가짐 + // ::after { + // width: 100%; + // height: 100%; + // content: ""; + // background: url(/Jaehun/assets/img/background.jpg); + // background-repeat: no-repeat; + // background-size: cover; + // position: absolute; + // top: 0; + // left: 0; + // z-index: -50; + // filter: brightness(0.4); + // } + + header.nav_list { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + // 왼쪽 nav + div.nl_left { + display: flex; + align-items: center; + height: 100%; + padding-left: 30px; + padding-top: 20px; + gap: 13px; + + .menu_bar_wrap { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + border-radius: 50%; + transition: background-color 0.3s; + .menu_bar { + width: 20px; + height: 20px; + object-fit: contain; + } + } + .menu_bar_wrap:hover { + background-color: rgb(48, 48, 48); + cursor: pointer; + } + } + .search_input { + width: 400px; + height: 50px; + border-radius: 10px; + margin-left: 100px; + padding: 10px 10px 10px 50px; + + border: 1px solid rgb(77, 77, 77); + + background: none; + background: url(/assets/img/search-interface-symbol.png) no-repeat; + background-position: 15px center; + opacity: 0.8; + + color: white; + + font-size: 16px; + font-weight: 400; + letter-spacing: 0.05em; + } + + .search_input:focus { + width: 600px; + outline: none !important; + border-image: conic-gradient( + 90deg, + #ff1b69 0deg 90deg, + #ff0 90deg 180deg, + #2196f3 180deg 270deg, + #9c27b0 270deg 360deg + ); + animation: mymove 7s infinite; + box-shadow: 0 0 4px rgb(145, 189, 144); + transition: 0.5s; + } + @keyframes mymove { + 0% { + border-color: rgb(223, 160, 160); + } + 33% { + border-color: rgb(230, 230, 169); + } + 66% { + border-color: rgb(165, 226, 165); + } + 100% { + border-color: rgb(161, 161, 236); + } + } + + // 오른쪽 nav + div.nl_right { + display: flex; + justify-content: center; + align-items: center; + padding-right: 100px; + + .connect_image { + display: flex; + } + .connect_image:hover { + cursor: pointer; + } + .user_image { + display: flex; + justify-content: center; + align-items: center; + width: 30px; + height: 30px; + border-radius: 50%; + margin-left: 30px; + } + .user_image:hover { + cursor: pointer; + } + input#menu_toggle { + display: none; + } + label.menu_toggle { + padding: 4px; + } + nav#menu_nav { + display: none; + background-color: #282828; + position: fixed; + :hover { + background-color: #3e3e3e; + } + li { + position: relative; + list-style: none; + background-color: #282828; + width: 248px; + height: 40px; + padding: 10px 36px 0 16px; + + a { + text-decoration: none; + color: white; + font-size: 14px; + line-height: 24px; + } + } + } + + input#menu_toggle:checked + nav#menu_nav { + display: block; + } + } + } + .body_container { + width: 100%; + height: 100%; + .column_nav { + width: 14%; + height: 100%; + color: white; + margin-top: 30px; + float: left; + :hover { + cursor: pointer; + } + .selected_option { + background-color: #2c2e27; + border-radius: 20%; + } + .column_nav_img { + width: 80px; + display: flex; + flex-direction: column; + text-align: center; + padding: 18px; + } + } + .section_contents { + display: flex; + flex-direction: column; + // float: left; + width: 80%; + margin-top: 50px; + .select_tag { + display: flex; + flex-direction: row; + color: white; + gap: 15px; + .tag_name { + display: flex; + justify-content: center; + align-items: center; + + width: 10%; + height: 40px; + padding: 5px; + font-size: 12px; + + border: 1px solid black; + border-radius: 10px; + background-color: rgba(58, 52, 52, 0.3); + } + :hover { + cursor: pointer; + background: #2e2e2a; + transition: all 0.3s; + } + } + .section_music_contents { + margin-top: 60px; + height: 5.0938rem; + display: flex; + div.profile_wrap { + width: 56px; + height: 56px; + border-radius: 50%; + background-image: url(/assets/img/user.jpg); + background-repeat: no-repeat; + background-size: cover; + } + div.profile_singer { + width: 56px; + height: 56px; + border-radius: 50%; + background-image: url(/assets/img/yuika.jpg); + background-repeat: no-repeat; + background-size: cover; + } + .profile_inform { + height: auto; + margin-left: 24px; + .profile_name { + font-size: 16px; + color: #aaaaaa; + padding-bottom: 8px; + } + .profile_inform_two { + display: flex; + width: 1200px; + flex-direction: row; + align-items: flex-end; + justify-content: space-between; + gap: 8px; + .again_listen { + :hover { + border-bottom: 3px solid white; + cursor: pointer; + } + span.profile_inform_text1 { + font-size: 45px; + font-weight: 700; + } + } + .more_option { + background: none; + border: 2px solid #272525; + border-radius: 25px; + padding: 16px; + color: white; + } + .more_option:hover { + cursor: pointer; + background-color: #262524; + transition: 0.3s; + } + } + } + .button_wrap { + display: flex; + flex-direction: row; + gap: 10px; + margin: 50px 0 0 10px; + .swiper-button-prev, + .swiper-button-prev2 { + position: relative; + width: 36px; + height: 36px; + background-image: url(/assets/img/previous.png); + background-repeat: no-repeat; + background-position: center; + border: 1px solid white; + border-radius: 50%; + margin-right: 20px; + } + .swiper-button-next, + .swiper-button-next2 { + position: relative; + width: 36px; + height: 36px; + background-image: url(/assets/img/next.png); + background-repeat: no-repeat; + background-position: center; + border: 1px solid white; + border-radius: 50%; + } + .swiper-button-prev::after, + .swiper-button-next::after, + .swiper-button-prev2::after, + .swiper-button-next2::after { + display: none; + } + } + } + } + //* 그 왜 하위 div 요소의 after 가상요소가 자동으로 적용되버려서 배경이 또 만들어지는지? 겹치는지? + .swiper, + .swiper2 { + float: left; + width: 100%; + height: 100%; + margin-top: 50px; + overflow: hidden; + .swiper-wrapper { + .swiper-slide { + .slider_contents { + display: flex; + gap: 40px; + .album_desc { + display: flex; + flex-direction: column; + color: white; + padding: 10px; + .album_image { + border-radius: 10px; + object-fit: contain; + } + .album_image:hover { + cursor: pointer; + opacity: 0.5; + transition: all 0.5s; + } + .album_text_one { + margin-top: 16px; + font-size: 18px; + font-weight: 600; + letter-spacing: -1px; + } + .album_text_two { + margin-top: 4px; + color: #9b9b9b; + font-size: 16px; + letter-spacing: -1px; + } + } + .singer_desc { + display: flex; + flex-direction: column; + align-items: center; + padding: 10px; + .singer_text_one { + margin-top: 16px; + font-size: 18px; + font-weight: 600; + letter-spacing: -1px; + } + .singer_text_two { + margin-top: 4px; + color: #9b9b9b; + font-size: 16px; + margin-top: 4px; + } + .album_image { + border-radius: 50%; + } + + //TODO 이미지 hover시 가상요소 하고 싶은디 뭔가 되게 많이 꼬인 느낌 + .album_image:hover { + cursor: pointer; + opacity: 0.5; + transition: all 0.5s; + } + } + } + } + } + } + } +} diff --git a/Jaehun/index.html b/Jaehun/index.html new file mode 100644 index 00000000..db660ada --- /dev/null +++ b/Jaehun/index.html @@ -0,0 +1,274 @@ + + + + + + + Youtube Music + + + + + + + +
+
+ +
+
+ +
+ + + +
+ +
+
+ +
+
+ + + +
+
+
+ +
+ +
+
홈
+
둘러보기
+
보관함
+
+
+
+
에너지 충전
+
휴식
+
운동
+
출퇴근/등하교
+
집중
+
+
+ +
+ +
+
재훈재훈
+ +
+
다시 듣기
+ +
+
+ +
+
+
+ +
+
+
+
+
+
+
+ + Sound Of Bell +

싱글 · ayaho

+
+
+ + misaki +

구독자 13.2만명

+
+
+ + Lady +

노래 · Kenshi Yonezu

+
+
+ + Stay +

노래 · BLACKPINK

+
+
+ + riria. +

구독자 40.4만명

+
+
+
+
+
+
+ + Himawari +

노래 · ado

+
+
+ + Pazi +

구독자 32명

+
+
+ + mosawo +

구독자 60.7만명

+
+
+ + Lady - Kenshi Yonezu cover by Lilpa +

릴파 lilpa · 조회수 259만회

+
+
+ + 우루 +

구독자 94.3만명

+
+
+
+
+
+ + + +
+ +
+ +
+
아래 아티스트를 좋아한다면
+ +
+
Yuika
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+ + Yuika +

구독자 60.9만명

+
+
+ + Sukidakara +

노래 · Yuika

+
+
+ + 17 +

노래 · Kenshi Yonezu

+
+
+ + koidorobou +

노래 · Yuika

+
+
+ + Yuika cover +

구독자 10만명

+
+
+
+
+
+
+ + Himawari +

노래 · ado

+
+
+ + Pazi +

구독자 32명

+
+
+ + mosawo +

구독자 60.7만명

+
+
+ + Lady - Kenshi Yonezu cover by Lilpa +

릴파 lilpa · 조회수 259만회

+
+
+ + 우루 +

구독자 94.3만명

+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/README.md b/README.md index cc6a3b23..a6491005 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,60 @@ -[참고 내용] +### 유튜브 뮤직 웹페이지 클론 코딩 -👀 자신이 원하는 사이트 레이아웃 클론 -원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요. -평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요. -과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! +--- -과제 수행 및 제출 방법 +> 링크 -1. 현재 저장소를 로컬에 클론(Clone)합니다. -2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름) -3. 자신의 본명 브랜치에서 과제를 수행합니다. -4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름) -5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름) +원본 페이지: 원본 사이트 +- 로그인이 되어있어야 될려나요..? -- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요! -- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요! -- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요! -- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요! +클론 홈페이지 : 클론 사이트 -필수 요구사항 +##### 제작기간: 07-25 日 ~ 07-28 日 -- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요! -- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! -- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! -- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. +### 사용 기술 -선택 요구사항 +1. HTML +2. CSS +3. Swiper JS (CDN으로 사용) -- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요. -- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요. -- 부분적으로 BEM 방법론을 도입해보세요. -- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!) -- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요) +--- -손쉬운 이미지 추출 방법 +### 개발 사항 -사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요. +1. PC 레이아웃 적용 -1. 원하는 사이트 접속 -2. Image Downloader 확장 프로그램 실행 -3. 다운로드 원하는 이미지 선택 -4. 서브 폴더 이름(Save to subfolder) 명시 -5. 다운로드! +2. 약간의 디자인 추가 + +3. 메뉴바 미구현 및 기기에 연결 아이콘 미구현 + +4. 프로필 hover 시, 보이는 부분 깨짐 + +5. 왼쪽 nav 화면 약간 깨짐 + +6. 검색창 태그 디자인 + +7. 슬라이더 컴포넌트 구현 밑에 더 있지만 중복 컴포넌트라 제외함. + +**이 부분이 약간 뭔가 불편했음** _하나의 컴포넌트로 만들려면?_ + +--- + +### 개선 사항 + +1. 반응형 및 미구현 항목 개선 + +2. 요소 컴포넌트화 후 전체 페이지 제작 + +3. 검색창 기능 및 페이지 링크 이동 후 페이지 제작 + +4. SCSS 좋긴 좋은데, 뭔가 하다보니 너무 난잡해짐. 정리 안됨. + +5. Swiper 부분 커스터마이징 부족. 찾아볼 것 + +### 참고 사이트 + +1. 첫번째 블로그 - Swiper 버튼 관련 +2. Swiper 공식 사이트 +3. SCSS 적용기 + ...