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

[lydiacho]

✨ 구현 기능 명세

• 기본 과제

1. 이미지 (첫번째 섹션만 해당) ✔️

   1. 이미지 호버시 백그라운드가 어둡게 처리되고, 해당 사진에 대한 제목과 설명이 나타납니다.

   2. 이미지에서 벗어나면 사라집니다.

      → 한번에 반드시 하나의 이미지의 설명만 나타납니다.

2. top버튼 ✔️

   1. 최상단에서는 보이지 않고, 스크롤을 내림에 따라 점점 선명해집니다.

• 심화과제

1. 이미지 ✔️

   1. 3줄 이상인 설명은 말줄임표 처리와, 더보기 버튼이 나타납니다.

   2. 더보기 클릭시 설명이 모두 보입니다.

      → 설명은 넘치지 않도록 넣어주세요!

2. preview section ✔️

   1. 좌우로 화살표 버튼이 있습니다.
   2. 오른쪽 버튼 클릭시 가장 오른쪽 이미지로 scroll 됩니다. (왼쪽 버튼도 마찬가지)

💎 PR Point

▶️ 이미지 호버시 효과 처리

각 이미지 태그를 아래와 같이 구성했습니다.

<li class="item_card">
    <img src="./src/숭이1.jpeg" alt="원숭이사진1" />
    <div class="description">
      <h3>빤히숭이</h3>
      <p>빤히..빤히..빤히..당신을 쳐다보는 숭이</p>
    </div>
  </li>

호버 처리는 css만 사용하여 구현하였습니다.

#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 {
  display: flex;
  background-color: rgba(0, 0, 0, 0.52);
  color: white;
}

• 외부 .item_card 박스의 position을 relative로 주고, 내부의 img와 description박스 (호버시 나타나는 어두운 설명 박스) 두개의 position을 모두 absolute로 하여 중첩 배치하였습니다.

▶️ top버튼 투명도 처리

• js로 구현하였습니다.
• 윈도우 전체 scroll 이벤트에 handleScrollPosition 이벤트리스너를 연결
• scroll이 발생할 떄마다 현재 위치의 스크롤 비율을 계산하여 toTop 버튼 element의 opacity 값으로 부여하였습니다.

const handleScrollPosition = () => {
  const scrollPos =
    window.scrollY / (document.body.clientHeight - window.innerHeight);

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

window.addEventListener("scroll", handleScrollPosition);

🥺 소요 시간, 어려웠던 점

• 2h
• 기본과제는 무난하게 구현했습니다.

🌈 구현 결과물

• 기본과제 결과

i.e.e.e.2023-10-27.i.i.8.20.45.mov

• 심화과제 결과
  심화과제 구현 결과물은 과제 채점 후 추후 업로드하겠습니다

[se0jinYoon]

역시나 깔꼼하네요 !
저는 첫 번째 섹션에 더보기 버튼을 모두 넣어두고, 글자수에 따라 유동적으로 더보기 버튼이 보이거나 안 보이게 해야지! 라고 생각하고 구현하려 하였는데 이 부분을 승희는 다르게 구현하고 또 깔꼼해서 많이 배워갑니다아
수고 많았어요오 💗

[se0jinYoon]

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

[se0jinYoon]

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

[rachel5640]

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

[se0jinYoon]

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

[se0jinYoon]

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

[se0jinYoon]

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

[rachel5640]

심화과제까지 적용되어있어서 구현 못한 부분도 어떤 식으로 보완해나가야할지 덕분에 감을 잡을수 있었어요! 늘 깔끔한 코드..너무 멋있습니다💛

[rachel5640]

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

[rachel5640]

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

[rachel5640]

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

[rachel5640]

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