CSS 배경, 배경 이미지, 그라데이션
*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.
또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.
background-repeat
값은 repeat(기본 값) repeat-x, repeat-y, no-repeat이 있다,
repeat > 가득 찰 때까지 가로와 세로로 반복
repeat-x > 화면 너비에 가득 찰 때까지 가로로 반복
repeat-y > 화면 높이에 가득 찰 때까지 세로로 반복
no-repeat > 한 번만 표시
background-position
<수평 위치> : left | center | right | <백분율> | <길이 값>
<수직 위치> : top | center | bottom | ......
형식으로 선택할 수 있다.
가장 많이 사용하는 방식은 키워드이며 정 중앙일 경우 background-position: center center; = background-position: center ; 로 한 번만 작성한다.
백분율의 경우 배경 이미지와 삽입 위치에 %를 일치시키는 것이다. 쉽게 말하자면 30% 40%라 지정하였을 때 삽입되는 이미지에 30% 40% 부분에 점을 찍고 들어가는 요소에 30% 40%부분에 점을 찍고 그 두 점을 겹쳐 놓는 방식이다.
길이 값은 px과 같은 단위로 이미지 왼쪽 상단 모서리의 위치를 지정해 주는 방식이다
background-size
배경에 크기를 조절하는 속성으로 auto(기본 값) | contain | cover | <크기> | <백분율>이 있다.
auto - 배경 이미지 크기만큼 표시
contain - 요소 안에 배경 이미지가 다 들어오도록 축소나 확대
// 크기가 딱 들어맞지 않으면 여백이 있다.
cover - 요소를 모두 덮도록 이미지를 축소나 확대
// 크기가 딱 들어맞지 않더라도 여백이 없다.
<크기> - 이미지 너비와 높이를 지정, 하나만 지정할 경우 너비로 인식하고 높잇값은 자동계산
<백분율> - 이미지가 들어갈 요소에 크기를 백불율로 지정하고 그 크기에 맞춰 축소나 확대
그러데이션 효과
그러데이션은 선형과 원형으로 나뉜다
선형 그러데이션
기본형 linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>,...]);
방향
to 예약어와 함께하며 최대 2개까지 사용이 가능하다. 사용 값으로는 top, left, right, bottom이 있고, 대각선을 나타내려면 to top right처럼 두 개를 사용하면 된다.
to 예약어 의미는 방향을 나타냄으로 to right라면 왼쪽에서 오른쪽으로 진행한다고 생각하면 된다. 기본값은 to bottom이다.
각도
진행 방향을 더 세밀하게 지정하는 방법은 각도이다. 12시 방향이 0도로 시작해 시계방향으로 커진다.
단위는 deg를 사용한다.
색상 중지점
그러데이션에서 바뀌는 색을 의미하며, 색상을 2개 이상 사용하여 만들기 위해서는 바뀌는 지점을 표시해 줘야한다. 예로 파란색으로 시작해 휜색을 거쳐 파란색으로 돌아오는 효과를 나타내면
background: linear-gradient(to bottom, blue, white 30%, blue) ; 이다.
원형 그러데이션
기본형 radial-gradient(<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>,...])
모양
값은 circle과 ellipse가 있다. 따로 지정하지 않을 경우 타원형(ellipse)로 인식한다.
크기
원형에 크기를 지정할 수 있다. 크기를 지정하는 방식은 원이 계속 커지면서 닿는 면이나 점을 기준으로 정해진다. 따라서 시작 지점과 속성값에 따라 달라진다.
closest-side - 원형 중심에서 가장 가까운 요소의 측면(선)에 닿을 때까지 그린다.
closest-corner - 원형 중심에서 가장 가까운 요소의 꼭짓점에 땋을 때까지 그린다.
farthest-side - 원형 중심에서 가장 먼 요소의 측면(선)에 닿을 때까지 그린다.
farthest-corner - 원형 중심에서 가장 먼 요소의 꼭짓점에 닿을 때까지 그린다.
위치
원형 중심에 위치를 지정할 수 있습니다. 지정값은 left와 같은 키워드 또는 30% 같은 <백분율>을 사용합니다. 가로와 세로값을 입력하여 그러데이션을 시작하는 위치를 지정합니다.
색상 중지점
선형 그러데이션과 동일하게 색상을 추가하고 지점을 지정하면 된다.
그러데이션으로 패턴 만들기
함수 앞에 repeat-을 추가하면 된다. ex ) repeat-linear-gradient
다만 반복하면 끝 색상과 다시 시작하는 색상 부분이 어색하게 느껴지기 때문에 색상에 끝나는 부분을 확실히 지정해 주는 것도 하나의 방법이다.
ex ) repeat-linear-gradient(yellow, red 20px);
repeat-linear-gradient(yellow, yellow 20px, red 20px, red 40px // 색을 명확하게