[CSS] Background 배경/ 투명도 opacity와 alpha / 그라디언트 /

background-color	배경 색
background-image	배경 이미지 background-image: url()
background-repeat	이미지 반복 여부 / no-repeat : 반복하지 않음.
background-attachment	배경을 스크롤에 따라 고정할지 같이 스크롤할지 정함.
background-position	배경의 위치를 정함 background-position: center center;
background-size	배경 크기  cover / contain 정비율을 유지하면서 크기 조정
background 한번에 줄 수 있다.	background: url() 반복여부 가로위치 세로위치 사이즈
opacity	영역 안에 포함된 border, 컨텐츠까지 모두 투명하게 만들고, 자식요소들까지 통채로 투명하게 만든다.
alpha	컨텐츠와 border를 제외한 배경영역만 투명하게 만든다.

 

 

---

< background 배경 속성 >

 

웹 문서를 꾸미기 위해 배경 이미지나 여러 속성들을 적용 할 수 있다.

 

[기본형]
1. background-color
: 배경 색상을 지정함. 색상명이나 #hex, rgb 또는 rgba 로 속성값을 사용

2. background-image
: 배경 이미지를 넣을 수 있음. url() 속성값을 사용하며 ()사이에 이미지 경로가 들어간다. 

배경 이미지 중첩 가능하다. 중첩할때는 , 로 구분해서 다시 url () 써준다. 앞에 불러온 이미지가 더 앞으로 올라온다. 

3. background-repeat
: 배경 반복 여부를 지정함. 배경 속성은 바둑판 배열로 반복되는 것이 기본 값임.
     [속성값]
     - no-repeat : 반복하지 않음. 불러온 배경 이미지를 1번만 보여줌
     - repeat-x : 배경 이미지를 가로로 반복함
     - repeat-y : 배경 이미지를 세로로 반복함

4. background-attachment
: 배경을 스크롤에 따라 고정할지 같이 스크롤할지 정함.
      [속성값]
     - fixed: 스크롤을 따라 움직이지 않고 제자리에 고정함. . 사진은 고정되있고 이미지가 스크롤에 따라 달라진다
     - scroll: 기본값으로 스크롤이 움직이면 스크롤 따라 배경이 위로 올라감.
     
5. background-position ☆ 반응형할때 쓴다. 강조하고 싶은 부분을 포지션으로 정한다. 
 : 배경의 위치를 지정함. 

x축 y축 순서 공백으로 구분 / 하나만 쓰면 x,y 같은 값 적용 / 영역의 왼쪽 상단 위가 기준점이다. 
      [속성값]
      - px (애매한 위치일때 px로 위치를 설정해준다.) ex) background-position: 100px 50px; 
      - left : 영역의 왼쪽으로 정렬함
      - center : 배경을 가로나 세로 가운데로 정렬함
      - right : 영역을 오른쪽으로 정렬함
      - top : 영역의 위로 정렬
      - bottom : 영역의 아래로 정렬

 

6. background-size
: 배경의 크기를 지정함.

100%로 채우면 영역의 가로 사이즈에 맞춰서 이미지를 정비율로 100% 채운다. 근데 위 아래 공간이 남을 수 있다.

비해 cover은 짤리더라도 영역을 채운다.그래서 백그라운드 이미지는 cover로 쓰는게 좋다.
      [속성값] (반응형할때 주의)
      - px / % 
      - cover : 배경 이미지를 가로 영역에 맞춰 채움 (찌그러지지않고 사진이 정비율을 유지하면서 짤리면서 채운다.)
      - contain : 배경 이미지를 세로 영역에 맞춰 채움 (찌그러지지않고 사진이 정비율을 유지하면서 짤리면서 채운다.)

 

---

* 속성들을 한번에 써 줄 수 있다. 그럴땐 background: 로 써준다.  

 background: url() 반복여부 가로위치 세로위치 컬러 / 사이즈

컬러가 들어가면 사이즈 앞에 / 표시

컬러 안들어가면 / 안쓰고 background: url() 반복여부 가로위치 세로위치 사이즈

(한꺼번에 선언하기 어려우면 개발자 도구 들어가서 수정하면 편하다.)

---

background-attachment: fixed; 로 효과 줄 수 있다. 아래처럼 사진은 고정되있고 이미지가 스크롤에 따라 달라진다. 

---

< 투명도를 조절하는 opacity와 alpha >

컨텐츠에 투명도를 적용하고 싶을 때 opacity와 alpha를 이용함 
투명도는 0~1까지의 값을 입력할 수 있고, 소숫점 단위로 투명도를 조절할 수 있다.
0이 완전 투명한 상태를 뜻하며 1이 완전히 선명한 상태를 의미한다. 

▶opacity의 경우, 영역 안에 포함된 border, 컨텐츠까지 모두 투명하게 만들고, 자식요소들까지 통채로 투명하게 만든다. 
▶ alpha의 경우, 컨텐츠와 border를 제외한 배경영역만 투명하게 만든다. 

[기본형]
    - opactiy : 0~1; / opactiy는 '속성명'이다 / 투명도에는 단위를 쓰지 않는다. 
    - background-color : rgba(red,green,blue,alpha); / alpha는 '속성값'이다

---

< 그라디언트 gradient >

 

'속성값'이다.
배경 색상이나 글자에 그라데이션을 넣을 수 있다.

배경에 적용할 경우 background-image 속성을 이용하며
글자에 적용할 경우 color에 적용한다. 

호환안되는 브라우저가 있어서 그럴땐 호환 단어를 붙여줘야한다. 

1. linear-gradient(각도 to 방향, 색상중단점 시작위치%, 색상중단점2 시작위치%...)
    [방향 종류]
    - to top: 아래에서부터 위로 그라데이션을 적용함.
    -to left: 오른쪽에서 시작해 왼쪽으로 적용
    - to right: 왼쪽에서 시작해 오른쪽으로 적용함
    -to bottom: 위에서부터 아래로 그라데이션을 적용함. 
    *각도만 쓰고싶으면 각도만 적어도 된다. 

2. radial-gradient(최종 모양 크기 at 위치, 색상중단점 시작위치%, 색상중단점2 시작위치%...)
    학종이 같은 느낌을 준다. 
    [최종모양]
    -ellipse : 타원
    -circle : 정원
    [크기]
    -closet-side: 정원의 경우 그라디언트 가장 자리가 그라디언트 중심에서 가장 가까운 요소에 모서리와 만나고, 
    타원의 경우 그라디언트 중심에서 가장 가까운 요소의 수평축이나 수직축이랑 만남.

 

 

● 90deg- 각도 / 시계방향으로 돈다 / 음수면 반시계방향 

#색상% - 색상중단점, 해당 색상이 시작되는 위치를 %로 표현 ( 0%는 왼쪽 100%는 오른쪽 위치를 뜻한다. )

색을 여러 개 넣고 싶다면 , 로 구분한다. 

 

단색 그라디언트 참고 사이트 

https://webgradients.com/

Free Gradients Collection by itmeo.com

오른쪽 아래 copy css 클릭하면 복사붙여넣기 된다. 

linear-gradient

복붙해서 쓰는 게 편하다 

 

radial-gradient