배경

개념 이해하기

background-color는 바탕색, background-image는 이미지나 그라데이션을 지정합니다. background-size: cover는 영역을 덮고 contain은 이미지 전체가 보이게 합니다.

그라데이션의 두 색 정지점이 모두 55%에 있어 색이 서서히 섞이지 않고 대각선 한 줄에서 딱 끊깁니다. 135deg는 왼쪽 위에서 오른쪽 아래로 향하는 방향이라 앞쪽 55%는 transparent로 비어 아래의 짙은 background-color가 보이고, 오른쪽 아래만 밝은 초록으로 칠해집니다. 흰 배경의 .target 두 장은 그 위에 카드처럼 놓입니다.

background-image에는 쉼표로 여러 층을 쌓을 수 있고 먼저 쓴 이미지가 맨 위에 그려집니다. 사진 위에 반투명 그라데이션을 한 겹 덮어 그 위 글자의 대비를 높이는 방식이 흔하며, background-color는 층이 몇 개든 항상 맨 아래에 깔립니다.