CSS (9) - 이미지와 그라데이션 효과로 배경 꾸미기

 

1. 배경색과 배경범위 지정하기

 

1.1 background-color 속성 : 배경색 지정 , 상속 안됨

1.2 background-clip 속성: 배경 적용범위 조절 

 

2. 배경 이미지 지정하기 

 

2.1 웹 요소에 배경 이미지 넣는 background-image

     

body{
	background-image: url("path");
}

2.2 배경 이미지 반복을 지정하는 background-repeat속성

 

repeat: 가로세로 반복 (기본값)

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

repeat-y : 높이에 가득 찰 때까지 세로로 반복

no-repeat: 한번만 표시하고 반복 안함 

 

2.3 배경 이미지 위치 조절하는 background-position 

 

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

수평위치 : left | center | right | <백분율> | <길이 값>

수직위치 : top | center | bottom | <백분율> | <길이값>

 

백분율은 : 왼쪽 모서리 기준 가로 세로 % 위치 

크기 : 가로 픽셀, 세로 픽셀

 

*보통 center,cneter 사용

 

2.4 배경 이미지 적용 범위 조절하는 background-origin

 

박스모델에 패딩이나 테두리가 있다면, 포함 할 건지 아닐건지 (content box,padding-box,border-box)

 

2.5 배경 이미지 고정하는 background-attachment속성

 

scroll or fixed -> 스크롤하면 같이 가는지 고정인지 설정 

 

2.6 background 속성 하나로 이미지 제어 

 

background : url() no-repeat center bottom fixed;

 

2.6 배경 이미지 크기를 조절하는 background-size

 

배경 채울 요소에 비해 이미지가 너무 작거나 크면, 이미지 크기 조절할 수 있다.

 

auto: 원래 배경 이미지 크기만큼 (기본값)

contain : 요소 안에 배경이미지가 다 들어오도록 확대

cover: 배경 이미지로 요소를 모두 덮도록 이미지 확대 축소 

크기: 이미지 높이 너비 지정  (하나만 주어지면 너비로 생각 높이는 자동)

백분율 : 백분율로 맞춰서 넣음 

 

3. 그러데이션 효과로 배경 꾸미기 

 

그라데이션 효과 사용하려면, 웹 브라우저 다양한 부분 고려해야함 

 

3.1 선형 그라데이션

 

- 선형 그라데이션은 색상이 수직 수평 대각선 방향으로 일정하게 변하는 것을 말한다.

linear-gradient(to <방향> 혹은 <각도>, <색상 중지점>, [<색상중지점>,])으로 줄 수 있음

 

방향: 끝 지점 기준으로 to 예약어와 함께 사용함 (최대 2개)

         수평방향과 수직방향 예약어 사용하면 된다. (그라데이션 위치나 각도 옵션 생략하면 to bottom으로 인식)

 

각도: 그라데이션이 끝나는 부분 의미 deg로 표시 top 0이고 시계방향 원을 생각

 

색상중지점: 2가지 이상의 선형 그라데이션을 만들려면, 색상이 바뀌는 부분 지정해줘야함 

                    색상 혹은 색상 + 중지점 위치 함께 지정 가능 

background: linear-gradint(to bottom, 색상, while 30%, 색상);
/*위부터 30% 위치가 색사 중지점*/

 

3.2 원형그라데이션

 

원형 그라데이션은 원 또는 타원의 중심부터 동심원을 그리며 바깥 방향으로 색상을 바꾼다.

원 중심과 크기 지정하고 그라데이션 모양 선택한다.

 

radial-gradient(<모양> <크기> at <위치>, <생상 중지점>, [<색상 중지점>,...])

 

모양: circle, ellipse 타원과 원 두개 있음 

크기: closest-side: 가장 가까운 측면

         closest-corner : 가장 가까운 꼭짓점

         farthest-side: 가장 먼 측면에 닿을 때 까지 

         farthest-corne: 가장 먼 꼭짓점 

 

위치: 속성값 키워드 left,center,right, top,center,bottom) 하나 선택 혹은 백분율 

색상 중지점 지정 가능