[CSS] 색상, 배경

rgb / rgba
rgb(red, green, blue)값을 이용해 색상을 표기하는 방법이다.
rgb요소에는 0에서 25까지의 숫자를 사용한다.
rgba(0, 0, 0, 0.35) > 투명도를 줄 수 있다.
opacity : 요소의 불투명도를 설정하며 0~1까지의 숫자를 지정한다.

background-image
요소의 배경 이미지를 한개, 혹은 여러개 지정하며 그라데이션 적용도 가능하다.
background-image: linear-gradient(to left, #ebfc80, #00807e);
linear-gradient (선형), radial-gradient (원형), conic-gradient (콘형) 두개의 이미지를 동시에 깔면, 먼저 선언된 이미지가 위에 보여진다.
background-position
요소의 배경 이미지의 위치를 지정한다.
bottom, top, left, right를 조합해서 사용한다.
background-repeat
요소의 배경 이미지의 반복 여부, 반복 방향을 지정한다.
repeat(기본값), no-repeat, repeat-x(x축으로 반복), repeat-y(y축반복)
background-size
요소의 배경 이미지의 크기를 지정한다.
auto(기본값), cover(이미지를 늘려서 요소안에 빈틈이 없도록 꽉 늘려서 채운것), contain(이미지 전체가 다 보이도록 사이즈를 늘려서 보여주는것)
background-attachment
요소의 배경 이미지의 스크롤 여부를 지정한다.
scroll(기본값), fixed, local
background 단축속성
관련 속성들을 한번에 지정할 수 있다.
background-color, background-image, background-position, background-repeat, background-attachment
⭐️background : color image repeat position/size attachment
반드시 이 순서대로 사용 되어야 오류 없이 사용할 수 있다.

<img>나 <video> 등 대체 요소의 내용이 지정된 너비와 높이에 맞춰지는 방식을 지정한다.

(요소의 크기에 맞게 <img> 태그와 <video> 태그의 크기를 조정하는 방법)

속성값 : fill(기본값), cover, contain, none, scale-down

.img01 { 
  object-fit: fill; 
}

object-fit을 이용했을 때 cover나 none속성으로 이미지가 잘려서 보일 때 보일 위치를 이동하는 속성
(<img>나 <video> 등 대체요소의 컨텐츠 정렬 방식을 지정)

.img03 {
    object-position: right bottom;
}

x축 키워드 : left, center, right

y축 키워드 : top, center, bottom

수치는 px이나 %를 이용해서 디테일한 위치를 지정 가능

paso a paso