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

[simeunseo]

배포링크

✨ 구현 기능 명세

• 기본 과제

  • 이미지(첫번째 섹션)
    • 이미지 호버시 백그라운드 처리
    • 이미지 호버시 제목과 설명 나타내기
    • 이미지에서 벗어나면 사라짐
  • top 버튼 스크롤에 따른 선명도

• 심화 과제

  • 이미지
    • 3줄 이상인 설명은 말줄임표 처리, 더보기 버튼
    • 더보기 클릭시 설명이 모두 보임
  • preview section
    • 좌우로 화살표 버튼
    • 화살표 버튼을 누르면 scroll됨

💎 PR Point

• scroll에 따른 topBtn 투명도 조절

    const windowHeight = window.innerHeight;
    const topBtn = document.getElementById("top-btn");
  
    document.addEventListener("scroll", () => {
    topBtn.style.opacity = window.scrollY / windowHeight / 2;
    });

  topBtn의 opacity가 window.scrollY / windowHeight / 2 로 계산되도록 하였습니다. window.scrollY는 현재 창에서 Y축 스크롤이 얼마나 되었나를 나타내는 숫자이고, 이를 windowHeight로 나누었기 때문에 전체 window의 세로 길이에 대비해 얼마정도로 Y축 스크롤을 내렸는가를 뜻하게 됩니다. 여기에 2를 추가로 나눈 것은, 나누지 않으면 opacity 값이 금방 1에 도달하게 되어버려서, 보간 해준 것입니다.

• 글자수에 따른 더보기 버튼 활성화

    const contents = document.querySelectorAll(".content");
    contents.forEach((content) => {
        const contentDescription = content.children[1];
        if (contentDescription.innerText.length >= 85) {
            const moreBtn = document.createElement("button"); //button 요소 생성
            moreBtn.innerText = "more";
            moreBtn.setAttribute("class", "content-more-btn"); //button 클래스명 지정
  
            content.appendChild(moreBtn); //button 붙이기
  
            /* 클릭 이벤트시 버튼 사라짐 */
            content.addEventListener("click", () => {
            contentDescription.style.display = "block"; //말줄임 표시를 없앰
            moreBtn.style.display = "none";
            });
        }
    });

  contents는 이미지의 설명 부분입니다. 설명에서 description에 해당하는 부분의 innerText에 대해, 이 길이가 85를 넘어가면 더보기 버튼을 appendChild()로 달아줍니다. 그리고 이 버튼을 클릭하면 description의 style에서 display를 block으로 설정해주는데요, 기존에 말줄임 표시를 설정하기 위해서는 display를 -webkit-box로 설정해주어야 하기 때문에 이를 block으로 바꾸면 말줄임표시가 없어지고 전체 텍스트가 보여지게 됩니다.

  말줄임 표시를 스타일링한 방식은 다음과 같습니다.

  /* ellipsis */
    .overlay-wrapper > .content > p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  
    width: 20rem;
    }

🥺 소요 시간, 어려웠던 점

• 1h 30m
• 특별히 어려운 부분은 없었지만, 3줄이 넘어가면 말줄임 표시를 하는 부분에 대해서 아직 의문이 있습니다. 왜냐면 해당 영역의 너비에 따라서 글이 몇 줄이 될지는 달라지는 건데... 현재 화면 상의 글이 몇 줄인지를 javascript로서 알아내는 방법이 있나 하고 찾아봤지만 찾지 못했습니다. 그래서 결국 해당 텍스트가 차지하는 너비를 지정해놓고, 제 화면 상에서 글이 몇 글자를 넘어가야 3줄이 되는지를 체크하여 85자라는 값을 하드코딩하여 구현한 것입니다. 다른 분들은 어떻게 했는지 궁금하네요!

🌈 구현 결과물

배포링크

[qwp0]

은서님 바쁘신 거 아는데ㅠ심화과제까지 너무 잘 구현해주셨네요!ㅎㅎ 말줄임표 저거..저도 글자 수 세서 하드 코딩했습니다..ㅜ다른 방법 너무 알고 싶어요,,,😭

[qwp0]

저는 y축 스크롤 된거를 스크롤할 수 있는 최대치로 나눠서 구현했는데 이렇게도 할 수 있군요!

[qwp0]

addEventListener가 content에 있는데 버튼 클릭 시가 아니라 내용 클릭시 내용이 다 보이게 구현하신건가용..?

[eonseok-jeon]

제가 JS에 대한 지식이 부족하여, 코드를 보며 오히려 제가 배웠던 거 같습니다!!! 바쁘셨을 텐데 심화까지 하시느라 너무나도 고생 많으셨습니다!!!

[eonseok-jeon]

setAttribute 외에도 classList.add 를 이용하는 방식도 있어요!! 이를 이용하는 것이 속도면에서 더 빠르다는 얘기가 있네요~ 한 번 참고해 보시는 것도 좋을 거 같아요!!

참고자료
https://teamtreehouse.com/community/classname-vs-setattribute

https://measurethat.net/Benchmarks/Show/54/0/classname-vs-setattribute-vs-classlist

[seobbang]

Suggested change

	const contents = document.querySelectorAll(".content");
	contents.forEach((content) => {
	const contentDescription = content.children[1];
	const contentDescription = document.querySelectorAll(".content > p");
	contents.forEach((content) => {

요렇게 가능하지 않나용?

[seobbang]

PR에 적어준 부분인 것 같아서,

Suggested change

	if (contentDescription.innerText.length >= 85) {
	if (contentDescription.clientHeight < contentDescription.scrollHeight) {
	}

저는 이런식으로 사용해서 구현했어용 참고 !~!