[ 2주차 기본/생각/심화(to be continued..) ] 웨비의 사진관😋

[nayujin-dev]

✨ 구현 기능 명세

• 기본 과제 ✅

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

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

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

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

2. top버튼 ✅

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

• 심화과제 🔺

1. 이미지 ✅

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

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

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

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

• 생각과제 ✅

💎 PR Point

• 이미지 호버
  • 백그라운드 어둡게처리

     .sec1 img:hover{
          filter:brightness(0.5);
      } 

• 사진의 제목과 설명 나타내기

        <img 
            src="../../week01/assign3/img/bel/1.jpg"
            alt="벨기에 사진 1"
            img-title="브뤼허 분수 공원"
            img-description="브뤼허 들어가는 초입에 있는 예쁜 공원"
            />  ```
  
  

이렇게 attribute로 제목과 설명 값을 지정하고, js에서 forEach 돌면서 각각에 할당해줬습니다. 그후 각 이미지마다 아래의 이벤트를 지정하여, visibility로 보였다가 안보였다가 할 수 있도록 지정했습니다.

      function showContent(event){    
          const children=Array.from(event.target.parentElement.children);
          children.forEach(child=>{
              if(child.hasAttribute('alt')){ //  img hover시 어둡게
                  child.style.filter="brightness(0.5)" 
              }else if(child.getAttribute('class')=="content"){  // 이미지 상세설명 말줄임표
                  child.style.overflow="hidden"; 
                  child.style.textOverflow="ellipsis";
                  child.style.visibility="visible";
              }else{ //  나머지 요소들은 단순히 커서 hover하면 visible하게
                  child.style.visibility="visible";
              }
          })
      } 

       function removeContent(event){    
          const children=Array.from(event.target.parentElement.children);
          children.forEach(child=>{
              if(child.hasAttribute('alt'))
                  child.style.filter="none";
              else if(child.getAttribute('class')=="content"){
                  child.style.overflow="unset";
                  child.style.textOverflow="unset";
                  child.style.visibility="hidden";
              }
              else
                  child.style.visibility="hidden";
          })
      }) 

• 더보기 버튼
  처음에 각 이미지에 대해 탐색하며, 이미지 상세 설명이 특정 길이보다 길면 더보기 버튼 element를 추가하도록 구현했습니다.

  if(desc.length>39){
          const showMoreBtn = document.createElement('input');
          showMoreBtn.setAttribute('type','button');
          showMoreBtn.setAttribute('value','더보기');
          showMoreBtn.classList.add('showMoreBtn');
          showMoreBtn.addEventListener('click',showMoreDescription);
          wrapper.appendChild(showMoreBtn);
  }
  

• top 버튼

    let scrollDepth = ((window.scrollY + window.innerHeight)/document.body.scrollHeight)-0.2;
    topBtn.style.opacity=scrollDepth;
});

위와 같이 스크롤 깊이를 파악할 수 있는 식(?)이 있어서 활용했습니다.

🥺 소요 시간, 어려웠던 점

• 5h + 3h(심화 보충)
• 이벤트 직접 달아주는게 생각보다 어려웠어요ㅠㅠ
• 심화 다 끝내려했는데 ,, 맘대로 안되네욥 ,, 심화 중 스크롤도 얼렁 구현하도록 하겠습니다!!

🌈 구현 결과물

https://www.notion.so/dosopt/2-cdada8f4d1c944c09f54d3646b7108c8?pvs=4

[SooY2]

셤기간에 고생해따!!!

[SooY2]

요소에 글을 넣어서 하는방법이 있었다니... 나는 div태그 추가해서 html이랑 css 대공사 한번 했는데... 충격먹었어
언니가 한 방법이 가독성도 훨씬 좋고 js활용해보기도 딱이댜 👍🏻

[SooY2]

filter속성이라는걸 처음 알았어!! 맨날 div추가해서 어둡게 했었는데...

[SooY2]

함수 나눠주니까 가독성이 더 좋다!

[SooY2]

나는 이미 html에 넣어두고 숨겨놨다가 js에서 보이는 스타일 class추가하는 방식으로 하면서 html을 건들지 않으면서 js만으로 이번과제를 할 수 있는 방법이 있을까 고민을 했었는데 img태그의 요소 이용해서 js로 하위태그 추가해주는 방식이 있었어!! 코드 수정할 때 언니가 한 방법으로 해봐야겠오

[Yeonseo-Jo]

고민한 흔적이 많이 보이네용 🥹 저번주에 이어서 너무 수고했엉 !!!
피드백도 반영해서 이번엔 기능별로 커밋 나눠서 한 점도 넘 좋았습니댜
이번 주차 리뷰 반영하면서 저번 주차 리뷰도 반영하면 더 더 완벽할것 같습니댜 ✨!

[Yeonseo-Jo]

오 이렇게 커스텀 속성을 사용해서 하는것도 좋은 방법이다!! 나도 배워간당

이 부분이랑 관련해서, html 커스텀 데이터 속성 규칙에 대해서 더 공부해보면 좋을것 같아!

내가 알기론 사용자 지정 속성(커스텀 속성)을 사용할 때는 속성의 시작을 data-로 해줘야 한다는 것을 알고 있어!! 그래야 브라우저가 해당 속성이 커스텀 데이터 속성이구나!를 인식하고 화면에 반영하지 않는다고 하더라구!
이 자료를 참고해보면 좋을것 같아!

[Yeonseo-Jo]

querySelector로 조작할 요소들을 가져올 때, 지금처럼 하위 요소를 찾는 방식(top버튼 밑에 Img 태그 등)도 좋지만!
유지 보수 측면, 혹시 모를 의도치 않은 결과 발생 방지를 위해 조작이 필요한 요소에 직접 클래스 명을 부여하고, 해당 클래스 명을 querySelector로 가져오는 방식은 어떨까?!

나는 위 이유 등으로 css 스타일링, js selector 등에서 최대한 클래스명을 활용하려고 하는 편이라서 한 번 고려해보면 좋을것 같아 ~

[Yeonseo-Jo]

mouseover vs mouseenter, mouseout vs mouseleave 메서드 들을 한 번 비교해보면 좋을것 같아!
나도 이번 과제 하다가 알게 되었는데, 이벤트 버블링 측면에서 내가 원하는 타켓 요소에만 hover 이벤트를 발생하시키려면 mouseenter, mouseleave 메서드가 더 적절한것 같더라구!

이 자료 참고하면 한 눈에 비교하기 좋을것 같습니당

[Yeonseo-Jo]

또 이 부분은 이벤트가 들어가는 부분을 하나의 함수로 만들어줘서 캡슐화 해주면 더 좋을것 같아!

[Yeonseo-Jo]

지금 if문(hasAtrribute(alt))와 else if-else문(getAttribute('class') = 'content')가 판별하고 있는 조건이 다른것 같아서, 로직을 분리해서 조건문을 짜면 더 가독성 있는 코드가 될것 같습니당!!

그리구 이미지 영역의 배경을 어둡게 하기 위해서 if(child.hasAttribute('alt'))라는 조건문을 사용한것 같은데 맞을까용?
alt 속성으로 이미지 태그를 가져오는 것은 직관적이지 않은것 같아 클래스 명을 사용하는 등의 방식으로 바꿔보면 더 좋을것 같습니다!

또 이 부분은 앞에 남긴 리뷰 참고해서 hover를 감지하는 메서드를 'mouseenter'로 바꿔보면, 더 좋은 로직으로 구현할 수 있을것 같아요 !!

[Yeonseo-Jo]

스크롤 높이 감지해서 투명도 달리 준 방식 너무 야무지당!!