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
76 changes: 9 additions & 67 deletions css/adBanner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,82 +4,24 @@
---------------------------------------
*/

.adBanner {
width: 130.4rem;
margin: 0rem auto 6rem;
}

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. 변경 내용
    margin 0 rem;에서 rem 단위 제거

  2. 발생 오류
    가운데 정렬을 하기 위해서 불필요한 CSS 요소를 사용

  3. 해결 과정
    상위 Section에 width : 75%를 부여함으로써 불필요한 CSS 정렬 요소들 제거

  4. 리뷰 관련
    padding과 margin은 각각 필요한 곳에서만 사용해야 한다는 방법론을 배움

.mySwiper7 {
position: relative;
overflow: hidden;
width: 130.4rem;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
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. 변경 내용
    중복 class 제거 및 class 이름 정렬

  2. 발생 오류
    단순 반복이라는 의미로 class 이름을 의미 없이 숫자로 정함

  3. 해결 과정
    중복되는 swiper 기능을 main.css로 묶고 필요한 기능들에만 bem 방식을 활용하여 class Naming 규칙을 활용

  4. 리뷰 관련
    .


.mySwiper7 .swiper-wrapper {
width: 100%;
height: 100%;
.ad__banner {
display: flex;
box-sizing: content-box;
position: relative;
}
flex-direction: column;
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.

  1. 변경 내용
    불필요한 CSS 요소들 제거

  2. 발생 오류
    정렬을 하기 위해서 사용한 CSS요소들이 중복되고 의미 없는 코드로 존재

  3. 해결 과정
    반복되는 swiper 기능을 main.css로 묶고 부모 요소에서 너비를 퍼센트로 다룸으로써 불필요한 CSS 요소들 삭제, box-sizing과 같은 불필요한 기능을 가진 CSS 선택자들 모두 제거

  4. 리뷰 관련
    .


.mySwiper7 .swiper-wrapper .swiper-slide .element__image {
width: 100%;
height: 100%;
}

.mySwiper7 .swiper-wrapper .swiper-slide .element__image img {
object-fit: cover;
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. 변경 내용
    image tag 에서 중복되는 요소들을 main.css에 정리하고 class Naming 규칙을 통해 코드를 변경

  2. 발생 오류
    불필요하게 길어진 코드와 해당 태그에서는 필요가 없는 object-fit 속성을 사용하였음

  3. 해결 과정
    main.css에 image 관련 중복 요소를 다루는 기능을 마련하여 불필요한 코드를 제거

  4. 리뷰 관련
    .

border: 1px solid #eee;
box-sizing: border-box;
background-color: #999;
}

.adBanner .shopping__content {
width: auto;
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. 변경 내용
    width : auto; 프로퍼티 삭제

  2. 발생 오류
    기본 값을 CSS 프로퍼티로 기입하였음

  3. 해결 과정
    해당 CSS Property 삭제

  4. 리뷰 관련
    CSS를 통해서 정렬을 구사할 때 확실하게 정렬하는 법을 숙지하여 width:auto와 같은 아예 불필요한 코드를 다시는 사용하지 않도록 주의해야 함

position: relative;
}

.adBanner .shopping__content .right-btn-seven {
position: absolute;
right: 0;
z-index: 50;
top: 50%;
z-index: 31;
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. 변경 내용
    z-index가 반복되는 불필요한 요소를 제거하고 너무 큰 z-index를 수정

  2. 발생 오류
    z-index가 두 번 선언되어 불필요한 코드 발생, 너무 큰 값의 z-index로 파악이 어려워지는 문제 발생 가능성 증가

  3. 해결 과정
    z-index 를 삭제하였고 중복되는 button과 관련된 요소들을 main.css에서 정리하여 불필요한 코드의 사용을 줄임

  4. 리뷰 관련
    .

width: 4.8rem;
height: 4.8rem;
margin-top: -1.5rem;
transform: translateX(50%);
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. 변경 내용
    margin-top : -1.5rem과 같은 하드 코딩 요소들을 전부 제거하고 퍼센트를 사용하여 배치

  2. 발생 오류
    가운데 오게 하기 위해 고정된 뷰포트에서만 작용하는 하드 코딩 요소를 사용하였음.

  3. 해결 과정
    중복되는 버튼을 main.css에서 정리하고 top에 퍼센트를 부여하고 tranformY를 통해 중심 축을 변경하여 정확히 가운데 위치하도록 변경하였음

  4. 리뷰 관련
    정확히 가운데 위치하는 방법을 숙지하여 앞으로 요소를 absolute로 배치할 때 문제 없이 진행할 수 있음

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);
align-items: center;
justify-content: center;
border-radius: 10rem;
}

.adBanner .shopping__content .right-btn-seven::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;
.ad__container {
width: 100%;
height: 100%;
}

.ad__item--image-container {
width: 100%;
height: 100%;


.adBanner .shopping__bottom {
position: relative;
overflow: hidden;
}

.adBanner .shopping__bottom > button {
position: absolute;
bottom: -8.5rem;
}
10 changes: 7 additions & 3 deletions css/bookBanner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
flex-direction: column;

width: 100%;
height: 90%;
height: 80%;

position: relative;
}

.book__container {
width: 100%;
height: 100%;
height: 80%;

margin: 0 auto;
}
Expand All @@ -31,7 +31,7 @@

.book__item--image-container {
width: 100%;
height: 70%;
height: 90%;

border: 0.03rem solid gainsboro;
box-sizing: border-box;
Expand Down Expand Up @@ -72,3 +72,7 @@
font-size: 1.1rem;
font-weight: 300;
}

.book__section {
transform: translateY(-150%);
}
84 changes: 42 additions & 42 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1273,7 +1273,7 @@ <h1 class="banner--title-top">오늘의 도서</h1>
</div>
</div>
<button class="book__button--right right-btn"></button>
<div class="section__bottom">
<div class="book__section section__bottom">
<button class="bottom--button">독서 홈 바로가기 ></button>
</div>
</div>
Expand All @@ -1287,148 +1287,148 @@ <h1 class="banner--title-top">이벤트</h1>
<div class="ad__container swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad01.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad02.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad03.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad04.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad05.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad06.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad07.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad08.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad09.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad10.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad11.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad12.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad13.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad14.png" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad15.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad16.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad17.png" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad18.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad19.jpg" alt />
</div>
</a>
</div>
<div class="swiper-slide">
<a class="item--block" href="javascript:void(0)">
<div class="shopping__item--image-container">
<a class="ad__item--block item--block" href="javascript:void(0)">
<div class="ad__item--image-container">
<img class="slide__image" src="./assets/image/ad/ad20.png" alt />
</div>
</a>
</div>
</div>
</div>
<button class="right-btn-seven"></button>
<button class="ad__button--right right-btn"></button>
</div>
</section>
</div>
Expand Down
4 changes: 2 additions & 2 deletions js/script.js
View file
Open in desktop
Copy link
Author

@LikeFireAndSky LikeFireAndSky Aug 9, 2023

Choose a reason for hiding this comment

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

수정한 코드

Intersection Observer API를 활용해서 배너들이 뷰포트의 30%이상을 넘기면 fade in 효과를 적용해보았습니다.
API를 활용하는데 있어서 큰 어려움은 없었습니다.

하지만 관련 내용을 찾아보던 중 intersection observer api를 사용하면 scroll에 따른 user의 log를 볼 수 없다는 것을 알 수 있었습니다. 소비자 데이터를 수집하는 관점에서는 아직 intersection observer api를 사용하기에는 어렵다는 것을 알 수 있었습니다. 따라서 UI적으로 사용하는 관점에서는 사용을 해도 무방하나, 쇼핑몰 같은 소비자의 정보 log를 얻어야 하는 웹사이트에서는 기존의 scoll effect를 구현해야 한다는 것을 알 수 있었습니다.

Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,8 @@ var swiper7 = new Swiper('.ad__container', {
clickable: true,
},
navigation: {
prevEl: '.left-btn-seven',
nextEl: '.right-btn-seven',
prevEl: '.ad__button--left',
nextEl: '.ad__button--right',
},
});

Expand Down