올 어바웃 배경, 이미지
{ background-color: black; } : 16진수 표기나, Rgba, 색상 이름 표기 등.. color picker 또느 colorizilla 쓰면 됨.
근데 바디에 배경색을 지정 했다고 해서 하위에 상속이 되는 것은 아니다. 즉, 하위 요소에도 얼마든지 다른 배경색을 넣어 다르게 할 수 있다.
배경 적용 범위 조절하기 : { background-clip: border-box; padding-box; content-box; }
보더 박스는 배경이 테두리까지 적용되고, 패딩박스는 테두리를 제외한 바로 밑 패딩 범위까지 배경이 적용되며, 컨텐츠 박스는 박스 모델에서 내용 부분에만 배경을 적용한다.
{ background-image: url(' tree.png '); } : 여기서 만일 tree.png 파일이 채우려는 body 요소 크기보다 작을 경우, 해당 요소를 가득 채울 정도로 가로와 세로로 반복된다. 이거슨 background-repeat (디폴트값)
{ background-repeat: repeat;(디폴트) repeat-x; repeat-y; no-repeat; } : 배경 이미지의 크기가 배경을 채우려는 요소보다 작을 경우, 기본적으로 반복해 표시됨. background-repeat 속성을 사용하면 배경 이미지를 반복하지 않게 할 수 있고 (no-repeat), 반복하더라도 가로로 반복이나 세로로 반복 등 반복의 방향을 지정할 수 있다.
1) repeat : 브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복한다.(디폴트)
2) repeat-x : 브라우저 창 너비와 같아질 때끼지 배경 이미지를 가로로 반복한다.
3) repeat-y : 브라우저 창 높이와 같아질 때까지 배경 이미지를 세로로 반복한다.
4) no-repeat : 배경 이미지를 한 번만 표시하고 반복하지 않는다.
배경 이미지 크기 조절하기 : { background-size: 속성값; }
속성값 : auto, contain, cover, px, %
blah blah..
1) auto : 원래 배경 이미지 크기만큼 표시됨.
그러니까 웹페이지 상의 요소는 내가 이미지를 할당할 공간은 작은데 실제 이미지 크기는 그 한 3-4배 되는거야. 이 때 auto 이렇게 놓으면 이미지의 어느 한 부분만 큼지막 하게 확대 되어서 보여질 거야.
2) contain : 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소 한다. 비율 대로 들어가는 거라서 이미지가 요소 안에 들어갔어도 웹페이지에서 요소가 일부 공간이 남아 보일 수도 있다. 그래도 이게 젤 보기 좋다.
3) cover : 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소 한다. 비율 다 쌩까고 그 그림 늘엿다 줄였다 하는 거마냥 그렇게 대충 요소에 맞춰서 줄이고 늘려서 덮어버리기 한거.
4) background-size: 60% 40%; 가로 60 세로 40 만큼 배경 이미지를 채워라
5) background-size: 100% 100%; 요소의 가로 세로에 맞도록 이미지를 확대 또는 축소한거. 2번 다음으로 맘에 든다.
6) background-size: px px;
배경 이미지 위치 조절하기 : 배경이미지가 no-repeat 일 때 (브라우저에 배경이미지를 한 번만 표시하고 반복하지 않을때)
: { background-position: <수평 위치> <수직 위치>; }
: 수평 위치 (길이값) : left center right, 백분율 (가로% 세로%; - 왼쪽 모서리 기준),
길이 값(가로px 세로px;)
background-attachment : 배경 이미지 고정하기
: 기본값 (scroll;) - 화면 스크롤과 함께 이미지도 스크롤 됨. (fixed;) - 화면이 스크롤 되더라도 배경 이미지는 고정된다.
background 속성- 속성 여러개를 한 줄로 표기. 한 줄에 한 번에 속성값 지정이 가능하다는 거
: 예시 ) background: url('images.jpg') no-repeat- fixed right bottom; }
