자주 사용하는 CSS 속성

배경 이미지: background-image

• ex)
  background-image: url('pizza.png');
  background-repeat: no-repeat; (배경 반복)
  background-position: center; (이미지 위치)
  background-size: cover; (이미지 크기 / cover : 이미지 비율 유지하며 꽉차게)

그라디언트: linear-gradient

• background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

• 각도 변경 : background-image: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

• gradient generator : 그라디언트 코드를 쉽게 만들어주는 사이트

• background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)), url('pizza.png');
  이미지와 그라디언트를 겹쳐놓는 방법

그림자: box-shadow

• box-shadow: 10px 15px 20px 5px rgba(0, 0, 0, 0.4);
  중간에 있는 20px은 blur라는 흐려지는 효과이다
  중간에 있는 5px은 그림자가 퍼지는 크기다

불투명도: opacity

• opacity: 0.5; (rgba의 a와 비슷하다)
  요소 전체를 반투명하게 만들 때 사용