Skip to content

Commit

Permalink
Merge pull request #5 from DO-SOPT-WEB/week2-picbooth
Browse files Browse the repository at this point in the history 
[1μ£Όμ°¨ 심화 + 2μ£Όμ°¨ κΈ°λ³Έ/심화/생각] λ‹€ν˜„μ΄μ˜ 사진관
  • Loading branch information
@moondda
moondda authored Dec 15, 2023
2 parents 273053b + c5aa142 commit f4694dd
Show file tree
Hide file tree
Showing 4 changed files with 309 additions and 50 deletions.
160 changes: 127 additions & 33 deletions 1μ£Όμ°¨/3.μ›¨λΉ„μ˜ 사진관/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,48 +8,139 @@
</head>
<body>
<header class="main-title" id="head">λ‹€ν˜„μ΄μ˜ 유럽 뿌수기πŸ‡ͺπŸ‡ΊβœˆοΈ</header>

<section class="img-preview">
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-07 004.jpeg"
alt="μˆ™μ†Œμ—μ„œ λ³Έ 포λ₯΄νˆ¬κ°ˆ"
/>
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-09 022.jpeg"
alt="관광객듀 사진 μ°μ–΄μ£ΌλŠ” λ‹€ν˜„μ΄"
/>
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-41 013.jpeg"
alt="λ‚­λœ¨ μ•„κ²½"
/>
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-40 003.jpeg"
alt="포λ₯΄νˆ¬κ°ˆ κ³΅μ›μ—μ„œ 에그타λ₯΄νŠΈ"
/>
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-09 023.jpeg"
alt="날씨가 λ„ˆλ¬΄ μ’‹μ•˜λ˜ 포λ₯΄νˆ¬"
/>
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-41 009.jpeg"
alt="λ‚­λœ¨ λ§ˆμ§€λ§‰ λ‚  λ°€"
/>
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-40 006.jpeg"
alt="ν™”μ°½ν•œ λ‚  리슀본 κ³΅μ›μ—μ„œ"
/>
<div class="scroll-left"><</div>
<ul>
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-07 004.jpeg"
alt="μˆ™μ†Œμ—μ„œ λ³Έ 포λ₯΄νˆ¬κ°ˆ"
/>
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-09 022.jpeg"
alt="관광객듀 사진 μ°μ–΄μ£ΌλŠ” λ‹€ν˜„μ΄"
/>
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-41 013.jpeg"
alt="λ‚­λœ¨ μ•„κ²½"
/>
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-40 003.jpeg"
alt="포λ₯΄νˆ¬κ°ˆ κ³΅μ›μ—μ„œ 에그타λ₯΄νŠΈ"
/>
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-09 023.jpeg"
alt="날씨가 λ„ˆλ¬΄ μ’‹μ•˜λ˜ 포λ₯΄νˆ¬"
/>
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-41 009.jpeg"
alt="λ‚­λœ¨ λ§ˆμ§€λ§‰ λ‚  λ°€"
/>
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-40 006.jpeg"
alt="ν™”μ°½ν•œ λ‚  리슀본 κ³΅μ›μ—μ„œ"
/>
</ul>
<div class="scroll-right">></div>
</section>

<nav class="nav">
<div>πŸ“ΈβœŒοΈ ν΄λ¦­ν•˜λ©΄ μ΄λ™ν•΄μš”! ✌️ πŸ“Έ</div>
<br />
<ul>
<li><a href="#france">ν”„λž‘μŠ€&nbsp;&nbsp;</a></li>
<li><a href="#portugal">포λ₯΄νˆ¬κ°ˆ&nbsp;&nbsp;</a></li>
<li><a href="#spain">슀페인&nbsp;&nbsp;</a></li>
</ul>
<li><a href="#france">ν”„λž‘μŠ€</a></li>
<li><a href="#portugal">포λ₯΄νˆ¬κ°ˆ</a></li>
<li><a href="#spain">슀페인</a></li>
</nav>

<section class="france">
<header class="country" id="france">ν”„λž‘μŠ€ πŸ‡«πŸ‡·</header>
<div class="img-france">

<div class="each">
<img src="./pics/1013-1.jpeg" alt="λ―Έν‚€λͺ¨μ–‘ νŒ¬μΌ€μ΄ν¬ & λ§ˆμ‹œλ©œλ‘œμš°" />
<div class="hover-text">
<p>λ―Έν‚€λͺ¨μ–‘ νŒ¬μΌ€μ΄ν¬ & λ§ˆμ‹œλ©œλ‘œμš°</p>
<p>λ§›μžˆμ§€λ§Œ λ„ˆλ¬΄ λΉ„μŒŒ..</p>
<p>230110</p>
</div>
</div>
<div class="each">
<img src="./pics/1013-2.jpeg" alt="λ””μ¦ˆλ‹ˆλžœλ“œ 30μ£Όλ…„ μΌλ£¨λ―Έλ„€μ΄μ…˜" />
<div class="hover-text">
<p>λ””μ¦ˆλ‹ˆλžœλ“œ 30μ£Όλ…„</p>
<p>μΌλ£¨λ―Έλ„€μ΄μ…˜βœ¨</p>
<p>230110</p>
</div>
</div>
<div class="each">
<img src="./pics/1013-3.jpeg" alt="μ‰μ΅μŠ€ν”Όμ–΄ μ„œμ μ—μ„œ" />
<div class="hover-text">
<p>μ‰μ΅μŠ€ν”Όμ–΄ μ„œμ μ—μ„œ</p>
<p>230113</p>
</div>
</div>
<div class="each">
<img src="./pics/1013-4.jpeg" alt="파리의 μΈν˜•λ“€" />
<div class="hover-text">
<p>파리의 μΈν˜•λ“€</p>
<p>230114</p>
</div>
</div>
<div class="each">
<img src="./pics/1013-5.jpeg" alt="ν”„λž‘μŠ€ 동넀 빡집1" />
<div class="hover-text">
<p>ν”„λž‘μŠ€ 동넀 빡집</p>
<p>등ꡣ길에 항상 μ‚¬λ¨Ήμ—ˆλ‹€!</p>
<p>230120</p>
</div>
</div>
<div class="each">
<img src="./pics/1013-6.jpeg" alt="ν”„λž‘μŠ€ 동넀 빡집2" />
<div class="hover-text">
<p>ν”„λž‘μŠ€ 동넀 빡집2</p>
<p>μ—¬κΈ΄ λΉ„μ£Όμ–Όλ§Œ μ’‹μŒγ…Ž</p>
<p>230123</p>
</div>
</div>
<div class="each">
<img src="./pics/1013-7.jpeg" alt="λ””μ¦ˆλ‹ˆλžœλ“œ μ •λ¬Έμ—μ„œ" />
<div class="hover-text">
<p>λ””μ¦ˆλ‹ˆλžœλ“œ μ •λ¬Έμ—μ„œ</p>
<p>230110</p>
</div>
</div>
<div class="each">
<img src="./pics/1013-8.jpeg" alt="λ‚­λœ¨μ˜ μ•Όκ²½" />
<div class="hover-text">
<p>λ‚­λœ¨μ˜ μ•Όκ²½</p>
<p>
μ†Œλ§€μΉ˜κΈ° 쑰심해야함!! μ € κ΄‘μž₯ μ•žμ— μžˆλŠ” μœ λ‹ˆν΄λ‘œμ—μ„œλŠ” κ΄€κ΄‘κ°λ“€λ§Œ
λ…Έλ €μ„œ μ†Œλ§€μΉ˜κΈ°λ₯Ό ν•˜λŠ” μ‚¬λžŒλ“€μ΄ λ§Žλ‹€λŠ”...!!
</p>
<p>230130</p>
<button class="more-button">더보기</button>
</div>
</div>
<div class="each">
<img src="./pics/1013-9.jpeg" alt="μ—νŽ νƒ‘μ„ λ΄μ„œ μ‹ λ‚œ λ‹€ν˜„μ΄" />
<div class="hover-text">
<p>μ—νŽ νƒ‘μ„ λ΄μ„œ</p>
<p>μ‹ λ‚œ λ‹€ν˜„μ΄</p>
<p>230201</p>
</div>
</div>
<div class="each">
<img
src="./pics/KakaoTalk_Photo_2023-10-09-15-33-43 022.jpeg"
alt="였λ₯΄μ„Έ λ―Έμˆ κ΄€ κ°€λŠ” κΈΈ"
/>
<div class="hover-text">
<p>였λ₯΄μ„Έ λ―Έμˆ κ΄€</p>
<p>κ°€λŠ” κΈΈ</p>
<p>230201</p>
</div>
</div>

<img src="./pics/1013-1.jpeg" alt="λ―Έν‚€λͺ¨μ–‘ νŒ¬μΌ€μ΄ν¬ & λ§ˆμ‹œλ©œλ‘œμš°" />
<img src="./pics/1013-2.jpeg" alt="λ””μ¦ˆλ‹ˆλžœλ“œ 30μ£Όλ…„ μΌλ£¨λ―Έλ„€μ΄μ…˜" />
<img src="./pics/1013-3.jpeg" alt="μ‰μ΅μŠ€ν”Όμ–΄ μ„œμ μ—μ„œ" />
Expand Down Expand Up @@ -127,5 +218,8 @@
</section>
<div class="top-button"><a href="#head">^</a></div>
<footer>2023.01 ~ 2023.03</footer>

<script src="./script.js"></script>

</body>
</html>
70 changes: 70 additions & 0 deletions 1μ£Όμ°¨/3.μ›¨λΉ„μ˜ 사진관/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
const topButton = document.querySelector(".top-button");

// νŽ˜μ΄μ§€λ₯Ό μŠ€ν¬λ‘€ν•  λ•Œ 이벀트λ₯Ό μˆ˜μ‹ ν•˜μ—¬ Top λ²„νŠΌμ˜ 뢈투λͺ…도λ₯Ό μ‘°μ ˆν•©λ‹ˆλ‹€.
window.addEventListener("scroll", () => {
const scrollPosition = window.scrollY;
const opacity = Math.min(1, scrollPosition / 300); // 슀크둀 μœ„μΉ˜μ— 따라 뢈투λͺ…도λ₯Ό 쑰절
topButton.style.opacity = opacity.toString();
});

// Top λ²„νŠΌμ„ 클릭할 λ•Œ νŽ˜μ΄μ§€ μƒλ‹¨μœΌλ‘œ μŠ€ν¬λ‘€ν•©λ‹ˆλ‹€.
topButton.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});

const allEachElements = document.querySelectorAll(".each");

allEachElements.forEach((each) => {
const hoverText = each.querySelector(".hover-text");

hoverText.style.opacity = "0";
each.addEventListener("mouseenter", () => {
hoverText.style.opacity = "1";
});

each.addEventListener("mouseleave", () => {
hoverText.style.opacity = "0";
});
});
//eachμ•ˆμ— ν˜Έλ²„
//ν˜Έλ²„μ•ˆμ— 더보기

// μ„ νƒμžλ₯Ό μ‚¬μš©ν•˜μ—¬ λͺ¨λ“  더보기 λ²„νŠΌμ„ κ°€μ Έμ˜΅λ‹ˆλ‹€.
const moreButtons = document.querySelectorAll(".more-button");

// λͺ¨λ“  더보기 λ²„νŠΌμ— λŒ€ν•œ 이벀트 ν•Έλ“€λŸ¬λ₯Ό λ“±λ‘ν•©λ‹ˆλ‹€.
moreButtons.forEach((moreButton) => {
moreButton.addEventListener("click", function () {
// ν˜„μž¬ 클릭된 더보기 λ²„νŠΌμ˜ λΆ€λͺ¨ μš”μ†Œλ₯Ό μ°ΎμŠ΅λ‹ˆλ‹€.
const parent = this.parentElement;

// λΆ€λͺ¨ μš”μ†Œμ—μ„œ ν•΄λ‹Ή p μš”μ†Œλ₯Ό μ°ΎμŠ΅λ‹ˆλ‹€.
const textElement = parent.querySelector("p:nth-child(2)");

// λ§μ€„μž„ν‘œλ₯Ό μ œκ±°ν•˜κ³  전체 ν…μŠ€νŠΈλ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.
textElement.style.overflow = "initial";
textElement.style.whiteSpace = "initial";
textElement.style.textOverflow = "initial";
textElement.style.webkitLineClamp = "initial";
textElement.style.wordBreak = "initial";

// 더보기 λ²„νŠΌμ„ μˆ¨κΉλ‹ˆλ‹€.
this.style.display = "none";
});
});

const imgPreview = document.querySelector(".img-preview");
const scrollLeft = document.querySelector(".scroll-left");
const scrollRight = document.querySelector(".scroll-right");

// 슀크둀 μ™Όμͺ½ λ²„νŠΌμ„ ν΄λ¦­ν–ˆμ„ λ•Œ μ‹€ν–‰λ˜λŠ” ν•¨μˆ˜
scrollLeft.addEventListener("click", () => {
// κ°€μž₯ μ™Όμͺ½ μ΄λ―Έμ§€λ‘œ 슀크둀
imgPreview.scrollLeft = 0;
});

// 슀크둀 였λ₯Έμͺ½ λ²„νŠΌμ„ ν΄λ¦­ν–ˆμ„ λ•Œ μ‹€ν–‰λ˜λŠ” ν•¨μˆ˜
scrollRight.addEventListener("click", () => {
// κ°€μž₯ 였λ₯Έμͺ½ μ΄λ―Έμ§€λ‘œ 슀크둀
imgPreview.scrollLeft = imgPreview.scrollWidth;
});
Loading

0 comments on commit f4694dd

Please sign in to comment.