Week2/assign1 #3

SooY2 · 2023-10-27T14:11:06Z

✨ 구현 기능 명세

기본 과제

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

심화 과제

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

💎 PR Point

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

이전엔 html에 미리 div추가해서 구현했었는데 1주차 코드리뷰반영한거 가져오면서
최대한 html을 건드리지 않고 js를 활용해 보는 방향으로 수정했습니다!!

제목과 설명 태그 js로 추가

parisImg.forEach(img => {
        let title = img.getAttribute('title');// img태그의 요소 title가져오기
        let content = img.getAttribute('content');
        
        let descriptionContainer=document.createElement('div');//제목과 설명 담을 div
        descriptionContainer.classList.add('paris-description-container');
        let titleP = document.createElement('p'); //제목 p
        titleP.classList.add('paris-title');
        titleP.innerText=title;
        let contentP = document.createElement('p');
        contentP.classList.add('paris-content');
        contentP.innerText=content;
        
        img.parentNode.appendChild(descriptionContainer);//img태그의 부모인 paris-img-container태그의 자식으로 넣어줘야함
        descriptionContainer.appendChild(titleP);
        descriptionContainer.appendChild(contentP);
        descriptionContainer.style.visibility = 'hidden';

        addReadMoreBtn(contentP);

hover시 보이게, 마우스 떼면 hide

const showContent=(img,descriptionContainer)=>{
    img.parentNode.addEventListener('mouseover', ()=> {
        descriptionContainer.style.visibility = 'visible';
      });
}

const hideContent=(img,descriptionContainer)=>{
    img.parentNode.addEventListener('mouseout', ()=> {
        descriptionContainer.style.visibility = 'hidden';
      });
}

3줄이상 더보기
기존에 style의 display속성을 none으로 하고 이 속성을 바꿔주는 방법에선 렌더링되지 않아서 contnetP(설명부분)의 scrollHeight값이 0으로 나와서 visibility를 사용하는 방식으로 바꿔줬는데 다른 방법이 있을지..

const addReadMoreBtn = (contentP) => {
    // 줄 높이와 줄 수에 따라 p 태그의 최대 높이를 계산
    
    const lineHeight = parseInt(window.getComputedStyle(contentP).lineHeight);
    const maxHeight = lineHeight * 3;
  
    // content의 실제 높이가 계산된 최대 높이를 초과하는지 확인
    // display:none이면 렌더링 되지않아 scrollHeight를 못가져옴 
    //  -> visibilty로 레이아웃 상 공간은 차지하지만 보이지 않게
    if (contentP.scrollHeight > maxHeight) {
  
      // 더보기 버튼 생성
      let readMoreBtn = document.createElement('button');
      readMoreBtn.innerText = '더보기';
      readMoreBtn.classList.add('read-more-btn');

      contentP.parentNode.appendChild(readMoreBtn);
  
      // 더보기 버튼 클릭 이벤트 리스너
      readMoreBtn.addEventListener('click', () => {
        contentP.classList.remove('paris-content');
        readMoreBtn.remove();
      });
    }
  };

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

window.addEventListener('scroll', ()=> {

var  button  =  document.getElementById('top');

// 최대 스크롤 가능한 높이
var  maxScrollHeight  =  document.documentElement.scrollHeight  -  document.documentElement.clientHeight;

// 현재 스크롤된 높이의 비율 계산 (0에서 1 사이의 값)
var  scrollPercentage  =  window.scrollY  /  maxScrollHeight;

// 버튼의 투명도를 스크롤 비율에 따라 설정
button.style.opacity  =  scrollPercentage;

});

여기선 pr포인트 쓰다가 var로 한거 깨달아서 let으로 변경해서 커밋했슴다ㅎㅎ

프리뷰

//preview 버튼로직
const goLeft=$("#preview-go-left");
const goRight=$("#preview-go-right");
const previewImgContainer=$("#preview-imgs");

goLeft.addEventListener("click",()=>{
    previewImgContainer.scrollLeft=0;
})

goRight.addEventListener("click",()=>{
    previewImgContainer.scrollLeft=previewImgContainer.clientWidth;
})

궁금한점
함수들을 만든 후 addDescriptionTag();이렇게 전역범위에서 실행시켰는데 그래도 되는건지(?) 뭔가 다른 함수 안에 있어야할거같은기분..

🥺 소요 시간, 어려웠던 점

2h+3h
바닐라 자바스크립트를 오랜만에 써서 찾아보면서하느라 좀 걸렸네요!! 시험기간이라 심화까지 못한게 넘 아쉽....
++1주차 코드리뷰반영한거 합치면서 2주차에 언니들거 코드리뷰하면서 배운 내용들 추가해서 다시 했서요ㅎㅎㅎ!! (진짜 많이 배웁니다..👍🏻)

🌈 구현 결과물

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

nayujin-dev · 2023-11-04T18:11:51Z

week2/assign1/index.js

+  };
+
+
+addDescriptionTag();


헤헤 나도 이렇게 실행시킨 함수 많아!! 나는 된다고 알고있긴한데 혹시 비동기식 처리 관련해서 걱정하는거려나??

전역범위에서 실행시켜도 괜찮은 함수인것 같아!

나는 이런 함수들은 한 눈에 모아서 볼 수 있도록 최하단에 모아두었더!!

nayujin-dev

수고많았어 ~~ !! 수연이 커밋이 실시간으로 추가되구 있네 ,, 화이팅!!!

nayujin-dev · 2023-11-04T18:13:41Z

week2/assign1/index.html

+        <img src="./imgs/paris/paris5.jpeg" alt="루브르" title="루브르"
+        content="박물관 투어한날!!! 박물관/미술관 3개에 에투알개선문 계단타기까지..."></div>
+        <div class="paris-img-container">
+        <img src="./imgs/paris/paris6.jpeg" alt="디즈니 미니 셋" title="디즈니 미니 세마리"


나 저번 코드리뷰에서 알게된건데, alt에는 띄어쓰기를 지양하는게 좋대!! 접근성 측면에서!!

nayujin-dev · 2023-11-04T18:14:11Z

week2/assign1/index.js

@@ -0,0 +1,109 @@
+const $ = (selector) => document.querySelector(selector);


나 이거 이제 알았지모야~ ..

nayujin-dev · 2023-11-04T18:15:55Z

week2/assign1/index.js

+
+        let descriptionContainer=document.createElement('div');//제목과 설명 담을 div
+        descriptionContainer.classList.add('paris-description-container');
+        let titleP = document.createElement('p'); //제목 p


앗 나 또 p태그 안쓰고 몽땅 다 div으로 뿌려놨다 앗차차 ,, 수연이는 태그 다양하게 잘써서 보고 항상 내 div 범벅 코드가 떠올라 ㅎ.ㅎ

nayujin-dev · 2023-11-04T18:18:04Z

week2/assign1/index.js

+    // 줄 높이와 줄 수에 따라 p 태그의 최대 높이를 계산
+
+    const lineHeight = parseInt(window.getComputedStyle(contentP).lineHeight);
+    const maxHeight = lineHeight * 3;


오 이렇게했구나!! 나는 이미지 상세설명 폰트 사이즈가 rem이니까 지금은 세줄에 대한 글자수가 항상 동일한 상수값이라고 생각해서 그냥 상세설명.length 이렇게 접근했어 ,, 근데 수연이가 한게 반응형 측면에서 더 좋을거같다!!

nayujin-dev · 2023-11-04T18:19:05Z

week2/assign1/styles.css

+.paris-content{ /*3줄 이상 말줄임표*/
+  text-overflow:ellipsis;
+  overflow:hidden;
+  display: -webkit-box !important;


엇 여기 !important는 어떤 용도로 쓴거야??

엇 !important 키워드를 사용한 이유가 있을까용 ?!
important 키워드를 사용하게 되면, 스타일이 강제 적용되기 때문에(우선순위 최상위, 다른 우선순위는 고려x)
유지 보수 측면에서 문제가 생길 가능성이 있습니당
(ex. 나중에 하위/상위 요소에 내가 적용한 스타일링이 적용되지 않는 경우...등등)

그래서 !important는 꼭 필요한 경우(ex. 외부 라이브러리로 가져온 요소에 원하는 스타일링을 입힐 경우)
를 제외하고는 사용하는 것을 지양해야 하기 때문에...!
!important를 사용하지 않고 구현할 수 있는 다른 방법이 있나 찾아보면 더 좋을것 같습니당 ~!

Yeonseo-Jo

리뷰하면서 배운것도 바로 반영하구,, 추가로 심화도 구현하고 너무 너무 수고 많았더 체고다!!! 👍
이번 과제에서는 전체적으로 const vs let 어떤걸로 선언하면 좋을지 더 고민해보면 좋을것 같습니당 !!
다음주도 아쟈아쟈 🔥

Yeonseo-Jo · 2023-11-05T02:56:40Z

week2/assign1/index.js

@@ -0,0 +1,109 @@
+const $ = (selector) => document.querySelector(selector);
+const $$ = (selector) => document.querySelectorAll(selector);
+//연서언니 방법 완전 편함!!!


ㅋㅋㅋㅋㅋㅋㅋㅋㅋ하 귀여운 사람아...🥹
코드 보고 바로 바로 흡수하는 수연이 넘 멋있당🖤

Yeonseo-Jo · 2023-11-05T02:58:54Z

week2/assign1/index.js

+        let title = img.getAttribute('title');// img태그의 요소 title가져오기
+        let content = img.getAttribute('content');
+
+        let descriptionContainer=document.createElement('div');//제목과 설명 담을 div


요기를 let으로 선언한 이유가 있나용 ?!

변수의 스코프는 최대한 좁게 만드는 것이 권장되기 때문에, 재할당이 필요한 변수를 제외하고는 const를 쓰는것이 더 권장되는 방법이라구 합니당 ~!

이 자료 참고해서 변수/상수 선언시 어떤 키워드를 쓰면 좋을지 고민해보면 좋을것 같아용 !!

Yeonseo-Jo · 2023-11-05T03:01:23Z

week2/assign1/index.js

+const showContent=(img,descriptionContainer)=>{
+    img.parentNode.addEventListener('mouseover', ()=> {
+        descriptionContainer.style.visibility = 'visible';
+      });
+}
+
+const hideContent=(img,descriptionContainer)=>{
+    img.parentNode.addEventListener('mouseout', ()=> {
+        descriptionContainer.style.visibility = 'hidden';
+      });
+}


함수 따로 만들어서 구현한 부분 넘 좋다!

나도 이번 과제 하면서 알게 된건데, mouseover vs mouseenter, mouseout vs mouseleave 이벤트 메서드에 대해서 비교해보면 좋을것 같아!

이 자료 보면 한 눈에 비교할수 있어서 추천합니당 ~!

Yeonseo-Jo · 2023-11-05T03:01:56Z

week2/assign1/index.js

+const addReadMoreBtn = (contentP) => {
+    // 줄 높이와 줄 수에 따라 p 태그의 최대 높이를 계산
+
+    const lineHeight = parseInt(window.getComputedStyle(contentP).lineHeight);


오 나는 여기 글자수로 판단했는데 lineHeight로 계산한 방법 좋다!!
나도 참고해볼게 💯 !!

Yeonseo-Jo · 2023-11-05T03:02:25Z

week2/assign1/index.js

+    if (contentP.scrollHeight > maxHeight) {
+
+      // 더보기 버튼 생성
+      let readMoreBtn = document.createElement('button');


요기도! 재할당하는 값이 아니니까 const로 선언해주면 더 좋을것 같앙

Yeonseo-Jo · 2023-11-05T03:03:33Z

week2/assign1/index.js

+      readMoreBtn.addEventListener('click', () => {
+        contentP.classList.remove('paris-content');
+        readMoreBtn.remove();
+      });


나는 한 함수 내에서 최대한 한 동작의 기능만 수행하는 것이 중요하다고 생각해서,
아주 간단한 이벤트 리스너 함수를 제외하고는 다 따로 함수를 만들어서 이벤트 리스너 메서드의 인자로 넣어주었엉 !!

이 부분에 대해서 수연이도 한 번 고민해보면 좋을것 같앙 ~

Yeonseo-Jo · 2023-11-05T03:04:14Z

week2/assign1/index.js

+  };
+
+
+addDescriptionTag();


전역범위에서 실행시켜도 괜찮은 함수인것 같아!

나는 이런 함수들은 한 눈에 모아서 볼 수 있도록 최하단에 모아두었더!!

Yeonseo-Jo · 2023-11-05T03:04:54Z

week2/assign1/index.js

+  let button = document.getElementById('top');
+
+  // 최대 스크롤 가능한 높이
+  let maxScrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;


스크롤 높이 구하는 로직 귯굿!!!

Yeonseo-Jo · 2023-11-05T03:08:20Z

week2/assign1/styles.css

+.paris-content{ /*3줄 이상 말줄임표*/
+  text-overflow:ellipsis;
+  overflow:hidden;
+  display: -webkit-box !important;


엇 !important 키워드를 사용한 이유가 있을까용 ?!
important 키워드를 사용하게 되면, 스타일이 강제 적용되기 때문에(우선순위 최상위, 다른 우선순위는 고려x)
유지 보수 측면에서 문제가 생길 가능성이 있습니당
(ex. 나중에 하위/상위 요소에 내가 적용한 스타일링이 적용되지 않는 경우...등등)

그래서 !important는 꼭 필요한 경우(ex. 외부 라이브러리로 가져온 요소에 원하는 스타일링을 입힐 경우)
를 제외하고는 사용하는 것을 지양해야 하기 때문에...!
!important를 사용하지 않고 구현할 수 있는 다른 방법이 있나 찾아보면 더 좋을것 같습니당 ~!

신수연 and others added 13 commits October 12, 2023 13:28

week1/assign3

4d512d8

px -> rem, 스크롤,hover심화

d1aac9a

심화과제

cab7721

Delete .DS_Store

34ac6d0

Delete week1/.DS_Store

ee7724a

Delete week1/task3/summercamp.html

727a0e5

preview gap추가

c5355eb

section별 header추가

d9a7719

띄어쓰기 수정

f08078e

week1/assign3 clone, 파일명 변경

e13efcb

html,css 구조 변경

9940cb9

이미지 호버시 설명, top버튼

f0f5a24

feat: let으로 수정

4b60dab

SooY2 added ✨기본✨ 2주차 labels Oct 27, 2023

SooY2 requested review from Yeonseo-Jo and nayujin-dev October 27, 2023 14:11

SooY2 self-assigned this Oct 27, 2023

신수연 added 7 commits October 31, 2023 15:09

fix: 코드리뷰 반영

3e69037

node_module삭제

da5768e

fix: 1주차 코드 pull해서 반영+ 코드보완

4232b7d

feat : 더보기 버튼구현

2443146

주석달기

07779ce

feat 프리뷰 화살표기능구현

7394356

fix : show,hidden 함수 분리

e256471

SooY2 added the ⭐️심화⭐️ label Nov 4, 2023

nayujin-dev reviewed Nov 4, 2023

View reviewed changes

Yeonseo-Jo reviewed Nov 5, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Week2/assign1 #3

Week2/assign1 #3

SooY2 commented Oct 27, 2023 •

edited

Loading

nayujin-dev Nov 4, 2023

Yeonseo-Jo Nov 5, 2023

nayujin-dev left a comment

nayujin-dev Nov 4, 2023

nayujin-dev Nov 4, 2023

nayujin-dev Nov 4, 2023

nayujin-dev Nov 4, 2023

nayujin-dev Nov 4, 2023

Yeonseo-Jo Nov 5, 2023

Yeonseo-Jo left a comment

Yeonseo-Jo Nov 5, 2023

Yeonseo-Jo Nov 5, 2023

Yeonseo-Jo Nov 5, 2023

Yeonseo-Jo Nov 5, 2023

Yeonseo-Jo Nov 5, 2023

Yeonseo-Jo Nov 5, 2023

Yeonseo-Jo Nov 5, 2023

Yeonseo-Jo Nov 5, 2023

Yeonseo-Jo Nov 5, 2023

		@@ -0,0 +1,109 @@
		const $ = (selector) => document.querySelector(selector);

		};


		addDescriptionTag();

		};


		addDescriptionTag();

Week2/assign1 #3

Are you sure you want to change the base?

Week2/assign1 #3

Conversation

SooY2 commented Oct 27, 2023 • edited Loading

✨ 구현 기능 명세

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nayujin-dev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Yeonseo-Jo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SooY2 commented Oct 27, 2023 •

edited

Loading