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
145 changes: 65 additions & 80 deletions css/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,115 +4,101 @@
---------------------------------------
*/

.footer-main {
margin: 3rem auto 0;
padding: 0;
background-color: #fff;
box-sizing: border-box;
.footer__container {
margin-top: 5%;

display: flex;
flex-direction: column;

width: 100%;
height: 100%;

background-color: #f2f2f2;
}

.footer__banner {
max-width: none;
height: 5rem;
margin-top: 0;
border-top: 0.1rem solid rgba(0,0,0,.1);
border-bottom: 0.1rem solid rgba(0,0,0,0.1);
margin: 0 auto 0.4rem;
text-align: center;
display: flex;
flex-direction: column;

width: 100%;

border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);

background-color: aquamarine;
}

.footer__banner .footer__banner--list {
max-width: 128rem;
margin:0 auto;
.footer__banner--list {
display: flex;
align-items: center;
justify-content: space-between;
height: 5rem;
}

.footer__banner .footer__banner--list > li {
padding: 0 3.1rem;
position: relative;
display: inline-flex;
align-items: center;
height: 100%;
box-sizing: border-box;
padding-left: 0;
line-height: 1.7rem;
width: 75%;

margin: 0 auto;

font-size: 0.8rem;
line-height: 3rem;
background-color: bisque;
}

.footer__banner .footer__banner--list > li span {
.footer__banner--item {
position: relative;
display: block;

white-space: nowrap;
background-color: violet;
}

.footer__banner .footer__banner--list > li:first-child span:before,
.footer__banner .footer__banner--list > li:last-child span:before,
.footer__banner .footer__banner--list > li:nth-last-child(2) span:before,
.footer__banner .footer__banner--list > li:nth-last-child(3) span:before {
position: absolute;
:where(.footer__banner--title-modal)::before {
display: block;
width: 3rem;
height: 0.6rem;
content: '';
top: 30%;
right: -2.5rem;
z-index: 101;
background-image: url("../assets/image/under.svg");

width: 0.7rem;
height: 0.6rem;

position: absolute;
right: -30%;
top: 50%;
transform: translateY(-50%);
z-index: 1;

background-image: url('../assets/image/under.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
Comment on lines 51 to 65
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. 변경 내용
    반복되는 요소들에 공통적인 CSS 프로퍼티를 주기 위해 where 선택자를 이용

  2. 발생 오류
    해당되는 자식 선택자들에 대한 선택적인 CSS 프로퍼티를 주기 위해 중복되는 코드들이 사용되어 가독성이 매우 떨어짐

  3. 해결 과정
    피드백을 통해 Where이라는 가상요소 선택자를 활용해서 구현

  4. 리뷰 관련
    비록 이번 코드에서는 태그 선택자를 사용하지 않기 위해 각 모달창을 구현해야 하는 요소들의 클래스를 다르게 줌으로써 구현을 했지만 where이라는 가상요소 선택자에 대해서 알 수 있었음. 중복되는 h1, h2, p 같은 태그들을 사용해야 하는 경우가 온다면 where을 통해 가독성 높은 코드를 구현해보고자 함


.footer__banner--list > li:first-child span:hover + .hover-menu-footer {
display: block;
}

.footer__banner--list > li:last-child span:hover + .hover-menu-footer {
.hover__menu.show {
display: block;
}

.footer__banner--list > li:nth-last-child(2) span:hover + .hover-menu-footer {
display: block;
}
.hover__menu {
display: none;

.footer__banner--list > li:nth-last-child(3) span:hover + .hover-menu-footer {
display: block;
}
padding: 0.9rem 1.2rem;

.hover-menu-footer {
display: none;
position: absolute;
right: -0.8rem;
width: 10rem;
top: 4.7rem;
padding: 1rem 1.5rem;
top: 80%;
right: -30%;
z-index: 2;

background: #fff;
box-shadow: 0 0 1.6rem rgba(0,0,0,.2);
border-radius: 1.4rem;
z-index: 1000;
justify-content: center;
align-items: center;
border-radius: 0.5rem;
box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.2);
}

.hover-menu-footer ul {
.hover__menu--wrapper {
display: flex;
padding-top: 0.9rem;
flex-direction: column;
justify-content: center;
align-items: center;
}
align-items: start;

.hover-menu-footer ul .me {
display: block;
text-align: left;
margin-bottom: 1rem;
line-height: 1.8rem;
margin: 0 auto;

line-height: 1.6rem;
white-space: nowrap;
cursor: pointer;
}

.footer__banner .footer__banner--list .list--item:not(:first-child)::before{
.footer__banner .footer__banner--list .list--item:not(:first-child)::before {
position: absolute;
top: 50%;
left: -2.7rem;
Expand All @@ -124,15 +110,15 @@
width: 0.1rem;
height: 1.2rem;
vertical-align: middle;
background-color: rgba(0,0,0,.3);
background-color: rgba(0, 0, 0, 0.3);
}

.footer__info {
max-width: 128rem;
padding: 0 0 5rem;
margin: 0 auto;
text-align: center;
color: hsla(0, 0%, 7%, .5);
color: hsla(0, 0%, 7%, 0.5);
font-size: 1.1rem;
}

Expand All @@ -155,15 +141,15 @@
}

.footer__info--content .footer__box:last-child::after {
content: "";
content: '';
display: block;
position: absolute;
left: 50%;
top: 0;
width: 0.1rem;
height: 100%;
margin-left: -0.05rem;
background-color: rgba(0,0,0,.08);
background-color: rgba(0, 0, 0, 0.08);
}
.footer__info--content .footer__box h2 {
margin-right: 1rem;
Expand All @@ -179,7 +165,6 @@
text-align: left;
}


.footer__content--address {
max-width: none;
margin: 0;
Expand All @@ -195,7 +180,7 @@
}

.footer__content--address ul li a {
color:blue;
color: blue;
text-decoration: underline;
}

Expand Down Expand Up @@ -245,4 +230,4 @@
display: flex;
text-align: start;
align-items: start;
}
}
2 changes: 1 addition & 1 deletion css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

html {
height: 100%;
height: 600%;

font-size: 16px;
box-sizing: border-box;
Expand Down
82 changes: 41 additions & 41 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1433,64 +1433,64 @@ <h1 class="banner--title-top">이벤트</h1>
</section>
</div>
</main>
<footer style="display: none" class="footer-main">
<footer class="footer__container">
<div class="footer__banner">
<ul class="footer__banner--list">
<li class="list--item">
<span>회사소개</span>
<div class="hover-menu-footer">
<ul>
<li class="me"><b></b>인터파크트리플</li>
<li class="me"><b></b>인터파크커머스</li>
<li class="footer__banner--item">
<span class="footer__banner--title-modal">회사소개</span>
<div class="hover__menu">
<ul class="hover__menu--wrapper">
<li class="hover__menu--item"><b></b>인터파크트리플</li>
<li class="hover__menu--item"><b></b>인터파크커머스</li>
</ul>
</div>
</li>
<li class="list--item">
<span>이용약관</span>
<li class="footer__banner--item">
<span class="footer__banner--title">이용약관</span>
</li>
<li class="list--item">
<span style="font-weight: 700">개인정보 처리 방침</span>
<li class="footer__banner--item">
<span class="footer__banner--title" style="font-weight: 700">개인정보 처리 방침</span>
</li>
<li class="list--item">
<span>위치기반서비스 이용약관</span>
<li class="footer__banner--item">
<span class="footer__banner--title">위치기반서비스 이용약관</span>
</li>
<li class="list--item">
<span>분쟁해결기준</span>
<li class="footer__banner--item">
<span class="footer__banner--title">분쟁해결기준</span>
</li>
<li class="list--item">
<span>여행약관</span>
<li class="footer__banner--item">
<span class="footer__banner--title">여행약관</span>
</li>
<li class="list--item">
<span>여행자 보험 가입안내</span>
<li class="footer__banner--item">
<span class="footer__banner--title">여행자 보험 가입안내</span>
</li>
<li class="list--item">
<span>공지사항</span>
<div class="hover-menu-footer">
<ul>
<li class="me"><b></b>인터파크트리플</li>
<li class="me"><b></b>인터파크커머스</li>
<li class="footer__banner--item">
<span class="footer__banner--title-modal">공지사항</span>
<div class="hover__menu">
<ul class="hover__menu--wrapper">
<li class="hover__menu--item"><b></b>인터파크트리플</li>
<li class="hover__menu--item"><b></b>인터파크커머스</li>
</ul>
</div>
</li>
<li class="list--item">
<span>고객센터</span>
<div class="hover-menu-footer">
<ul>
<li class="me"><b></b>투어 고객센터</li>
<li class="me"><b></b>티켓 고객센터</li>
<li class="me"><b></b>쇼핑 고객센터</li>
<li class="me"><b></b>도서 고객센터</li>
<li class="footer__banner--item">
<span class="footer__banner--title-modal">고객센터</span>
<div class="hover__menu">
<ul class="hover__menu--wrapper">
<li class="hover__menu--item"><b></b>투어 고객센터</li>
<li class="hover__menu--item"><b></b>티켓 고객센터</li>
<li class="hover__menu--item"><b></b>쇼핑 고객센터</li>
<li class="hover__menu--item"><b></b>도서 고객센터</li>
</ul>
</div>
</li>
<li class="list--item">
<span>Language</span>
<div class="hover-menu-footer">
<ul>
<li class="me"><b></b>Korean</li>
<li class="me"><b></b>English</li>
<li class="me"><b></b>Japanese</li>
<li class="me"><b></b>Chinese</li>
<li class="footer__banner--item">
<span class="footer__banner--title-modal">Language</span>
<div class="hover__menu">
<ul class="hover__menu--wrapper">
<li class="hover__menu--item"><b></b>Korean</li>
<li class="hover__menu--item"><b></b>English</li>
<li class="hover__menu--item"><b></b>Japanese</li>
<li class="hover__menu--item"><b></b>Chinese</li>
</ul>
</div>
</li>
Expand Down
20 changes: 19 additions & 1 deletion 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 @@ -129,7 +129,7 @@ var swiper7 = new Swiper('.ad__container', {

window.addEventListener('scroll', function () {
var header = document.querySelector('.fixed-header');
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var scrollTop = document.documentElement.scrollTop;

if (scrollTop > 100) {
// 특정 위치(여기서는 100px) 아래로 스크롤했을 때
Expand All @@ -138,3 +138,21 @@ window.addEventListener('scroll', function () {
header.style.top = '-100px'; // 헤더를 숨기도록 설정
}
});

document.querySelectorAll('.footer__banner--title-modal').forEach(function (el, index) {
el.addEventListener('mouseover', function () {
document.querySelectorAll('.hover__menu')[index].classList.add('show');
});
Comment on lines 142 to 155
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. 발생 오류
    모달창에 마우스가 도달 할 수 가 없는 문제가 발생, hover을 통해서만 구현을 해서 모달창 구현이 안됨.

  3. 해결 과정
    수업 시간에 배운 classList.add() 기능을 활용해서 모달창에 마우스가 도달할 수 있도록 문제를 해결. 처음에 container 기준으로 속성을 부여하지 않아서 li tag 상단으로 넘어갈 경우 모달창이 사라지지 않는 문제가 발생하여 이를 해결함

  4. 리뷰 관련
    JS 요소를 다룰 때 특히 모달창을 구현하는 경우 mouseover 요소와 mouseleave 요소가 적용되는 범위를 파악하는 것이 중요하다는 것을 배울 수 있었음

});

document.querySelectorAll('.hover__menu').forEach(function (el, index) {
el.addEventListener('mouseleave', function () {
el.classList.remove('show');
});
});

window.addEventListener('mouseleave', function () {
this.document.querySelectorAll('hover__menu').forEach(function (el) {
el.classList.remove('show');
});
});