1. 배경에 대한 기본 CSS 속성
CSS에서는 텍스트 뿐만 아니라 배경 또한 꾸미는 것이 가능합니다. 이러한 배경의 값은 텍스트의 설정값과 동일하게 절대 단위 및 상대 단위 적용이 가능합니다.
background-color: 배경의 색상을 설정합니다. 기본적으로 색상 이름, #, rgb 단위 등으로 지정이 가능합니다.
background-image: url에 경로를 지정하여 해당 이미지로 배경을 꾸밉니다. 또한 url 대신 linear-gradient(방향, 시작 색상, 종료 색상)을 지정하여 그라데이션 효과를 주는 것 또한 가능합니다.
이런 조합으로 url(), linear(혹은 radial, conic등)-gradient를 차례대로 작성 해주어 배경화면과 그라데이션 효과를 동시에 줄 수도 있습니다. 이때 먼저 작성 된 속성값이 화면에 먼저 나타나는 우선권을 갖게 됩니다.
background-position: 배경의 위치를 지정하는 태그입니다. top, left, bottom, right, center 다섯가지 키워드를 조합하여 해당 위치로 지정 가능하며 x축 px과 y축 px(background-position: 임의 Xpx, 임의Ypx)으로도 속성값을 주어 원하는 위치에 해당 컨텐츠 배치를 가능하게 할 수도 있습니다.
background-repeat: 배경이 해당 지정 구역보다 작을 경우 이미지가 반복되어 나타나는 기본값을 가지게 되는데, 속성을 no-repeat로 속성값을 줄 경우 해당 배경 요소보다 지정 구역이 커도 배경 요소가 딱 한 번 만 나타나게 할 수 있습니다. 만약 특정 방향에만 반복을 주고 싶다면 repeat-x, repeat-y 속성값으로 해당 축을 기준으로 배경이 반복되게 할 수도 있습니다.
background-size: 백그라운드의 사이즈를 지정합니다. default 값은 auto(이미지의 실제 크기) 이며 단위로는 px, em, rem등의 지정이 가능하고 cover(비율을 유지 하면서 x축과 y축 중 긴 값에 너비를 맞춤), contain(비율을 유지 하면서 각 축중 짧은 값에 너비를 맞춤)값으로도 지정이 가능합니다. 물론 px 단위로 x(width)와 y(height) 높이 지정도 가능하며 단독 단위로 사용시 가로 세로가 동일한 비율로 변경 됩니다.
background-attachment: 해당 배경 요소에 scroll바 적용에 대한 속성값 지정이 가능합니다. scroll(기본값, 윈도우 스크롤만 적용 가능), fixed(이미지가 뷰포트에 고정되어 스크롤 적용 X 고정 상태), local(요소 내 스크롤시 이미지도 같이 스크롤)이 있으며 참고로 fixed로 속성값을 정할 경우 이미지에 적용 되는 크기는 뷰포트를 기준으로 적용 되기 때문에 이미지게 적용 된 크기 관련 속성은 무효화 됩니다.
object-fit: img나 video, object 태그 등의 요소의 사이즈를 부모 요소 안에서 어떻게 지정 맞출 것인지를 결정하는 속성으로서 fill, cover, contain, none 값으로 지정 가능합니다.
object-position: background-position과 사용법이 동일하며 대체 요소들의 콘텐츠 정렬 방식을 지정하는 요소입니다.
인생은 본인의 삶을 곱씹어보는 R과 타인의 삶을 배워 나아가는 L의 연속이다.