화면 그라데이션 css

화면에 그라데이션을 주어 제목과 설명부분이 잘 보일 수 있는 효과를 준다

<header style={{      backgroundImage:`url("https://image.tmdb.org/t/p/original${showMovie.backdrop_path}")`,
        backgroundPosition:'center',
        backgroundSize:'cover',
        width:'100%',
        height:'100vh',
      }}>
      </header>
      
      
header::before{
    content:'';
    position:absolute;
    left:0;
    width:100%;
    height:100%;
    background: linear-gradient(to right, black, transparent);
  }

• 그라데이션주어야 하는 부분에 ::before 가상요소를 넣어준다
• 부모요소를 기준으로 넣어줄 것임으로 position:absolute를 추가해준다
• 그라데이션이 시작할 위치를 넣어준다(left:0)
• 따로 들어갈 내용이는 없기 때문에 content:''으로 입력해준다
• 높이와 넓이를 정해준다
• background: linear-gradient를 사용하며, 시작점에서 어디로 이동할 것인지(to right), 어떤 색을 입힐 것인지(black), 정지할 부분(transparent)을 입력해준다

linear-gradient() 함수 사용법은 다음과 같다.

linear-gradient(방향또는각도, 색상그리고정지점1, 색상그리고정지점2, ... 색상그리고정지점n);