Skip to content
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

[ 2주차 기본,심화 과제 ] 웨비의 사진관 #6

Merged
merged 10 commits into from
Nov 10, 2023
Merged

[ 2주차 기본,심화 과제 ] 웨비의 사진관 #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ee7cf76
style: 이미지 호버시 효과 추가
lydiacho Oct 25, 2023
1a7b79d
setting: gallery.js 생성
lydiacho Oct 25, 2023
085a3ea
style: toTop 버튼 동적opacity
lydiacho Oct 25, 2023
a731115
feat: 더보기 버튼 (정적으로 추가한 상태)
lydiacho Oct 25, 2023
940fb0a
chore: reset.css와 style.css 적용 순서 변경
lydiacho Oct 25, 2023
fa0b184
style: preivew 양옆 화살표 추가
lydiacho Oct 27, 2023
50103e0
feat: preivew 양옆 화살표 클릭 시 이동
lydiacho Oct 27, 2023
d56a9c5
style: reset.css에 i cursor 속성 추가
lydiacho Oct 27, 2023
28d0a9c
feat: 더보기 버튼 hover 이벤트 js에서 구현
lydiacho Oct 27, 2023
869a0c9
style: preview 화살표 position 수정
lydiacho Oct 27, 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
123 changes: 99 additions & 24 deletions week2/gallery.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,28 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="galleryStyle.css" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="galleryStyle.css" />

<title>숭이의 동물원</title>
</head>
<body>
<header id="title"><h1>🤍숭이의 동물원🤍</h1></header>
<section id="preview">
<img src="./src/강아지1.jpeg" alt="강아지사진1" />
<img src="./src/고양이4.png" alt="고양이사진4" />
<img src="./src/숭이1.jpeg" alt="원숭이사진1" />
<img src="./src/강아지2.jpg" alt="강아지사진2" />
<img src="./src/고양이2.jpg" alt="고양이사진2" />
<img src="./src/숭이2.jpg" alt="원숭이사진2" />
<img src="./src/강아지3.jpg" alt="강아지사진3" />
<img src="./src/고양이3.jpeg" alt="고양이사진3" />
<img src="./src/숭이3.jpg" alt="원숭이사진3" />
</section>
<div class="preview_wrapper">
<section id="preview">
<i> 〈 </i>
<img src="./src/강아지1.jpeg" alt="강아지사진1" />
<img src="./src/고양이4.png" alt="고양이사진4" />
<img src="./src/숭이1.jpeg" alt="원숭이사진1" />
<img src="./src/강아지2.jpg" alt="강아지사진2" />
<img src="./src/고양이2.jpg" alt="고양이사진2" />
<img src="./src/숭이2.jpg" alt="원숭이사진2" />
<img src="./src/강아지3.jpg" alt="강아지사진3" />
<img src="./src/고양이3.jpeg" alt="고양이사진3" />
<img src="./src/숭이3.jpg" alt="원숭이사진3" />
<i> 〉 </i>
</section>
</div>
<nav>
<p>클릭하면 이동해요</p>
<div>
Expand All @@ -30,18 +35,87 @@
</nav>
<section id="monkey">
<header class="header"><h2>🐵 숭 🐵</h2></header>
<section>
<img src="./src/숭이1.jpeg" alt="원숭이사진1" />
<img src="./src/숭이2.jpg" alt="원숭이사진2" />
<img src="./src/숭이3.jpg" alt="원숭이사진3" />
<img src="./src/숭이4.jpg" alt="원숭이사진4" />
<img src="./src/숭이5.jpg" alt="원숭이사진5" />
<img src="./src/숭이6.jpg" alt="원숭이사진6" />
<img src="./src/숭이7.jpg" alt="원숭이사진7" />
<img src="./src/숭이8.jpg" alt="원숭이사진8" />
<img src="./src/숭이9.jpg" alt="원숭이사진9" />
<img src="./src/숭이10.jpg" alt="원숭이사진10" />
</section>
<ul>
<li class="item_card">
<img src="./src/숭이1.jpeg" alt="원숭이사진1" />
<div class="description">
<h3>빤히숭이</h3>
<p>
빤히..빤히..빤히..빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히빤히당신을
Copy link

Choose a reason for hiding this comment

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

zㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

쳐다보는 숭이
</p>
<button type="button" class="moreBtn">더보기</button>
Copy link

@se0jinYoon se0jinYoon Nov 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

오 글자수가 넘어갈 때만 html 상에서 버튼을 미리 추가해두고 시작하였군뇨
저는 동적으로 추가하려고 시도하다가 포기하고 냅다 다 추가해뒀는데 ..

</div>
</li>
<li class="item_card">
<img src="./src/숭이2.jpg" alt="원숭이사진2" />
<div class="description">
<h3>흥미롭숭이</h3>
<p>아이폰을 흥미롭게 쳐다보는 숭이</p>
</div>
</li>
<li class="item_card">
<img src="./src/숭이3.jpg" alt="원숭이사진3" />
<div class="description">
<h3>아아숭혈</h3>
<p>아이스아메리카노를 수혈하고 있는 숭이. 마치 우리 같죠?</p>
</div>
</li>
<li class="item_card">
<img src="./src/숭이4.jpg" alt="원숭이사진4" />
<div class="description">
<h3>숭러질것만같아</h3>
<p>
숭러질것만같아.. 무너질것만같아..숭러질것만같아..
무너질것만같아..숭러질것만같아.. 무너질것만같아..숭러질것만같아..
무너질것만같아.. 아침의 우리 모습
Comment on lines +69 to +71
Copy link

Choose a reason for hiding this comment

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

아 제발 ㅜ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

Copy link

Choose a reason for hiding this comment

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

하.....ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ세상에.....

</p>
<button type="button" class="moreBtn">더보기</button>
</div>
</li>
<li class="item_card">
<img src="./src/숭이5.jpg" alt="원숭이사진5" />
<div class="description">
<h3>바나나숭</h3>
<p>저 친구는 바나나 알러지 원숭이는 아닌가보네요</p>
</div>
</li>
<li class="item_card">
<img src="./src/숭이6.jpg" alt="원숭이사진6" />
<div class="description">
<h3>지금눈뜬숭</h3>
<p>지금 눈 떳어...하는 숭이.. 해가 중천이다 일어나렴</p>
</div>
</li>
<li class="item_card">
<img src="./src/숭이7.jpg" alt="원숭이사진7" />
<div class="description">
<h3>숭랑해</h3>
<p>사랑을 잔뜩 전파하고 있는 숭이. 신기하게 생겼다</p>
</div>
</li>
<li class="item_card">
<img src="./src/숭이8.jpg" alt="원숭이사진8" />
<div class="description">
<h3>지옥숭</h3>
<p>주인장이 가장 자주 사용하는 짤. 즐겁지 않아 지옥의 나날.</p>
</div>
</li>
<li class="item_card">
<img src="./src/숭이9.jpg" alt="원숭이사진9" />
<div class="description">
<h3>유혹숭</h3>
<p>나 가질래 말래? 저 눈빛을 어떻게 거절하나요 !</p>
</div>
</li>
<li class="item_card">
<img src="./src/숭이10.jpg" alt="원숭이사진10" />
<div class="description">
<h3>코코숭</h3>
<p>숭이 숭이 코코밥 ... 아띵크아일라익댓... 엑소숭이</p>
Copy link

Choose a reason for hiding this comment

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

진짜...광기다 언니...🔥

</div>
</li>
</ul>
</section>
<section id="dog">
<header class="header"><h2>🐶 멍 🐶</h2></header>
Expand Down Expand Up @@ -71,5 +145,6 @@
<footer>아무래도 숭이가 제일 귀엽죠?</footer>

<a id="toTop" href="#title">🔼</a>
<script src="gallery.js"></script>
</body>
</html>
43 changes: 43 additions & 0 deletions week2/gallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
const handleScrollPosition = () => {
const scrollPos =
window.scrollY / (document.body.clientHeight - window.innerHeight);
Copy link

Choose a reason for hiding this comment

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

현재 스크롤 위치를 전체 문서의 높이에서 화면 높이를 뺀 값으로 나눠서 0과 1사이 값을 구하고, 이걸 opacity에 넣었군요!
아니 이거 진짜 천재같아요 어떻게 이런 생각을 해 진짜...


const toTopBtn = document.querySelector("#toTop");
toTopBtn.style.opacity = scrollPos;
};

window.addEventListener("scroll", handleScrollPosition);

// hover 이벤트
const itemCard = document.querySelectorAll(".item_card");
itemCard.forEach((card, idx) => {
card.addEventListener("mouseenter", function () {
const description = document.querySelectorAll(".description")[idx];
description.style.display = "flex";
});
card.addEventListener("mouseleave", function () {
const description = document.querySelectorAll(".description")[idx];
description.style.display = "none";
});
});

// 더보기 버튼
const moreBtn = document.querySelectorAll(".moreBtn");
const handleMoreBtn = (e) => {
const descriptionParagraph = e.target.parentElement.querySelector("p");
const currentMoreBtn = e.target.parentElement.querySelector("button");
descriptionParagraph.style.overflow = "visible";
currentMoreBtn.style.display = "none";
};
moreBtn.forEach((btn) => (btn.onclick = handleMoreBtn));
Comment on lines +25 to +32
Copy link

Choose a reason for hiding this comment

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

심화과제 하다 잠시 내려두었는데... "더 보기" 버튼의 부모 요소에 이런방식으로 연결하면 되겠네요!!


// preview 화살표 버튼
const leftBtn = document.querySelector("#preview>i:first-child");
const rightBtn = document.querySelector("#preview>i:last-child");
Comment on lines +35 to +36
Copy link

Choose a reason for hiding this comment

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

특별한 css 지정을 해야하는 것은 아니니 따로 id 지정 안 하고 이렇게 하는 거 괜찮은 방법인 것 같네요 !

const preview = document.querySelector("#preview");
leftBtn.addEventListener("click", function () {
preview.scrollTo({ left: 0, behavior: "smooth" });
});
rightBtn.addEventListener("click", function () {
preview.scrollTo({ left: 999, behavior: "smooth" });
Copy link

Choose a reason for hiding this comment

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

왜 999인가요 ? 궁금궁금
저도 처음엔 적당한 큰 값을 넣었더니 스크롤이 끝까지 이동 안 하고 중간에 멈추는 문제가 발생해서 preview section의 width값을 구해서 넣어두었거든요 !

});
64 changes: 62 additions & 2 deletions week2/galleryStyle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,30 @@ html {
font-size: 2rem;
}

.preview_wrapper {
position: relative;
}

#preview {
display: flex;
align-items: center;
gap: 1rem;

padding: 1rem;

overflow: scroll;
font-size: 2rem;
}

#preview > i:first-child {
position: absolute;
left: 0;
}
#preview > i:last-child {
position: absolute;
right: 0;
}

#preview::-webkit-scrollbar {
height: 0.5rem;
}
Expand Down Expand Up @@ -79,7 +95,7 @@ a:hover {
z-index: 1;
}

#monkey section {
#monkey ul {
display: flex;
flex-wrap: wrap;
gap: 1rem;
Expand All @@ -88,13 +104,57 @@ a:hover {
padding: 2rem;
}

#monkey img {
#monkey .item_card {
position: relative;
width: 20rem;
aspect-ratio: 1/1;
flex-grow: 1;
}

#monkey img {
position: absolute;

width: 100%;
height: 100%;
object-fit: cover;
}

#monkey .description {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;

position: absolute;
width: 100%;
height: 100%;
}

#monkey .item_card:hover .description {
background-color: rgba(0, 0, 0, 0.52);
color: white;
}

#monkey .description h3 {
font-size: 1.4rem;
font-weight: bold;
}

#monkey .description p {
width: 80%;
margin-top: 1.5rem;

font-size: 1.2rem;
line-height: 1.5rem;
text-align: center;

display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
}

#dog section {
display: flex;
gap: 1rem;
Expand Down
4 changes: 4 additions & 0 deletions week2/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,3 +127,7 @@ table {
border-collapse: collapse;
border-spacing: 0;
}

i {
cursor: pointer;
}