배경이미지

▼background
▷배경이 적용되려면 글자또는 이미지가 태그안에 있어야함
  또는 height값을 강제로 넣어야함

-background-color:#ff0 (배경색)


▷배경이미지 삽입/변경
-background-image:url ("이미지경로");
 ㄴ 박스의 크기만큼 배경이 채워짐
-background-repeat:no-repeat;
 ㄴ배경이미지가 반복 되지 않음
-background-size:cover;
 ㄴ박스 이미지 큼 배경이미지 크기를 늘림
-background-position: X축 Y축;
 ㄴ배경 이미지 위치는 X축: left / center / right Y출 top / center bottom
 ㄴ배경의 위치는 키워드로 할 수도 있고 px, % 단위도 적용가능 (왼쪽 상단 기준)

=> 함축해서 사용가능
 ㄴbackground:컬러색  이미지  반복  위치
 ㄴbackground:#ccc    url(이미지경로)    no-repeat    center
 ㄴbackground-size는 단독으로 사용함
 ㄴbackground-size:cover

▷상위 폴더로 나가기
-(../경로/파일이름)
▷여러 클래스 불러오기
- 클래스 사이에 ' , ' 넣기
 ㄴex)
     .box1, .box2{width:200px; height:100px;}


▼이미지와 배경이미지 차이점
▷이미지는 태그 
    ㄴ<img src="이미지 경로">
-태그 이므로 html문서에 입력
-html 문서를 기준으로 이미지가 있는 경로를 입력
-이미지는 부모 크기에 영향을 받지 않음
-이미지보다 부모크기가 작으면 이미지는 부모 크기를 뚫고 나감
-이미지 위에 아무것도 올려둘 수 없음

▷배경이미지는 스타일 
    ㄴbackground:url(배경 이미지 경로)
-css에 입력
-css를 기준으로 배경이미지가 있는 경로를 입력
-부모 크기에 영향을 받음 (부모 크기만큼만 나옴)
-부모 크기가 작으면 배경이미지는 일분분만 나옴 / 크면 배경이미지는 반복이 됨
-배경 이미지 위에 글자 또는 이미지를 올려둘 수 있음



▼이미지와 글자를 이동
▷position
-position:absolute - 움직이는 박스에 적용
-position:relative - 움직이는박스의 부모
-position:fixed
-좌표: left / right / top / bottom


▷absolute
-absolute는 공중에 떠 있는 상테 (블록요소가 아님)
-부모는 자식의 높이를 인지 못함
-부모한테 강제로 높이를 줘야 함



▼바로 밑에 있는 자식 선택
▷.부모>자식
-부모 바로 밑에 있는 자식만 선택
 ㄴex)
    .wrap>li


▼이미지 기준점 이동
-기본 기준점은 좌측 상단이다
▷background-position: 'center / top / bottom' ;


▼좌표 이동
▷transform('변형'): translate('좌표') 'x'px, 'y'px;
 ㄴex)
    transform:translate -50%, -50%
-단위는 % 나 px도 사용가능

▷translate 뒤에 'X' 나 'Y' 입력하면 특정 좌표만 이동 가능
 ㄴex)
    transform:translateX: 50px;

 

▼배경이미지 위치 고정
▷ background-attachment:fixed;
-background 으로 한번에 사용가능

 

▼투명배경
▷ {background:rgba(0,0,0,0.7);}