[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - 이미지와 그라데이션 효과로 배경 꾸미기

Background

• background-color: 배경색 지정. 색상명, RGB, HSL, 16진수 모두 사용 가능.
• background-image: 배경 이미지 적용. 웹 브라우저에 가득 차도록 가로 세로로 계속 반복해서 보여줌. ex) url('image/bg1.jpg'); 
• background-repeat: 반복 여부 지정. ex) no-repeat, repeat-x, repeat-y, repeat;
• background-position: 이미지 위치 변경. ex) bottom, center...
• background-attachment: 고정시킬 때 자주 사용 ex) fixed
• background: 위에 4가지 속성을 묶어서 표현 가능. 속성 값의 순서는 상관없음.

  • background: url('image/bg1.jpg') no-repeat center fixed

• background-size: 배경 이미지를 넣을 요소와 배경 이미지 크기가 다를 경우 CSS를 통해 이미지를 늘리거나 줄일 수 있음. 기본 값은 auto.
  • 기본 값
    • auto: 기존 이미지 크기가 그대로 들어가고 나머지 부분은 잘림
  • 픽셀 지정 가능
    • 200px: 이미지의 너비가 200px이 되고 세로 값은 기존 이미지 비율에 맞게 조정됨.
  • 퍼센트 지정 가능
    • 80%: 요소의 너비의 80%만큼 이미지 너비를 가짐.
  • 키워드로 지정 가능
    • contain: 요소 안에 배경 이미지가 잘리지 않고 모두 노출되도록. 여백이 남음.
    • cover: 배경이미지가 잘리더라도 요소 전체를 모두 덮도록. 여백이 없음. 주로 contain보다는 cover를 사용.

 

그라데이션 효과

• 두 가지 이상의 색상이 자연스럽게 연결되어 표현되는 것
• 선형 그라데이션과 원형 그라데이션이 있음

 

선형 그라데이션

가로, 세로 또는 대각선 방향으로 색상이 변하는 것

 

• linear-gradient(): 선형 그러데이션을 만드는 구문
  • 방향 지정
    • to (끝나는) 방향
    • (끝나는) 각도
  • 색상 중지점: 색상의 개수나 색상의 위치를 원하는 대로 지정할 수 있음.

background:linear-gradient(to bottom, white, blue)
background:linear-gradient(45deg, white, blue)
background:linear-gradient(45deg, white 30%, skyblue 60%, blue)

 

 

원형 그라데이션

원형 형태로 색상이 바뀌어가는 효과

• radial-gradient()
  
  • 타원인지 정원인지 지정(기본 값은 타원형)
  • 시작할 위치를 지정(기본값은 센터): at
  • 크기: closest-side, closest-corner, farthest-side, farthest-corner

background: radial-gradient(white, yellow, red)
background: radial-gradient(circle at 20% 20%, white, yellow, red)

 

 

Reference

• 09-1 이미지와 그러데이션 효과로 배경 꾸미기
• 09-2 이미지와 그러데이션 효과로 배경 꾸미기