clip, origin 등 여러 가지 속성들이 있지만,
일단은 -image, -color, -size, -position, -attachment, -repeat
이것들만 정리한다.
background-color: 그냥 배경 색. 색 이름, 16진수, rgb로 작성하면 된다. 그냥 background에 써도 상관은 없으나 transition을 적용할 때는 background-color로 적어주는 것이 좋다.
background-image: 박스 안을 이미지로 채운다. 속성값은 'url("(이미지 경로)")' 이렇게 쓰면 된다.
background-repeat: 이미지로 박스 안을 채울 경우, 기본 값은 repeat이다. 바둑판무늬로 반복된다. 그 이외의 속성값으로는, no-repeat(반복하지 않는다. 사진 하나만 달랑 남아있다), repeat-x(가로 방향으로만 반복), repeat-y(세로 방향으로만 반복)이 있다.
background-position: 이미지로 박스 안을 채울 경우, 이미지를 어떤 위치에 오게 할 것인지 결정한다. center, left, right, top, bottom으로 정할 수도 있고, px등의 단위로 더 세세하게 지정할 수 있다. x축 y축 순서로 적어주면 된다. 100px 50px 이런 식으로.
background-size: 이미지로 박스 안을 채울 경우, 이미지의 크기를 결정한다. 이것도 px로 세세하게 지정할 수 있다. 그 이외에는 cover(가로와 세로 중 더 긴 쪽에 이미지의 길이를 맞춘다. 이름 그대로 공간 안에 이미지가 꽉 찬다), contain(더 짧은 쪽에 이미지의 길이를 맞춘다. 공간이 남더라도 이미지의 비율을 유지하면서 그대로 전부 보여줄 수 있다), auto 등이 있다.
background-attachment: scroll(기본값), fixed(이미지가 뷰포트가 고정되어 있어 스크롤을 내려도 그대로다. 비유하자면 창문으로 풍경을 내다보는 느낌이다)가 있다.
tip. 배경색만 투명하게 만드는 법
배경을 살짝 투명하게 만들고 그 위에 글씨를 쓰고 싶을 때가 있는데, 문제는 부모 요소에 투명도를 주면 자식도 투명해진다는 것이다. 그래서 찾은 방법.
1. rgba를 적용하기
rgba(33, 44, 55, 0.5) 이런 식으로 마지막에 투명도만 추가해주면 된다.
이게 제일 쉬운 방법 같다.
검색한 블로그 글.
https://kcmschool.tistory.com/48
2. after를 이용하기
글자가 들어있는 요소에 after를 적용해서 이렇게 써 줘도 된다. left 값과 right 값은 임의로.
이건 맨 처음에 어디서 봤었는지 기억나지 않는다.
다만 처음 봤을 때 나랑 비슷한 생각을 하는 사람들이 생각 외로 많다는 걸 알았다.
content: "";
position: absolute;
z-index: -2;
left: 400px;
top: 400px;
width: 400px;
height: 300px;
background: red;
opacity: 0.5;
