본문 바로가기
CSS

6.CSS3 그라데이션&배경

TechMan1 2019. 1. 29. 10:56


1. 선형 그라데이션 만들기

2. 방사형 그라데이션 만들기

3. background-size 속성

4. background-clip 속성

5. 투명 경계선

6. 멀티 배경

7. opacity 속성






1. 선형 그라데이션 만들기

1. CSS3는 두개 이상의 특정한 색을 부드럽게 변환하는 그라데이션을 가능하게 한다.

CSS3에는 Linear 와 Radial 타입 두가지의 그라데이션이 있다.


선형 그라데이션을 만들기 위해 적어도 두가지 색상지점을 선택해야 한다. 색상지점이란 부드럽게 표현하려고 하는 색상이다. 또한 시작점과 방향, 그라데이션 효과를 정할 수 있다. 색상은 색이름, 16진수값, RGB, HSL까지 사용 가능하다.

모질라 계열 브라우저에 사용하기 위해 접두어 -moz가 붙는다.

    
div {
   width: 300px; 
   height: 100px;
   margin: 4px;  
   background:-moz-linear-gradient(DeepSkyBlue, Black);
}



2. 색상지점

  - 색상지점은 ","로 구분해서 여러개 지정할 수 있다. 브라우저는 각 색상에 다른 색상지점을 만들어낸다.

    

div {
   width: 300px; 
   height: 100px;
   margin: 4px;  
   background:-moz-linear-gradient(blue, yellow, green, pink, white);
}



  - 각 색상지점 비율을 선택할 수 있다.

    

div {
   width: 300px; 
   height: 100px;
   margin: 4px;  
   background:-moz-linear-gradient(blue 20%, yellow 30%, green 85%);
}




3. 그라데이션 방향

  - 그라데이션 방향을 변경할 수 있다. 왼쪽에서 오른쪽으로 할 때는 light, 아래에서 위로 할때는 bottom 값을 준다.

    일반적으로 top, bottom, left, right로 지정하지만 필요에 따라 방향을 조합할 수도 있다. ( bottom right )

    
div.first {
   background:-moz-linear-gradient(left, blue, green, white);
} 
div.second { 
   background:-moz-linear-gradient(bottom, blue, green, white);
}


4. 그라데이션 각도

  - 각도를 지정하여 그라디언트의 방향을 제어할 수 있다. 각도는 수평선과 그라데이션 선의 각도로 지정된다. 즉 0도로 만들면 왼쪽에서 오른쪽으로 향하는 그라데이션이 만들어지고, 90도로 하면 아래서 위로 향하는 그라데이션이 만들어진다.

    

div.second { 
   background:-moz-linear-gradient(100deg, blue, green, white);
}



5. 선형 그라데이션의 반복

  - repeating-linear-gradient() 함수를 사용하여 선형 그라데이션을 반복할 수 있다.

    

div.second { 
   background:-moz-repeating-linear-gradient(blue, green 20px);
}






2. 방사형 그라데이션 만들기

1. 방사형 그라데이션을 만들기 위해 적어도 2개의 색상지점을 선택해야 한다. 방사형 그라데이션은 중심에서 퍼져가는 형태이다.  radial-gradient 함수로 설정할 수 있다.

  - 1번째 값은 그라데이션 방향이다. top, bottom, left, center나 50% 덩의 값을 사용한다.

  - 2번째 값은 그라데이션의 크기와 모양을 결정한다. 기본값은 ellipse고, 추가로 circle을 선택할 수 있다.

  - 3번째 값은 색상 조합이다.

    

div {  
   background:-moz-radial-gradient(position, shape or size, color-stops);
}




2. 모양 설정 

  radial-gradient의 2번째 값을 넣지 않으면 기본값인 ellipse가 선택된다.

    

div {  
   background:-moz-radial-gradient(circle, green, yellow, blue);
}




3. 방사형 그라데이션 중심 설정

  - background-position 속성으로 배경 이미지의 위치를 지정했던 것과 같은 방법으로 방사형 그라데이션의 중심을 정할 수 있다. 배경의 수평 위치, 그리고 옵션으로 수직위치, 길이, 퍼센트, 다른 방향 조합등을 사용할 수 있다.

     
div.first {
   height: 150px;
   width: 200px;
   color: #FFF;
   background: -moz-radial-gradient(top left, green, yellow, blue);   
}
div.second {
   height: 150px;
   width: 200px;
   color: #FFF;
   background: -moz-radial-gradient(green 5%, yellow 15%, blue 60%); 
}



3. background-size 속성

1. 배경 이미지의 크기를 조절하기 위해 background-size 속성이 CSS에 추가되었다. 길이와 %단위를 사용할 수 있다.

  아래는 가로 100px 세로 100px의 배경이미지를 선택한 것이다.

     
div {
   height: 150px;
   width: 200px;
   border: 1px solid #000;
   background: url("css_logo.png") no-repeat 50% 50%;
   background-size: 100px 100px;
}


2. 배경 크기 조절을 위해 contain, cover 두가지 키워드를 사용할 수 있다. 키워드에 따라 이미지 크기가 비례적으로 늘어나거나 줄어든다. contain을 값으로 사용하면 요소 안에 배경 이미지가 포함된다.(배경 이미지 외에 공백이 포함될 수 있음)

cover를 사용하면 배경이 요소 안에 가득 찬다.(배경이 일부 잘릴 수 있음).

     

div.a {
   background: url("css_logo.png") no-repeat 50% 50%;
   background-size: contain;
}
div.b {
background: url("css_logo.png") no-repeat 50% 50%;
   background-size: cover;
}




4. background-clip 속성

 background-clip 속성은 배경의 그림 영역을 지정한다. background-clip 속성은 background-image 속성과 복합적으로 동작할 수 있다. 이 속성은 3가지 값을 갖는다.

  - border-box : 기본값으로 배경이 경계선 밖까지 그림영역을 지정한다.

  - padding-box : 패딩 밖까지 그림영역을 지정한다.

  - content-box : 컨텐츠 안까지 그림영역을 지정한다.

     
#first {
   border: 2px dotted black;
   padding: 20px;
   background: LightBlue;
   background-clip: padding-box;
}
#second {
   border: 2px dotted black;
   padding: 20px;
   background: LightBlue;
   background-clip: content-box;
}




5. 투명 경계선

 요소의 테두리를 투명하게 설정할 수 있다. 색상값을 rgba 함수로 사용한다. 그리고 background-clip 속성을 padding-box로 해야한다.

     

#first {
background-clip: padding-box;
   border: 20px solid rgba(0,0,0,0.3);
}





6. 멀티 배경

 멀티 배경 이미지는 CSS3에 추가된 속성이다. 멀티 배경 이미지는 background-image의 값을 ","로 연결한다. 첫번째 이미지가 가장 앞에 표시되고 마지막 이미지가 맨 뒤에 표시된다.

     
div {
  width: 400px;
  height: 300px;
  background-image: url(csslogo.png), url(csscode.jpg);
  background-position: right bottom, left top;
  background-repeat: no-repeat;
} 


멀티 백그라운드 속성을 축약해서 사용할 수 있다.

     

div {
  width: 400px;
  height: 300px;
  background: url(csslogo.png) right top no-repeat,
 url(csscode.jpg) let top no-repeat;
} 





7. opacity 속성

 어떤 요소든 opacity 속성으로 투명도를 조절할 수 있다. 0(완전 투명) ~ 1.0(완전 불투명)으로 설정한다.

 
#img1 {
   opacity: 1;
}
#img2 {
   opacity: 0.5;
}
#img3 {
   opacity: 0.25;
}

IE에서 투명도를 설정하기 위해서 filter.alpha(oaacity=50) 과 같은 속성을 추가해야 한다. 가능값은 0~100이다.

 
#img {
  opacity: 0.5;
  filter: alpha(opacity=50);
}




<연관게시글>


'CSS' 카테고리의 다른 글

8.CSS Filter  (0) 2019.01.29
7.CSS3 Animation  (0) 2019.01.29
5.CSS3 기본  (0) 2019.01.29
4.레이아웃  (0) 2019.01.29
3.Properties  (0) 2019.01.29

'CSS' Related Articles

티스토리툴바