[CSS] 배경

🚗 background-image

:요소의 배경 이미지를 한 개, 혹은 여러 개 지정한다.

• background-image의 속성값을 여러개 지정할 경우, 가장 상단에 있는 코드가 이미지의 최상단으로 올라오며 코드가 아래있다면 백그라운드 쪽으로 붙는다. 나중에 선언된 코드가 배경으로 깔린다고 생각하면 된다.

그라데이션도 지정도 가능하다. linear-gradient(방향, 시작 색상, 종료 색상) 

방향같은 경우는 생략이 가능한데, 기본값은 아래에서 위로 그라데이션이 형성된다.
그라데이션은 linear-gradient 외에도 radial-gradient(원형 그라데이션) , conic-gradient(콘형 그라데이션) 가 있다. 

.color-container {
  background-image: url('이미지경로');
}

.color-container {
  background-image: linear-gradient(to top, red, blue);
}

• 이미지 경로는 웹사이트에서 주소를 복사해서 붙여도 되며 혹은 로컬에 내 이미지파일 경로를 적어주면 된다.

🚗 background-position

:요소의 배경 이미지의 위치를 지정

backgournd-position: center(기본값) / left / right / top/ bottom 5가지 키워드를 조합해서 속성값으로 할 수 있음 

혹은 x축, y축 절대값 적용 가능

 

🚗 background-repeat

:요소의 배경 이미지의 반복 여부, 반복 방향을 지정한다.

background-repeat: repeat(기본값) // 기본적으로 해당 속성을 지정해주지않으면 repeat이 적용되어 바둑판식 배경이 된다. repeat되는 것을 원하지않는다면 no-repeat으로 속성값을 지정해주면 된다.

• repeat-x // x축으로만 반복 지정 가능 
• repeat-y //y축으로만 반복 지정 가능

🚗 background-size

:요소의 배경 이미지의 크기를 지정

background-size: auto(기본값)

• cover // 컨테이너에 백그라운드 이미지를 늘려서 꽉 채워준다 -> 이미지 전체가 다 안보이고 부분만 꽉채워질 수 있다.
• contain // 빈틈이 있을 수 있으며 이미지 자체가 컨테이너에 알맞게 들어가게 늘려진다. -> 빈틈이 남더라도 이미지 자체가 보이는 것이 더 중요할 때 사용 
• 200px 160px // x축은 200px y축은 160px이렇게 절대값을 지정해줄 수 있다.

🚗 background-attachment

:요소의 배경 이미지의 스크롤 여부를 지정한다.

• scroll(기본값) //scroll은 웹브라우저 전체의 스크롤을 내렸을 때에만 배경 이미지가 스크롤로 내려가고 내부 스크롤을 움직이면 변하지 않는다. local과의 차이점
• fixed // 배경을 고정시킨다
• local //내부 스크롤을 내렸을 때에도 배경 이미지가 스크롤로 내려간다. 

🚕 background 단축속성

• 위에서 배웠던 속성들을 background 라는 속성 하나에 모두 지정할 수 있다.
• 속성값 순서가 틀리면 없던 속성이 되어 적용되지 않는다. 

/* 속성값 순서 */
background: color image repreat position/size attachment

/* 예시 */
background: red url("../img/star.png") no-repeat center/cover fixed

 

🚓 object-fit 

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

• background: cover / contain 같은 속성값은 img태그나 video태그에 사용이 불가능하다. 
• fill (기본값) // 컨테이너를 꽉채운다.
• cover // 이미지 태그 컨테이너 내에서 적절한 비율로 빈틈이 생기지않게 꽉 채운다.
• contain // 이미지가 컨테이너에 다 들어가게 적절한 사이즈로 들어간다. 빈틈이 생길 수 있다.
• none // 이미지가 원본 사이즈를 그대로 보이게 된다. 기본값인 fill에 비해 늘려져서 찌그러진 이미지를 정상적으로 보이게 할 수 있다. -> 빈틈이 생길 수 있다. 

🚓 object -position 

:<img>나 <video> 등 대체요소의 콘텐츠 정렬 방식을 지정한다. 

background-position과 동일한 속성값