배경속성
웹 문서를 꾸미기 위해 배경이미지나 여러 속성들을 적용할 수 있다.
기본적으로 바둑판 배열로 반복해서 나온다. 그러므로 백그라운드 리핏을 노리핏으로 설정해야한다.
[기본형]
1. background-color
:배경에 색상을 지정함. 색상명이나 #hex, rgb 또는 rgba와 같은 속성값을 사용함.
- background-image
:배경 이미지를 넣을 수 있음. url()속성값을 사용하며 ()사이에 이미지 경로가 들어감.
3.background-repeat
:배경의 반복 여부를 지정함. 배경속성은 바둑판 배열로 반복되는 것이 기본값임.
[속성값]
-no-repeat : 반복하지 않음. 불러온 배경이미지를 1번만 보여줌.
-repeat-x : 배경 이미지를 가로로 반복함.
-repeat-y : 배경 이미지를 세로로 반복함.
4.background-attachment
: 배경을 스크롤에 따라 고정할지 같이 스크롤할지 정함.
[속성값]
- fixed : 스크롤을 따라 움직이지 않고 제자리에 고정함.
- scroll : 기본값으로 스크롤이 움직이면 배경도 움직인다.
5.background-position
: 배경의 위치를 지정함.
[속성값]
- px
- left : 영역의 왼쪽으로 정렬함.
- center : 배경을 가운데로 정렬함.
- right : 영역의 오른쪽으로 정렬함.
- top : 영역의 위로 정렬함.
- bottom : 영역의 아래로 정렬함.
6.background-size
: 배경의 크기를 지정함.
- background: url() 반복여부 가로위치 세로위치 컬러/사이즈 \
:같이 선언할 수있다.
<예시>
background:url() no-repeat 100% 100% cover;
위의 이미지와 같이 배경이미지는 중첩해서 사용할 수있고 ,를 이용해서 입력한다.
+background-size: contain;
영역을 정비율로 채움 크기를 확대했을때도 사이즈가 변함이 없고 주위의 여백이 커진다.
투명도를 조절하는 opacity와 alpha
컨텐츠에 투명도를 적용하고 싶을 때 opacity와 alpha를 이용할 수 있다.
opacity와 alpha값은 모두 0~1사이의 값이다. 오퍼시티를 적용하게되면 글자 보더 백그라운드 등 모든 컨텐츠에 적용이된다.
투명도는 0~1까지의 값을 입력할 수 있고, 소숫점 단위로 투명도를 조절할 수 있다.
0이 완전 투명한 상태를 뜻하며 1이 완전히 선명한 상태를 의미한다.
오퍼시티의 경우 영역안에 포함된 border와 컨텐츠 등을 모두 투명하게 만들고
alpha의 경우 컨텐츠와 border를 제외한 배경영역만 투명하게 만든다.
[기본형]
-opacity : 0~1; 오퍼시티는 '속성명' 단독으로 사용가능하다.
-background-color : rgba(red,green,blue,alpha); => alpha는 '속성값'
