[ 2주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부

Session02 /gallery/SUMMARY.js

@@ -0,0 +1,38 @@
+export const SUMMARY =[
+    {
+        title: "내가 좋아하는 핑크 건물",
+        description: "뉴욕의 하늘을 찌를듯한 고층건물보다 이렇게 낮고 색깔 다양한 건물이 더 좋아",
+    },   
+    {
+        title: "인턴 촬영지",
+        description: "인턴은 제게 큰 울림을 준 영화인데요, 작품에서 Jules와 Ben이 커피를 픽업했던 곳에 가봤어요",
+    },   
+    {
+        title: "글씨마저 감성적이야",
+        description:"NewYork 말해 뭐해 글씨가 크면 오히려 좋아",
+    },
+    {
+        title:"내가 뉴욕에서 가장 좋아하는 곳",
+        description:"저는 뉴욕 살면서 이곳 리틀 아일랜드에 가장 많이 갔어요",
+    },
+    {
+        title:"휘트니 뮤지엄",
+        description:"임직원 찬스로 뉴욕에 있는 모마랑 뮤지엄들 많이 구경했어요 제값 안주고 볼 수 있는 방법 많으니까 꼭 홈페이지 찾아보기!",
+    },
+    {
+        title:"나의 주식",
+        description:"liberty에 가서 rainbow bagel with blueberry creamcheese를 말해보세요",
+    },
+    {
+        title:"JOE's Pizza",
+        description:"스파이더맨 영화에서 빠질 수 없는 곳이에요 Peter의 전 직장이기도 했죠?!",
+    },
+    {
+        title:"피터파커와 MJ",
+        description:"스파이더맨은 뉴욕에서 정말 많이 찍었어요. 그래서 영화를 볼 때면 뉴욕이 너무 반갑고 그리워요",
+    },
+    {
+        title:"UnitedPlatesOfAmerica",
+        description:"제가 좋아하는 그릇 가게인데요 문구가 너무 캐치해서 가져와봤어요",
+    }
+];

Session02 /gallery/album.html

@@ -33,17 +33,71 @@
     <!--category1-->
     <section class="section-1">
         <h4 id="category-1">뉴욕은 낭만이 넘치는 도시에요</h4>
+        <div class="images-1-container">
             <div class="images-1">
-                <img src="wk1/02.png" alt="핑크 건물">
-                <img src="wk1/08.png" alt="인턴 촬영지">          
-                <img src="wk1/03.png" alt="휘트니 뮤지엄">
-                <img src="wk1/04.png" alt="리틀 아일랜드">
-                <img src="wk1/05.png" alt="휘트니 뮤지엄">
-                <img src="wk1/11.png" alt="무지개 베이글">
-                <img src="wk1/09.png" alt="조 피자">
-                <img src="wk1/10.png" alt="스파이더맨">
-                <img src="wk1/01.png" alt="UnitedPlatesofAmerica">
+                <img src="wk1/02.png" alt="핑크 건물"/>
+                <div class="details">
+                    <h2>알록달록</h2>
+                    <p>뉴욕의 하늘을 찌를듯한 고층건물보다 이렇게 낮고 색깔 다양한 건물이 더 좋아</p>
+                </div>
             </div>
+            <div class="images-1">
+                <img src="wk1/08.png" alt="인턴 촬영지"/>
+                <div class="details">
+                    <h2>인턴 촬영지</h2>
+                    <p>인턴은 제게 큰 울림을 준 영화인데요, 작품에서 Jules와 Ben이 커피를 픽업했던 곳에 가봤어요</p>
+                </div>
+            </div>
+            <div class="images-1">
+                <img src="wk1/03.png" alt="휘트니 뮤지엄"/>
+                <div class="details">
+                    <h2>글씨마저 감성적이야</h2>
+                    <p>NEWYORK 글씨가 예뻐서 가져왔어요</p>
+                </div>
+            </div>          
+            <div class="images-1">
+                <img src="wk1/04.png" alt="리틀 아일랜드"/>
+                <div class="details">
+                    <h2>내가 뉴욕에서 가장 좋아하는 곳</h2>
+                    <p>저는 뉴욕 살면서 이곳 리틀 아일랜드에 가장 많이 갔어요</p>
+                </div>
+            </div>
+            <div class="images-1">
+                <img src="wk1/05.png" alt="휘트니 뮤지엄"/>
+                <div class="details">
+                    <h2>휘트니 뮤지엄</h2>
+                    <p>뉴욕에 있는 모마랑 뮤지엄들 많이 구경했어요. 제값 안주고 볼 수 있는 방법 많으니까 꼭 홈페이지 찾아보기!</p>
+                </div>
+            </div>
+            <div class="images-1">
+                <img src="wk1/11.png" alt="무지개 베이글"/>
+                <div class="details">
+                    <h2>민영또베이글</h2>
+                    <p>8번가 liberty 베이글에 가서 rainbow with blueberry creamcheese를 말해보세요</p>
+                </div>
+            </div>
+            <div class="images-1">
+                <img src="wk1/09.png" alt="조 피자"/>
+                <div class="details">
+                    <h2>JOE's Pizza</h2>
+                    <p>스파이더맨 영화에서 빠질 수 없는 곳이에요. Peter의 전 직장이기도 했죠?!</p>
+                </div>
+            </div>
+            <div class="images-1">
+                <img src="wk1/10.png" alt="스파이더맨"/>
+                <div class="details">
+                    <h2>피터파커와 MJ</h2>
+                    <p>스파이더맨은 뉴욕에서 정말 많이 찍었어요. 그래서인지 스파이더맨 영화를 볼 때마다뉴욕이 너무 반갑고 그리워요</p>
+                </div>
+            </div>
+            <div class="images-1">
+                <img src="wk1/01.png" alt="UnitedPlatesofAmerica"/>
+                <div class="details">
+                    <h2>UnitedPlatesOfAmerica</h2>
+                    <p>제가 좋아하는 그릇 가게인데요, 문구가 너무 귀여워서 가져와봤어요</p>
+                </div>
+            </div>
+        </div>
     </section>
 
     <!--category2-->
@@ -59,7 +113,6 @@ <h4 id="category-2">가을맞이에 한창인 뉴욕</h4>
                 <img src="wk2/09.png" alt="호박">
                 <img src="wk2/07.png" alt="가을 센팍">
             </div>
-        </div>
     </section>
 
     <!--category3-->
@@ -82,5 +135,6 @@ <h4 id="category-3">애증의 뉴욕 이놈자식 그래도 사랑해</h4>
     <footer>
         <span>&copy; 뉴욕에서 두 달 살면서 찍은 사진이에요**</span>
     </footer>
+    <script src="index.js"></script>
 </body>
 </html>

Session02 /gallery/index.js

@@ -0,0 +1,37 @@
+//1-a,b
+var images = document.querySelectorAll('.images-1');
+
+images.forEach(function(details) {
+    details.addEventListener('mouseover', function() {
+        var content = details.querySelector('div');
+        content.classList.add('show-descriptions');
+    });
+
+    details.addEventListener('mouseout', function() {
+        var content = details.querySelector('div');
+        content.classList.remove('show-descriptions')
+    });
+});
+
+//2-a
+//새로고침하면 버튼이 보이는 경우 --> 해결
+window.onload = function() {
+    window.scrollTo(0, 0); // 새로고침시 페이지를 최상단으로 스크롤
+    var button = document.getElementById('button-top');
+    button.style.opacity = 0; // 버튼의 투명도를 0으로 설정하여 보이지 않게 함
+}
+
+//버튼의 투명도 설정 
+window.addEventListener('scroll', ()=> {
+    var button = document.getElementById('button-top');
+
+    // 최대 스크롤 가능한 높이
+    var maxScrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+
+    // 현재 스크롤된 높이의 비율 계산 (0에서 1 사이의 값)
+    var scrollPercentage = window.scrollY / maxScrollHeight;
+
+    // 버튼의 투명도를 스크롤 비율에 따라 설정
+    button.style.opacity = scrollPercentage;
+});
+

Session02 /gallery/style.css

@@ -89,16 +89,28 @@ ul li a:hover {
 }
 
 /*section-1*/
+.images-1-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    flex-wrap: wrap;
+
+    gap: 1rem;
+    padding: 0;
+    margin-top:1rem;
+    margin-bottom: 1rem;
+}
+
 .images-1{
     display: flex;
 
-    gap:1rem;
+    position: relative;
 
-    flex-wrap:wrap;
-    white-space: nowrap;
+    flex-grow: 1;
 
-    margin-top:1rem;
-    margin-bottom:1rem;
+    justify-content: space-around;
+    z-index: 0;
 }
 
 .images-1 img{
@@ -109,15 +121,34 @@ ul li a:hover {
     flex-shrink:1;
 
     object-fit: cover;
-
-    transition:transform 0.5s;
 }
 
-/*심화과제*/
-.images-1 img:hover{
-    transform: translateY(-1%);
+.imgages-1 img :hover {
+    transform: translateY(-5px);
+}
+
+.details{
+    display: none;
+    position: absolute;
+
+    width: 90%;
+    height: 90%;
+
+    padding: 1rem;
 }
 
+.show-descriptions{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    background-color: rgba(53, 50, 50, 0.455);
+    gap: 1rem;
+
+    font-weight: 700;
+    color: #e7f5fd;
+}
 
 /*section-2*/
 .images-2{
@@ -179,6 +210,7 @@ ul li a:hover {
     width:100%; /* 그리드 아이템 내의 이미지 최대 너비 설정 */
     height: 100%; /* 비율에 맞게 이미지 높이 조절 */
     object-fit: cover;
+
   }
 .container-3 img:first-child {
     grid-row: 1/ 2;