배경이미지, 다양한 색상표현

배경이미지 : 무형의 존재 => 공간이 있어야지만 채워넣을 수 있음

이미지 : 자기 폭값을 가지고있는 유형의 존재

background-image:url(경로) : 배경이미지를 불러오는 속성/ 반복되는 성격/ ,로 구분지어 배경이미지를 2장이상 적용 가능 (먼저 작성한 이미지가 상단에 표현)

background-repeat : no-repeat / repeat-x(y)

background-size : 500px(x) 300px(y) / % = 가로상의 비율 , cover = 화면상 꽉차게 표현, 가로세로의 비율을 유지함/ contain = 이미지가 잘리거나 형태가 무너지지않는 한도 내에서 제일 크게 설정

background-attachment : 배경 이미지를 뷰포트 내에서 고정할지, 아니면 요소와 함께 스크롤할지 지정하는 속성
   : fixed  고정값  
   : scroll 기본값

 background-position : 배경이미지의 위치를 지정하여 표현하는 속성 
    : x(가로축)  y(세로축) 단어,px,% 가능

단어 = x(left,center,right) y(top,center,bottom)

 [ background로 통일하여 작성가능 ] 
  background: 배경색 배경이미지 배경이미지반복 배경이미지위치;  (띄어쓰기로구분) 

ex) {  background:  #09C url('image.png') no-repeat 10px center; } 

다양한 색상표현

word = 단어로 표현 background-color : red;
hex = hex값 #ff0000 <- 16진수로 표현  /red드레그해서 ctrl+e / 반복되는 2자리는 병합하여 사용가능
rgb = rgb값으로 표현 background-color:rgb(255,0,0); 
rgba = rgb값에 투명도 추가 background-color:rgba(255,0,0,0.5); (투명도는 0~1사이의 소수값 / 상속 = 자식요소를 포함한 모든 부분에 투명도가 적용
hsl(hue,saturation,lightness) = 색상,채도(컬러의정도),명도 background-color : hsl(0(0~360,0=red,120=green,240=blue),100%,50%);
hsla = 색상,채도,명도 + 투명도 background-color(0,100%,50%,0.5);
opacity = 투명도를 나타내는 속성으로 요소와 요소가 담고 있는 컨텐츠까지 투명하게 처리 =컨텐츠 전체

alpha : 색상에 대한 투명도를 부여하는 값