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
21 changes: 8 additions & 13 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,12 +4,7 @@
---------------------------------------
*/

.eventBanner {
width : 130.4rem;
margin : 0 auto;
padding : 3rem 0 6rem;
align-items: center;
border: none;
.event__b {
position: relative;
}

Expand Down Expand Up @@ -46,8 +41,8 @@
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,.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 @@ -59,7 +54,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 @@ -76,8 +71,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 @@ -89,8 +84,8 @@
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;
}
}
123 changes: 70 additions & 53 deletions css/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,17 @@
*/

.header {
margin-top: 0.7rem;
padding: 0 5rem 0;

border-bottom: 0.1rem solid rgba(0, 0, 0, 0.08);
background-color: chocolate;
}

.header__wrapper {
display: flex;
flex-direction: column;

width: 75%;
margin: 1rem auto;

white-space: nowrap;
background-color: cornflowerblue;
}
Comment on lines 7 to 19
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. 변경 내용
    불필요한 코드를 없애고 하드 코딩 된 요소들을 제거

  2. 발생 오류
    padding : 0 15rem; 등과 같은 난잡한 코드들이 가독성을 저해함

  3. 해결 과정
    피드백을 통해 부모 요소에 width값을 주고 해당 요소들에 퍼센트 너비를 부여함으로써 불필요한 코드들을 제거

  4. 리뷰 관련
    padding과 margin을 남발하면 더 깊은 tag들을 관리할 때 디자인이 상당히 어려워지고 불편해지는 것을 방지하기 위해 최소한의 정렬 요소를 사용해야 한다는 것을 배움


.header__top {
Expand All @@ -26,21 +24,16 @@
justify-content: space-between;

margin-top: 1rem;
background-color: cadetblue;
}

.header__top--left {
display: flex;
align-items: center;

background-color: darkcyan;
}

.header__top--logo {
display: flex;
align-items: center;

background-color: yellow;
}

.header__top--interpark-logo {
Expand All @@ -59,28 +52,42 @@

.header__top--input {
display: flex;
position: relative;
background-color: violet;

margin-left: 1.5rem;
}

.header__top--input-text {
display: flex;
align-items: center;

width: 27.2rem;
height: 2.8rem;

position: relative;

border: 0.1rem solid rgba(0, 0, 0, 0.15);
border-radius: 2.4rem;
}

.header__top--input-space {
display: inline-block;

width: calc(100% - 4rem);

margin-left: 1rem;

background-color: transparent;
border: none;
}

.header__top--input-icon {
width: 2.8rem;
height: 1.8rem;
width: 1.3rem;
height: 1.3rem;

position: absolute;

top: 50%;
right: 0;
right: 3%;
transform: translateY(-50%);

background-image: url('../assets/image/header_search.svg');
Expand All @@ -89,31 +96,32 @@
.header__top--right {
display: flex;
align-items: center;

margin-right: 0.5%;
}

.header__top--menu {
display: flex;
gap: 1.3rem;

background-color: darkgoldenrod;
position: relative;

gap: 1.3rem;
}

.header__top--toggle-btn {
position: relative;
cursor: pointer;
}

.header__top--hover-menu {
display: block;
display: none;
justify-content: center;
align-items: center;

padding: 1.5rem 1rem;

position: absolute;
top: 170%;
right: -20%;
right: 0;

background: #fff;
box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.2);
Expand All @@ -138,71 +146,80 @@
cursor: pointer;
}

.header__top--toggle-text {
position: relative;
}

.header__top--toggle-text::before {
display: block;
content: '';

width: 3rem;
height: 0.6rem;
height: 0.5rem;

position: absolute;
right: 0;
right: -50%;
top: 35%;

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

.header-inner-bottom {
padding: 3rem 0 2rem;
.header__bottom {
margin-top: 1.5rem;
}

.header-inner-bottom nav {
.header__bottom--menu {
display: flex;
justify-content: left;
justify-content: start;
align-items: center;
}

.header-inner-bottom nav > ul {
.header__bottom--menu-item {
display: flex;
padding: 0;
margin: 0;
justify-content: start;
align-items: center;
height: 100%;

margin-right: 1.3rem;

font-weight: 600;
}

.header-inner-bottom nav > ul > li {
position: relative;
text-align: center;
margin-right: 2.2rem;
.header__bottom--menu-icon {
width: 1.8rem;
height: 1.8rem;

margin-right: 0.5rem;
}

.header-inner-bottom nav > ul > li > a {
display: flex;
align-items: center;
font-size: 1.6rem;
font-weight: 500;
color: #111;
.header__bottom--menu-icon-hot {
width: 1.4rem;
height: 1.4rem;

margin-left: 0.2rem;

background-image: url('../assets/image/icon_hot.svg');
}

.header-inner-bottom nav > ul > li:last-child a .menu-text::before {
.header__bottom--menu-event-text {
position: relative;

font-weight: 600;
}

.header__bottom--menu-event-text::before {
content: '';

width: 0.1rem;
height: 1rem;

position: absolute;
top: 50%;
left: -1.25rem;
width: 0.1rem;
height: 1.7rem;
background-color: #e5e5e5;
transform: translateY(-50%);
}
left: -0.75rem;

.header-inner-bottom nav > ul > li > a > i > img {
width: 3rem;
height: 3rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
background-color: #ededed;
transform: translateY(-50%);
}

/*
Expand Down
26 changes: 18 additions & 8 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,25 @@
*/

html {
width: 100%;
background-color: green;
height: 100%;

font-size: 16px;
box-sizing: border-box;

overflow-x: hidden;

font-family: 'Pretendard', Helvetica, 'Segoe UI', sans-serif;
}

body {
width: 100%;
display: flex;
flex-direction: column;

height: 100%;
}

main {
width: 100%;
padding: 0 5rem;
}
Comment on lines 18 to 28
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. 변경 내용
    main section을 비롯한 body tag 안에 들어가는 요소들에 대해서 부모 요소의 너비를 조정함으로써 너비를 133rem에서 퍼센트 값으로 변경

  2. 발생 오류
    본문에 너비가 133rem으로 고정되어있었기 때문에 하드 코딩이 되어있어 모니터의 크기에 따라 요소가 나오지 않거나 scroll bar가 생기는 문제가 발생

  3. 해결 과정
    부모 요소들에 퍼센트 값을 주고 해당 header와 main section에 각각 75%의 너비를 고정으로 주면서 모니터의 크기에 따라 반응하도록 코드를 수정

  4. 리뷰 관련
    모니터에 따른 UI를 구현하는 것이 무엇보다도 중요한 것을 느낌. 작은 화면으로 모니터링 했을 때 모든 글씨가 깨지는 현상이 발생하였음. 따라서 퍼센트를 활용한 유기적인 너비를 구성해야 한다는 것을 배움


button {
Expand Down Expand Up @@ -52,10 +54,18 @@ a {
margin: 0;
}

.contents {
display: flex;
flex-direction: column;
align-items: center;
img {
object-fit: contain;
}

input:focus {
outline: none;
}

.main__wrapper {
width: 75%;

margin: 0 auto;
}

.background-logo {
Expand Down
Loading