• 회원가입
  • 로그인
  • 구글아이디로 로그인

[gradient] CSS - linear-gradient() 함수 ★ - 선형 그레이디언트 배경이미지 (= 선형 그라디언트 = 선형 그래디언트 = linear-gradient함수 = 리니어그라디언트 함수)

목차
  1. linear-gradient() 예제 - 선형 그레이디언트 배경색
  2. linear-gradient() 정의
  3. linear-gradient() 구문
  4. linear-gradient() 예제 - direction 매개변수

 

linear-gradient() 예제 - 선형 그레이디언트 배경이미지 

[예제1] - direction 매개변수 사용 X 경우

 

<style>

div {

  height: 200px;

  background-image: linear-gradient(red, yellow, blue);

}

</style>

<div>홈짱닷컴 Homzzang.com</div>

 

결과보기


[예제2] - direction 매개변수 사용 O 경우

 

body {

  background: linear-gradient(to right, green 0%, yellow 50%, red 100%); 

  background-color: yellow;

}

 

결과보기

 

linear-gradient() 정의

 

선형 그레이디언트 (= 서서히 한쪽에서 다른 한쪽으로 변화하는 색번짐 효과)

 


※ 외래어표기법 상, '그레이디언트'가 맞음. 

 

1.

background / background-image 속성에서만 사용 가능.

[주의] background-color 속성에선 사용 X (예제 보기

 

2.
최소 2개의 지점을 정의해야 하며, 방향도 지정 가능.

 

3.

CSS3

4.
IE10 이상 최신 주요 브라우저 지원

구 버전 브라우저 경우 접두어 필요.

https://homzzang.com/b/css-126

 

 

linear-gradient() 구문

 

selector {background-image: linear-gradient(direction, color-stop1, color-stop2, ...);}

 


[매개변수]


direction 

그레이디언트 효과와 함께 시작점과 방향 (또는 각도) 정의

 

color-stop1, color-stop2, ... 

필수. 색 변환 지점의 색깔. 최소 2개 이상 필요.

선택. 색상 값 다음에 0 ~ 100 %로 나타낸 위치 표시.


 

linear-gradient() 예제 - direction 매개변수

 

오른쪽 방항 

background-image: linear-gradient(to right, red , blue);

 

우하향 대각선 방향

background-image: linear-gradient(to bottom right, red , blue);

 

0도 방향
background-image: linear-gradient(0deg, red, blue);

90도 방향
background-image: linear-gradient(90deg, red, blue);

 

180도 방향

background-image: linear-gradient(180deg, red, blue);

 

-90도 방향

background-image: linear-gradient(-90deg, red, blue);


여러 색깔

background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);


투명도 적용
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

반복
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

https://homzzang.com/b/css-273

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012