[2주차 기본/심화 과제] 루밍이의 사진관 📸 #4

Arooming · 2023-10-27T05:53:01Z

✨ 구현 기능 명세

🧩 기본 과제

이미지 (첫번째 섹션만 해당)
1. 이미지 호버시 백그라운드가 어둡게 처리되고, 해당 사진에 대한 제목과 설명이 나타납니다.
2. 이미지에서 벗어나면 사라집니다.
  
  → 한번에 반드시 하나의 이미지의 설명만 나타납니다.
top버튼
1. 최상단에서는 보이지 않고, 스크롤을 내림에 따라 점점 선명해집니다.

🧩 심화 과제

이미지
1. 3줄 이상인 설명은 말줄임표 처리와, 더보기 버튼이 나타납니다.
2. 더보기 클릭시 설명이 모두 보입니다.
  
  → 설명은 넘치지 않도록 넣어주세요!
preview section
1. 좌우로 화살표 버튼이 있습니다.
2. 오른쪽 버튼 클릭시 가장 오른쪽 이미지로 scroll 됩니다. (왼쪽 버튼도 마찬가지)

💎 PR Point

🍟 최상단에서는 top 버튼이 보이지 않고, 스크롤을 내림에 따라 선명해짐.

window.scrollY: 원점으로부터 문서를 수직방향으로 스크롤한 픽셀의 수 반환
getBoundimgClientRect(): 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공
스크롤 위치를 활용하여 수식을 만들어서 해당 값을 버튼의 투명도로 넣어주었습니다 !

const goTopBtn = document.querySelector(".goTopBtn");
const homeHeight = goTopBtn.getBoundingClientRect().height;

document.addEventListener("scroll", () => {
  // 수식을 활용하여 스크롤 시 투명도 값을 조절해줌
  goTopBtn.style.opacity = window.scrollY / homeHeight / 50;
});

🍟 이미지 설명 줄 수에 따라 “더보기” 버튼성생

더보기 버튼을 만들어 두고, 이미지 설명 글자 수가 일정 수를 넘을 때마다 버튼을 해당 이미지의 자식 요소로 추가해주었습니다!

if (detailText.length >= 94) {
			...
      descript = img.querySelector(".description");
      // "더보기" 버튼을 호버된 이미지의 설명박스(.description) 하위로 넣어줌
      descript.appendChild(moreInfoBtn);
    }

🍟 더보기 버튼 클릭 시 이미지 설명 등장, 더보기 버튼 사라짐

마우스가 이미지를 벗어나면 다시 설명 요약, 더보기 버튼 등장

처음에는 이미지 hover 시 동작할 액션을 정의해줘야 한다고 생각해서 event handler에 mouseover 를 넣어줬는데, 그렇게 했더니 이미지 내에서 마우스가 움직일 때마다 이벤트가 감지되더라구요!

이렇게 되면 이미지 내에서 마우스가 움직일 때마다 더보기 버튼이 이미지의 자식으로 추가될 것이라고 생각해서 이벤트 액션을 찾아보았어요. mouseenter 액션이 제가 의도한 바와 일치해서 이 이벤트를 선택해서 구현하게 되었습니다!

img.addEventListener("mouseenter", () => {
    let detailText = img.querySelector("p.detail").innerHTML;
    let detail = descript.querySelector("p.detail");
    if (detailText.length >= 94) {
      img.classList.add("moreInfo");
      descript = img.querySelector(".description");

      // "더보기" 버튼을 호버된 이미지의 설명박스(.description) 하위로 넣어줌
      descript.appendChild(moreInfoBtn);
    }

    detail.style.display = "-webkit-box";
    moreInfoBtn.style.display = "block";
  });

더보기 버튼을 클릭하면 이미지 설명글의 display를 flex로, 더보기 버튼의 display를 none으로 처리해서 가려져있던 설명글은 모두 보이고 화면 상에 더보기 버튼은 보이지 않게 구현했습니다.

// "더보기" 버튼 클릭 시, 잘려있던 이미지 설명이 모두 보이는 기능
moreInfoBtn.addEventListener("click", () => {
  let detail = descript.querySelector("p.detail");
  detail.style.display = "flex";
  moreInfoBtn.style.display = "none";
});

🥺 소요 시간, 어려웠던 점

3 ~ 4h
top 버튼 투명도를 조절하는 방법이 감이 안 잡혀서 고민을 많이 했었는데, 제가 너무 꼬아서 생각했던 것 같더라구요!
원점으로부터 수직 방향으로 스크롤한 위치와 엘리먼트의 크기, 뷰포트에 상대적인 위치 정보를 제공하는 메소드인 getBoundimgClientRect() 메소드를 활용한 수식을 만들어주었습니다. 이 때 나온 값을 top 버튼의 투명도 값으로 넣어서 해결할 수 있었습니다!

🌈 구현 결과물

1.mp4

2.mp4

3.mp4

… week1/with-js

moondda

아름 2주차도 수고 많았어!! js 파일에 상세하게 주석을 달아줘서 어렵지 않게 읽으면서 리뷰할 수 있었당 나도 주석 열심히 달아야겠어...

moondda · 2023-11-01T14:16:11Z

assignment/week_1/PhotoBooth/photoBooth.html

+            <p class="title">냄새맡는 태릉이</p>
+            <p class="detail">


오 난 약간 div태그를 남발하는 습관(?)이 있는데 아름이는 저번부터 보면 p태그도 꽤 쓰는 거 같넹! 글씨 쓸 때 주로 쓰나??

우웅 난 div는 단순 컨테이너로만 활용하려고 하는 편이라 글자가 들어가는 경우에는 문단을 의미하는 p태그를 사용해주는 편이야 !
근데 이 두 태그 다 시멘틱한 태그는 아니라, 사용을 지양하는게 좋긴.... 하지...... 껄껄....

moondda · 2023-11-01T14:17:51Z