1-1.로그인페이지 만들기

1. 텍스트에 그라데이션 넣기

    background: linear-gradient(90deg, #A29BFE 1.06%, #FD79A8 78.98%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

 

"background-clip: text;"와 "-webkit-background-clip: text;"는 CSS에서 사용하는 속성입니다.

이 속성들은 배경 스타일이 텍스트의 전경 대신 텍스트 자체에 적용되도록 하는 역할을 합니다.

다시 말해, 이 속성을 사용하면 텍스트의 색상이 아닌, 텍스트 배경의 이미지나 그라데이션 등이 텍스트 색상으로 보이게 됩니다. 그러나, 이 속성은 모든 브라우저에서 지원되지 않습니다. "-webkit-" 접두사가 붙은 것은 WebKit 기반 브라우저(예: 크롬, 사파리)에서만 적용됩니다. => 배경을 텍스트에 적용하는 속성

 

"-webkit-text-fill-color: transparent;"는 텍스트의 채움 색상을 투명하게 만드는 속성입니다. 이 속성을 이용하면 배경 이미지나 그라데이션 등이 텍스트를 통해 보여지게 됩니다. 이 속성 역시 모든 브라우저에서 지원되지 않으며, WebKit 기반 브라우저에서만 작동합니다. => 텍스트에 씌워진 색을 지우는 속성

=>배경을 텍스트에 넣고, 텍스트에 씌워진 검은 색을 지움으로써 텍스트에 그라데이션을 넣기 가능