Skip to content

KDT0_KimMinSeob 인터파크 홈페이지 클론코딩 #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LikeFireAndSky wants to merge 53 commits into
base: main
Choose a base branch
from
Open

KDT0_KimMinSeob 인터파크 홈페이지 클론코딩 #63

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
53 commits
Select commit Hold shift + click to select a range
9857f16
Feat: "프로젝트 시작"
IAMISTP Jul 25, 2023
bdacb96
Feat: "header view 작업"
IAMISTP Jul 26, 2023
d52cb2e
Style: "header css작업"
IAMISTP Jul 26, 2023
8f5fabe
Style: "img 추가"
IAMISTP Jul 26, 2023
42de03b
Feat: "footer view 작업 , span 태그 -> a 태그로 변경"
IAMISTP Jul 26, 2023
ae870af
Style:"index.css 분리"
IAMISTP Jul 26, 2023
5b6c632
Style:"a 태그로 수정"
IAMISTP Jul 26, 2023
3ab097d
Style:"player css 작업"
IAMISTP Jul 26, 2023
617e08f
Style: "player 에 필요한 icon 추가"
IAMISTP Jul 26, 2023
ecb18a0
Feat: "banner 구현 "
IAMISTP Jul 27, 2023
5efd897
Style: "width 값 고정 제거"
IAMISTP Jul 27, 2023
15e6aed
Style: "main css 분리"
IAMISTP Jul 27, 2023
50d8f29
Style: "Banner css "
IAMISTP Jul 27, 2023
5010ced
Style: "main 에 필요한 이미지 추가"
IAMISTP Jul 27, 2023
68ef625
Feat: "매거진 view 작업 "
IAMISTP Jul 27, 2023
86954b2
Feat: "main view 구현"
IAMISTP Jul 27, 2023
0a013aa
Style: "main css 추가"
IAMISTP Jul 27, 2023
7c6b5ba
Style: "배경색상 지정"
IAMISTP Jul 27, 2023
19589cc
Style: "메인 view 구현에 필요한 이미지 추가 , 삭제"
IAMISTP Jul 27, 2023
06e4ab1
Feat: "footer view 작업"
IAMISTP Jul 27, 2023
3c42ea2
Style: "footer css 완료"
IAMISTP Jul 27, 2023
95f944c
Style: "footer icon 추가"
IAMISTP Jul 27, 2023
4e905ba
Feat: "메인 슬라이드 기능구현_view 작업"
IAMISTP Jul 28, 2023
0f6d227
Style: "main 슬라이드 기능구현_css"
IAMISTP Jul 28, 2023
662ba1d
Feat: "main 슬라이드 기능구현_javascript"
IAMISTP Jul 28, 2023
e350f9f
Style: "슬라이드 요소 이미지 추가 , icon 추가"
IAMISTP Jul 28, 2023
6896fbe
Fix: "요소 class명 변경 , 컨텐츠 내용 변경"
IAMISTP Jul 28, 2023
0101229
Style: "메인 요소 hover 시 underline 추가"
IAMISTP Jul 28, 2023
cfa15d4
Fix: "오디오 바 view 수정"
IAMISTP Jul 28, 2023
7196516
Style: "오디오 바 스타일 설정"
IAMISTP Jul 28, 2023
0ba56a2
Feat: "오디오바 기능구현"
IAMISTP Jul 28, 2023
4becc4d
Fix: "title 명 변경"
IAMISTP Jul 28, 2023
6f54d7a
Merge pull request #51 from KDT1-FE/KDT0_hyeminpark
IAMISTP Jul 28, 2023
9458d91
Update README.md
IAMISTP Jul 28, 2023
f48751f
Dep : Add Deploy version
LikeFireAndSky Jul 28, 2023
6093214
Fix : fix Prettierrc Setting
LikeFireAndSky Aug 3, 2023
1374d8f
Fix : Fix className and CSS Style. Delete repeated Element
LikeFireAndSky Aug 4, 2023
f03a500
Fix : Fix header display and bottom nav bar
LikeFireAndSky Aug 7, 2023
4bdd5f4
Fix : Event banner Conatiner and repeated Swiper-css property
LikeFireAndSky Aug 7, 2023
8fc7595
Fix : Shopping Banner and Trip Banner with Responsive web
LikeFireAndSky Aug 7, 2023
5621db2
Fix : Movie Banner and arrange repeated css
LikeFireAndSky Aug 7, 2023
e62441b
Fix : Fix Live Banner and add responsive css property
LikeFireAndSky Aug 7, 2023
f526127
Fix : Fix book banner and add responsive css property
LikeFireAndSky Aug 7, 2023
f97a6ca
Fix : fix book banner bottom button and fix ad banner
LikeFireAndSky Aug 7, 2023
7e86fc1
Fix Footer Banner List and fix modal hovering issue
LikeFireAndSky Aug 8, 2023
c3162b0
Fix Footer Modal Button Range
LikeFireAndSky Aug 8, 2023
d3a4585
Fix : Fix Footer CSS and delete repeated css property
LikeFireAndSky Aug 8, 2023
34d16de
Fix : Header Modal Close Issue
LikeFireAndSky Aug 8, 2023
b30dbef
Fix : Header Fixed Banner
LikeFireAndSky Aug 8, 2023
b4d4e5c
Feat : Add autoplay feature and Add left button
LikeFireAndSky Aug 8, 2023
d84370c
Feat : Add Intersection Observer Feature
LikeFireAndSky Aug 9, 2023
7a9ea96
Feat : Add Intersection Observer Feature
LikeFireAndSky Aug 9, 2023
b4b2241
Feat : Add datalist Tag
LikeFireAndSky Aug 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
308 changes: 106 additions & 202 deletions css/liveBanner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,278 +3,182 @@
LIVE BANNER
---------------------------------------
*/
.live__banner {
display: flex;
flex-direction: column;

.liveBanner {
width: 130.4rem;
margin: 6rem auto;
width: 100%;
height: 100%;
}

.liveBanner .shopping__title .live-img {
width: 16rem;
}
.live__container {
width: 100%;
height: 80%;

.mySwiper5 {
position: relative;
overflow: hidden;
width: 130.4rem;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
}

.mySwiper5 .swiper-wrapper {
width: 100%;
height: 100%;
display: flex;
box-sizing: content-box;
position: relative;
.live__banner--live-img {
width: 10rem;
}

.mySwiper5 .swiper-wrapper > .swiper-slide {
width: 299px;
height: 45.6rem;
display: flex;
flex-direction: column;
position: relative;
border-radius: 1.2rem;
overflow: hidden;
}
.mySwiper5 .swiper-wrapper > .swiper-slide > a {
.live__banner--slide {
position: relative;
display: block;
width: 100%;
height: 100%;
}

.mySwiper5 .element__image {
.live__item--block,
.live__item--block-on,
.live__item--block-bottom {
width: 100%;
height: 100%;
border: none;
}
.mySwiper5 .element__image::after {
content: '';

.live__item--block-on::after {
display: block;

position: absolute;
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;

border-radius: 1rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 18.65%, transparent 39.75%), linear-gradient(180deg, transparent 56.75%, rgba(0, 0, 0, 0.5) 87.59%);
}

.mySwiper5 > .swiper-wrapper > .swiper-slide img {
max-width: 100%;
height: 45.6rem;
object-fit: cover;
.live__item--image-container {
width: 100%;
height: 100%;

overflow: hidden;
}

.mySwiper5 .upper--info {
position: absolute;
top: 2rem;
width: 90%;
height: fit-content;
z-index: 50;
.live__banner--upper-info {
display: flex;
flex-direction: column;
align-items: start;
padding: 0 2rem;
}

.mySwiper5 .inner--infos {
width: 80%;
position: absolute;
top: 50%;
width: 100%;
height: 100%;
display: flex;
top: 1.2rem;
z-index: 3;

font-size: 1.2rem;
font-weight: 600;
line-height: 1.8rem;

color: #fff;
background-color: rgba(0, 0, 0, 0.5);
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
top: 0;
z-index: 10;
}

.mySwiper5 .inner--infos .live-day {
.live__banner--upper-button {
text-align: center;

margin-bottom: 0.4rem;
font-size: 2.8rem;
line-height: 3.35rem;
}
padding: 0.3rem 0.5rem;

.mySwiper5 .inner--infos .live-time {
font-size: 5rem;
line-height: 6rem;
font-size: 0.8rem;
font-weight: 700;
opacity: 1;
}
line-height: 1.35rem;

.mySwiper5 .upper--info .button__broadcast {
display: block;
height: 3.2rem;
padding: 0 1.2rem;
margin-bottom: 0.8rem;
font-size: 1.3rem;
line-height: 3.2rem;
color: #fff;
border-radius: 1rem;

background-color: rgba(0, 0, 0, 0.5);
border-radius: 1.6rem;
font-weight: 700;
}

.mySwiper5 .upper--info .words--broadcast {
font-size: 2rem;
line-height: 2.4rem;
text-align: start;
color: #fff;
font-weight: 700;
text-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.5);
.live__banner--upper-content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
Comment on lines +90 to +94
Copy link
Author

@LikeFireAndSky LikeFireAndSky Aug 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경 내용
-webkit-box 변경

발생 오류
글자가 3칸 이상으로 내려올 때 해당 태그가 요소 밖으로 나가게 되는 문제가 발생

해결 과정
구글링 후 webkit-box를 통해서 문제해결

리뷰 관련
chrome과 Safari에서 사용 가능한 webkit을 사용함으로써 디자인 적인 요소를 살릴 수 있게 되었음

}

.mySwiper5 .live__bottom--info {
position: absolute;
.live__banner--inner-info {
display: flex;
justify-content: flex-start;
bottom: 2rem;
width: 100%;
height: 6.4rem;
padding: 0 2rem;
color: #fff;
box-sizing: border-box;
z-index: 100;
}

.mySwiper5 .live__bottom--info .live__image {
position: absolute;
left: 2rem;
width: 6.4rem;
height: 6.4rem;
border-radius: 0.6rem;
overflow: hidden;
}
flex-direction: column;
justify-content: center;
align-items: center;

.mySwiper5 .live__bottom--info .live__image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.mySwiper5 .live__bottom--info .live__words {
color: #fff;
position: absolute;
left: 10.4rem;
display: flex;
flex-direction: column;
align-items: start;
}
top: 0;
z-index: 2;

.mySwiper5 .live__words .live__title {
font-size: 1.4rem;
line-height: 1.8rem;
margin-bottom: 1.4rem;
text-overflow: ellipsis;
text-align: start;
}
color: #fff;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.5);

.mySwiper5 .live__words .live__subtitle {
position: absolute;
display: flex;
top: 3.9rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
}

.mySwiper5 .live__words .live__subtitle .live__sale {
color: #ef3e43;
font-size: 1.8rem;
.live__banner--inner-time {
font-size: 3.2rem;
font-weight: 700;
line-height: 4rem;
}

.mySwiper5 .live__words .live__subtitle .live__price {
.live__banner--bottom {
display: flex;
margin-left: 0.8rem;
font-size: 1.8rem;
}

.mySwiper5 .live__words .live__subtitle .live__price .live__won {
font-size: 1.6rem;
font-weight: 400;
}
.views {
position: absolute;
bottom: 1.5rem;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: #fff;
z-index: 3;
}

.view-all {
width: 4rem;
height: 4rem;
transform: scaleX(-1);
margin-bottom: 0.7rem;
}
.live__item--block-bottom {
display: flex;
flex-direction: row;
align-items: start;

.up-sit {
display: block;
margin-top: 1rem;
color: #1769ff;
border: 1px solid #1769ff;
padding: 0.3rem 1rem;
font-size: 1rem;
border-radius: 0.5rem;
margin: 0 auto;

width: 85%;
height: 100%;
}
.down-sit {
display: block;
margin-top: 1rem;
color: tomato;
border: 1px solid tomato;
padding: 0.3rem 1rem;
font-size: 1rem;
border-radius: 0.5rem;

.live__banner--bottom-image {
width: 4.4rem;
height: 4.4rem;
overflow: hidden;
}

.liveBanner .shopping__content {
width: auto;
position: relative;
.live__banner--bottom-content {
margin-top: 0.7rem;
margin-left: 1rem;

font-size: 0.9rem;
line-height: 1rem;

color: #fff;
}

.liveBanner .shopping__content .right-btn-five {
position: absolute;
right: 0;
z-index: 50;
top: 50%;
z-index: 31;
width: 4.8rem;
height: 4.8rem;
margin-top: -1.5rem;
transform: translateX(50%);
background: hsla(0, 0%, 100%, 0.9);
border: 0.1rem solid rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.13);
align-items: center;
justify-content: center;
border-radius: 10rem;
.live__banner--bottom-title {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}

.liveBanner .shopping__content .right-btn-five::before {
content: '다음';
color: transparent;
width: 3.8rem;
height: 4rem;
margin-left: 0.3rem;
background-image: url('../assets/image/right-arrow.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
.live__banner--bottom-subcontent {
margin-top: 1rem;

font-size: 1.3rem;
font-weight: 700;

color: #fff;
}

.liveBanner .shopping__bottom {
position: relative;
.live__banner--bottom-sale {
color: #ef3e43;
font-weight: 500;
}

.liveBanner .shopping__bottom > button {
position: absolute;
bottom: -7.5rem;
.live__banner--bottom-unit {
font-size: 1.2rem;
font-weight: 400;
}
3 changes: 2 additions & 1 deletion css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,10 @@ input:focus {

.slide__image {
width: 100%;
height: 100%;
border-radius: 0.7rem;

object-fit: contain;
object-fit: cover;
}

.slide__image--inner {
Expand Down
Loading