배경을 나타내는 background의 속성을 변경해 줍니다.
background-color: 배경색상을 바꿀때 사용합니다.
hex, rgb, rgba 크게 3가지로 바꿀 수 있습니다.
hex로 배경색상을 준 모습입니다.
rgb의 값을 이용해서 색상을 꾸민 모습입니다.
rgba의 마지막 값은 투명도를 나타냅니다 낮을수록 투명해집니다.
background-image 배경 이미지를 나타냅니다.
image를 사용할때는 url()에 주소를 넣어서 표시해줍니다.
background-repeat 이미지가 태그의 width, height보다 작으면 반복되는 상황이 발생하는데 이때 repeat을 어떻게 할지 정해줍니다.
no-repeat으로 이미지의 반복을 막아줄 수 있습니다.
background-size 배경 이미지의 사이즈를 정해줍니다.
no-repeat으로 반복을 막아주고 background-size를 contain으로 해주면 원본 사이즈 그 자체로 포함된 모습으로 보여줍니다.
똑같이 contain을 사용했지만 no-repeat을 적용하지 않는다면 이미지가 반복을 나타내며 화면을 채움니다.
background-size를 cover로 해주면 이미지를 늘려서 화면을 cover해주는 모습을 볼 수 있습니다.
background-position 이미지 위치를 정해줄때 사용합니다.
x축 y축의 값을 정해줘서 이미지의 위치를 지정해줄 수 있습니다.
???