4. 배경

배경 스타일 속성

background-color

• HTML 요소의 배경 색을 지정합니다.

.backcolor {
  /* 키워드 값 */
  background-color: red;

  /* 16진수 값 */
  background-color: #bbff00;
  
  /* RGB 값 */
  background-color: rgb(255, 255, 128);
}

 

 

background-image

• HTML 요소에 배경 이미지를 한 개 또는 여러 개를 지정할 수 있습니다.

.backimage {
  background-image: url(https://source.unsplash.com/random);
}

 

 

background-repeat

• 배경 이미지의 반복 방법을 지정합니다. 가로축 및 세로축을 따라 반복할 수 있고, 아예 반복하지 않을 수도 있습니다.
• repeat - 가로, 세로 반복합니다.
• no-repeat - 반복하지 않습니다.
• repeat-x - 가로 반복입니다.
• repeat-y - 세로 반복입니다.

.backimage {
  background-repeat: no-repeat;
}

 

 

background-posiiton

• 배경 이미지의 초기 위치를 설정합니다.

.backimage {
	/* Keyword values */
	background-position: top;
	background-position: bottom;
	background-position: center;
	background-position: left;
	background-position: right;
	
	/* Percentage values */
	background-position: 25% 75%;
}

 

 

background-size

• 요소 배경 이미지의 크기를 설정합니다. 그대로 두거나, 늘리고 줄이거나, 공간에 맞출 수 있습니다.
• contain - 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정합니다.
• cover - 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정하며 빈 공간이 생기지 않도록 설정합니다.
• auto - 배경 이미지의 원본 크기를 유지합니다.

.backimage {
  background-size: cover;
}

 

 

background-attachment

• 배경 이미지를 뷰포트 내에서 고정할지 말지를 지정하는 속성입니다.
• scroll - 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. (기본값)
• fixed - 움직이지 않습니다.
• local - 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다.

.scroll {
  background-attachment: scroll;
}

.fixed {
  background-attachment: fixed;
}

.local {
  background-attachment: local;
}

 

 

overflow

• auto - 요소 밖으로 나온 컨텐츠에 스크롤을 자동으로 설정합니다.
• scroll - 스크롤을 생성합니다.
• hidden - 요소 밖으로 나온 컨텐츠를 숨깁니다.

.attachment {
  overflow: auto;
}

 

 

background

• background-image, background-repeat, background-position, background-attachment 속성을 한꺼번에 선언할 수 있습니다.

.attachment {
  background: url('images/bg.png') no-repeat top right fixed;
 }

 

 

그라데이션 속성

그라데이션은 두 가지 이상의 색상이 연결되면서 자연스럽게 보여주는 것을 말합니다. 그라데이션은 크게 선형 그라데이션(linear-gradient())과 원형 그라데이션(radial-gradient())이 있습니다.

 

linear-gradient()

• 선형 그라데이션으로 두 개 이상의 색상이 직선을 따라 점진적으로 변화합니다.
• to - 방향을 결정 할 수 있습니다.
• deg - 각도값을 지정할 수 있습니다.

radial-gradient()

• 원형 그라데이션으로 타원형 그라데이션을 만들 수 있습니다.

.gradient {  
  /* 선형 그라데이션 */
  background: linear-gradient(red, blue);
  background: linear-gradient(to top right, red, blue);
  background: linear-gradient(45deg, red, blue);
  background: linear-gradient(to left, red 30%, blue 50%, yellow 70%, green 100%);

  /* 원형 그라데이션 */
  background: radial-gradient(red, yellow, blue);
  background: radial-gradient(circle at 20% 20%, white 10%, yellow 20%, red 90%);

  width: 700px;
  height: 300px;
  border: 1px solid black;
}