[2024.05.02] TIL 14일차

[ 본캠프 14일차 기록 ]

🖥️ 오늘 공부한 내용 🖥️

3주차 팀프로젝트 진행 중...

1. 팀프로젝트 2일차

오늘은 나랑 같은 부분을 맡은 팀원분이랑 작업물을 합치는 작업을 했다
그 과정에서 버튼 누르면 탑으로 스크롤되는 기능과 다크모드, 반응형 기능 등을 팀원분께서 추가해주셨다
내가 오늘 작업한 부분중에서는 "mask-image"가 조금 헷갈렸었다

.detailImg {
  position: relative;
}

.backImg {
  width: 800px;
  height: 450px;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 450px;
  background: linear-gradient(to right, rgb(0, 0, 0, 1), rgba(255, 255, 0, 0));
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
.mask2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 450px;
  background: linear-gradient(to top, rgb(0, 0, 0, 1), rgba(255, 255, 0, 0));
  mask-image: linear-gradient(to top, rgba(0, 0, 0), rgba(0, 0, 0, 0));
}

• image를 relative로 지정하고 그 위에 그라데이션 효과를 줄 요소들을 absolute처리 해준다
• mask-image와 background로 이미지 위에 그림자처럼 덮는 효과를 준다
• 위에 "그림자처럼 덮는"은 linear-gradient로 그라데이션 효과를 줄 방향과 색상을 요소에 덮어씌워 표현해준다
• 완성본은 다음과 같다
  
• 이런식으로 영화 배경사진 위에 검은색 그라데이션을 각각,
  왼쪽에서 오른쪽 / 아래에서 위쪽으로 주어 약간 흐릿한 배경을 연출할 수 있다