02-3⠀CSS 배경 / 그라데이션

 

< 배경 스타일 >

 

 

선택자 { 

background-color: 16진수 / rgb(a);

}

배경 색상을 지정

*이 속성은 하위 요소에게 상속되지 않음

 

 

선택자 {

background-clip: 속성값;

}

배경 범위를 지정

 

*속성값

border-box (기본값) : content padding border 범위를 배경으로 지정

padding-box : content padding 범위를 배경으로 지정

content-box : content 범위를 배경으로 지정

*background: 속성값 으로 간단히 나열 가능

 

 

선택자 {

background-image: url ( '이미지파일경로' );

}

배경이미지 삽입

*이미지 파일은 .jpg .gif .png 사용

*해당 요소보다 이미지가 작을 경우 가로세로로 반복되어 가득 채움

*background: 속성값 으로 간단히 나열 가능

 

 

선택자 {

background-repeat: 속성값;

}

배경이미지의 반복 방법을 지정

*속성값

repeat (기본값) : 브라우저 화면에 가득 찰 때까지 가로 세로 반복

repeat-x : 브라우저 화면 너비에 가득 찰 때까지 가로 반복

repeat-y : 브라우저 화면 높이에 가득 찰 때까지 세로 반복

no-repeat : 한번만 표시하고 반복하지 않음

*background: 속성값 으로 간단히 나열 가능

 

 

선택자 {

background-position: 수평위치 수직위치;

}

배경 이미지의 위치 조절

*속성값

수평위치 : left / center / right / 백분율 / 길이값

수직위치 : top / ceter / bottom / 백분율 / 길이값

*백분율과 길이값

길이값 : 왼쪽 상단 모서리 기준 가로px 세로px

백분율 : 해당 요소의 왼쪽 상단 모서리 기준 가로% 세로%

*background: 속성값 으로 간단히 나열 가능

 

 

선택자 {

backgroud-origin: 속성값;

}

배경 이미지를 삽입할 박스모델 적용 범위를 지정

*속성값

content-box (기본값) : content 영역에만 배경 이미지를 삽입

padding-box : content padding 까지의 영역에만 배경 이미지를 삽입

border-box : content padding border 까지의 영역에만 배경 이미지를 삽입

*background: 속성값 으로 간단히 나열 가능

 

 

선택자 {

background-attachment: 속성값;

}

배경 이미지를 고정시킬 때 사용

*속성값

scroll (기본값) : 브라우저 화면을 스크롤 시, 배경 이미지도 스크롤 됨

fixed : 브라우저 화면을 스크롤 시, 배경 이미지는 스크롤되지 않고 해당 위치에 고정됨

*background: 속성값 으로 간단히 나열 가능

 

 

선택자 {

background-size: 속성값;

}

배경 이미지의 크기를 조절

*속성값

auto (기본값) : 해당 이미지의 원래 크기로 삽입됨

contain : 해당 이미지가 요소 안에 꽉 차도록 가로세로가 확대 축소됨

cover : 해당 이미지가 요소를 전부 덮도록 가로 세로가 확대 축소됨

크기 : 너비값과 높이값을 지정 (너비값만 표시할 시, 높이는 원본 이미지 비율로 자동계산)

백분율 : 해당 이미지가 삽입될 요소 기준 (%)

 

 

 

 

< 그라데이션 스타일 >

*background 속성으로 분류

 

 

 

 

선택자 {

background: liner-gradient(to방향/각도, 시작색상, 색상중지점, 끝색상, ...)

}

배경에 선형 그라데이션을 삽입

*to방향 (예약어) : 끝나는 지점을 기준으로 표시

top-left/right 또는 bottom-left/right

*각도 : 끝나는 지점을 기준으로 표시

0deg 90deg 180deg 270deg

https://csscreator.com/content/linear-gradient

 

*색상 : 시작색상, 끝색상 으로 표시

*색상중지점 : 시작값과 끝값 사이에 표시하고, 해당 색상이 바뀌는 지점을 지정할 수 있음

바뀌는 지점은 그라데이션이 시작하는 지점을 기준으로 백분율로 표시

background: liner-gradient (0deg, red, white 20%, red;) 일 시,

0deg 에서 red 로 시작하고, 시작지점으로부터 20% 지점부터 white 로 바뀐 후 red 로 부드럽게 전환됨

 

https://www.codingfactory.net/10838

 

 

선택자 {

background: radial-gradient(모양 크기 at위치, 시작색상, 색상중지점, 끝색상, ...;

}

배경에 원형 그라데이션을 삽입

*모양

circle : 원형으로 표현

ellipse (기본값) : 타원으로 표현

*크기

closet-side : 가로세로 중, 가장 가까운 측면이 닿을 때까지 커짐

closet-corner : 네 꼭지점 중, 가장 가까운 꼭지점이 닿을 때까지 커짐

farthest-side : 가로세로 중, 가장 먼 측면이 닿을때까지 커짐

farthest-corner (기본값) : 네 꼭지점 중, 가장 먼 꼭지점이 닿을때까지 커짐

*위치 (at과 함께 표시- 시작지점을 지정)

키워드 : left center right / top center bottom

백분율 : 해당 원형 그라데이션이 들어갈 요소의 왼쪽 위 모서리 기준으로 가로% 세로% 표시

 

*background: radial-gradient(circle at 20% 20&, white, blue;) 일 시,

아래와 같은 원형 그라데이션이 삽입됨

 

 

 

선택자 {

background:repeating-liner/radial-gradient(모양/to방향각도 시작색상 시작지점, 끝색상 끝지점% ...;)

}

그라데이션을 이용해 패턴을 만들 때 사용

*repeating-liner-gradient : 선형 그라데이션 패턴

*repeating-radial-gradient : 원형 그라데이션 패턴

*모양 (원형 그라데이션일 시) or to방향/각도 (선형 그라데이션일 시)

*색상

그라데이션이 시작할때의 색상과 그 지점, 이 색상이 끝나는 지점

색상중지점의 색상과 그 지점, 이 색상이 끝나는 지점

명확히 해야 패턴이 만들어짐

어우 ㅅㅂ 이거는 글로 절대 이해 안감 만들어봐야암 썻다지웠다 식은땀 쥰내나네;;;;