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
84 changes: 3 additions & 81 deletions css/evntBanner.css
View file
Open in desktop
Copy link

@minsoo-web minsoo-web Aug 1, 2023

Choose a reason for hiding this comment

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

복붙 수준으로 비슷한 코드라 개선의 여지가 너무 많네요
반복되어 사용되는 CSS를 클래스로 뽑아서 개선해보세요!

Copy link
Author

@LikeFireAndSky LikeFireAndSky Aug 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

수정한 코드

복붙 수준으로 비슷한 코드들이 생긴 문제에 대해서 생각을 해 보았을 때 가장 먼저 설계 없이 바로 제작을 하다 보니 이렇게 더러운 코드가 나온 것 같습니다. 리펙토링을 하면서 중복된 코드들을 main.css에 정리하여 수정했더니 코드가 비교적 깔끔하게 정렬되는 결과를 불러일으킬 수 있었습니다.

이렇게 리펙토링을 하면서 한 가지 궁금한 점은 CSS를 정리할 때 비교적 많은 경우로 Section별로 정리하는 레퍼런스들이 많았습니다. CSS를 정리할 때 기능별로 묶어서 정리를 하는 것이 나은 지, 아니면 Section별로 정리하는 것이 나은 지 궁금합니다!!

Copy link

@minsoo-web minsoo-web Aug 8, 2023

Choose a reason for hiding this comment

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

기능별로 css를 하는 건 잘 없죠..?! 어떤 영역에 어떻게 보여줄지가 css의 역할이니까 section 별로 정리하는 게 관리하기 편합니다.

Original file line number Diff line number Diff line change
Expand Up @@ -4,88 +4,10 @@
---------------------------------------
*/

.event__b {
position: relative;
}

.swiper-container {
.event__banner {
width: 100%;
height: auto;
border-radius: 7px;
overflow: hidden;
position: relative;
}

.swiper-slide {
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
}
margin-top: 2rem;

.swiper-slide img {
border-radius: 1.5rem;
width: 100%;
object-fit: cover;
}

.left-btn {
position: absolute;
left: -4.65rem;
z-index: 50;
top: 42%;
z-index: 31;
width: 4.8rem;
height: 4.8rem;
margin-top: -1.5rem;
transform: translateX(50%) scaleX(-1);
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;
}

.left-btn::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;
}

.right-btn {
position: absolute;
right: 0;
z-index: 50;
top: 42%;
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;
}

.right-btn::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;
position: relative;
}
24 changes: 11 additions & 13 deletions css/liveBanner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@
---------------------------------------
*/


.liveBanner {
width: 130.4rem;
Copy link

@minsoo-web minsoo-web Aug 1, 2023

Choose a reason for hiding this comment

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

130.4rem이 지금 전체적으로 엄청 많이 쓰이고 있자나요,
이럴 때는 width를 주고 가운데 배치를 하기 보다는, 부모에게 padding을 주고 자식은 width: 100%로 처리하는 것도 방법입니다.

Copy link
Author

@LikeFireAndSky LikeFireAndSky Aug 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

수정한 코드

모든 Section들의 너비를 맞추기 위해서 하드 코딩을 했었습니다. 이에 따라 모니터의 크기가 조금이라도 달라지면 글씨가 깨지고 요소들이 엉망이 되었습니다. 이에 피드백을 통해 위 내용을 구현해보고 다르게 생각해본 방법으로 부모 요소에게 width:100 요소를 부여하고 자식 요소에게 width : 75%를 부여하였습니다. 그러다 보니 HTML에도 width를 부여해야 했던 것 같습니다. 두 가지 요소를 모두 써보면서 말씀해주신 방법으로 만드는 것이 훨씬 편하고 직관적이라는 것을 알 수 있었습니다.

margin: 6rem auto;
}

.liveBanner .shopping__title .live-img{
.liveBanner .shopping__title .live-img {
width: 16rem;
}

Expand Down Expand Up @@ -59,7 +58,7 @@
right: 0;
top: 0;
bottom: 0;
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%);
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 {
Expand Down Expand Up @@ -87,7 +86,7 @@
height: 100%;
display: flex;
color: #fff;
background-color: rgba(0,0,0,0.5);
background-color: rgba(0, 0, 0, 0.5);
flex-direction: column;
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -117,7 +116,7 @@
font-size: 1.3rem;
line-height: 3.2rem;
color: #fff;
background-color: rgba(0,0,0,0.5);
background-color: rgba(0, 0, 0, 0.5);
border-radius: 1.6rem;
font-weight: 700;
}
Expand All @@ -128,7 +127,7 @@
text-align: start;
color: #fff;
font-weight: 700;
text-shadow: 0 0 0.2rem rgba(0,0,0,0.5);
text-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.5);
}

.mySwiper5 .live__bottom--info {
Expand Down Expand Up @@ -180,8 +179,8 @@
position: absolute;
display: flex;
top: 3.9rem;
font-size : 1.5rem;
line-height: 2.0rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
}

Expand Down Expand Up @@ -215,7 +214,6 @@
height: 4rem;
transform: scaleX(-1);
margin-bottom: 0.7rem;

}

.up-sit {
Expand Down Expand Up @@ -253,8 +251,8 @@
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,.13);
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;
Expand All @@ -266,7 +264,7 @@
width: 3.8rem;
height: 4rem;
margin-left: 0.3rem;
background-image: url("../assets/image/right-arrow.svg");
background-image: url('../assets/image/right-arrow.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
Expand All @@ -279,4 +277,4 @@
.liveBanner .shopping__bottom > button {
position: absolute;
bottom: -7.5rem;
}
}
79 changes: 79 additions & 0 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,9 @@ input:focus {
outline: none;
}

/* ---------------------------------------
SWIPER CSS
--------------------------------------- */
.main__wrapper {
width: 75%;

Expand All @@ -75,6 +78,82 @@ input:focus {
cursor: pointer;
}

.swiper-container {
width: 100%;

overflow: hidden;
}

.swiper-slide {
display: flex;
align-items: center;
}

.slide__image {
width: 100%;
border-radius: 0.7rem;
object-fit: cover;
}
.left-btn {
width: 3rem;
height: 3rem;

position: absolute;
top: 50%;
left: 0;
z-index: 1;

transform: translate(-50%, -50%) rotateY(180deg);

border-radius: 10rem;
background: hsla(0, 0%, 100%, 0.8);
border: 0.1rem solid rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.13);
}
Comment on lines +81 to +144
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.

  1. 변경 내용
    중복되는 swiper 기능을 main.css에 취합

  2. 발생 오류
    모든 swiper가 사용되는 section에 swiper 관련 css가 중복되어서 사용되었고 코드의 이름들이 지저분해 짐.

  3. 해결 과정
    피드백을 통해 알았던 문제들과 수업에서 배운 지식을 활용해 최대한 겹치는 css는 따로 class를 만들어 main.css에서 관리, 기능별로 나누어 중복되는 코드들을 최대한 정리

  4. 리뷰 관련
    해당 작업을 통해 CSS파일이 상당히 줄었음. 항상 웹 페이지를 만들 때 무조건 만들고 시작하는 것이 아니라 구상을 다 끝마치고 하나하나 시작해야 된다는 것을 배움


.left-btn::before {
width: 0.8rem;
height: 0.5rem;

content: '다음';
color: transparent;

background-image: url('../assets/image/right-arrow.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

.right-btn {
width: 3rem;
height: 3rem;

position: absolute;
top: 50%;
right: 0;
z-index: 1;

transform: translate(50%, -50%);

border-radius: 10rem;
background: hsla(0, 0%, 100%, 0.8);
border: 0.1rem solid rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.13);
}

.right-btn::before {
width: 0.8rem;
height: 0.5rem;

content: '다음';
color: transparent;

background-image: url('../assets/image/right-arrow.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

@media (max-width: 800px) {
html {
font-size: 14px;
Expand Down
Loading