CSS 기초 #4 (배경, 그라디언트)

배경 관련

 

배경 색상 (background-color): 요소의 배경 색상을 설정

div {
  background-color: lightblue;
}

 

배경 이미지 (background-image): 요소에 이미지를 배경으로 설정

div {
  background-image: url('background.jpg');
  background-size: cover; /* 이미지 크기 자동 조정 */
}

 

배경 반복 (background-repeat): 배경 이미지가 반복될지 여부를 설정

div {
  background-image: url('background.jpg');
  background-repeat: no-repeat; /* 배경 이미지 반복 안 함 */
}

 

배경 위치 (background-position): 배경 이미지의 위치를 설정

div {
  background-image: url('background.jpg');
  background-position: center center; /* 이미지 가운데 배치 */
}

 

배경 크기 (background-size): 배경 이미지의 크기를 설정

div {
  background-image: url('background.jpg');
  background-size: 100% 100%; /* 배경 이미지를 요소 크기에 맞게 늘림 */
}

 

 

 

그라디언트 관련

 

 

선형 그라디언트 (linear-gradient): 두 색상이 선형으로 변하는 그라디언트

div {
  background: linear-gradient(to right, red, yellow); /* 왼쪽에서 오른쪽으로 빨간색에서 노란색으로 */
}

 

방사형 그라디언트 (radial-gradient): 원형으로 색상이 변하는 그라디언트

div {
  background: radial-gradient(circle, red, yellow); /* 원형으로 빨간색에서 노란색으로 */
}

 

그라디언트의 색상과 위치: 그라디언트에서 색상과 위치를 더 구체적으로 조정 가능.

div {
  background: linear-gradient(to right, red 0%, yellow 100%);
}

 

다단계 그라디언트: 여러 색상을 순차적으로 나열하여 더 복잡한 그라디언트를 만들 수 있음

div {
  background: linear-gradient(to right, red, orange, yellow);
}

 

 

 

실습

 

 

See the Pen CSS bg by Cheolho Jang (@chiro-J) on CodePen.