[CSS] Background

Background-color

• 요소의 배경 색상을 지정하기 위해 사용한다.
• 속성 값 : [색상]
• 형식

  [태그] or [.class] or [#id]{
          background-color : [색상];
  }

Background-image

• 요소의 배경이미지를 지정하기위해 사용한다.
• 일반 이미지(img태그)와의 차이점은 선택이 불가능하고 우측 마우스 클릭으로 저장이 안되며, 자리를 차지 하지않는다는 점 등이 있다.
• 기본값 : none
• 속성값
  • url함수 호출
  • linear-gradient함수 호출 : 선형 그라데이션 이미지를 지정한다.
  • radial-gradient함수 호출 : 방사형 그라데이션 이미지를 지정한다.
• 형식

  [태그] or [.class] or [#id]{
          background-image : url("[Local Path or URL]");
  }

Background-position

• 요소가 가지는 배경 이미지의 위치를 설정하기 위해 사용한다.
• 기본값 : top left
• 속성구조
  • [x] : 배경 이미지의 위치를 x로 지정한다.
  • [x][y] : 배경 이미지의 위치를 x, y로 지정한다.
    • 대칭 되는 속성 값을 함께 사용하지 않는다. 가령, top과 bottom 을, right와 left를 동시에 사용하지 않는다.
• 속성값
  • top
  • right
  • bottom
  • left
  • center
• 형식

  [태그] or [.class] or [#id]{
          /*앞 이전에 background-image 선언 후*/
          background-position : [속성값];
  }

Background-repeat

• 요소가 가지는 배경 이미지에 대한 반복 설정을 위해 사용한다.
• 기본값 : repeat
• 속성구조
  • [x] :가로/세로축 모두 x를 할당한다.
  • [x][y] : 거로축에대해 x를, 세로축에 대해 y를 할당한다.
    • 사용 불가 : repeat-x, repeat-y
• 속성값
  • no-repeat : 가로/세로축 모두 반복하지 않는다.
  • repeat : 가로/세로축 모두 반복한다.
  • repeat-x : 가로축만 반복한다.
  • repeat-y : 가로축만 반복한다.
  • space : 요소의 끝에 맞춘다.
• 형식

  [태그] or [.class] or [#id]{
          /*앞 이전에 background-image 선언 후*/
          background-repeat : [속성값];
  }

Background-size

• 배경 이미지의 크기를 지정하기 위해 사용한다.
• 속성구조
  • [x] : 전역적이거나 가로 크기에 x를 할당한다. 이때 x가 크기일 경우 가로 크기가 지정되며 세로 크기는 원래 이미지가 가진 비율대로 조정된다.
  • [x][y] : 가로크기에 x를, 세로크기에 y를 할당한다.
    • 사용 가능한 속성값
      • [크기], auto 등
• 기본값 : auto
• 속성값
  • [크기]
  • auto : 원래 배경 이미지가 가지는 크기로 지정하거나 변경된 가로 크기에 맞는 비율을 가지는 세로 크기를 의미한다.
  • cover : 배경이미지를 가지는 요소의 배경이 노출되지 않을 수준에서 가장 작은 크기.
  • contain : 배경이미지를 가지는 요소 내에서 배경 이미지를 자르지 않고 표현할 수 있는 가장 큰 크기.
• 형식

  [태그] or [.class] or [#id]{
          /*앞 이전에 background-image 선언 후*/
          background-size : [속성값];
  }