[TIL 2023.05.16] 팀프로젝트 css 수정과 내 컴퓨터의 이미지 파일을 링크화 하기

💻오늘 배운 내용

CSS : cubic-bezier

post images에 이미지 업로드해서 링크 만들기

---

❓발생한 이슈/고민

• 여전한 repository 연동 이슈. mian에 있는 파일들을 내 branch에 pull 해오고 싶었는데 왜인지 오류가 났다. 가져오지를 못해!
• 모달창 내 요소들이 좌측에 몰려있다, 그리고 수직으로 정렬되어 있는 것이 마음에 들지 않았다.
• 이미지와 팀원소개 텍스트를 나란히 놓고 싶다!
• 어제 만들었던 모달창 애니메이션 기능이 마음에 들지 않았다

      클릭해서 위로 올라오는 모션까지는 좋지만 브라우저 창 전체를 덮어버린 것이 불만!

      올라오는 애니메이션이 실행되면서도 페이지 타이틀은 계속 보이게 하고 싶었다.

 

💡해결과정

main의 파일들을 가져오려하니 “refusing to merge unrelated histories”

이런 오류 메세지가 떴다.

git pull origin main --allow-unrelated-historiesd

명령어 한방에 간단히 해결되는 문제였다…

---

css로 요소들 가운데 정렬하고 이미지 옆에 텍스트 나란히 위치 하도록

.modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.modal .photo {
  align-self: flex-start;
  margin-right: 20px;
}

.modal .name {
  font-weight: bold;
}

.modal .body {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
  flex-wrap: wrap;
}

.modal .document {
  list-style-type: none;
  padding: 0;
  margin-left: 20px;
  margin-bottom: 10px;
}

.modal .btn.js-close-modal {
  margin-top: 20px;
  align-self: flex-end;
}

해당 css를 추가 및 수정했다.

---

모달창 올라오는 위치 조정을 해보자.

.modal {
  background: #fff;
  width: 100%;
  height: 50%;
  margin: 0;
  padding: 0;
  transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transform: translateY(100%);
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  overflow: hidden;
}

.container.modal-open .modal {
  transform: translateY(0%);
}

모달의 높이를 50%로 설정하고

• transition 속성을 transform 속성에만 적용하여 애니메이션 효과를 주도록 수정.
• transform 속성을 **translateY(100%)**로 설정하여 모달 창을 아래로 이동하도록.
• **.container.modal-open .modal**에서는 **transform: translateY(0%);**로 설정하여 모달이 나타날 때 위로 올라오게 했다.

그러나….

모달창이 브라우저 창 상단에 촥 올라가버리는 바람에 상당히 괴상한 모양새가 되었다.

.modal {
                background: #fff;
                width: 100%;
                height: 50%;
                margin: 0;
                padding: 0;
                transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1);
                transform: translateY(100%);
                top: 100%;
                position: fixed;
                left: 0;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
            }

            .container.modal-open .modal {
                transform: translateY(91%);
            }

.container.modal-open .modal 의 transform: translateY 값을 91%로 수정. 내가 원하던 형태가 되긴 했으나 클로즈 버튼을 눌렀을 때 아래로 내려가면서 사라져야 하는데 애니메이션이 사라졌다!

이후에도 조금씩 수치를 변경하거나 하면서 계속 수정을 반복했지만

 

5차] 클로즈 눌렀을때 이미지카드들이 버벅임

6차] 페이드인 딜레이 시간 설정때문임 시간 삭제.

7차] 체이드인 함수 건들면 안되고 딜레이만 삭제

8차] 모달창 클로즈 했을때 그냥 쉭 사라져버리는 이슈 발생

9차] 심지어 어제 내내 고민했던 카드 안 사라짐 이슈 재발발

10차] 딜레이 시간 삭제하면 안됨 100으로 설정

등등 점점 문제들이 커지며 산으로 가던 중…

 

팀원들에게 도움을 요청했다.

결국 이런저런 문제가 있었지만 팀원이

.modal {
          background: #fff;
          width: 100%;
          **height: 100%;**
          **margin: 0;**
          padding: 0;
          transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
          top: 100%;
          position: fixed;
          left: 0;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
      }

.modal {
          background: #fff;
          width: 100%;
          **height: 90%;**
          **margin-top: 160px;**
          padding: 0;
          transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
          top: 100%;
          position: fixed;
          left: 0;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
      }

단 두 줄로 문제가 말끔히 해결되었다

현타가 온다.. 나는 5시간 고민하고도 해결 못한건데… 삽질만 한참 한 느낌이다..

---

아이콘 이미지 png 색상 변경은 굉장히 간단했다.

filter: contrast(0);

대비값을 0으로 주면 회색으로 간단하고 빠르게 변경!

 

🧐궁금점과 부족한 내용

• 아직 css의 명령어..? 위치조정, 가운데 정렬, 좌측정렬 같은 것들의 이해가 부족해 보인다.
• 공부..공부하자!

 

📋레퍼런스

https://int-i.github.io/web/2022-06-20/css-img-svg-color/ 아이콘 색상변경 방법

post images에 이미지 업로드해서 링크 만들기